From b924f76d0397c19a1bae0e45dfdd866678b179e1 Mon Sep 17 00:00:00 2001
From: Divya Baid <32747809+divyabaid16@users.noreply.github.com>
Date: Fri, 16 Aug 2019 19:43:07 +0530
Subject: [PATCH] UI improvements: version tracking and other in the sidebar
 (#923)

* ui-improvements

* Changes made -1
---
 app/assets/stylesheets/sidebar.css | 38 +++++++++++++++++++----------
 app/views/images/_index.html.erb   | 39 +++++++++++++++++++-----------
 2 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/sidebar.css b/app/assets/stylesheets/sidebar.css
index f03c1333..fa7b1d56 100644
--- a/app/assets/stylesheets/sidebar.css
+++ b/app/assets/stylesheets/sidebar.css
@@ -10,38 +10,50 @@
 	float: right;
 	margin-right: 15px;
 	margin-bottom: 10px;
+  position: relative;
 }
 .sidebar-heading{
 	display: inline-block;
 }
-.image-order-button {
-  background-color: #4CAF50;
-  color: white;
-  padding: 16px;
-  font-size: 16px;
-  border: none;
-}
-.image-order {
-  position: relative;
+.sort-by-text{
   display: inline-block;
+  color: #5cb85c;
+}
+.sort-label{
+  display: inline-block;
+  padding: 5px;
+  border: 1px solid #e1e4e8;
+  height: 38px;
 }
 .image-order-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 .image-order-content a {
   color: black;
   padding: 7px 10px;
+  border: 1px solid #e1e4e8;
   text-decoration: none;
   display: block;
-}
-.image-order-content a:hover {
   background-color: white;
   text-decoration: none;
   color: black;
 }
-.image-order:hover .image-order-content {display: block;}
\ No newline at end of file
+
+.dropdown ul{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.dropdown li{
+  border-bottom: 1px solid #e1e4e8 !important;
+  padding: 5px;
+}
+.dropdown-menu{
+  position: absolute;
+  max-height: 200px;
+  overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/app/views/images/_index.html.erb b/app/views/images/_index.html.erb
index 6d7766a3..0776bb40 100644
--- a/app/views/images/_index.html.erb
+++ b/app/views/images/_index.html.erb
@@ -5,7 +5,11 @@
   <button class="grid-view" onClick="grid()"><i class="fa fa-th"></i></button>
 </div>
 <div class="image-order">
-  <button type="button" class="btn btn-outline-secondary">Sort Images</button>
+  <p style="display: inline;">Sort by: </p>
+  <div class="sort-label">
+    <p class="sort-by-text">Recent</p>
+    <i class="fa fa-angle-down" onClick="$('.image-order-content').toggle()" style="cursor: pointer; padding-left: 5px;"></i>
+  </div>
   <div class="image-order-content">
     <a class="name" href="?sort=name">Name</a>
     <a class="size" href="?sort=size">Size</a>
@@ -23,17 +27,20 @@
     <% if sort_param == 'name' %>
       <% ary = @map.warpables.sort { |a, b| a.image_file_name <=> b.image_file_name } %>
       <script>
-        $(".name").css("background-color","#5cb85c");
+        $(".name").css("color","#5cb85c");
+        $(".sort-by-text").text("Name");
       </script>
     <% elsif sort_param == 'size' %>
       <% ary = @map.warpables.sort { |a, b| a.image_file_size <=> b.image_file_size } %>
       <script>
-        $(".size").css("background-color","#5cb85c");
+        $(".size").css("color","#5cb85c");
+        $(".sort-by-text").text("Size");
       </script>
     <% else %>
       <% ary = @map.warpables.sort { |a, b| b.created_at <=> a.created_at } %>
       <script>
-        $(".recent").css("background-color","#5cb85c");
+        $(".recent").css("color","#5cb85c");
+        $(".sort-by-text").text("Recent");
       </script>
     <% end %>
     <% ary.each do |warpable| %>
@@ -47,9 +54,6 @@
               :'id' => "warpable-img-#{warpable.id}"
           %>
           </div>
-          <a class = "btn" onClick="$('#image-vesrions-<%= warpable.id %>').toggle()" style="cursor: pointer; margin-left: 30%;">
-            <i class='fas fa-clock'></i>
-          </a>
         </td>
 
         <td class="col-middle">
@@ -79,8 +83,11 @@
             %>
           <% end %>
           <% if warpable.placed? %>
-            <a rel="tooltip" id="locate-warpable-<%= warpable.id %>" title="Pan to this image" class="btn btn-sm btn-success"><i class='fa fa-crosshairs'></i></a>
-            <a rel="tooltip" title="Download full resolution distorted image (please allow popups)" class="btn btn-sm btn-outline-secondary img-download img-download-<%= warpable.id %>" data-image="/images/fetch/?url=<%= warpable.image.url(:original) %>"><i class="fa fa-download"></i></a>
+            <a id="locate-warpable-<%= warpable.id %>" title="Pan to this image" class="btn btn-sm btn-success"><i class='fa fa-crosshairs'></i></a>
+            <a title="Download full resolution distorted image (please allow popups)" class="btn btn-sm btn-outline-secondary img-download img-download-<%= warpable.id %>" data-image="/images/fetch/?url=<%= warpable.image.url(:original) %>"><i class="fa fa-download"></i></a>
+            <a title="History of the image" class = "btn btn-sm btn-warning" onClick="$('#image-vesrions-<%= warpable.id %>').toggle()" style="cursor: pointer;">
+            <i class='fas fa-clock'></i>
+            </a>
             <div class="full-image-container-<%= warpable.id %>" style="overflow:hidden;width:0;height:0;"><img id="full-img-<%= warpable.id %>" /></div>
             <script>
               $('#warpable-<%= warpable.id %> [rel=tooltip]').tooltip();
@@ -106,11 +113,14 @@
           <% end %>
         </td>
       </tr>
-      <td colspan="3">
-        <div class="dropdown" style="margin-top: -40px;">
+      <td colspan="3" style="padding: 0px; padding-top: 10px;">
+        <div class="dropdown" style="margin-top: -20px;">
           <div class="dropdown-menu image-version" aria-labelledby="dropdownMenuButton" id="image-vesrions-<%= warpable.id %>">
+            <ul >
+              <li><%= warpable.versions.length - 1 %> revisions. <a target="_blank" href="https://publiclab.org/mapknitter-version-tracking">Learn more</a>
+              </li>
             <% warpable.versions.reverse.each do |version| %>
-              <button class="<%= warpable.id %>" id="<%= version.index + 1%>" onClick="getVersion(this)"><%= version.event.capitalize %>d by
+              <li class="<%= warpable.id %>" id="<%= version.index + 1%>" onClick="getVersion(this)"><%= version.event.capitalize %>d by
                 <% if version.whodunnit && version.whodunnit != 'Anonymous' %>
                   <% user = User.find_by_id(version.whodunnit) %>
                   <% if user %>
@@ -120,9 +130,10 @@
                   <u>an Anonymous user</u>
                 <% end %>
                 <%= time_ago_in_words(version.created_at) %> ago
-                <%= link_to '' ,images_revert_path(id: warpable.id, version:version), class: 'fa fa-undo', title: 'Revert to this version' %>
-              </button>
+                <%= link_to '' ,images_revert_path(id: warpable.id, version:version), class: 'fa fa-undo btn btn-sm btn-primary', title: 'Revert to this version' %>
+              </li>
             <% end %>
+          </ul>
           </div>
         </div>
       </td>