eessppeelllloo/mapknitter
1
0
Fork 0
mirror of https://github.com/publiclab/mapknitter.git synced 2026-01-06 15:35:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements: version tracking and other in the sidebar (#923)

Browse Source 
* ui-improvements

* Changes made -1
This commit is contained in:
Divya Baid
2019-08-16 19:43:07 +05:30
committed by Jeffrey Warren
parent dfd64e2390
commit b924f76d03
2 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/stylesheets/sidebar.css
View File

@@ -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;}
.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;
}

39
app/views/images/_index.html.erb
View File

@@ -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>