From 0fdb38b0a5ee75ad45db2851317186e8b4513d48 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Tue, 30 Aug 2016 14:55:04 -0400
Subject: [PATCH] proper star icon

---
 app/assets/images/star.png                   | Bin 0 -> 514 bytes
 app/assets/javascripts/src/Metamaps.Map.js   |  20 +++++++++-----
 app/assets/stylesheets/clean.css.erb         |  27 +++++++++++++++----
 app/models/user.rb                           |   4 +++
 app/views/layouts/_lowermapelements.html.erb |   6 ++++-
 5 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/images/star.png

diff --git a/app/assets/images/star.png b/app/assets/images/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..217f58f4323ba301f392ced94a3d814cf296b7e6
GIT binary patch
literal 514
zcmeAS@N?(olHy`uVBq!ia0vp^3P9|@!3HF&`%2d_Ffg9<ba4!+xb-&TZD)&t$Q_}e
zCe<9yEY@iWoQYTemnCol86dPl^-bylnTHdvsyu79{`5dm>4%!}<jx-zPfmTE{`zax
z*24xh7SGSCFzi|v&9LD8Z%s}H!ymN_H-gseJ6LejsZHtID|OL^9nUvP-r#JgFgoz{
z)dvNm4$)rqy{{M=SZywwmi3(F;=bEp-7A~yYkc+Ru@9kp`gdlWO}TML!tUn>=JJIy
zkq@u_TsG-IkK;M^S#|fN+Cx@+nCZ(9k-O9SW%)I~b=!UIC3s6t2T$B^;fGy~n^D4a
zH|K(b6;FP?kv`xSbIxR@p|$$`P=%G+)|bOmPtE2Dst=AbjQFKoZ~6SxRPF2k*KN|d
zy=$HQqgl`XH%RQ0VYu{1e#NR+ybO<aEnTo5=!Zx9I(QS57%Fmpm5VxrNIs}4tq_nr
z!hJknH*7Z{KkV2xeZnEJVl+RfZ`r=^+y5MmgF>o*^&%1uUVd*7rS0#^bm0B}MrGEk
z4|khLHE|zPW=OmLCI86Np0u`Cg0G(#b1b<(b?(d6Mo)d&R_@naE1~mu;{G|sPj{`7
ZHxvw6IC*W}YGB+lc)I$ztaD0e0su6T^Q-^>

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/src/Metamaps.Map.js b/app/assets/javascripts/src/Metamaps.Map.js
index ce27f658..b43918f4 100644
--- a/app/assets/javascripts/src/Metamaps.Map.js
+++ b/app/assets/javascripts/src/Metamaps.Map.js
@@ -50,8 +50,8 @@ Metamaps.Map = {
     })
 
     $('.starMap').click(function () {
-      if ($(this).text() === 'star') self.star()
-      else self.unstar()
+      if ($(this).is('.starred')) self.unstar()
+      else self.star()
     })
 
     $('.sidebarFork').click(function () {
@@ -147,20 +147,28 @@ Metamaps.Map = {
     if (!Metamaps.Active.Mapper || !Metamaps.Stars) return
     // update the star/unstar icon
     if (Metamaps.Stars.find(function (s) { return s.user_id === Metamaps.Active.Mapper.id })) {
-      $('.starMap').html('unstar')
+      $('.starMap').addClass('starred')
+      $('.starMap .tooltipsAbove').html('Unstar')
     } else {
-      $('.starMap').html('star')
+      $('.starMap').removeClass('starred')
+      $('.starMap .tooltipsAbove').html('Star')
     }
   },
   star: function () {
+    var self = Metamaps.Map
+
     if (!Metamaps.Active.Map) return
     $.post('/maps/' + Metamaps.Active.Map.id + '/star')
-    $('.starMap').html('unstar') 
+    Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id })
+    self.updateStar()
   },
   unstar: function () {
+    var self = Metamaps.Map
+
     if (!Metamaps.Active.Map) return
     $.post('/maps/' + Metamaps.Active.Map.id + '/unstar')
-    $('.starMap').html('star') 
+    Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Metamaps.Active.Mapper.id })
+    self.updateStar()    
   },
   fork: function () {
     Metamaps.GlobalUI.openLightbox('forkmap')
diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb
index b8226980..a1ea9c1d 100644
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@@ -334,7 +334,8 @@
     right: 70px;
 }
 .mapPage .openCheatsheet .tooltipsAbove, .topicPage .openCheatsheet .tooltipsAbove {
-    left: 29px;
+  right: 1px;
+  left: auto;
 }
 
 .unauthenticated .homePage .infoAndHelp {
@@ -376,9 +377,18 @@
 	top: 0;
 }
 .starMap {
-  width: auto;
-  padding-right: 8px;
+  background-image: url(<%= asset_data_uri('star.png') %>);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  width: 32px;
 }
+.starMap:hover, .starMap.starred {
+  background-position: 0 -32px;
+}
+.starMap.starred:hover {
+  background-position: 0 0;
+}
+
 .unauthenticated .mapPage .starMap {
   display: none;
 }
@@ -439,7 +449,7 @@
 }
 
 .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips {
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove {
     display: block;
 }
 
@@ -523,6 +533,13 @@
     top: 10px;
 }
 
+.starMap .tooltipsAbove {
+    left: -2px;
+}
+.starMap.starred .tooltipsAbove {
+    left: -8px;
+}
+
 .openCheatsheet .tooltipsAbove {
     left: -4px;
 }
@@ -560,7 +577,7 @@
     right: 37% !important;
 }
 
-.mapInfoIcon div:after, .openCheatsheet div:after {
+.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after {
    content: '';
     position: absolute;
     top: 76%;
diff --git a/app/models/user.rb b/app/models/user.rb
index fb031b4b..1f091499 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -79,6 +79,10 @@ class User < ActiveRecord::Base
     end
   end
 
+  def starred_map?(map) 
+    return !!self.stars.index{|s| s.map_id == map.id }
+  end
+
   def settings
     # make sure we always return a UserPreference instance
     self[:settings] = UserPreference.new if self[:settings].nil?
diff --git a/app/views/layouts/_lowermapelements.html.erb b/app/views/layouts/_lowermapelements.html.erb
index 3172f454..fe120219 100644
--- a/app/views/layouts/_lowermapelements.html.erb
+++ b/app/views/layouts/_lowermapelements.html.erb
@@ -7,7 +7,11 @@
 
 <div class="infoAndHelp">
 	<%= render :partial => 'maps/mapinfobox' %>
-    <div class="starMap infoElement mapElement">Star</div>
+
+    <% starred = current_user && @map && current_user.starred_map?(@map)
+       starClass = starred ? 'starred' : ''
+       tooltip = starred ? 'Star' : 'Unstar'  %> 
+    <div class="starMap infoElement mapElement <%= starClass %>"><div class="tooltipsAbove"><%= tooltip %></div></div>
     <div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
     <div class="openCheatsheet openLightbox infoElement mapElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
     <div class="clearfloat"></div>