From 4e5488b6a1c6fff5ddb1482cf4e9c0e18c6cdd37 Mon Sep 17 00:00:00 2001
From: Lekhika Dugtal <lekhidugtal@gmail.com>
Date: Sat, 27 Jul 2019 00:35:39 +0530
Subject: [PATCH] Ad toggle icons for new sidebar (#6011)

---
 app/views/like/_like.html.erb       | 169 ++++++++++++++++------------
 app/views/notes/show.html.erb       |   4 -
 app/views/sidebar/_related.html.erb |  17 +--
 app/views/wiki/_header.html.erb     |   4 -
 test/integration/I18n_test.rb       |   3 -
 5 files changed, 101 insertions(+), 96 deletions(-)

diff --git a/app/views/like/_like.html.erb b/app/views/like/_like.html.erb
index 00582feca7..66bc7e79cb 100644
--- a/app/views/like/_like.html.erb
+++ b/app/views/like/_like.html.erb
@@ -1,92 +1,99 @@
-<div class="d-print-none btn-toolbar float-right" style="margin-left:10px;margin-top:0;">
-  <ul class="btn-group">
-        <% if logged_in_as(['admin', 'moderator']) || (current_user && (current_user.uid == node.uid || node.has_tag("with:#{current_user.username}"))) %>
+<div class="d-print-none btn-toolbar float-left mb-3" style="margin-top:0;">
+<% if logged_in_as(['admin', 'moderator']) || (current_user && (current_user.uid == node.uid || node.has_tag("with:#{current_user.username}"))) %>
              <% if node.type == 'note' %>
-                <a <% if current_user && current_user.uid != node.uid %>data-confirm='Please be aware that you are editing a post by another contributor, a privilege you have only because you are an admin or co-author.' <% end %> class='btn btn-outline-secondary btn-sm' href='/notes/edit/<%= node.id %>?t=<%= Time.now.to_i %><% if params[:controller] == "questions" %>&redirect=question&template=question<% end %>'>
-                <i class='fa fa-pencil'></i><span class='d-none d-lg-inline'> Edit</span>
+                <a <% if current_user && current_user.uid != node.uid %>data-confirm='Please be aware that you are editing a post by another contributor, a privilege you have only because you are an admin or co-author.' <% end %> class='btn btn-outline-secondary btn-circle btn-sm' href='/notes/edit/<%= node.id %>?t=<%= Time.now.to_i %><% if params[:controller] == "questions" %>&redirect=question&template=question<% end %>'>
+                <i class='ml-1 ff fa fa-pencil'></i>
                 </a>
             <% end %>
         <% end %>
 
-  <li data-toggle="tooltip" data-placement="top" rel="tooltip" title="Helpful? Like it and get updates!" class="btn btn-outline-secondary btn-sm btn-like" node-id="<%= node.id %>" id="like-button-<%= node.id %>">
+  <li data-toggle="tooltip" data-placement="top" rel="tooltip" title="Like by <%= node.likers.length %> people" class="btn btn-outline-secondary btn-circle btn-like" node-id="<%= node.id %>" id="like-button-<%= node.id %>">
     <% if !current_user %>
       <a id="open-login-like" data-hashparams="like" data-toggle="modal" data-target="#loginModal">
-        <span id="like-star-<%= node.id %>" class="fa fa-star"></span>
-        <span id="like-count-<%= node.id %>"><%= node.likers.length %></span>
+        <span id="like-star-<%= node.id %>" class="ff fa fa-star"></span>
       </a>
     <% else %>
-      <span id="like-star-<%= node.id %>" class="fa fa-star<% if !node.liked_by(current_user.uid) %>-o<% end %>"></span>
-      <span id="like-count-<%= node.id %>"><%= node.likers.length %> </span>
+      <span id="like-star-<%= node.id %>" class="ff fa fa-star<% if !node.liked_by(current_user.uid) %>-o<% end %>"></span>
     <% end %>
   </li>
 
-  <li data-toggle="tooltip" data-placement="top" title="Print and more tools" class="btn btn-outline-secondary btn-sm" rel="popover" data-placement="left" data-html="true" style="overflow: auto; max-height: 500px" data-content="
-
-<p><b>Users who liked this</b></p>
-<% node.likers.each do |user| %>
-  <i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>/'><%= user.username %></a><br />
-<% end %>
-<% if node.likers.length == 0 %><i>None</i><% end %>
-<% if node.type == 'note' && current_user && node.uid != current_user.uid%>
-<hr style='margin-bottom:3px;' />
-<p><b>Award a Barnstar:</b></p>
-<form class='form' action='/barnstar/give'>
-<select name='star' class='form-control'>
-    <option value='basic'>The basic barnstar</option>
-    <option value='photo-documentation'>The photo documentation barnstar</option>
-    <option value='video-documentation'>The video documentation barnstar</option>
-    <option value='watchdog'>The watchdog barnstar</option>
-    <option value='empiricism'>The empiricism barnstar</option>
-    <option value='excessive-enthusiasm'>The enthusiasm barnstar</option>
-</select><br />
-<input type='hidden' name='nid' value='<%= node.id %>'/>
-<input type='submit' class='btn btn-primary' value='Give'/> &nbsp; <a _target='blank' href='/wiki/barnstars'>Learn more</a>
-</form>
-<% end %>
-
-<% if logged_in_as(['admin', 'moderator']) || (current_user && current_user.uid == node.uid) %>
-
-  <hr />
-
-  <div class='btn-group'>
-    <a rel='tooltip' title='Flag as spam' class='btn btn-sm btn-outline-secondary btn-flag-spam-<%= node.id %>' href='mailto:moderators@publiclab.org?subject=Reporting+spam+on+Public+Lab&body=Hi,+I+found+this+item+that+looks+like+spam+or+needs+to+be+moderated:+<%= node.title.gsub(/ /,'+') %>+https://publiclab.org/n/<%= node.id %>+by+https://publiclab.org/profile/<%= node.author.username %>+Thanks!'>
-      <i class='fa fa-flag'></i>
-    </a>
-    <li data-toggle='tooltip' data-placement='top' title='Follow by tag or author' class='btn btn-outline-secondary btn-sm requireLogin nestedPopover' data-html='true' rel='popover' data-placement='left' data-content=&quot;    <%= "No tags" if tagnames.nil? || tagnames.length == 0 %>    <% if tagnames %><% tagnames.each do |tagname| %><p style='margin-bottom:3px; overflow: hidden; text-overflow: ellipsis;'><a href='/subscribe/tag/<%= tagname %>' class='btn btn-outline-secondary btn-sm'><%= tagname %></a></p><% end %><% end %><hr /><i class='fa fa-user'></i><% if current_user && !current_user.following?(node.author) %>&nbsp;<a class='btn btn-sm' href='/relationships?followed_id=<%= node.author.id %>' data-method='post' > <%= node.author.name %></a><% else %>  &nbsp;<%= node.author.name %><% end %>&quot;>
-      <i class='fa fa-user-plus' aria-hidden='true'></i>
-    </li>
-
-     <a href='/notes/delete/<%= node.id %>' class='btn btn-outline-secondary btn-sm' data-confirm='Are you sure?'>
-      <i class='fa fa-trash'></i><span class='d-none d-lg-inline'> Delete</span>
-    </a>
-    <a href='/notes/raw/<%= node.id %>' class='btn btn-outline-secondary btn-sm'>
-      <i class='fa fa-code'></i><span class='d-none d-lg-inline'> Raw</span>
-    </a>
-    <% if logged_in_as(['admin', 'moderator']) %>
-      <% if node.type == 'note' %>
-        <a class='btn btn-outline-secondary btn-sm' href='/moderate/spam/<%= node.id %>'><i class='fa fa-ban-circle'></i> Spam</a>
-      <% elsif node.type == 'page' %>
-        <a class='btn btn-outline-secondary btn-sm' href='/moderate/revision/spam/<%= @revision.vid %>'><i class='fa fa-ban-circle'></i> Spam revision</a>
-      <% end %>
+  <% if @node %>
+    <% subpage_count = Tag.find_pages("parent:#{@node.slug}", 100).count %>
+    <% if subpage_count > 0 %>
+      <li class="btn btn-outline-secondary btn-circle" data-toggle="tooltip" data-placement="top" rel="tooltip" title="<%= subpage_count %> sub-pages">
+        <a href="/wiki/tag/parent:<%= @node.slug %>">
+        <i class="ff fa fa-book"></i>
+        </a>
+      </li>
     <% end %>
-  </div>
-<% end %>
-
-<br />
-<hr style='clear:both;' />
-
-<div>
-  <p><a id='print-command-no-links'><i class='fa fa-print'></i> Print without page links</a></p>
-  <p><a id='print-command-3-col'><i class='fa fa-print'></i> Print in 3-column layout</a></p>
-</div>
 
+  <% end %>
 
-">
-      <span class="fa fa-caret-down"></span></li>
-  </ul>
+  <li data-toggle="tooltip" data-placement="top" title="Print and more tools" class="btn btn-outline-secondary btn-circle btn-sm" rel="popover" data-placement="left" data-html="true" style="overflow: auto; max-height: 500px" data-content="
 
+    <p><b>Users who liked this</b></p>
+    <% node.likers.each do |user| %>
+      <i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>/'><%= user.username %></a><br />
+    <% end %>
+    <% if node.likers.length == 0 %><i>None</i><% end %>
+    <% if node.type == 'note' && current_user && node.uid != current_user.uid%>
+    <hr style='margin-bottom:3px;' />
+    <p><b>Award a Barnstar:</b></p>
+    <form class='form' action='/barnstar/give'>
+    <select name='star' class='form-control'>
+        <option value='basic'>The basic barnstar</option>
+        <option value='photo-documentation'>The photo documentation barnstar</option>
+        <option value='video-documentation'>The video documentation barnstar</option>
+        <option value='watchdog'>The watchdog barnstar</option>
+        <option value='empiricism'>The empiricism barnstar</option>
+        <option value='excessive-enthusiasm'>The enthusiasm barnstar</option>
+    </select><br />
+    <input type='hidden' name='nid' value='<%= node.id %>'/>
+    <input type='submit' class='btn btn-primary' value='Give'/> &nbsp; <a _target='blank' href='/wiki/barnstars'>Learn more</a>
+    </form>
+    <% end %>
+    
+    <% if logged_in_as(['admin', 'moderator']) || (current_user && current_user.uid == node.uid) %>
+    
+      <hr />
+    
+      <div class='btn-group'>
+        <a rel='tooltip' title='Flag as spam' class='btn btn-sm btn-outline-secondary btn-flag-spam-<%= node.id %>' href='mailto:moderators@publiclab.org?subject=Reporting+spam+on+Public+Lab&body=Hi,+I+found+this+item+that+looks+like+spam+or+needs+to+be+moderated:+<%= node.title.gsub(/ /,'+') %>+https://publiclab.org/n/<%= node.id %>+by+https://publiclab.org/profile/<%= node.author.username %>+Thanks!'>
+          <i class='fa fa-flag'></i>
+        </a>
+        <li data-toggle='tooltip' data-placement='top' title='Follow by tag or author' class='btn btn-outline-secondary btn-sm requireLogin nestedPopover' data-html='true' rel='popover' data-placement='left' data-content=&quot;    <%= "No tags" if tagnames.nil? || tagnames.length == 0 %>    <% if tagnames %><% tagnames.each do |tagname| %><p style='margin-bottom:3px; overflow: hidden; text-overflow: ellipsis;'><a href='/subscribe/tag/<%= tagname %>' class='btn btn-outline-secondary btn-sm'><%= tagname %></a></p><% end %><% end %><hr /><i class='fa fa-user'></i><% if current_user && !current_user.following?(node.author) %>&nbsp;<a class='btn btn-sm' href='/relationships?followed_id=<%= node.author.id %>' data-method='post' > <%= node.author.name %></a><% else %>  &nbsp;<%= node.author.name %><% end %>&quot;>
+          <i class='fa fa-user-plus' aria-hidden='true'></i>
+        </li>
+    
+         <a href='/notes/delete/<%= node.id %>' class='btn btn-outline-secondary btn-sm' data-confirm='Are you sure?'>
+          <i class='fa fa-trash'></i><span class='d-none d-lg-inline'> Delete</span>
+        </a>
+        <a href='/notes/raw/<%= node.id %>' class='btn btn-outline-secondary btn-sm'>
+          <i class='fa fa-code'></i><span class='d-none d-lg-inline'> Raw</span>
+        </a>
+        <% if logged_in_as(['admin', 'moderator']) %>
+          <% if node.type == 'note' %>
+            <a class='btn btn-outline-secondary btn-sm' href='/moderate/spam/<%= node.id %>'><i class='fa fa-ban-circle'></i> Spam</a>
+          <% elsif node.type == 'page' %>
+            <a class='btn btn-outline-secondary btn-sm' href='/moderate/revision/spam/<%= @revision.vid %>'><i class='fa fa-ban-circle'></i> Spam revision</a>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+    
+    <br />
+    <hr style='clear:both;' />
+    
+    <div>
+      <p><a id='print-command-no-links'><i class='fa fa-print'></i> Print without page links</a></p>
+      <p><a id='print-command-3-col'><i class='fa fa-print'></i> Print in 3-column layout</a></p>
+    </div>
+    ">
+      <span class="ff fa fa-copy"></span>
+    </li>
+    
   <style type="text/css">
-    /*Styling the links to remove underline on hover and setting pointer as cursor*/
+        /*Styling the links to remove underline on hover and setting pointer as cursor*/
     #print-command-3-col , #print-command-no-links {
       text-decoration : none;
       cursor : pointer;
@@ -149,3 +156,21 @@
     });
   </script>
 </div>
+
+<style>
+
+.btn-circle {
+  height: 45px;
+  width: 45px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  margin-right: 5px;
+  border-color: #ccc;
+}
+
+.ff {
+  font-size: 1.5em;
+}
+
+</style>
diff --git a/app/views/notes/show.html.erb b/app/views/notes/show.html.erb
index d3112b3134..2090fee4a1 100644
--- a/app/views/notes/show.html.erb
+++ b/app/views/notes/show.html.erb
@@ -20,10 +20,6 @@
     <!--<div class="expand"><a onClick="$('.main-image').toggleClass('compressed');"><i class="fa fa-angle-down"></i></a></div>-->
   <% end %>
 
-  <div style="margin-top:10px;" class="d-print-none">
-    <%= render :partial => "like/like", :locals => {:node => @node, :tagnames => @tagnames } %>
-  </div>
-
   <h1 style="margin-top: 40px;"><%= @node.title %></h1>
 
   <div>
diff --git a/app/views/sidebar/_related.html.erb b/app/views/sidebar/_related.html.erb
index feb99e52a2..a85cbfe7ce 100644
--- a/app/views/sidebar/_related.html.erb
+++ b/app/views/sidebar/_related.html.erb
@@ -4,14 +4,14 @@
 
   <div id="sidebar" class="d-none d-lg-block">
 
-  <a style="margin-bottom:6px;white-space: normal;" rel="tooltip" title="<%= t('sidebar._related.share_your_work') %>" data-placement="bottom" href="/post" class="btn btn-primary btn-lg btn-block d-lg-none d-xl-block write-research-note requireLogin"><i class="fa fa-pencil fa fa-white"></i> <%= t('sidebar._related.write_research_note') %></a>
-  <% tagnames = (@node.normal_tags.collect(&:name) + @node.location_tags).join(',') if @tagnames %>
-  <a style="white-space: normal;" rel="tooltip" title="Post <% if @tagnames %>about <%= tagnames %><% else %>research<% end %>" data-placement="bottom" href="/post<%= '?template=question&tags=question:general,'+ tagnames if @tagnames %><% if params[:controller] == 'notes' && params[:action] == 'show' %>,response:<%= @node.id %><% end %>" class="btn btn-primary btn-lg btn-block requireLogin"><i class="fa fa-pencil fa fa-white"></i> <%= t('sidebar._related.ask_a_question') %></a>
-
   <% cache('related_sidebar-feature', skip_digest: true) do %>
     <%= feature('sidebar') %>
   <% end %>
 
+  <div class="d-print-none">
+  <%= render :partial => "like/like", :locals => {:node => @node, :tagnames => @tagnames } %>
+  </div>
+
   <% if @node %>
     <br />
     <%= render :partial => "sidebar/events" %>
@@ -61,15 +61,6 @@
   </div>
 
   <% if @node %>
-    <% subpage_count = Tag.find_pages("parent:#{@node.slug}", 100).count %>
-    <% if subpage_count > 0 %>
-      <p>
-        <i class="fa fa-book"></i>
-        <a href="/wiki/tag/parent:<%= @node.slug %>">
-          <%= subpage_count %> sub-pages
-        </a>
-      </p>
-    <% end %>
     <div id=sidebar-tags>
       <%= render partial: 'tag/tagging' %>
     </div>
diff --git a/app/views/wiki/_header.html.erb b/app/views/wiki/_header.html.erb
index a7d4768571..18ce5ffa4c 100644
--- a/app/views/wiki/_header.html.erb
+++ b/app/views/wiki/_header.html.erb
@@ -8,10 +8,6 @@
   </a>
 <% end %>
 
-<div style="margin-top:10px;" class="d-print-none">
-  <%= render partial: "like/like", locals: {node: @node, tagnames: @tagnames } %>
-</div>
-
 <br class="d-lg-none" style="clear:both;" />
 
 <h1 style="font-family: 'Junction Light';">
diff --git a/test/integration/I18n_test.rb b/test/integration/I18n_test.rb
index 7705728f2c..2066f8ee49 100644
--- a/test/integration/I18n_test.rb
+++ b/test/integration/I18n_test.rb
@@ -384,9 +384,6 @@ class I18nTest < ActionDispatch::IntegrationTest
     available_testing_locales.each do |lang|
       get '/change_locale/' + lang.to_s
       follow_redirect!
-
-      get '/wiki/' + nodes(:organizers).title.parameterize
-      assert_select 'a', I18n.t('sidebar._related.write_research_note')
     end
   end