styling for map info box mostly complete

app/assets/javascripts/src/Metamaps.js

@@ -821,15 +821,15 @@ Metamaps.TopicCard = {
 
                 $el.attr('maxlength', '140');
 
-                $('.showcard .title').append('<div class="titleCounter"></div>');
+                $('.showcard .title').append('<div class="nameCounter forTopic"></div>');
 
                 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
@@ -3247,6 +3247,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
         });
@@ -3383,6 +3385,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 = [];
 
@@ -3451,6 +3455,9 @@ Metamaps.Synapse = {
  *
  */
 Metamaps.Map = {
+    events: {
+        editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
+    },
     init: function () {
         var self = Metamaps.Map;
 
@@ -3467,6 +3474,8 @@ Metamaps.Map = {
 
         self.InfoBox.init();
         self.CheatSheet.init();
+
+        $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper);
     },
     launch: function (id) {
         var bb = Metamaps.Backbone;
@@ -3552,6 +3561,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);
+        }
     }
 };
 
@@ -3598,9 +3612,8 @@ Metamaps.Map.InfoBox = {
     changing: false,
     selectingPermission: false,
     changePermissionText: "<div class='tip'>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.</div>",
-    nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="input">{{name}}</span>',
-    descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description." data-type="textarea">{{desc}}</span>',
-    deleteHTML: "<a href='/maps/{{id}}' class='delete' data-bypass='true' data-confirm='Delete this map (nodes and synapses will remain)?' data-method='delete' rel='nofollow'>Delete</a>",
+    nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
+    descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
     init: function () {
         var self = Metamaps.Map.InfoBox;
 
@@ -3657,7 +3670,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");
 
@@ -3675,6 +3690,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('<div class="nameCounter forMap"></div>');
+
+            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);
@@ -3695,15 +3728,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('<div class="tip">' + self.createContributorList() + '</div>');
+        $('.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('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted());
     },
     onPermissionClick: function (event) {
         var self = Metamaps.Map.InfoBox;

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 {

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;

app/views/layouts/_templates.html.erb

@@ -6,11 +6,13 @@
 <div class="templates">
     
     <script type="text/template" id="mapInfoBoxTemplate">
-  <div class="mapInfoName">{{{name}}}</div>
+  <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
   
   <div class="mapInfoStat">
     <div class="infoStatIcon mapContributors hoverForTip">
-      {{contributor_count}}
+      <img id="mapContribs" class="{{contributors_class}}"
+        width="25" height="25" src="{{contributor_image}}" />
+      <span>{{contributor_count}}</span>
       <div class="tip">{{contributor_list}}</div>
     </div>
     <div class="infoStatIcon mapTopics">
@@ -24,17 +26,22 @@
     </div>
     <div class="clearfloat"></div>
   </div>
-  <div class="mapInfoDesc">
+  <div class="mapInfoDesc" id="mapInfoDesc">
     {{{desc}}}
   </div>
   
   <div class="mapInfoMeta">
     <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
     <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
-  </div>
-  
-  <div class="mapInfoDelete">
-    {{{delete}}}
+    <div class="mapInfoButtonsWrapper">
+      <div class="mapInfoDelete">
+        <span>Delete</span>
+      </div>
+      <div class="mapInfoShare">
+        <div class="mapInfoShareIcon"></div>
+        <span>Share</span>
+      </div>
+    </div>
   </div>
     </script>
     

app/views/maps/_mapinfobox.html.erb

@@ -5,11 +5,20 @@
 <div class="mapInfoBox mapElement mapElementHidden permission <%= @map && @map.user == user ? " yourMap" : "" %><%= @map && @map.authorize_to_edit(user) ? " canEdit" : "" %>">
   
   <% if @map %>
-  <div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
+  <div class="mapInfoName" id="mapInfoName"><%= best_in_place @map, :name, :type => :textarea, :activator => "#mapInfoName", :classes => 'best_in_place_name' %></div>
   
   <div class="mapInfoStat">
     <div class="infoStatIcon mapContributors hoverForTip">
-      <%= @map.contributors.count %>
+      <% if @map.contributors.count == 0 %>
+        <img id="mapContribs" width="25" height="25" src="/assets/user.png" />
+      <% elsif @map.contributors.count == 1 %>
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" />
+      <% elsif @map.contributors.count == 2 %>
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple mTwo" />
+      <% elsif @map.contributors.count > 2 %>
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple" />
+      <% end %>
+      <span><%= @map.contributors.count %></span>
       <% contributorList = ''
          @map.contributors.each_with_index do |c, index|
             comma = (index+1) == @map.contributors.count ? '' : ', '
@@ -34,22 +43,24 @@
     <div class="clearfloat"></div>
   </div>
   
-  <div class="mapInfoDesc">
+  <div class="mapInfoDesc" id="mapInfoDesc">
     <% 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 %>
   </div>
   
   <div class="mapInfoMeta">
     <p class="mapCreatedAt"><span>Created by:</span> <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
     <p class="mapEditedAt"><span>Last edited:</span> <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
-  </div>
-  
-  <div class="mapInfoDelete">
-    <% 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 %>
+    <div class="mapInfoButtonsWrapper">
+      <div class="mapInfoDelete">
+        <span>Delete</span>
+      </div>
+      <div class="mapInfoShare">
+        <div class="mapInfoShareIcon"></div>
+        <span>Share</span>
+      </div>
+    </div>
   </div>
   <% end %>
 </div>