diff --git a/app/assets/images/icon_small/marvinjs.svg b/app/assets/images/icon_small/marvinjs.svg index 7f4c24fbe..a39a2016d 100644 --- a/app/assets/images/icon_small/marvinjs.svg +++ b/app/assets/images/icon_small/marvinjs.svg @@ -1,3 +1,10 @@ - - + + + + + + + + + diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index fd9d89d00..2460cb782 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -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 } }); }) diff --git a/app/assets/stylesheets/marvinjs.scss b/app/assets/stylesheets/marvinjs.scss index 21c809f1c..e175bae8d 100644 --- a/app/assets/stylesheets/marvinjs.scss +++ b/app/assets/stylesheets/marvinjs.scss @@ -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%; diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index b82e1fc79..0ca5ed9b0 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -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; } } diff --git a/app/assets/stylesheets/my_modules/results/index.scss b/app/assets/stylesheets/my_modules/results/index.scss index 9594ff981..b62910335 100644 --- a/app/assets/stylesheets/my_modules/results/index.scss +++ b/app/assets/stylesheets/my_modules/results/index.scss @@ -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; - } } } } diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss index a3058c2f3..c34c2bb05 100644 --- a/app/assets/stylesheets/shared_styles/elements/buttons.scss +++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss @@ -19,7 +19,7 @@ .fas, img { color: inherit; - margin-right: 5px; + margin-right: .25em; } &:hover { diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 4a6fac336..7968a405b 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -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; + } } } } diff --git a/app/controllers/steps_controller.rb b/app/controllers/steps_controller.rb index e39f31e4d..7780bebc6 100644 --- a/app/controllers/steps_controller.rb +++ b/app/controllers/steps_controller.rb @@ -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 diff --git a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb deleted file mode 100644 index dcb4baa54..000000000 --- a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb +++ /dev/null @@ -1,12 +0,0 @@ - - <%= image_tag 'icon_small/marvinjs.svg' %> - - <%= t('marvinjs.new_button') %> - diff --git a/app/views/assets/marvinjs/_create_marvin_sketch_li.html.erb b/app/views/assets/marvinjs/_create_marvin_sketch_li.html.erb index 4941f2e09..bb6877709 100644 --- a/app/views/assets/marvinjs/_create_marvin_sketch_li.html.erb +++ b/app/views/assets/marvinjs/_create_marvin_sketch_li.html.erb @@ -1,12 +1,14 @@ -
  • - - <%= image_tag 'icon_small/marvinjs.svg' %> - - <%= t('marvinjs.new_li_button') %> +
  • + + + <%= image_tag 'icon_small/marvinjs.svg' %> + + <%= t('marvinjs.new_li_button') %> +
    • diff --git a/app/views/assets/wopi/_create_wopi_file_button.html.erb b/app/views/assets/wopi/_create_wopi_file_button.html.erb deleted file mode 100644 index bf8fb53a5..000000000 --- a/app/views/assets/wopi/_create_wopi_file_button.html.erb +++ /dev/null @@ -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 %> - - <%= image_tag 'office/office.svg' %> - <%=t 'assets.create_wopi_file.button_text' %> - - <% end %> -<% end %> diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index bd3c524f7..0c45382c6 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -11,34 +11,48 @@ -
    -
    - <% if !(preview) && (can_manage_protocol_in_module?(@protocol) || +
    +
    + +
      + <% 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 %> -
      - - -
      - - - - +
    • <%= t("protocols.steps.attachments.add") %>
      • +
    • + <%= 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}]" } %> +
      • +
    • + <%= render partial: '/assets/wopi/create_wopi_file_li.html.erb', + locals: { element_id: step.id, element_type: 'Step' } %> +
      • + + <% end %> +
    • <%= t("protocols.steps.attachments.sort_by") %>
      • + <% ['new', 'old', 'atoz', 'ztoa'].each do |sort| %> +
    • + + <%= t("general.sort_new.#{sort}") %> + +
      • + <% end %> + +
    • <%= t("protocols.steps.attachments.attachments_view_mode") %>
      • + <% ['inline', 'thumbnail', 'list'].each do |view_mode| %> +
    • + + <%= t("protocols.steps.attachments.view_mode.#{view_mode}_html") %> + +
      • + <% end %> +
    diff --git a/config/locales/en.yml b/config/locales/en.yml index 523ad9e7d..356d6967a 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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: " Extra large" + thumbnail_html: " Medium" + list_html: " List" new: add_step_title: "Add new step" tab_checklists: "Checklists"