added tooltips on search results, added icon for change metacode set, did further styling of open topic card

app/assets/javascripts/Jit/onCreateLabelHandler.js

@@ -26,16 +26,17 @@ function generateShowcardHTML() {
                 data-type="input">$_name_$</span>                             \
         </span>                                                               \
         <div class="links">                                                   \
-           <img alt="$_metacode_$"                                                 \
+           <div                                                               \
-           class="linkItem icon"                                                       \
+           class="linkItem icon"                                              \
-           title="click and drag to move card"                                         \
+           title="click and drag to move card">                               \
-           height="40"                                                        \
+              <div class="metacodeTitle">$_metacode_$</div>                   \
-           width="40"                                                         \
+              <div class="metacodeImage"                                      \
-           src="$_imgsrc_$" />                                                \
+                   style="background-image:url($_imgsrc_$);"></div>           \
-           <div class="linkItem contributor"></div>                                    \
+           </div>                                                             \
-           <div class="linkItem mapCount">$_map_count_$</div>                                    \
+           <div class="linkItem contributor"></div>                           \
-           <div class="linkItem synapseCount">$_synapse_count_$</div>                                    \
+           <div class="linkItem mapCount">$_map_count_$</div>                 \
-           <div class="linkItem mapPerm $_mk_permission_$"></div>                      \
+           <div class="linkItem synapseCount">$_synapse_count_$</div>         \
+           <div class="linkItem mapPerm $_mk_permission_$"></div>             \
            <a href="/topics/$_id_$" class="linkItem topicPopout" title="Open Topic in New Tab" target="_blank"></a>\
            <div class="clearfloat"></div>                                     \
         </div>                                                                \
@@ -78,7 +79,7 @@ function replaceVariables(html, node) {
     }
   } else {
     go_link = '<a href="' + node.getData("link") + '" ' +
-              '   class="go-link" target="_blank">[go]</a>';
+              '   class="go-link" target="_blank"></a>';
     a_tag = '';
     close_a_tag = '';
   }
@@ -212,6 +213,17 @@ function populateShowCard(node) {
       showCard.appendChild(perm);
     }
 
+    
+  // attach the listener that shows the metacode title when you hover over the image
+  $('.showcard .metacodeImage').hover(function(){
+    $('.showcard .icon').css('z-index','3');
+    $('.showcard .metacodeTitle').show();
+  },
+  function() {
+    $('.showcard .metacodeTitle').hide();
+    $('.showcard .icon').css('z-index','1');
+  });
+  
   //bind best_in_place ajax callbacks
   $(showCard).find('.best_in_place_metacode').bind("ajax:success", function() {
     var metacode = $(this).html();

app/assets/javascripts/application.js

@@ -150,6 +150,8 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
       });
         
       // initialize the search box autocomplete results
+      var mapheader = userid ? '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>';
+      var topicheader = userid ? '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>' : '<h3 class="search-header">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>';
       $('.sidebarSearchField').typeahead([
              {
                 name: 'topics',
@@ -175,7 +177,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
                     }
                 },
                 engine: Hogan,
-                header: '<h3 class="search-header">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div>'
+                header: topicheader
               },
               {
                 name: 'maps',
@@ -200,7 +202,7 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
                     }
                 },
                 engine: Hogan,
-                header: '<h3 class="search-header">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div>'
+                header: mapheader
               },
               {
                 name: 'mappers',
@@ -262,10 +264,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
               var s = $('.tt-dataset-mappers .tt-suggestions');
               console.log(s.css('height'));
               if (s.css('height') == '0px') {
-                $('.tt-dataset-mappers .tt-suggestions').css('height','auto');
+                $('.tt-dataset-mappers .tt-suggestions').css({'height':'auto','overflow':'visible'});
                 $(this).removeClass('maximizeResults').addClass('minimizeResults');
               } else {
-                $('.tt-dataset-mappers .tt-suggestions').css('height','0');
+                $('.tt-dataset-mappers .tt-suggestions').css({'height':'0','overflow':'hidden'});
                 $(this).removeClass('minimizeResults').addClass('maximizeResults');
               }
             });
@@ -273,10 +275,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
               var s = $('.tt-dataset-topics .tt-suggestions');
               console.log(s.css('height'));
               if (s.css('height') == '0px') {
-                s.css({'height':'auto','border-top':'none'});
+                s.css({'height':'auto','border-top':'none','overflow':'visible'});
                 $(this).removeClass('maximizeResults').addClass('minimizeResults');
               } else {
-                s.css({'height':'0','border-top':'1px solid #222'});
+                s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'});
                 $(this).removeClass('minimizeResults').addClass('maximizeResults');
               }
             });
@@ -284,10 +286,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
               var s = $('.tt-dataset-maps .tt-suggestions');
               console.log(s.css('height'));
               if (s.css('height') == '0px') {
-                s.css({'height':'auto','border-top':'none'});
+                s.css({'height':'auto','border-top':'none','overflow':'visible'});
                 $(this).removeClass('maximizeResults').addClass('minimizeResults');
               } else {
-                s.css({'height':'0','border-top':'1px solid #222'});
+                s.css({'height':'0','border-top':'1px solid #222','overflow':'hidden'});
                 $(this).removeClass('minimizeResults').addClass('maximizeResults');
               }
             });

app/assets/stylesheets/application.css

@@ -652,6 +652,9 @@ li.wandSaveLayout {
 li.wandForkMap {
   background-image: url('MMCCicon_save_new_map.png');
 }
+li.wandChangeMetacodes {
+  background-image: url('MMCCicon_metacode_set.png');
+}
 
 /* end wand */
 
@@ -868,7 +871,7 @@ border: 1px solid black;
 
 .sidebarSearch .tt-suggestions {
   font-family:'LatoLight', helvetica, sans-serif;
-  overflow:hidden;
+  overflow:visible;
 }
 
 
@@ -891,6 +894,33 @@ border: 1px solid black;
   height:36px;
   margin-right:5px;
 }
+.sidebarSearch .topicMetacode {
+  float:left;
+  margin-right:5px;
+  max-width:70px;
+}
+.sidebarSearch .tt-dataset-topics .topicIcon {
+  width:36px;
+  height:36px;
+}
+.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon {
+  margin:0 auto;
+  padding-left:2px
+}
+.sidebarSearch .tt-dataset-topics .metacodeTip {
+  display:none;
+}
+.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip {
+  display: block;
+  font-family: 'vinyl';
+  text-transform: uppercase;
+  font-style: italic;
+  font-size: 13px;
+  margin: 0 5px 0 2px;
+  text-align: center;
+}
+
+
 .sidebarSearch .tt-dataset-mappers .tt-suggestion .icon {
   width:28px;
   height:28px;
@@ -898,7 +928,7 @@ border: 1px solid black;
 }
 
 .sidebarSearch .resultText {
-  width: 275px;
+  width: 240px;
   display: block;
   float: left;
 }
@@ -924,7 +954,7 @@ border: 1px solid black;
 
 .sidebarSearch div.autoOptions {
   width: 122px;
-  float: left;
+  float: right;
   position:relative;
   display:none;
 }
@@ -1006,6 +1036,33 @@ line-height: 20px;
   top: 7px;
   left: 13px;
 }
+.sidebarSearch .tip {
+ position: absolute;
+ background: white;
+ width: auto;
+ top: 0;
+ right: 23px;
+ color: black;
+ white-space: nowrap;
+ border-radius: 4px;
+ font-size:15px !important;
+ font-family:'LatoLight';
+ line-height:17px;
+ padding: 3px 5px 2px;
+ border: 1px solid black;
+ z-index:100;
+}
+.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip  {
+ right:40px;
+}
+.sidebarSearch .hoverForTip:hover .tip {
+  display:block;
+}
+.sidebarSearch .mapContributorsIcon .mapContributors {
+  right:40px;
+  white-space:normal;
+  width:200px;
+}
 
 .sidebarSearch div.mapContributorsIcon {
 height: 20px;

app/assets/stylesheets/base.css

@@ -147,12 +147,14 @@ font-family: 'LatoLight';
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 27px 27px;
+  z-index: 2;
+position: relative;
 }
 
 .CardOnGraph .icon {
   position:absolute;
-  left:-20px;
+  width:100%;
-  cursor:move;
+  z-index:1;
 }
 .linkItem.contributor {
   background-image: url(MMCCicon_mapper_black.png);
@@ -190,6 +192,32 @@ padding-left: 24px;
   background-image: url(MMCCicon_pop-out_black.png);
 }
 
+.CardOnGraph .metacodeTitle {
+  font-style: italic;
+  font-family: 'vinyl';
+  text-transform: uppercase;
+  position: absolute;
+  line-height: 36px;
+  font-size: 20px;
+  display: none;
+  width: 90%;
+  padding-left: 10%;
+  padding-top: 4px;
+  background-color: crimson;
+}
+.CardOnGraph .metacodeImage {
+  cursor:move;
+  width:50px;
+  height:50px;
+  position:absolute;
+  left:-25px;
+  top:-5px;
+  background-size:50px 50px;
+  background-position:0 0;
+  background-repeat:no-repeat;
+}
+
+
 .CardOnGraph .link {
   position:absolute;
   bottom:5px;
@@ -200,6 +228,8 @@ padding-left: 24px;
   padding-top:8px;
   width:100%;
   height:25px;
+  background: url(MMCCicon_link.png) no-repeat 6px 6px;
+  background-size:24px 24px;
 }
 
 .CardOnGraph .best_in_place_link { 
@@ -209,7 +239,7 @@ padding-left: 24px;
   text-overflow: ellipsis;
   display: block;
   float: left;
-  padding-left: 5px; 
+  padding-left: 40px; 
   padding-top:2px;
   font-size: 16px;
   line-height: 16px;
@@ -229,8 +259,13 @@ font-family: 'LatoLight';
 }
 
 .CardOnGraph .go-link {
-  float: right;
+  position: absolute;
-  margin: 3px 5px 0 0;	
+  width: 34px;
+  height: 36px;
+  background: url(MMCCicon_go.png) no-repeat center center;
+  background-size: 20px 20px;
+  top: 0;
+  right: 12px;
 }
 
 .cardSettings {

app/helpers/maps_helper.rb

@@ -15,13 +15,16 @@ module MapsHelper
       map['contributorCount'] = m.contributors.count
       map['rtype'] = "map"
       
-      contributorList = ''
+      contributorList = m.user.name + ' created this map. '
       if m.contributors.count > 0 
-        contributorList += '<ul>'
+          m.contributors.each_with_index do |c, index|
-          m.contributors.each do |c|
+            comma = (index+1) == m.contributors.count ? '' : ', '
-            contributorList += '<li>' + c.name + '</li>'
+            contributorList += c.name + comma
           end
-        contributorList += '</ul>'      
+          contributorList += ' has worked on it.' if m.contributors.count == 1
+          contributorList += ' have worked on it.' if m.contributors.count > 1
+      else
+        contributorList += 'No one has added anything yet.'      
       end
       map['contributorList'] = contributorList
       

app/views/layouts/_searchtemplates.html.erb

@@ -7,8 +7,10 @@
 
 <div class="topicTemplate">
 <div class="result{{rtype}}">
-  <img class="icon" src="{{typeImageURL}}">
+  <div class="topicMetacode">
-  <span class="tip metacodeTip">{{type}}</span>
+    <img src="{{typeImageURL}}" class="topicIcon" />
+    <span class="metacodeTip">{{type}}</span>
+  </div>
   <div class="resultText">
     <p class="resultTitle">{{value}}</p>
     <p class="resultDesc">{{description}}</p>
@@ -16,25 +18,26 @@
   <div class="autoOptions">
     
     <% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
-    <button class="addToMap" onclick="return keepFromCommons(event, {{id}})"></button>
+    <button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
-    <span class="tip">add to map</span>
+      <span class="tip">add to map</span>
+    </button>
     <% end %>
-    <a href="/topics/{{id}}" target="_blank" class="goTo">
+    <a href="/topics/{{id}}" target="_blank" class="goTo hoverForTip">
       <span class="tip">open in new tab</span>
     </a>
-    <div class="mapCount">
+    <div class="mapCount hoverForTip">
-      <span class="tip">appears on maps</span>
+      <span class="tip">appears on this # of maps</span>
       {{mapCount}}
     </div>
-    <div class="synapseCount">
+    <div class="synapseCount hoverForTip">
-      <span class="tip"># of synapses</span>
+      <span class="tip"> has this # of synapses</span>
       {{synapseCount}}
     </div>
-    <div class="topicOriginatorIcon">
+    <div class="topicOriginatorIcon hoverForTip">
-      <span class="tip topicOriginator">{{originator}}</span>
+      <span class="tip topicOriginator">created by {{originator}}</span>
     </div>
-    <div class="topicPermission {{permission}}">
+    <div class="topicPermission {{permission}} hoverForTip">
-      <span class="tip">permission: {{permission}}</span>
+      <span class="tip">topic is {{permission}}</span>
     </div>
   </div>
   <div class="clearfloat"></div>
@@ -49,23 +52,23 @@
     <p class="resultDesc">{{description}}</p>
   </div>
   <div class="autoOptions">
-    <a href="/maps/{{id}}" target="_blank" class="goTo">
+    <a href="/maps/{{id}}" target="_blank" class="goTo hoverForTip">
       <span class="tip">open in new tab</span>
     </a>
-    <div class="topicCount">
+    <div class="topicCount hoverForTip">
-      <span class="tip">has topics</span>
+      <span class="tip">has this # of topics</span>
       {{topicCount}}
     </div>
-    <div class="synapseCount">
+    <div class="synapseCount hoverForTip">
-      <span class="tip">has synapses</span>
+      <span class="tip">has this # of synapses</span>
       {{synapseCount}}
     </div>
-    <div class="mapContributorsIcon">
+    <div class="mapContributorsIcon hoverForTip">
       <span class="tip mapContributors">{{contributorList}}</span>
       {{contributorCount}}
     </div>
-    <div class="mapPermission {{permission}}">
+    <div class="mapPermission {{permission}} hoverForTip">
-      <span class="tip">permission: {{permission}}</span>
+      <span class="tip">map is {{permission}}</span>
     </div>
   </div>
   <div class="clearfloat"></div>
@@ -79,11 +82,11 @@
     <p class="resultTitle">{{value}}</p>
   </div>
   <div class="autoOptions">
-    <a href="/maps/mappers/{{id}}" target="_blank" class="goTo">
+    <a href="/maps/mappers/{{id}}" target="_blank" class="goTo hoverForTip">
       <span class="tip">open in new tab</span>
     </a>
-    <div class="mapCount">
+    <div class="mapCount hoverForTip">
-      <span class="tip"># of maps</span>
+      <span class="tip">created this # of maps</span>
       {{mapCount}}
     </div>
   </div>

app/views/maps/_newtopic.html.erb

@@ -6,8 +6,12 @@
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
   <div id="metacodeImg">
     <% @m = user.settings.metacodes %>
+    <% @metacodes = [] %>
     <% @m.each do |m| %>
-      <% metacode = Metacode.find(m.to_i) %>
+      <% @metacodes.push(Metacode.find(m.to_i)) %>
+    <% end %>
+    <% @metacodes.sort! {|m1,m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1) %>
+    <% @metacodes.each do |metacode| %>
       <img class="cloudcarousel" width="40" height="40" src="/assets/<%= metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>"/>
     <% end %>
   </div> 

app/views/maps/show.html.erb

@@ -24,7 +24,7 @@
   </div>
 </div>
 <% end %>
-<div class="sidebarFilter">
+<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
   <div class="sidebarFilterIcon"></div>
   <div class="sidebarFilterBox">
     <h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
@@ -166,7 +166,7 @@
    bindWandHover();
    bindFilterHover();
    
-   $('.showcard').draggable({ handle: ".icon" });
+   $('.showcard').draggable({ handle: ".metacodeImage" });
    $('#showcard').resizable({
      maxHeight: 500,
      maxWidth: 500,

app/views/topics/_new.html.erb

@@ -8,8 +8,12 @@
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
   <div id="metacodeImg">
     <% @m = user.settings.metacodes %>
+    <% @metacodes = [] %>
     <% @m.each do |m| %>
-      <% metacode = Metacode.find(m.to_i) %>
+      <% @metacodes.push(Metacode.find(m.to_i)) %>
+    <% end %>
+    <% @metacodes.sort! {|m1,m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1) %>
+    <% @metacodes.each do |metacode| %>
       <img class="cloudcarousel" width="40" height="40" src="/assets/<%= metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>"/>
     <% end %>
   </div> 

public/assets/manifest.yml

@@ -209,8 +209,8 @@ WebSocketMain.swf: WebSocketMain-0de980edb45e36785bf9d862baa032bb.swf
 WebSocketMain/index.swf: WebSocketMain-0de980edb45e36785bf9d862baa032bb.swf
 WebSocketMainInsecure.swf: WebSocketMainInsecure-c4377647e57e58cacc692c8a51afc9f8.swf
 WebSocketMainInsecure/index.swf: WebSocketMainInsecure-c4377647e57e58cacc692c8a51afc9f8.swf
-application.js: application-bd7e83f7b33a139f170decf7e9714bc0.js
+application.js: application-a33fe87eaf0cf83c341a24929992aab3.js
-application/index.js: application-bd7e83f7b33a139f170decf7e9714bc0.js
+application/index.js: application-a33fe87eaf0cf83c341a24929992aab3.js
 scroll/mCSB_buttons.png: scroll/mCSB_buttons-0642ce29bb568932e832d150141614e6.png
 scroll/mCSB_buttons/index.png: scroll/mCSB_buttons-0642ce29bb568932e832d150141614e6.png
 Fonts/Lato-Lig-webfont.eot: Fonts/Lato-Lig-webfont-1435188a694a7d5e29cf4a3288ff3e36.eot
@@ -221,5 +221,5 @@ Fonts/Lato-Lig-webfont.ttf: Fonts/Lato-Lig-webfont-4b8f0d5ac83e783eb84848ff32546
 Fonts/Lato-Lig-webfont/index.ttf: Fonts/Lato-Lig-webfont-4b8f0d5ac83e783eb84848ff3254685c.ttf
 Fonts/Lato-Lig-webfont.woff: Fonts/Lato-Lig-webfont-47c2912f319ae759c3b1cd558b080c33.woff
 Fonts/Lato-Lig-webfont/index.woff: Fonts/Lato-Lig-webfont-47c2912f319ae759c3b1cd558b080c33.woff
-application.css: application-ec07fd82dedb30e38622a81e0cfcfc95.css
+application.css: application-5fb96b0d52830e3f6b85be97027430f4.css
-application/index.css: application-ec07fd82dedb30e38622a81e0cfcfc95.css
+application/index.css: application-5fb96b0d52830e3f6b85be97027430f4.css