improvements to map info card, as well as small changes to the permission changers in the topic and synapse cards

app/assets/javascripts/lib/bip.js

@@ -332,12 +332,18 @@ BestInPlaceEditor.forms = {
 
       this.element.html(output);
       this.setHtmlAttributes();
-      this.element.find("input[type='text']")[0].select();
+      // START METAMAPS CODE
+      //this.element.find("input[type='text']")[0].select();
+      this.element.find("input[type='text']")[0].focus();
+      // END METAMAPS CODE
       this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
       if (this.cancelButton) {
         this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
       }
       this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
+      // START METAMAPS CODE
+      this.element.find("input[type='text']").bind('keydown', {editor: this}, BestInPlaceEditor.forms.input.keydownHandler);  
+      // END METAMAPS CODE
       this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
       this.blurTimer = null;
       this.userClicked = false;
@@ -385,6 +391,11 @@ BestInPlaceEditor.forms = {
       if (event.keyCode == 27) {
         event.data.editor.abort();
       }
+      // START METAMAPS CODE
+      else if (event.keyCode == 13 && !event.shiftKey) {
+        event.data.editor.update();
+      }
+      // END METAMAPS CODE
     }
   },
 
@@ -427,6 +438,16 @@ BestInPlaceEditor.forms = {
       event.data.editor.update();
     },
 
+    // START METAMAPS CODE
+    keydownHandler : function(event) {
+      if (event.keyCode == 13 && !event.shiftKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+    },
+    // END METAMAPS CODE
+
     keyupHandler : function(event) {
       if (event.keyCode == 27) {
         event.data.editor.abort();

app/assets/javascripts/src/Metamaps.js

@@ -808,7 +808,7 @@ Metamaps.TopicCard = {
         if (authorized) {
             $('.showcard .metacodeTitle').click(openMetacodeSelect);
             $('.showcard').click(hideMetacodeSelect);
-            $('.metacodeSelect > ul li').click(function (event){
+            $('.metacodeSelect > ul > li').click(function (event){
                 event.stopPropagation();
             });
             $('.metacodeSelect li li').click(metacodeLiClick);
@@ -845,10 +845,19 @@ Metamaps.TopicCard = {
             });
         }
 
-        // ability to change permission
+
-        var selectingPermission = false;
+        var permissionLiClick = function (event) {
-        if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+            selectingPermission = false;
-            $('.showcard .yourTopic .mapPerm').click(function () {
+            var permission = $(this).attr('class');
+            topic.save({
+                permission: permission
+            });
+            $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
+            $('.showcard .permissionSelect').remove();
+            event.stopPropagation();
+        };
+
+        var openPermissionSelect = function (event) {
             if (!selectingPermission) {
                 selectingPermission = true;
                 $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
@@ -859,22 +868,21 @@ Metamaps.TopicCard = {
                 } else if ($(this).hasClass('pr')) {
                     $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
                 }
-                    $('.permissionSelect li').click(function (event) {
+                $('.showcard .permissionSelect li').click(permissionLiClick);
-                        selectingPermission = false;
-                        var permission = $(this).attr('class');
-                        topic.save({
-                            permission: permission
-                        });
-                        $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
-                        $('.permissionSelect').remove();
                 event.stopPropagation();
-                    });
-                } else {
-                    selectingPermission = false;
-                    $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-                    $('.permissionSelect').remove();
             }
-            });
+        };
+
+        var hidePermissionSelect = function () {
+            selectingPermission = false;
+            $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('.showcard .permissionSelect').remove();
+        };
+        // ability to change permission
+        var selectingPermission = false;
+        if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+            $('.showcard .yourTopic .mapPerm').click(openPermissionSelect);
+            $('.showcard').click(hidePermissionSelect);
         }
     },
     populateShowCard: function (topic) {
@@ -1129,8 +1137,18 @@ Metamaps.SynapseCard = {
 
         // ability to change permission
         var selectingPermission = false;
-        if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+        var permissionLiClick = function (event) {
-            $('#edit_synapse.yourEdge .mapPerm').click(function () {
+            selectingPermission = false;
+            var permission = $(this).attr('class');
+            synapse.save({
+                permission: permission
+            });
+            $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
+            $('#edit_synapse .permissionSelect').remove();
+            event.stopPropagation();
+        };
+
+        var openPermissionSelect = function (event) {
             if (!selectingPermission) {
                 selectingPermission = true;
                 $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
@@ -1141,22 +1159,20 @@ Metamaps.SynapseCard = {
                 } else if ($(this).hasClass('pr')) {
                     $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
                 }
-                    $('#edit_synapse .permissionSelect li').click(function (event) {
+                $('#edit_synapse .permissionSelect li').click(permissionLiClick);
-                        selectingPermission = false;
-                        var permission = $(this).attr('class');
-                        synapse.save({
-                            permission: permission,
-                        });
-                        $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
-                        $('#edit_synapse .permissionSelect').remove();
                 event.stopPropagation();
-                    });
-                } else {
-                    selectingPermission = false;
-                    $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-                    $('#edit_synapse .permissionSelect').remove();
             }
-            });
+        };
+
+        var hidePermissionSelect = function () {
+            selectingPermission = false;
+            $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('#edit_synapse .permissionSelect').remove();
+        };
+
+        if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+            $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect);
+            $('#edit_synapse').click(hidePermissionSelect);
         }
     }, //add_perms_form
 
@@ -2887,7 +2903,7 @@ Metamaps.Listeners = {
 
         $(window).resize(function () {
             if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height());
-            if (Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.hide();
+            if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition();
         });
     }
 }; // end Metamaps.Listeners
@@ -3643,7 +3659,7 @@ Metamaps.Map.InfoBox = {
         obj["map_creator_tip"] = isCreator ? self.changePermissionText : "";
         obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : "";
         obj["contributor_list"] = self.createContributorList();
-        obj["user_name"] = isCreator ? "you" : map.get("user_name");
+        obj["user_name"] = isCreator ? "You" : map.get("user_name");
 
         var classes = isCreator ? "yourMap" : "";
         classes += canEdit ? " canEdit" : "";
@@ -3656,7 +3672,7 @@ Metamaps.Map.InfoBox = {
     attachEventListeners: function () {
         var self = Metamaps.Map.InfoBox;
 
-        $('.mapInfoBox .best_in_place').best_in_place();
+        $('.mapInfoBox.canEdit .best_in_place').best_in_place();
 
         // because anyone who can edit the map can change the map title
         $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
@@ -3666,7 +3682,7 @@ Metamaps.Map.InfoBox = {
         });
 
         $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
-
+        $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect);
     },
     createContributorList: function () {
         var self = Metamaps.Map.InfoBox;
@@ -3689,7 +3705,7 @@ Metamaps.Map.InfoBox = {
 
         $('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted());
     },
-    onPermissionClick: function () {
+    onPermissionClick: function (event) {
         var self = Metamaps.Map.InfoBox;
 
         if (!self.selectingPermission) {
@@ -3703,13 +3719,17 @@ Metamaps.Map.InfoBox = {
                 $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
             }
             $('.mapPermission .permissionSelect li').click(self.selectPermission);
-        } else {
+            event.stopPropagation();
-            self.selectingPermission = false;
-            $(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-            $('.mapPermission .permissionSelect').remove();
         }
     },
-    selectPermission: function () {
+    hidePermissionSelect: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        self.selectingPermission = false;
+        $('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+        $('.mapPermission .permissionSelect').remove();
+    },
+    selectPermission: function (event) {
         var self = Metamaps.Map.InfoBox;
 
         self.selectingPermission = false;

app/assets/stylesheets/application.css

@@ -1415,7 +1415,19 @@ float: left;
     font-size: 18px;
     line-height: 20px;
     height: 20px;
-    padding: 26px 0;
+    padding: 26px 16px;
+}
+.mapInfoName input {
+    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;
 }
 .mapInfoStat {
     background-color: #E0E0E0;
@@ -1539,15 +1551,33 @@ float: left;
     font-family: helvetica, sans-serif;
     color: #E0E0E0;
     margin: 8px;
+    padding-right: 16px;
     height: 106px;
     font-size: 14px;
     line-height: 16px;
     overflow-y: auto;
+    overflow-x: hidden;
+    font-style: italic;
+    text-align: left;
+}
+.mapInfoBox .mapInfoDesc textarea {
+    font-family: helvetica, sans-serif;
+    text-align: left;
+    color: #E0E0E0;
+    font-size: 14px;
+    line-height: 16px;
+    font-style: italic;
+    border: 0;
+    outline: 0;
+    background: none;
+    resize: none;
+    width: 340px;
 }
 .mapInfoBox .mapInfoMeta {
     height: 35px;
     border-top: 1px solid #F5F5F5;
-    padding: 6px 0 7px;
+    padding: 6px 0 7px 16px;
+    text-align: left;
 }
 .mapInfoBox .mapInfoMeta p {
     margin: 4px 0;
@@ -1555,6 +1585,14 @@ float: left;
     color: #F5F5F5;
 }
 
+.mapCreatedAt span {
+    color: #4fc059;
+}
+
+.mapEditedAt span {
+    color: #dab539;
+}
+
 /* lightboxes */
 
 #lightbox_overlay {

app/assets/stylesheets/base.css

@@ -70,7 +70,7 @@
   cursor: text;
 }
 
-.best_in_place_name textarea, .best_in_place_name input {
+.showcard .best_in_place_name textarea, .showcard .best_in_place_name input {
   font-family: 'din-regular', sans-serif;
   color: #424242;
   font-size: 18px;
@@ -120,6 +120,7 @@ outline: none;
 font-size: 12px;
 line-height: 15px;
 background: none;
+resize: none;
 }
 
 .CardOnGraph .desc h3 {

app/assets/stylesheets/uservoice.css

@@ -13,4 +13,10 @@ div.uv-icon.uv-bottom-left {
 	top:25%;
 	width:25px;
 	z-index:100000;	
+	opacity: 1;
+	
+}
+
+div.uv-icon.uv-bottom-left:hover {
+	background-position: 0 -110px;	
 }

app/models/map.rb

@@ -96,7 +96,9 @@ class Map < ActiveRecord::Base
   
   # returns false if user not allowed to 'edit' Topic, Synapse, or Map
   def authorize_to_edit(user)  
-  	if (self.permission == "private" && self.user != user)
+  	if !user
+      return false
+    elsif (self.permission == "private" && self.user != user)
   		return false
   	elsif (self.permission == "public" && self.user != user)
   		return false
@@ -132,7 +134,7 @@ class Map < ActiveRecord::Base
     end
 
     data.content_type = "image/png"
-    data.original_filename = File.basename(self.id.to_s + '-' + 'screenshot.png')
+    data.original_filename = File.basename('map-' + self.id.to_s + '-screenshot.png')
 
     self.screenshot = data
     self.save

app/views/layouts/_templates.html.erb

@@ -29,8 +29,8 @@
   </div>
   
   <div class="mapInfoMeta">
-    <p class="mapCreatedAt">Created by {{user_name}} on {{created_at}}</p>
+    <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
-    <p class="mapEditedAt">Last edited {{updated_at}}</p>
+    <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
   </div>
   
   <div class="mapInfoDelete">

app/views/maps/_mapinfobox.html (copy).erb

@@ -1,52 +0,0 @@
-<%#
-  # Partial rendering form for a new topic on a map
-  # This code is called when viewing a metamap in show.html.erb in the views/maps folder
-  #%>
-<div class="mapInfoBox permission <%= @map.user == user ? " yourMap" : "" %><%= @map.authorize_to_edit(user) ? " canEdit" : "" %>">
-  
-  <div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
-  
-  <div class="mapInfoStat">
-    <div class="infoStatIcon mapContributors hoverForTip">
-      <%= @map.contributors.count %>
-      <% contributorList = ''
-         @map.contributors.each_with_index do |c, index|
-            comma = (index+1) == @map.contributors.count ? '' : ', '
-            contributorList += c.name + comma
-         end 
-         if @map.contributors.count == 0
-           contributorList = 'No one has added anything yet.'
-         end %>
-      <div class="tip"><%= contributorList %></div>
-    </div>
-    <div class="infoStatIcon mapTopics">
-      <%= @map.topics.count %>
-    </div>
-    <div class="infoStatIcon mapSynapses">
-      <%= @map.synapses.count %>
-    </div>
-    <div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
-      <% if @map.user == user %>
-        <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>
-      <% end %>
-    </div>
-    <div class="clearfloat"></div>
-  </div>
-  
-  <% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated?  && @map.desc != "" && @map.desc != nil )%>
-  <div class="mapInfoDesc">
-    <%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>
-  </div>
-  <% end %>
-  
-  <div class="mapInfoMeta">
-    <p>Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
-    <p>Last edited <%= @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 %>
-    <% end %>
-  </div>
-</div>

app/views/maps/_mapinfobox.html.erb

@@ -34,15 +34,15 @@
     <div class="clearfloat"></div>
   </div>
   
-  <% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated?  && @map.desc != "" && @map.desc != nil )%>
   <div class="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' %>
-  </div>
     <% end %>
+  </div>
   
   <div class="mapInfoMeta">
-    <p class="mapCreatedAt">Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
+    <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">Last edited <%= @map.updated_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">

public/famous/main.js

@@ -165,6 +165,9 @@ define(function(require, exports, module) {
             }
         );
     };
+    f.maps.reposition = function () {
+        f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
+    };
     var mapsScroll = new Scrollview();
     mapsScroll._scroller.on('edgeHit', function(data){
         if (data.position > 0 &&