styled carousel autocomplete results. moved tooltips. built out map info box

app/assets/javascripts/Jit/graphsettings.js

@@ -42,7 +42,7 @@ function graphSettings(type, embed) {
        size: 20,
        family: 'arial',
        textBaseline: 'hanging',
-       color:'#000'
+       color:'#DDD'
        //style: 'bold'
     },
     //Add Tips

app/assets/javascripts/Jit/jit2.0.0.js

@@ -7238,7 +7238,8 @@ Graph.Label.Native = new Class({
       function splitLine(st,n) {var b = ''; var s = st;while (s.length > n) {var c = s.substring(0,n);var d = c.lastIndexOf(' ');var e =c.lastIndexOf('\n');if (e != -1) d = e; if (d == -1) d = n; b +=       c.substring(0,d) + '\n';s = s.substring(d+1);}return b+s;}
       var arrayOfLabelLines = splitLine(node.name,30).split('\n');
       //render background
-            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+            ctx.fillStyle = 'rgba(24,32,46, 0.8)';
+            ctx.strokeStyle = 'rgba(24,32,46, 1)';
             var height = 25 * arrayOfLabelLines.length; //font size + margin
             
             var index, lineWidths = [];

app/assets/javascripts/application.js

@@ -361,13 +361,17 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
   $('#topic_name').typeahead([
          {
             name: 'topic_autocomplete',
-            template: '<p>{{value}}</p><div class="type">{{type}}</div><img width="20" height="20" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}"/>',
+            template: '<img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}"/><p class="autocompleteSection topicTitle">{{value}}</p><div class="autocompleteSection topicPermission {{permission}}"></div><div class="autocompleteSection topicOriginatorIcon hoverForTip"><span class="tip topicOriginator">{{originator}}</span></div><div class="clearfloat"></div>',
             remote: {
                 url: '/topics/autocomplete_topic?term=%QUERY'
             },
             engine: Hogan
           }
   ]);
+  $('#topic_name').bind('typeahead:autocompleted', function (event, datum, dataset) {
+        event.preventDefault();
+        event.stopPropagation();
+  });
   // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
   $('#topic_name').bind('typeahead:selected', function (event, datum, dataset) {
         $('#topic_grabTopic').val(datum.id);

app/assets/stylesheets/application.css

@@ -264,7 +264,7 @@ box-shadow: 0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);
   z-index:9999;
   width:202px;
   height: 37px;
-  font-family: 'katarine-web';
+  font-family: ':atp';
 }
 
 .anypage #topic_name, .anypage .tt-hint {
@@ -278,7 +278,7 @@ outline: none;
 font-size: 25px;
 line-height: 35px;
 color: rgba(255,255,255,0.7);
-font-family: 'katarine-web';
+font-family: 'LatoLight';
 }
 
 #metacodeImg {
@@ -463,7 +463,6 @@ box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
   font-size: 27px;
   background: url('MMCCicon_info.png') no-repeat center center;
   background-size:24px 24px;
-  cursor:pointer;
 }
 
 .wrapper h1.index {
@@ -821,7 +820,7 @@ cursor:pointer;
   line-height:35px;
   background:rgba(0,0,0,0.7);
   color: rgba(255,255,255,0.6);
-  font-family: 'katarine-web';
+  font-family: 'LatoLight';
 }
 
 .sidebarSearch .tt-dropdown-menu {
@@ -1040,8 +1039,8 @@ line-height: 20px;
  position: absolute;
  background: white;
  width: auto;
- top: 0;
+ bottom: 0;
- right: 23px;
+ left: 23px;
  color: black;
  white-space: nowrap;
  border-radius: 4px;
@@ -1053,13 +1052,15 @@ line-height: 20px;
  z-index:100;
 }
 .sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip  {
- right:40px;
+ left:-3px;
+ bottom:24px;
 }
 .sidebarSearch .hoverForTip:hover .tip {
   display:block;
 }
 .sidebarSearch .mapContributorsIcon .mapContributors {
-  right:40px;
+  left:0;
+  bottom:21px;
   white-space:normal;
   width:200px;
 }
@@ -1175,6 +1176,166 @@ background-position: 5px 2px;
 
 /* end right click menu */
 
+/* topic autocomplete */
+
+#new_topic .tt-suggestion.tt-is-under-cursor {
+background: black;
+}
+
+#new_topic .tt-suggestion {
+padding: 5px;
+font-family: 'LatoLight';
+background:rgba(0,0,0,0.7);
+}
+
+#new_topic .autocompleteSection {
+  float:left;
+  
+}
+
+#new_topic .topicTitle {
+  width:130px;
+  line-height:22px;
+}
+#new_topic .topicPermission {
+  width:20px;
+  height:20px;
+  background-repeat:no-repeat;
+  background-position:center center;
+  background-size:16px 16px;
+}
+#new_topic .topicPermission.commons {
+  background-image:url(MMCCicon_commons.png);
+}
+#new_topic .topicPermission.public {
+  background-image:url(MMCCicon_public.png);
+}
+#new_topic .topicPermission.private {
+  background-image:url(MMCCicon_private.png);
+}
+#new_topic .topicOriginatorIcon {
+  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 {
+  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:13px !important;
+ font-family:'LatoLight';
+ line-height:14px;
+ padding: 2px 5px 2px;
+ border: 1px solid black;
+ z-index:100;
+}
+
+
+/* map info box */
+
+.wrapper div.mapInfoBox {
+  display:none;
+  position:absolute;
+  bottom:40px;
+  right:3px;
+  background:rgba(0,0,0,0.7);
+  border-radius:5px;
+  border:1px solid black;
+  width:320px;
+  height:auto;
+  padding:10px;
+  font-family:'LatoLight';
+  font-size:15px;
+  line-height:17px;
+  font-style:normal;
+  text-align:center;
+}
+
+.mapInfoName {
+  padding-bottom:10px;
+  margin-bottom:10px;
+  background: url(mapInfoLine.png) no-repeat bottom center;
+}
+.mapInfoName, .mapInfoStat {
+  font-size:25px;
+  line-height:27px;
+}
+.wrapper div.mapInfoName span, .wrapper div.mapInfoDesc span {
+  float:none !important;
+  padding-bottom: 10px;
+}
+
+div.mapInfoStat {
+  padding-left: 29px;
+}
+.infoStatIcon {
+float: left;
+width: 25px;
+padding: 6px 0px 7px 45px;
+height: 27px;
+background-repeat: no-repeat;
+text-align: left;
+font-size: 20px;
+line-height: 27px;
+}
+.mapContributors {
+background-image: url(MMCCicon_mapper.png);
+background-position: 16px 6px;
+background-size: 27px 27px;
+}
+.mapTopics {
+background-image: url(MMCCicon_topic.png);
+background-position: 16px 6px;
+background-size: 27px 27px;
+}
+.mapSynapses {
+background-image: url(MMCCicon_synapse.png);
+background-position: 18px 6px;
+background-size: 27px 27px;
+}
+.mapPermission {
+background-position: 10px center;
+background-size: 30px 30px;
+}
+.mapPermission.commons {
+  background-image:url(MMCCicon_commons.png);
+}
+.mapPermission.public {
+  background-image:url(MMCCicon_public.png);
+}
+.mapPermission.private {
+  background-image:url(MMCCicon_private.png);
+}
+
+.mapInfoBox .mapInfoDesc {
+  font-style: italic;
+  color: #BBB;
+  padding-bottom:5px;
+  margin: 5px 0 8px;
+  background: url(mapInfoLine.png) no-repeat bottom center;
+}
+
+.mapInfoBox .mapInfoMeta p {
+  margin:4px 0;
+  font-size:14px;
+  font-style: italic;
+  color:#BBB;
+}
+
+
 /* --- styling the logo button ---*/
 /*.footer {
   width: 188px;

app/helpers/maps_helper.rb

@@ -21,8 +21,8 @@ module MapsHelper
             comma = (index+1) == m.contributors.count ? '' : ', '
             contributorList += c.name + comma
           end
-          contributorList += ' has worked on it.' if m.contributors.count == 1
+          contributorList += ' has edited it.' if m.contributors.count == 1
-          contributorList += ' have worked on it.' if m.contributors.count > 1
+          contributorList += ' have edited it.' if m.contributors.count > 1
       else
         contributorList += 'No one has added anything yet.'      
       end

app/models/map.rb

@@ -33,6 +33,20 @@ end
     return contributors
   end
   
+  #return the date of the last edit (mapping updated) to the map
+  def last_edited
+    date = nil
+    self.mappings.each do |m|
+      if date == nil
+        date = m.updated_at
+      elsif m.updated_at > date
+        date = m.updated_at
+      end
+    end
+    
+    return date
+  end
+  
   
   ###### JSON ######
   #build a json object of a map

app/views/maps/_mapinfobox.html.erb

@@ -0,0 +1,39 @@
+<%#
+  # 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 ? "canEdit" : "cannotEdit" %>">
+  
+  <div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
+  
+  <div class="mapInfoStat">
+    <div class="infoStatIcon mapContributors">
+      <%= @map.contributors.count %>
+    </div>
+    <div class="infoStatIcon mapTopics">
+      <%= @map.topics.count %>
+    </div>
+    <div class="infoStatIcon mapSynapses">
+      <%= @map.synapses.count %>
+    </div>
+    <div class="infoStatIcon mapPermission <%= @map.permission %>"></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 => "<span class='gray'>Click to add description.</span>", :classes => 'best_in_place_desc' %>
+  </div>
+  <% end %>
+  
+  <div class="mapInfoMeta">
+    <p>Created by <%= @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
+    <p>Last edited <%= @map.last_edited.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, :remote => true %>
+    <% end %>
+  </div>
+</div>

app/views/maps/show.html.erb

@@ -39,6 +39,7 @@
   <span class="mapName"><%= @map.name %></span>
   <span class="mapInfo"></span>
   <div class="clearfloat"></div>
+  <%= render :partial => 'maps/mapinfobox' %>
 </div>
 
 <div class="maps onMap" id="container">
@@ -163,8 +164,46 @@
         $(".sidebarFilter").hover(openFilter, closeFilter);
         
    } // end bindFilterHover
+   
+   function bindInfoHover() {
+      
+      var infoIsOpen = false
+      
+      // controls the sliding hover of the bottom left menu
+      var sliding1 = false; 
+      var lT;
+      
+      var closeInfo = function() {
+        lT = setTimeout(function() { 
+            if (! sliding1) { 
+              sliding1 = true;
+              $('.mapInfoBox').fadeOut(200, function() {
+                sliding1 = false;
+                infoIsOpen = false; 
+              });
+            } 
+          },300); 
+      }
+      
+      var openInfo = function(event) {
+        clearTimeout(lT);
+        if (! sliding1 && event.srcElement.className != "openCheatsheet") { 
+            sliding1 = true;
+            
+            $('.mapInfoBox').fadeIn(200, function() {
+                 sliding1 = false;
+                 infoIsOpen = true;
+            });
+        }
+      }
+        // bind the hover events
+        $("div.index").hover(openInfo, closeInfo);
+        
+        
+   } // end bindWandHover
    bindWandHover();
    bindFilterHover();
+   bindInfoHover();
    
    $('.showcard').draggable({ handle: ".metacodeImage" });
    $('#showcard').resizable({

app/views/topics/show.html.erb

@@ -40,7 +40,6 @@
   <div class="openCheatsheet"></div>
   <span><img width="35" height="35" src="/assets/<%= @topic.metacode.icon %>"></span>
   <span class="mapName"><%= @topic.name %></span>
-  <span class="mapInfo"></span>
   <div class="clearfloat"></div>
 </div>
 

public/assets/manifest.yml

@@ -127,6 +127,8 @@ location.png: location-cea0f2a62f9d151cafdc0110dded953e.png
 location/index.png: location-cea0f2a62f9d151cafdc0110dded953e.png
 map.png: map-11d4c40918bd0e9d7b9dc654a6940087.png
 map/index.png: map-11d4c40918bd0e9d7b9dc654a6940087.png
+mapInfoLine.png: mapInfoLine-33ae1b05578ec32204a3c46ac3d7eb15.png
+mapInfoLine/index.png: mapInfoLine-33ae1b05578ec32204a3c46ac3d7eb15.png
 menu_icon_32.png: menu_icon_32-45a773e31d8a68a2e404f176e528b467.png
 menu_icon_32/index.png: menu_icon_32-45a773e31d8a68a2e404f176e528b467.png
 moviemap.png: moviemap-090435483d05cf98c6aad5c4d09e3b06.png
@@ -165,18 +167,16 @@ settings.png: settings-4d3619f3e643c1ea36feee76feb7cb53.png
 settings/index.png: settings-4d3619f3e643c1ea36feee76feb7cb53.png
 spinner.gif: spinner-2223be961bac19bdc0a65c6e39270e86.gif
 spinner/index.gif: spinner-2223be961bac19bdc0a65c6e39270e86.gif
-task.png: task-6d0ba79696eb668c9a6b34fed375f5fe.png
+task.png: task-719c4c07b9ea02f9a5453989a5f5aa5d.png
-task/index.png: task-6d0ba79696eb668c9a6b34fed375f5fe.png
+task/index.png: task-719c4c07b9ea02f9a5453989a5f5aa5d.png
-task2.png: task2-719c4c07b9ea02f9a5453989a5f5aa5d.png
-task2/index.png: task2-719c4c07b9ea02f9a5453989a5f5aa5d.png
 tool.png: tool-a9aa41a694355d723cac130155fb6de8.png
 tool/index.png: tool-a9aa41a694355d723cac130155fb6de8.png
 topbg.png: topbg-875d4334b29e9752bbf9718b94f6da9a.png
 topbg/index.png: topbg-875d4334b29e9752bbf9718b94f6da9a.png
 topbg2.png: topbg2-2a578a925e2dbf78ff8b77508a7bf46e.png
 topbg2/index.png: topbg2-2a578a925e2dbf78ff8b77508a7bf46e.png
-trajectory.png: trajectory-6a8ab1e117ca61ae53f70709134e597d.png
+trajectory.png: trajectory-a8cca6e1225a46922b62c6bcda48e565.png
-trajectory/index.png: trajectory-6a8ab1e117ca61ae53f70709134e597d.png
+trajectory/index.png: trajectory-a8cca6e1225a46922b62c6bcda48e565.png
 ui-bg_flat_0_aaaaaa_40x100.png: ui-bg_flat_0_aaaaaa_40x100-3d0f77f5d1e613e6c212e1c3acc28330.png
 ui-bg_flat_0_aaaaaa_40x100/index.png: ui-bg_flat_0_aaaaaa_40x100-3d0f77f5d1e613e6c212e1c3acc28330.png
 ui-bg_flat_75_ffffff_40x100.png: ui-bg_flat_75_ffffff_40x100-a9815e32a79da42d9a0047223b378699.png
@@ -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-a33fe87eaf0cf83c341a24929992aab3.js
+application.js: application-ffdca1010213426bc4f2f45339fff11e.js
-application/index.js: application-a33fe87eaf0cf83c341a24929992aab3.js
+application/index.js: application-ffdca1010213426bc4f2f45339fff11e.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-5fb96b0d52830e3f6b85be97027430f4.css
+application.css: application-bacb10a495325dbdf3ee878fb6fe5d21.css
-application/index.css: application-5fb96b0d52830e3f6b85be97027430f4.css
+application/index.css: application-bacb10a495325dbdf3ee878fb6fe5d21.css