From 23510f2f87a3390b640402c6f5d6ed2b09846d32 Mon Sep 17 00:00:00 2001
From: Bashar Jabbour <basharjabbour@gmail.cim>
Date: Sat, 22 Nov 2014 19:35:03 -0500
Subject: [PATCH] added user image stack for map search results and associated
 tooltip

---
 app/assets/stylesheets/clean.css      | 63 ++++++++++++++++++++++++++-
 app/helpers/maps_helper.rb            | 10 +++++
 app/views/layouts/_templates.html.erb |  9 +++-
 3 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css
index a19a8bfc..43abbc63 100644
--- a/app/assets/stylesheets/clean.css
+++ b/app/assets/stylesheets/clean.css
@@ -220,10 +220,23 @@
     top: 40px !important;
     background: #F5F5F5;
     width: 472px;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow-y: visible;
+    overflow-x: visible;
     box-shadow: 0 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
 }
+
+.autoOptions #mapContribs { 
+    width: 15px;
+    height: 15px;
+    border: 1px solid #424242;
+    margin-top: 4px;
+    margin-left: 4px;
+}
+
+.mapContributorsIcon span {
+    margin-left: 5px;
+}
+
 .searchHeader {
     height: 42px;
     width: 100%;
@@ -468,6 +481,11 @@
 .sidebarSearch .topicOriginatorIcon img {
     border-radius: 9px;
 }
+
+.sidebarSearch .topicOriginatorIcon .tip {
+    margin-right: -147px;
+    top: 1px;
+}
 .sidebarSearch .tip {
     position: absolute;
     background: #424242;
@@ -486,6 +504,47 @@
 .sidebarSearch .hoverForTip:hover .tip {
     display: block;
 }
+
+.sidebarSearch .mapContributorsIcon .tip {
+    margin-right: -144px;
+    top: -11px;
+    padding-top: 3px;
+}
+
+.sidebarSearch .hoverForTip .tip li {
+    padding-left: 28px;
+    padding-top: 4px;
+}
+
+.tipUserImage {
+    position: absolute;
+    top: 4px;
+    left: 7px;
+    border-radius: 14px;
+}
+
+.sidebarSearch .hoverForTip .tip:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-right: 4px solid #424242;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+
+.sidebarSearch .mapContributorsIcon .tip:before {
+    top: 71px;
+    left: -4px;
+    margin-top: -53px;
+}
+
+.sidebarSearch .topicOriginatorIcon .tip:before {
+    top: 58px;
+    left: -4px;
+    margin-top: -53px;
+}
+
 .sidebarSearch .mapContributorsIcon .mapContributors {
     top: auto;
     right: 0;
diff --git a/app/helpers/maps_helper.rb b/app/helpers/maps_helper.rb
index 2163c51e..1181c61b 100644
--- a/app/helpers/maps_helper.rb
+++ b/app/helpers/maps_helper.rb
@@ -13,6 +13,7 @@ module MapsHelper
       map['topicCount'] = m.topics.count
       map['synapseCount'] = m.synapses.count
       map['contributorCount'] = m.contributors.count
+      map[''] =  m.contributors[0].image.url(:square) 
       map['rtype'] = "map"
       
       contributorList = m.user.name + ' created this map. '
@@ -28,6 +29,15 @@ module MapsHelper
       end
       map['contributorList'] = contributorList
       
+      contributorTip = ''
+      if m.contributors.count > 0 
+        m.contributors.each_with_index do |c, index|
+          userImage = c.image.url(:square)
+          name = c.name
+          contributorTip += '<li> <img class="rtUserImage" width="25" height="25" src=' + userImage + ' />' + name + '</li>'         
+        end
+      end
+      map['contributorTip'] = contributorTip
       temp.push map
     end
     return temp
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index 25f4d024..81f19878 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -121,8 +121,13 @@
           {{synapseCount}}
         </div>
         <div class="mapContributorsIcon hoverForTip">
-          <span class="tip mapContributors">{{contributorList}}</span>
-          {{contributorCount}}
+            <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
+          <div class="tip"> 
+            <ul>
+              {{{contributorTip}}}
+            </ul>
+          </div>
+          <span>{{contributorCount}}</span>
         </div>
         <div class="mapPermission {{permission}}">
         </div>