From aaf2e4c52151273bbbe8be5443ac18716c1910d6 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 22 Sep 2014 23:42:26 -0400
Subject: [PATCH] right click styling

---
 app/assets/javascripts/src/Metamaps.JIT.js |  35 +--
 app/assets/javascripts/src/Metamaps.js     |  19 +-
 app/assets/stylesheets/application.css     | 270 ++++++++++++---------
 app/helpers/synapses_helper.rb             |   1 +
 app/views/layouts/_templates.html.erb      |  15 +-
 5 files changed, 191 insertions(+), 149 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 7cd25ef8..babfc80d 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -1140,23 +1140,23 @@ Metamaps.JIT = {
         // add the proper options to the menu
         var menustring = '<ul>';
 
-        if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete">Delete</li>';
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove">Remove from map</li>';
-        menustring += '<li class="rc-hide">Hide until refresh</li>';
+        if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete"><div class="rc-icon"></div>Delete</li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove"><div class="rc-icon"></div>Remove from map</li>';
+        menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh</li>';
 
-        if (!Metamaps.Active.Map) menustring += '<li class="rc-center">Center this topic</li>';
-        menustring += '<li class="rc-popout">Open in new tab</li>';
+        if (!Metamaps.Active.Map) menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic</li>';
+        menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>';
         if (Metamaps.Active.Mapper) {
-            var options = '<ul><li class="changeP toCommons">commons</li> \
-                         <li class="changeP toPublic">public</li> \
-                         <li class="changeP toPrivate">private</li> \
+            var options = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
+                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
+                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
                      </ul>';
 
-            menustring += '<li class="rc-permission">Change permissions' + options + '</li>';
+            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + options + '<div class="expandLi"></div></li>';
 
             var metacodeOptions = $('#metacodeOptions').html();
 
-            menustring += '<li class="rc-metacode">Change metacode' + metacodeOptions + '</li>';
+            menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode' + metacodeOptions + '<div class="expandLi"></div></li>';
         }
 
         menustring += '</ul>';
@@ -1288,18 +1288,19 @@ Metamaps.JIT = {
         // add the proper options to the menu
         var menustring = '<ul>';
 
-        if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete">Delete</li>';
+        if (Metamaps.Active.Mapper) menustring += '<li class="rc-delete"><div class="rc-icon"></div>Delete</li>';
         if (Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) {
-            menustring += '<li class="rc-remove">Remove from map</li>';
+            menustring += '<li class="rc-remove"><div class="rc-icon"></div>Remove from map</li>';
         }
-        menustring += '<li class="rc-hide">Hide until refresh</li>';
+        menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh</li>';
+
         if (Metamaps.Active.Mapper) {
-            var permOptions = '<ul><li class="changeP toCommons">commons</li> \
-                         <li class="changeP toPublic">public</li> \
-                         <li class="changeP toPrivate">private</li> \
+            var permOptions = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
+                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
+                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
                      </ul>';
 
-            menustring += '<li class="rc-permission">Change permissions' + permOptions + '</li>';
+            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + permOptions + '<div class="expandLi"></div></li>';
         }
 
         menustring += '</ul>';
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 84700063..7455f046 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -492,10 +492,7 @@ Metamaps.Create = {
     },
     newTopic: {
         init: function () {
-            $('#new_topic').bind('contextmenu', function (e) {
-                return false;
-            });
-
+            
             $('#topic_name').keyup(function () {
                 Metamaps.Create.newTopic.name = $(this).val();
             });
@@ -554,11 +551,6 @@ Metamaps.Create = {
         init: function () {
             var self = Metamaps.Create.newSynapse;
 
-            // keep the right click menu from opening
-            $('#new_synapse').bind('contextmenu', function (e) {
-                return false;
-            });
-
             $('#synapse_desc').keyup(function () {
                 Metamaps.Create.newSynapse.description = $(this).val();
             });
@@ -567,7 +559,7 @@ Metamaps.Create = {
             $('#synapse_desc').typeahead([
                 {
                     name: 'synapse_autocomplete',
-                    template: "<div>{{label}}</div>",
+                    template: "<div class='genericSynapseDesc'>{{label}}</div>",
                     remote: {
                         url: '/search/synapses?term=%QUERY'
                     },
@@ -2900,7 +2892,7 @@ Metamaps.Topic = {
         });
         Metamaps.Mappings.add(mapping);
 
-        self.renderTopic(mapping, topic, false);
+        self.renderTopic(mapping, topic, true);
     }
 }; // end Metamaps.Topic
 
@@ -3025,8 +3017,6 @@ Metamaps.Synapse = {
             node1,
             node2;
 
-        Metamaps.Create.newSynapse.hide();
-
         var synapse = self.get(id);
 
         var mapping = new Metamaps.Backbone.Mapping({
@@ -3037,8 +3027,9 @@ Metamaps.Synapse = {
 
         node1 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic1id);
         node2 = Metamaps.Visualize.mGraph.graph.getNode(Metamaps.Create.newSynapse.topic2id);
+        Metamaps.Create.newSynapse.hide();
 
-        self.renderSynapse(mapping, synapse, node1, node2, false);
+        self.renderSynapse(mapping, synapse, node1, node2, true);
     }
 }; // end Metamaps.Synapse
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 711d0b8f..23fbacf7 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -318,6 +318,9 @@ input[type="submit"]:active {
     color: #424242;
     font-family: 'din-medium', helvetica, sans-serif;
 }
+.new_synapse .tt-hint {
+    color: #BDBDBD;
+}
 label,
 select,
 input,
@@ -819,57 +822,67 @@ h3.realtimeBoxTitle {
 
 .rightclickmenu {
     position: absolute;
-    background: white;
+    width: 300px;
+    background: #FFFFFF;
     z-index: 20;
     border-radius: 2px;
     color: black;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
 }
-.rightclickmenu ul {
-    padding: 2px;
+.rightclickmenu > ul {
+    
 }
-.rightclickmenu ul li {
+.rightclickmenu li {
     list-style: none;
-    padding: 3px 10px 3px 30px;
-    font-family: arial, sans-serif;
-    font-size: 17px;
-    line-height: 17px;
-    background-repeat: no-repeat;
-    background-size: 20px 20px;
-    background-position: 5px 2px;
+    padding: 6px 10px 6px 32px;
+    font-family: helvetica, sans-serif;
+    font-size: 12px;
+    line-height: 12px;
+    position: relative;
 }
-.rightclickmenu ul li:nth-child(odd) {
-    background-color: #FFF;
-}
-.rightclickmenu ul li:nth-child(even) {
-    background-color: #EEE;
-}
-.rightclickmenu ul li:hover {
-    background-color: #BBB;
-    background-position: 7px 2px;
+.rightclickmenu li:hover {
+    background-color: #E0E0E0;
     cursor: pointer;
 }
-.rightclickmenu .rc-delete {
-    background-image: url(MMCCicon_delete_black.png);
+.rightclickmenu > ul > li .rc-icon {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    background-image: url(context_sprite.png);
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 24px;
 }
-.rightclickmenu .rc-remove {
-    background-image: url(MMCCicon_remove_from_map_black.png);
+.rightclickmenu .rc-delete .rc-icon {
+    background-position: 0 -48px;
 }
-.rightclickmenu .rc-hide {
-    background-image: url(MMCCicon_hide.png);
+.rightclickmenu .rc-remove .rc-icon {
+    background-position: 0 -24px;
 }
-.rightclickmenu .rc-center {
-    background-image: url(MMCCicon_center.png);
+.rightclickmenu .rc-hide .rc-icon {
+    background-position: 0 0;
 }
-.rightclickmenu .rc-popout {
-    background-image: url(MMCCicon_pop-out_black.png);
+.rightclickmenu .rc-center .rc-icon {
+    
 }
-.rightclickmenu .rc-permission {
-    background-image: url(MMCCicon_edit_permission_black.png);
-    position: relative;
+.rightclickmenu .rc-popout .rc-icon {
+    background-position: 0 -72px;
 }
-.rightclickmenu .rc-metacode {
-    background-image: url(blank.png);
-    position: relative;
+.rightclickmenu .rc-permission .rc-icon {
+    background-position: 0 -96px;
+}
+.rightclickmenu .rc-metacode .rc-icon {
+    background-position: 0 -120px;
+}
+.rightclickmenu .expandLi {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    background-image: url(arrowright_sprite.png);
+    background-repeat: no-repeat;
+    background-position: 0 -32px;
 }
 .rc-metacode li img {
 float: left;
@@ -883,22 +896,81 @@ float: left;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
     border-top-right-radius: 2px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
 }
-.rightclickmenu .rc-permission:hover ul, .rightclickmenu .rc-metacode:hover ul {
+.rightclickmenu .rc-permission:hover > ul, .rightclickmenu .rc-metacode:hover > ul {
     display: block;
 }
 .rightclickmenu p {
     padding: 7px;
 }
+.rightclickmenu li.changeP {
+    
+}
+.rightclickmenu li.changeP .rc-perm-icon {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    background-image: url(permissions32_sprite.png);
+    background-size: 72px 48px;
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 24px;
+}
+.rightclickmenu li.toCommons .rc-perm-icon {
+    background-position: 0 0;
+}
+.rightclickmenu li.toPublic .rc-perm-icon {
+    background-position: -48px 0;
+}
+.rightclickmenu li.toPrivate .rc-perm-icon {
+    background-position: -24px 0;
+}
+.rightclickmenu .rc-metacode > ul > li {
+    padding: 6px 10px 6px 8px;
+    width: 100px;
+}
+.rightclickmenu .rc-metacode ul ul {
+    display: none;
+    max-height: 270px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.rightclickmenu .rc-metacode li:hover ul {
+    display: block;
+}
+.rightclickmenu .rc-metacode ul ul li {
+    padding: 4px 10px 4px 8px;
+    width: 120px;
+}
+.rightclickmenu .expandMetacodeSet {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 16px;
+    height: 16px;
+    background-image: url(arrowright_sprite.png);
+    background-repeat: no-repeat;
+    background-position: 0 -32px;
+}
+.rightclickmenu .rc-metacode .mSelectName {
+    padding: 6px 0 0 32px;
+    display: block;
+}
+
+
 /* end right click menu */
 
-/* topic autocomplete */
+/* topic and synapse autocomplete */
 
 #new_topic .tt-suggestion.tt-is-under-cursor,
-#new_topic .tt-suggestion.tt-is-under-mouse-cursor {
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor,
+#new_synapse .tt-suggestion.tt-is-under-cursor,
+#new_synapse .tt-suggestion.tt-is-under-mouse-cursor {
     background: #E0E0E0;
 }
-#new_topic .tt-suggestion {
+#new_topic .tt-suggestion, 
+#new_synapse .tt-suggestion {
     background: #F5F5F5;
     width: 270px;
     position: relative;
@@ -915,7 +987,15 @@ float: left;
     font-size: 14px;
     padding: 9px 0 9px 4px;
 }
-#new_topic .expandTopicMetadata {
+#new_synapse .synapseDesc, 
+#new_synapse .genericSynapseDesc {
+    width: 190px;
+    line-height: 14px;
+    font-size: 14px;
+    padding: 9px 0 9px 8px;
+}
+#new_topic .expandTopicMetadata,
+#new_synapse .expandSynapseMetadata {
     display:none;
     width: 16px;
     height: 16px;
@@ -927,14 +1007,19 @@ float: left;
     background-position: 0 -32px;
 }
 #new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
-#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata,
+#new_synapse .tt-suggestion.tt-is-under-cursor .expandSynapseMetadata,
+#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .expandSynapseMetadata {
     display: block;
 }
 #new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
-#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata,
+#new_synapse .tt-suggestion.tt-is-under-cursor .synapseMetadata,
+#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .synapseMetadata {
     display: block;
 }
-#new_topic .topicMetadata {
+#new_topic .topicMetadata, 
+#new_synapse .synapseMetadata {
     position: absolute;
     display: none;
     top: -18px;
@@ -945,7 +1030,8 @@ float: left;
     font-family: 'din-regular', helvetica, sans-serif;
     font-size: 14px;
 }
-#new_topic .topicPermission {
+#new_topic .topicPermission,
+#new_synapse .synapsePermission {
     width: 32px;
     height: 32px;
     background-repeat: no-repeat;
@@ -954,16 +1040,20 @@ float: left;
     bottom: 4px;
     right: 4px;
 }
-#new_topic .topicPermission.commons {
+#new_topic .topicPermission.commons,
+#new_synapse .synapsePermission.commons {
     background-position: 0 0;
 }
-#new_topic .topicPermission.public {
+#new_topic .topicPermission.public,
+#new_synapse .synapsePermission.public {
     background-position: -64px 0;
 }
-#new_topic .topicPermission.private {
+#new_topic .topicPermission.private,
+#new_synapse .synapsePermission.private {
     background-position: -32px 0;
 }
-#new_topic .topicNumMaps {
+#new_topic .topicNumMaps,
+#new_synapse .synapseNumMaps {
     height: 14px;
     padding: 1px 0 1px 32px;
     background-image: url(metamap16.png);
@@ -981,79 +1071,21 @@ float: left;
     position: absolute;
     bottom: 10px;
 }
-#new_topic .topicOriginatorIcon {
+#new_topic .topicOriginatorIcon,
+#new_synapse .synapseOriginatorIcon {
     position: absolute;
     top: 8px;
     right: 8px;
 }
-#new_topic .topicOriginatorIcon img {
+#new_topic .topicOriginatorIcon img,
+#new_synapse .synapseOriginatorIcon img {
     border-radius: 12px;
 }
-#new_topic .topicOriginatorIcon:hover .tip {
-    display: block;
-}
-#new_topic .tip {
-    display: none;
-    position: absolute;
-    background: white;
-    width: auto;
-    top: 0;
-    left: 23px;
-    color: black;
-    white-space: nowrap;
-    border-radius: 4px;
-    font-size: 15px !important;
-    line-height: 15px;
-    padding: 2px 5px 2px;
-    z-index: 100;
-}
-/* synapse autocomplete */
-
-#new_synapse .tt-dropdown-menu {
-    width: 212px;
-    background: #2A343C;
-}
-#new_synapse .tt-dropdown-menu h3 {
-    font-family: 'vinyl', helvetica, sans-serif;
-    text-transform: uppercase;
-    font-style: italic;
-    font-size: 14pxpx;
-    line-height: 16px;
-    margin: 3px;
-}
-#new_synapse .tt-suggestion.tt-is-under-cursor,
-#new_synapse .tt-suggestion.tt-is-under-mouse-cursor {
-    background: #0E161D;
-}
-#new_synapse .tt-suggestion {
-    padding: 5px;
-}
-#new_synapse .autocompleteSection {
-    float: left;
-}
-#new_synapse .synapseDesc {
-    width: 162px;
-    line-height: 22px;
-}
-#new_synapse .synapsePermission {
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 16px 16px;
-}
-#new_synapse .synapseOriginatorIcon {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 16px 16px;
-    background-image: url(MMCCicon_mapper.png);
-}
+#new_topic .topicOriginatorIcon:hover .tip,
 #new_synapse .synapseOriginatorIcon:hover .tip {
     display: block;
 }
+#new_topic .tip,
 #new_synapse .tip {
     display: none;
     position: absolute;
@@ -1069,6 +1101,18 @@ float: left;
     padding: 2px 5px 2px;
     z-index: 100;
 }
+
+#new_synapse .tt-dropdown-menu {
+    background: #F5F5F5;
+}
+#new_synapse .tt-dropdown-menu h3 {
+    font-family: 'vinyl', helvetica, sans-serif;
+    text-transform: uppercase;
+    font-style: italic;
+    font-size: 14pxpx;
+    line-height: 16px;
+    margin: 3px;
+}
 #new_synapse .tt-suggestion .resultnoresult .synapsePermission,
 #new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
     display: none;
diff --git a/app/helpers/synapses_helper.rb b/app/helpers/synapses_helper.rb
index 0bec84cb..350cb0fc 100644
--- a/app/helpers/synapses_helper.rb
+++ b/app/helpers/synapses_helper.rb
@@ -25,6 +25,7 @@ module SynapsesHelper
       synapse['permission'] = s.permission
       synapse['mapCount'] = s.maps.count
       synapse['originator'] = s.user.name
+      synapse['originatorImage'] = s.user.image
       synapse['rtype'] = "synapse"
       
       temp.push synapse
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index a8f10590..4a796e18 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -158,11 +158,16 @@
     <script type="text/template" id="synapseAutocompleteTemplate">
       <div class="result{{rtype}}">
       <p class="autocompleteSection synapseDesc">{{label}}</p>
-      <div class="autocompleteSection synapsePermission {{permission}}"></div>
-      <div class="autocompleteSection synapseOriginatorIcon hoverForTip">
-        <span class="tip synapseOriginator">{{originator}}</span>
-      </div>
-      <div class="clearfloat"></div>
+      <div class="expandSynapseMetadata"></div>
+        <div class="synapseMetadata">
+          <div class="synapseNumMaps">{{mapCount}}</div>
+          <div class="synapseOriginatorIcon hoverForTip">
+              <img width="24" height="24" src="{{originatorImage}}" />
+              <span class="tip synapseOriginator">{{originator}}</span>
+          </div>
+          <div class="synapsePermission {{permission}}"></div>
+        </div>
+        <div class="clearfloat"></div>
       </div>
     </script>