diff --git a/app/assets/images/delete_mapinfo.png b/app/assets/images/delete_mapinfo.png new file mode 100644 index 00000000..e6316c2e Binary files /dev/null and b/app/assets/images/delete_mapinfo.png differ diff --git a/app/assets/images/share_sprite_mapinfo.png b/app/assets/images/share_sprite_mapinfo.png new file mode 100644 index 00000000..ebe96f41 Binary files /dev/null and b/app/assets/images/share_sprite_mapinfo.png differ diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index d28965ad..7989fed2 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -820,15 +820,15 @@ Metamaps.TopicCard = { $el.attr('maxlength', '140'); - $('.showcard .title').append('
'); + $('.showcard .title').append('
'); var callback = function (data) { - $('.titleCounter').html(data.all + '/140'); + $('.nameCounter.forTopic').html(data.all + '/140'); }; Countable.live(el, callback); }); bipName.bind("best_in_place:deactivate", function () { - $('.titleCounter').remove(); + $('.nameCounter.forTopic').remove(); }); //bind best_in_place ajax callbacks @@ -3246,6 +3246,8 @@ Metamaps.Topic = { createTopicLocally: function () { var self = Metamaps.Topic; + $(document).trigger(Metamaps.Map.events.editedByActiveMapper); + var metacode = Metamaps.Metacodes.findWhere({ name: Metamaps.Create.newTopic.metacode }); @@ -3382,6 +3384,8 @@ Metamaps.Synapse = { synapse, mapping; + $(document).trigger(Metamaps.Map.events.editedByActiveMapper); + //for each node in this array we will create a synapse going to the position2 node. var synapsesToCreate = []; @@ -3450,6 +3454,9 @@ Metamaps.Synapse = { * */ Metamaps.Map = { + events: { + editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper" + }, init: function () { var self = Metamaps.Map; @@ -3466,6 +3473,8 @@ Metamaps.Map = { self.InfoBox.init(); self.CheatSheet.init(); + + $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper); }, launch: function (id) { var bb = Metamaps.Backbone; @@ -3551,6 +3560,11 @@ Metamaps.Map = { Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data; Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data; + }, + editedByActiveMapper: function () { + if (Metamaps.Active.Mapper) { + Metamaps.Mappers.add(Metamaps.Active.Mapper); + } } }; @@ -3597,9 +3611,8 @@ Metamaps.Map.InfoBox = { changing: false, selectingPermission: false, changePermissionText: "
As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.
", - nameHTML: '{{name}}', - descHTML: '{{desc}}', - deleteHTML: "Delete", + nameHTML: '{{name}}', + descHTML: '{{desc}}', init: function () { var self = Metamaps.Map.InfoBox; @@ -3656,7 +3669,9 @@ Metamaps.Map.InfoBox = { obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name"); obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc"); obj["map_creator_tip"] = isCreator ? self.changePermissionText : ""; - obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : ""; + obj["contributors_class"] = Metamaps.Mappers.length > 1 ? "multiple" : ""; + obj["contributors_class"] += Metamaps.Mappers.length === 2 ? " mTwo" : ""; + obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "/assets/user.png"; obj["contributor_list"] = self.createContributorList(); obj["user_name"] = isCreator ? "You" : map.get("user_name"); @@ -3674,6 +3689,24 @@ Metamaps.Map.InfoBox = { $('.mapInfoBox.canEdit .best_in_place').best_in_place(); // because anyone who can edit the map can change the map title + var bipName = $('.mapInfoBox .best_in_place_name'); + bipName.unbind("best_in_place:activate").bind("best_in_place:activate", function () { + var $el = bipName.find('textarea'); + var el = $el[0]; + + $el.attr('maxlength', '140'); + + $('.mapInfoName').append('
'); + + var callback = function (data) { + $('.nameCounter.forMap').html(data.all + '/140'); + }; + Countable.live(el, callback); + }); + bipName.unbind("best_in_place:deactivate").bind("best_in_place:deactivate", function () { + $('.nameCounter.forMap').remove(); + }); + $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () { var name = $(this).html(); $('.mapName').html(name); @@ -3694,15 +3727,22 @@ Metamaps.Map.InfoBox = { var self = Metamaps.Map.InfoBox; var mapper = Metamaps.Active.Mapper; - if (mapper && Metamaps.Mappers.get(mapper.id) === undefined) { - Metamaps.Mappers.add(mapper); + var contributors_class = ""; + if (Metamaps.Mappers.length === 2) contributors_class = "multiple mTwo"; + else if (Metamaps.Mappers.length > 2) contributors_class = "multiple"; + + var contributors_image = "/assets/user.png"; + if (Metamaps.Mappers.length > 0) { + // get the first contributor and use their image + contributors_image = Metamaps.Mappers.models[0].get("image"); } - $('.mapContributors').text(Metamaps.Mappers.length) - .append('
' + self.createContributorList() + '
'); + $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class); + $('.mapContributors span').text(Metamaps.Mappers.length) + $('.mapContributors .tip').text(self.createContributorList()); $('.mapTopics').text(Metamaps.Topics.length); $('.mapSynapses').text(Metamaps.Synapses.length); - $('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted()); + $('.mapEditedAt').html('Last edited: ' + Metamaps.Util.nowDateFormatted()); }, onPermissionClick: function (event) { var self = Metamaps.Map.InfoBox; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 97a4867e..61b08cc1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1405,7 +1405,7 @@ float: left; color: #F5F5F5; border-radius: 2px; width: 360px; - height: 300px; + min-height: 300px; padding: 0; font-style: normal; text-align: center; @@ -1414,21 +1414,29 @@ float: left; .mapInfoName { font-size: 18px; line-height: 20px; - height: 20px; - padding: 26px 16px; + padding: 13px 16px; + margin: 13px 0; + position: relative; } -.mapInfoName input { +.mapInfoName textarea { width: 328px; font-size: 18px; line-height: 20px; - height: 20px; color: #F5F5F5; font-family: 'din-medium', helvetica, sans-serif; border: 0; outline: none; background: none; text-align: center; + resize: none; } +.mapInfoBox.canEdit #mapInfoName:hover { + background-image: url(edit.png); + background-repeat: no-repeat; + background-position: bottom right; + cursor: text; +} + .mapInfoStat { background-color: #E0E0E0; font-size: 18px; @@ -1451,10 +1459,34 @@ float: left; text-align: left; } .mapContributors { - background-image: url(MMCCicon_mapper.png); - background-position: 13px center; position: relative; + height: 30px; + margin: 9px 0px 9px 56px; + padding: 0; + width: 64px; + cursor: pointer; } +#mapContribs { + float: left; + border: 2px solid #424242; + background-color: #fff; + width: 25px; + height: 25px; + border-radius: 15px; +} +#mapContribs.multiple.mTwo { + box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242; +} +#mapContribs.multiple { + box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242; +} +.mapContributors span { + height: 20px; + padding-top: 5px; + padding-left: 8px; + float: left; +} + .infoStatIcon .tip { display: none; position: absolute; @@ -1478,7 +1510,7 @@ float: left; right: 32px; } .mapInfoBox .hoverForTip:hover .tip { - display: block; + display: none; } .mapTopics { background-image: url(topic32.png); @@ -1552,7 +1584,7 @@ float: left; color: #E0E0E0; margin: 8px; padding-right: 16px; - height: 106px; + height: 115px; font-size: 14px; line-height: 16px; overflow-y: auto; @@ -1573,14 +1605,22 @@ float: left; resize: none; width: 340px; } +.mapInfoBox.canEdit .mapInfoDesc:hover { + background-image: url(edit.png); + background-position: top right; + background-repeat: no-repeat; + cursor: text; +} + .mapInfoBox .mapInfoMeta { height: 35px; border-top: 1px solid #F5F5F5; padding: 6px 0 7px 16px; text-align: left; + position: relative; } .mapInfoBox .mapInfoMeta p { - margin: 4px 0; + margin: 2px 0; font-size: 12px; color: #F5F5F5; } @@ -1593,6 +1633,43 @@ float: left; color: #dab539; } +.mapInfoButtonsWrapper { + position: absolute; + top: 0; + right: 4px; +} +.mapInfoButtonsWrapper > div { + float: right; + width: 48px; + height: 48px; + font-size: 12px; + text-align: center; + position: relative; + cursor: pointer; +} +.mapInfoShareIcon { + width: 24px; + height: 24px; + background-image: url(share_sprite_mapinfo.png); + background-repeat: no-repeat; + margin: 4px auto 0; + background-position: 0 -24px; +} +.mapInfoShare:hover .mapInfoShareIcon { + background-position: 0 0; +} +.mapInfoDelete { + background-image: url(delete_mapinfo.png); + background-repeat: no-repeat; + background-position: center 8px; +} +.mapInfoButtonsWrapper span { + position: absolute; + width: 100%; + display: block; + bottom: 8px; +} + /* lightboxes */ #lightbox_overlay { diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index e2fe0ed3..2089fe80 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -1,3 +1,23 @@ +.nameCounter { + position: absolute; + bottom: 1px; + right: 2px; + font-size: 11px; + font-family: helvetica; + color: #727272; + line-height: 11px; +} + +.nameCounter.forMap { + color: #FFF; + bottom: -11px; +} + +.nameCounter.forTopic { + +} + + #center-container { position:relative; height:100%; @@ -85,15 +105,6 @@ text-align:center; resize: none; } -.titleCounter { - position: absolute; - bottom: 1px; - right: 2px; - font-size: 11px; - font-family: helvetica; - color: #727272; - line-height: 11px; -} .CardOnGraph .scroll { display:block; @@ -765,6 +776,7 @@ font-family: 'din-regular', helvetica, sans-serif; .mapCard .mapScreenshot img { width: 188px; height: 126px; + border-radius: 2px; } .mapCard .scroll { diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index 08130955..e826516c 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -6,11 +6,13 @@
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb index ffbae4c0..a9536774 100644 --- a/app/views/maps/_mapinfobox.html.erb +++ b/app/views/maps/_mapinfobox.html.erb @@ -5,11 +5,20 @@
<%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>"> <% if @map %> -
<%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %>
+
<%= best_in_place @map, :name, :type => :textarea, :activator => "#mapInfoName", :classes => 'best_in_place_name' %>
- <%= @map.contributors.count %> + <% if @map.contributors.count == 0 %> + + <% elsif @map.contributors.count == 1 %> + + <% elsif @map.contributors.count == 2 %> + + <% elsif @map.contributors.count > 2 %> + + <% end %> + <%= @map.contributors.count %> <% contributorList = '' @map.contributors.each_with_index do |c, index| comma = (index+1) == @map.contributors.count ? '' : ', ' @@ -34,22 +43,24 @@
-
+
<% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%> - <%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %> + <%= best_in_place @map, :desc, :activator => "#mapInfoDesc", :type => :textarea, :nil => "Click to add description...", :classes => 'best_in_place_desc' %> <% end %>

Created by: <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %>

Last edited: <%= @map.updated_at.strftime("%m/%d/%Y") %>

-
- -
- <% if @map.user == user %> - <%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete, - :data => { :bypass => 'true'} %> - <% end %> +
+
+ Delete +
+
+
+ Share +
+
<% end %>
\ No newline at end of file