mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-04-02 18:31:30 +08:00
Add attachments dropdown to step
This commit is contained in:
aignatov-bio
parent
187e4bc541
commit
eca39a00b5
13 changed files with 131 additions and 112 deletions
app
assets
images/icon_small
javascripts/protocols
stylesheets
controllers
views
assets
marvinjs
wopi
steps/attachments
config/locales
|
|
@ -1,3 +1,10 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#595959" d="M15.875 6l8.875 4.438v7L23 15.625v-4.063l-7.125-3.563-7.125 3.563v9.375l5.625 2.813-.75 1.563L7 22V10.437L15.875 6zm-.813 4l.875-.5 6.125 3.063v.938l-7-3.501zm-4.5 10.437l-.938-.438v-7.563l.938-.438v8.439zm17.875 1.938c.459 0 .844.156 1.156.469.312.313.468.698.469 1.156v2.375c0 .209-.104.313-.313.313-.209 0-.313-.104-.313-.313V24c0-.25-.104-.48-.313-.688-.209-.209-.438-.313-.688-.313h-1v1c0 .25-.115.375-.344.375-.23 0-.344-.125-.344-.375v-1.313a.974.974 0 0 0-.281-.719.974.974 0 0 0-.719-.281h-1v1.688c0 .209-.115.313-.344.313-.23 0-.344-.104-.344-.313v-1.375c0-.25-.094-.48-.281-.688a.923.923 0 0 0-.719-.313h-1v3c0 .25-.104.375-.313.375-.209 0-.313-.125-.313-.375v-6c0-.25-.104-.48-.313-.688a.989.989 0 0 0-.719-.313c-.27 0-.5.104-.688.313a1.002 1.002 0 0 0-.281.688v8.375c0 .209-.115.313-.344.313-.23 0-.344-.104-.344-.313V25.31l-.938-.438c-.417-.209-.833-.24-1.25-.094-.417.146-.73.427-.938.844l-.188.25c-.083.209-.02.355.188.438.375.209.802.459 1.281.75.479.291 1.083.781 1.813 1.469.73.688 1.115 1.323 1.156 1.906.042.25-.041.375-.25.375h-.063c-.209 0-.313-.083-.313-.25-.083-.625-.563-1.282-1.438-1.969s-1.709-1.24-2.5-1.656a.95.95 0 0 1-.5-.594 1.015 1.015 0 0 1 .063-.781l.125-.25c.292-.583.74-.98 1.344-1.188a2.215 2.215 0 0 1 1.781.125l.625.313v-6.563c0-.459.167-.844.5-1.156.333-.312.73-.468 1.188-.469.459 0 .844.156 1.156.469.312.313.468.699.469 1.156v2.375h1c.583 0 1.042.208 1.375.625h1.313c.417 0 .771.125 1.063.375.292.25.48.583.563 1h1.063l.005.003z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path fill="#404048" fill-rule="evenodd" d="M7.995 1.732L3 4.616v5.768l3.297 1.903c.327.189.462.59.317.938-.174.418-.675.588-1.067.362L2.25 11.683c-.464-.268-.75-.763-.75-1.299V4.616c0-.536.286-1.031.75-1.299L7.245.433c.464-.268 1.036-.268 1.5 0l4.995 2.884c.464.268.75.763.75 1.299v2.886c0 .483-.569.742-.933.423l-.375-.328c-.122-.107-.192-.261-.192-.423V4.616L7.995 1.732zM4.5 4.5l-.75.375v5.25l.75.375v-6zm7.909.654l-.05.837-5.197-3 .7-.462 4.547 2.625zM10.875 8.25c.207 0 .375.168.375.375v3.75c0 .207.168.375.375.375s.375-.168.375-.375V12h.3c.248 0 .45.201.45.45v.675c0 .207.168.375.375.375s.375-.168.375-.375v-.375h.3c.248 0 .45.201.45.45v.675c0 .207.168.375.375.375s.375-.168.375-.375V13.5c.414 0 .75.336.75.75v1.875c0 .207.168.375.375.375s.375-.168.375-.375V14.25c0-.828-.672-1.5-1.5-1.5h-.087c-.178-.44-.61-.75-1.113-.75h-.387c-.178-.44-.61-.75-1.113-.75H12V8.625c0-.621-.504-1.125-1.125-1.125S9.75 8.004 9.75 8.625v4.655c-1.079-.582-2.334.23-2.59 1.086-.05.173-.043.528.173.638.871.442 1.265.756 1.71 1.123.487.4.663.857.707 1.487.015.206.18.375.387.375.207 0 .377-.169.363-.375-.05-.736-.256-1.063-.55-1.488-.313-.451-1-.974-1.904-1.426-.135-.068-.207-.227-.124-.353.297-.458.964-.736 1.512-.384l.316.19v.472c0 .207.168.375.375.375s.375-.168.375-.375v-6c0-.207.168-.375.375-.375z" clip-rule="evenodd"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0H18V18H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before 
(image error) Size: 1.6 KiB After 
(image error) Size: 1.6 KiB
|
|
|
@ -328,9 +328,11 @@
|
|||
function initAssetViewModeToggle(){
|
||||
$('.attachments-actions').on('click', '.attachments-view-mode', function () {
|
||||
var viewModeBtn = $(this);
|
||||
$.post(viewModeBtn.data('url'), {
|
||||
$.post(viewModeBtn.closest('.dropdown-menu').data('view-mode-url'), {
|
||||
assets_view_mode: viewModeBtn.data('assets-view-mode')
|
||||
}, function(result) {
|
||||
viewModeBtn.closest('.dropdown-menu').find('.attachments-view-mode').removeClass('selected');
|
||||
viewModeBtn.addClass('selected');
|
||||
viewModeBtn.closest('.step').find('.attachments').html(result.html)
|
||||
})
|
||||
})
|
||||
|
|
@ -630,15 +632,16 @@
|
|||
|
||||
// Reorder attachments
|
||||
function reorderAttachmentsInit() {
|
||||
$('.attachments-order').on('click', '.change-order', function(e){
|
||||
var orderDropdown = $(this).closest('.attachments-order');
|
||||
$('.attachments-actions').on('click', '.change-order', function(e){
|
||||
var orderDropdown = $(this).closest('.dropdown-menu');
|
||||
var assetsContainer = $(`.attachments[data-step-id=${orderDropdown.data('step-id')}]`)
|
||||
var order = $(this).data('order');
|
||||
e.preventDefault();
|
||||
orderDropdown.find('.selected-order').html($(this).text());
|
||||
assetsContainer.data('order', order);
|
||||
orderDropdown.find('.change-order').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
assetsContainer.trigger('reorder');
|
||||
$.post(orderDropdown.data('state-save-path'), {
|
||||
$.post(orderDropdown.data('state-save-url'), {
|
||||
assets: { order: order }
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -143,28 +143,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
button.new-marvinjs-upload-button {
|
||||
padding: 1px 16px !important;
|
||||
|
||||
.new-marvinjs-upload-button {
|
||||
.new-marvinjs-upload-icon {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.new-marvinjs-upload-button {
|
||||
|
||||
.new-marvinjs-upload-icon {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin-left: -9px;
|
||||
width: 24px;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -57,9 +57,11 @@
|
|||
|
||||
// Create wopi file
|
||||
.create-wopi-file-btn {
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
height: 20px;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,14 +17,12 @@
|
|||
|
||||
.fas {
|
||||
padding-right: .5em;
|
||||
width: 1.75em;
|
||||
}
|
||||
|
||||
.create-wopi-file-btn {
|
||||
.create-wopi-file-btn,
|
||||
.new-marvinjs-upload-button {
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
.fas,
|
||||
img {
|
||||
color: inherit;
|
||||
margin-right: 5px;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@
|
|||
|
||||
.attachment-preview {
|
||||
border-radius: $border-radius-default;
|
||||
color: $color-volcano;
|
||||
height: 14em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -308,10 +309,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.attachments-order {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.attachments-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -322,18 +319,45 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.attachments-order {
|
||||
color: $color-silver-chalice;
|
||||
min-width: 140px;
|
||||
}
|
||||
.dropdown-attachment-options {
|
||||
@include font-button;
|
||||
min-width: 200px;
|
||||
|
||||
.btn-default {
|
||||
border: 0;
|
||||
color: inherit;
|
||||
margin-left: 10px;
|
||||
.divider-label {
|
||||
@include font-small;
|
||||
color: $color-alto;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: inherit;
|
||||
a {
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.change-order {
|
||||
padding-left: 2.75em;
|
||||
|
||||
&.selected:after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments-view-mode {
|
||||
.fas {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
&.selected:after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -231,7 +231,10 @@ class StepsController < ApplicationController
|
|||
@step.assets.update_all(view_mode: @step.assets_view_mode)
|
||||
end
|
||||
@step.assets.each do |asset|
|
||||
html += render_to_string(partial: 'assets/asset.html.erb', locals: { asset: asset })
|
||||
html += render_to_string(partial: 'assets/asset.html.erb', locals: {
|
||||
asset: asset,
|
||||
gallery_view_id: @step.id
|
||||
})
|
||||
end
|
||||
render json: { html: html }, status: :ok
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<button
|
||||
class="btn btn-light new-marvinjs-upload-button"
|
||||
data-object-id="<%= element_id %>"
|
||||
data-object-type="<%= element_type %>"
|
||||
data-marvin-url="<%= marvin_js_assets_path %>"
|
||||
data-sketch-container="<%= sketch_container %>"
|
||||
>
|
||||
<span class="new-marvinjs-upload-icon">
|
||||
<%= image_tag 'icon_small/marvinjs.svg' %>
|
||||
</span>
|
||||
<%= t('marvinjs.new_button') %>
|
||||
</button>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<li
|
||||
class="new-marvinjs-upload-button"
|
||||
data-object-id="<%= element_id %>"
|
||||
data-object-type="<%= element_type %>"
|
||||
data-marvin-url="<%= marvin_js_assets_path %>"
|
||||
data-sketch-container="<%= sketch_container %>"
|
||||
>
|
||||
<span class="new-marvinjs-upload-icon">
|
||||
<%= image_tag 'icon_small/marvinjs.svg' %>
|
||||
</span>
|
||||
<%= t('marvinjs.new_li_button') %>
|
||||
<li>
|
||||
<a
|
||||
class="new-marvinjs-upload-button"
|
||||
data-object-id="<%= element_id %>"
|
||||
data-object-type="<%= element_type %>"
|
||||
data-marvin-url="<%= marvin_js_assets_path %>"
|
||||
data-sketch-container="<%= sketch_container %>"
|
||||
>
|
||||
<span class="new-marvinjs-upload-icon">
|
||||
<%= image_tag 'icon_small/marvinjs.svg' %>
|
||||
</span>
|
||||
<%= t('marvinjs.new_li_button') %>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<% if wopi_enabled? %>
|
||||
<%= link_to create_wopi_file_path,
|
||||
class: 'btn btn-light create-wopi-file-btn',
|
||||
target: '_blank',
|
||||
title: 'Create_new_file',
|
||||
data: { 'id': element_id, 'type': element_type, } do %>
|
||||
<span class="new-asset-upload-button">
|
||||
<%= image_tag 'office/office.svg' %>
|
||||
<%=t 'assets.create_wopi_file.button_text' %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -11,34 +11,48 @@
|
|||
</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="attachemnts-header pull-right">
|
||||
<% if !(preview) && (can_manage_protocol_in_module?(@protocol) ||
|
||||
<div class="actions">
|
||||
<div class="dropdown sci-dropdown">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownAttachmentsOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span>Manage</span>
|
||||
<span class="caret pull-right"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right dropdown-attachment-options"
|
||||
aria-labelledby="dropdownAttachmentsOptions"
|
||||
data-view-mode-url="<%= update_asset_view_mode_step_path(step) %>"
|
||||
data-step-id="<%= step.id %>"
|
||||
data-state-save-url="<%= update_view_state_step_path(step.id) %>">
|
||||
<% if !(preview) && (can_manage_protocol_in_module?(@protocol) ||
|
||||
can_manage_protocol_in_repository?(@protocol)) %>
|
||||
<%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step', sketch_container: ".attachments[data-step-id=#{step.id}]" } %>
|
||||
<%= render partial: '/assets/wopi/create_wopi_file_button.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step' } %>
|
||||
<% end %>
|
||||
<div class="dropdown attachments-order" data-step-id="<%= step.id %>" data-state-save-path="<%= update_view_state_step_path(step.id) %>">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span class="selected-order">
|
||||
<%= t("general.sort.#{current_order}_html") %>
|
||||
</span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="sortMenu" >
|
||||
<% ['new', 'old', 'atoz', 'ztoa'].each do |sort| %>
|
||||
<li>
|
||||
<a data-order="<%= sort %>" class="change-order"><%= t("general.sort.#{sort}_html") %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<i class="fas fa-desktop attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="inline"></i>
|
||||
<i class="fas fa-list attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="list"></i>
|
||||
<i class="fas fa-th-large attachments-view-mode" data-url="<%= update_asset_view_mode_step_path(step) %>" data-assets-view-mode="thumbnail"></i>
|
||||
<li class="divider-label"><%= t("protocols.steps.attachments.add") %></li>
|
||||
<li>
|
||||
<%= render partial: '/assets/marvinjs/create_marvin_sketch_li.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step', sketch_container: ".attachments[data-step-id=#{step.id}]" } %>
|
||||
</li>
|
||||
<li>
|
||||
<%= render partial: '/assets/wopi/create_wopi_file_li.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step' } %>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<% end %>
|
||||
<li class="divider-label"><%= t("protocols.steps.attachments.sort_by") %></li>
|
||||
<% ['new', 'old', 'atoz', 'ztoa'].each do |sort| %>
|
||||
<li>
|
||||
<a data-order="<%= sort %>" class="action-link change-order <%= 'selected' if current_order == sort %>">
|
||||
<%= t("general.sort_new.#{sort}") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li class="divider-label"><%= t("protocols.steps.attachments.attachments_view_mode") %></li>
|
||||
<% ['inline', 'thumbnail', 'list'].each do |view_mode| %>
|
||||
<li>
|
||||
<a class="attachments-view-mode action-link <%= 'selected' if view_mode == step.assets_view_mode %>" data-assets-view-mode="<%= view_mode %>">
|
||||
<%= t("protocols.steps.attachments.view_mode.#{view_mode}_html") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2126,11 +2126,18 @@ en:
|
|||
uncomplete_title: "Uncomplete step"
|
||||
attachments:
|
||||
modified_label: "Modified:"
|
||||
add: "ADD"
|
||||
sort_by: "SORT BY"
|
||||
attachments_view_mode: "ALL ATTACHMENTS VIEW SIZE"
|
||||
sort:
|
||||
new_html: "Newest first ↓"
|
||||
old_html: "Oldest first ↑"
|
||||
atoz_html: "Name ↓"
|
||||
ztoa_html: "Name ↑"
|
||||
view_mode:
|
||||
inline_html: "<i class=\"fas fa-desktop\"></i> Extra large"
|
||||
thumbnail_html: "<i class=\"fas fa-th-large\"></i> Medium"
|
||||
list_html: "<i class=\"fas fa-list\"></i> List"
|
||||
new:
|
||||
add_step_title: "Add new step"
|
||||
tab_checklists: "Checklists"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue