From 21e4dcd96a24474895fd131483332262f8099fbf Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 25 Aug 2020 13:22:36 +0200 Subject: [PATCH 01/35] Add wopi preview for office files --- .../javascripts/sitewide/file_preview.js | 27 +++++++++++-------- app/assets/stylesheets/themes/scinote.scss | 12 ++++++++- app/controllers/assets_controller.rb | 1 + app/utilities/wopi_util.rb | 2 +- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js index 5edc691b4..4f3cd6d32 100644 --- a/app/assets/javascripts/sitewide/file_preview.js +++ b/app/assets/javascripts/sitewide/file_preview.js @@ -429,7 +429,7 @@ var FilePreviewModal = (function() { } }).done(function() { closeEditor(); - + }); if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); }); @@ -457,16 +457,21 @@ var FilePreviewModal = (function() { link.attr('data-status', 'asset-present'); if (data.type === 'previewable') { animateSpinner('.file-preview-container', false); - modal.find('.file-preview-container') - .append($('') - .css('opacity', 0) - .attr('src', data['large-preview-url']) - .attr('alt', name) - .on('error', ActiveStoragePreviews.reCheckPreview) - .on('load', ActiveStoragePreviews.showPreview) - .click(function(ev) { - ev.stopPropagation(); - })); + if (data['wopi-preview-url']) { + modal.find('.file-preview-container') + .html(``); + } else { + modal.find('.file-preview-container') + .append($('') + .css('opacity', 0) + .attr('src', data['large-preview-url']) + .attr('alt', name) + .on('error', ActiveStoragePreviews.reCheckPreview) + .on('load', ActiveStoragePreviews.showPreview) + .click(function(ev) { + ev.stopPropagation(); + })); + } if (!readOnly && data.editable) { modal.find('.file-edit-link').css('display', ''); modal.find('.file-edit-link').off().click(function(ev) { diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 42f54a018..3543f3d9b 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1464,6 +1464,10 @@ ul.content-activities { color: $color-white; height: 100%; width: auto; + + .modal-body { + width: 100%; + } } .file-preview-container { @@ -1475,7 +1479,7 @@ ul.content-activities { height: 100%; justify-content: center; text-align: center; - width: 60%; + width: 100%; &.processing { background-image: url("/images/medium/processing.gif"); @@ -1487,6 +1491,12 @@ ul.content-activities { color: $color-black; margin: 30px 0; } + + .wopi-file-preview { + border: 0; + height: 100%; + width: 100%; + } } img { diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index c1a31a88e..ba7a45ffe 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -60,6 +60,7 @@ class AssetsController < ApplicationController if wopi_enabled? && wopi_file?(@asset) edit_supported, title = wopi_file_edit_button_status + response_json['wopi-preview-url'] = @asset.get_action_url(current_user, 'embedview') response_json['wopi-controls'] = render_to_string( partial: 'assets/wopi/file_wopi_controls.html.erb', locals: { diff --git a/app/utilities/wopi_util.rb b/app/utilities/wopi_util.rb index 2ed5ebb9e..645e9b4c0 100644 --- a/app/utilities/wopi_util.rb +++ b/app/utilities/wopi_util.rb @@ -55,7 +55,7 @@ module WopiUtil wopi_app.save! app.xpath('action').each do |action| name = action.xpath('@name').first.value - next unless %w(view edit editnew wopitest).include?(name) + next unless %w(view edit editnew embedview wopitest).include?(name) wopi_action = WopiAction.new wopi_action.action = name From 4eebfa54613ac71af2afc900d8f33ffd3799e873 Mon Sep 17 00:00:00 2001 From: Urban Rotnik Date: Fri, 28 Aug 2020 11:05:52 +0200 Subject: [PATCH 02/35] Controller action for card inline preview --- app/assets/javascripts/protocols/steps.js.erb | 22 ++++++++++ app/controllers/assets_controller.rb | 22 ++++++++++ app/models/asset.rb | 8 ++++ app/views/shared/_asset_placeholder.html.erb | 2 +- config/routes.rb | 1 + spec/controllers/assets_controller_spec.rb | 40 +++++++++++++++++++ 6 files changed, 94 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index 8f96b177b..c9dbcd9e2 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -380,6 +380,27 @@ }); } + function initPreviewToggle(){ + $('.attachment-placeholder').on('click', '.dataPreviewAction', function (e) { + var view_mode = $(this).data('preview-type'); + var asset_id = $(this).data('asset-id'); + e.preventDefault(); + + $.ajax({ + url: `/files/${asset_id}/toggle_view_mode`, + type: "PATCH", + dataType: "json", + data: { asset: { view_mode: view_mode }}, + success: function (data) { + console.log(data); + }, + error: function (data) { + console.log(data); + } + }); + }); + } + function initCallBacks() { if (typeof(applyCreateWopiFileCallback) === 'function') applyCreateWopiFileCallback(); applyCheckboxCallBack(); @@ -389,6 +410,7 @@ applyCollapseLinkCallBack(); initDeleteStep(); TinyMCE.highlight(); + initPreviewToggle(); } /* diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index ba7a45ffe..e8dab1b70 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -97,6 +97,24 @@ class AssetsController < ApplicationController return edit_supported, title end + def toggle_view_mode + # view_mode: card / inline + # @asset.update!(view_mode: toggle_view_mode_params[:view_mode]) + + html = if @asset.inline_card && wopi_enabled? && wopi_file?(@asset) + url = @asset.get_action_url(current_user, 'embedview') + "" + else + render_to_string(partial: 'shared/asset_placeholder.html.erb', locals: { asset: @asset, edit_page: false }) + end + + respond_to do |format| + format.json do + render json: { html: html }, status: :ok + end + end + end + def file_url return render_404 unless @asset.file.attached? @@ -300,6 +318,10 @@ class AssetsController < ApplicationController params.permit(:file) end + def toggle_view_mode_params + params.require(:asset).permit(:view_mode) + end + def asset_data_type(asset) return 'wopi' if wopi_file?(asset) return 'image' if asset.image? diff --git a/app/models/asset.rb b/app/models/asset.rb index f6ec993ec..887268fa7 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -403,6 +403,14 @@ class Asset < ApplicationRecord return convert_variant_to_base64(medium_preview) if style == :medium end + def small_card + false + end + + def inline_card + !small_card + end + private def tempdir diff --git a/app/views/shared/_asset_placeholder.html.erb b/app/views/shared/_asset_placeholder.html.erb index a9b2ace1d..34bf8544a 100644 --- a/app/views/shared/_asset_placeholder.html.erb +++ b/app/views/shared/_asset_placeholder.html.erb @@ -1,5 +1,5 @@
- + InLine
<% if asset.previewable? %> <%= image_tag asset.medium_preview, diff --git a/config/routes.rb b/config/routes.rb index 298b2ead2..8801b7687 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -640,6 +640,7 @@ Rails.application.routes.draw do get 'files/:id/file_url', to: 'assets#file_url', as: 'asset_file_url' get 'files/:id/download', to: 'assets#download', as: 'asset_download' get 'files/:id/edit', to: 'assets#edit', as: 'edit_asset' + patch 'files/:id/toggle_view_mode', to: 'assets#toggle_view_mode', as: 'toggle_view_mode' post 'files/:id/update_image', to: 'assets#update_image', as: 'update_asset_image' post 'files/create_wopi_file', diff --git a/spec/controllers/assets_controller_spec.rb b/spec/controllers/assets_controller_spec.rb index a4a853bb8..5a08b756c 100644 --- a/spec/controllers/assets_controller_spec.rb +++ b/spec/controllers/assets_controller_spec.rb @@ -67,4 +67,44 @@ describe AssetsController, type: :controller do .to(change { Activity.count }) end end + + describe 'GET asset_card' do + let(:action) { get :toggle_view_mode, params: params, format: :json } + let!(:params) do + { id: asset.id } + end + + it do + action + + expect(response).to have_http_status 200 + end + + context 'when small card' do + it do + action + + expect(response).to have_http_status 200 + # wtf, not working here?, render_to_string is returning nil + # expect(JSON.parse(response.body)['html']).to be_eql 'hellow world' + end + end + + context 'when iframe' do + before do + allow_any_instance_of(Asset).to receive(:small_card).and_return(false) + allow_any_instance_of(Asset).to receive(:get_action_url).and_return('fakeurl.com') + allow(controller).to receive(:wopi_enabled?).and_return(true) + allow(controller).to receive(:wopi_file?).and_return(true) + end + + it do + action + + expect(response).to have_http_status 200 + expect(JSON.parse(response.body)['html']) + .to be_eql '' + end + end + end end From a508b072754d9829eb81be94deabf0d0f18e7c1a Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Wed, 2 Sep 2020 15:02:56 +0200 Subject: [PATCH 03/35] Add view mode field to the Asset model [SCI-4958] --- app/models/asset.rb | 2 ++ db/migrate/20200902093234_add_view_mode_to_asset.rb | 5 +++++ db/structure.sql | 6 ++++-- 3 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 db/migrate/20200902093234_add_view_mode_to_asset.rb diff --git a/app/models/asset.rb b/app/models/asset.rb index 887268fa7..6f953e554 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -12,6 +12,8 @@ class Asset < ApplicationRecord # Lock duration set to 30 minutes LOCK_DURATION = 60 * 30 + enum view_mode: { show_as_thumbnail: 0, show_inline: 1 } + # ActiveStorage configuration has_one_attached :file diff --git a/db/migrate/20200902093234_add_view_mode_to_asset.rb b/db/migrate/20200902093234_add_view_mode_to_asset.rb new file mode 100644 index 000000000..4cd417dc6 --- /dev/null +++ b/db/migrate/20200902093234_add_view_mode_to_asset.rb @@ -0,0 +1,5 @@ +class AddViewModeToAsset < ActiveRecord::Migration[6.0] + def change + add_column :assets, :view_mode, :integer, default: 0, null: false + end +end diff --git a/db/structure.sql b/db/structure.sql index 392cd7df3..49757baaf 100644 --- a/db/structure.sql +++ b/db/structure.sql @@ -224,7 +224,8 @@ CREATE TABLE public.assets ( version integer DEFAULT 1, file_processing boolean, team_id integer, - file_image_quality integer + file_image_quality integer, + view_mode integer DEFAULT 0 NOT NULL ); @@ -7283,6 +7284,7 @@ INSERT INTO "schema_migrations" (version) VALUES ('20200622140843'), ('20200622155632'), ('20200709142830'), -('20200714082503'); +('20200714082503'), +('20200902093234'); From e4b94b582a74c1dd6ea4094b3691c9899a22f222 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 31 Aug 2020 09:23:56 +0200 Subject: [PATCH 04/35] Add dynamic render of wopi files in viewport --- app/assets/javascripts/application.js.erb | 7 + app/assets/javascripts/protocols/steps.js.erb | 62 ++++++ .../javascripts/sitewide/drag_n_drop.js | 6 +- app/assets/stylesheets/steps.scss | 186 +++++++++--------- app/assets/stylesheets/themes/scinote.scss | 25 --- app/views/shared/_asset_placeholder.html.erb | 60 +++--- app/views/steps/_empty_step.html.erb | 6 +- .../attachments/_inline_attachment.html.erb | 4 + app/views/steps/attachments/_item.html.erb | 36 ++-- .../attachments/_new_attachment.html.erb | 6 +- 10 files changed, 220 insertions(+), 178 deletions(-) create mode 100644 app/views/steps/attachments/_inline_attachment.html.erb diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index 27da2b230..0b99864f0 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -279,3 +279,10 @@ var HelperModule = (function(){ function notTurbolinksPreview() { return !document.documentElement.hasAttribute("data-turbolinks-preview"); } + +const windowScrollEvents = {}; +$(window).scroll(function() { + $.each(windowScrollEvents, function(key, scroll_function){ + scroll_function(); + }) +}) diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index c9dbcd9e2..cc1f244dd 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -715,6 +715,12 @@ ); } + function initInlineAttachment() { + $(document).on('scroll', 'body', function(){ + console.log(1) + }) + } + // On init initCallBacks(); initHandsOnTable($(document)); @@ -737,3 +743,59 @@ global.initHandsOnTable = initHandsOnTable; })(window); + + +var StepInlineAttachments = (function() { + function elementVisible(element) { + var elementRect = element.getBoundingClientRect(); + var elementHeight = $(element).height() + return elementRect.top + (elementHeight / 2) >= 0 && + elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2) + } + + function showElement(element) { + setTimeout(() => { + var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); + if (elementVisible(element) && iframeUrl) { + $(element).html(``); + $(element).addClass('active').attr('data-created-at', new Date().getTime()); + } + },500) + } + + function hideElement(element) { + var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); + if (!elementVisible(element) && iframeUrl) { + $(element).html(`
`); + $(element).removeClass('active').attr('data-created-at', null) + return true + } + return false + } + + function checkForAttachmentsState() { + $.each($('.inline-attachment-container'), function(i, element){ + showElement(element) + }) + if ($('.active-iframe-preview').length > 5){ + let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) { + return +a.dataset.createdAt - +b.dataset.createdAt; + }) + $.each(sortedIframes, function(i, element){ + if (hideElement(element)) return false + }) + } + } + + return { + init: () => { + windowScrollEvents['StepInlineAttachments'] = StepInlineAttachments.scrollEvent; + }, + scrollEvent: () => { + checkForAttachmentsState() + } + } + +})(); + +StepInlineAttachments.init(); diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js b/app/assets/javascripts/sitewide/drag_n_drop.js index 09fb99043..4d878d816 100644 --- a/app/assets/javascripts/sitewide/drag_n_drop.js +++ b/app/assets/javascripts/sitewide/drag_n_drop.js @@ -288,14 +288,14 @@ } function uploadedAssetPreview(asset, i) { - var html = `
-
+ var html = `
+
${truncateLongString(asset.name, GLOBAL_CONSTANTS.FILENAME_TRUNCATION_LENGTH)}
-
+
diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index df9d1872f..7773b0efb 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -9,6 +9,12 @@ @import "constants"; @import "mixins"; +:root { + --attachment-card-thumbnail-width: 220px; + --attachment-card-thumbnail-height: 280px; +} + + #new_step, .panel-step-attachment { ul { @@ -114,71 +120,36 @@ .attachments { display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - - .pseudo-attachment-container { - display: flex; - justify-content: center; - overflow: hidden; - - .file-preview-link { - position: relative; - } - - &.new { - order: 0 !important; - - .file-preview-link { - transition: .5s; - } - - .attachment-placeholder { - border: 1px solid $brand-primary; - - &::before { - background: $brand-primary; - border-radius: 0 5px; - bottom: 16px; - color: $color-white; - content: "NEW"; - left: 8px; - line-height: 20px; - position: absolute; - width: 50px; - } - } - } - } + grid-column-gap: 1em; + grid-row-gap: 1em; + grid-template-columns: repeat(auto-fill, minmax(var(--attachment-card-thumbnail-width), 1fr)); + grid-auto-rows: var(--attachment-card-thumbnail-height); + margin: 1em 0; } -.attachment-placeholder { +.attachment-container { @include md-card-style; - color: $color-silver-chalice; - height: 280px; - margin: 4px 8px 16px; - text-align: center; - width: 220px; + height: var(--attachment-card-thumbnail-height); + overflow: hidden; + padding: 1em; + position: relative; + width: var(--attachment-card-thumbnail-width); - a { - color: inherit; + + .file-preview-link { + display: block; + height: 100%; + width: 100%; } - &.new { - background-color: rgba(95, 95, 95, .1); - } - - .attachment-thumbnail { - display: inline-block; - height: 160px; - margin: 16px 0 5px; - overflow: hidden; - padding: 0 10px; - position: relative; + .attachment-preview { + border-radius: $border-radius-default; + height: 170px; text-align: center; + position: relative; width: 100%; img { - border-radius: 5px; max-height: 100%; max-width: 100%; } @@ -188,14 +159,13 @@ &::before, &::after { content: ""; - border-radius: 16px 0 0 16px; + border-radius: 1em 0 0 1em; display: block; - height: 32px; - right: 0; - line-height: 32px; + right: -1em; + line-height: 2em; position: absolute; - bottom: 10px; - width: 36px; + bottom: 1em; + width: 2.25em; } &::before { @@ -204,8 +174,9 @@ &::after { background-image: url("/images/icon_small/marvinjs-white.svg"); - right: 4px; - width: 32px; + height: 2.25em; + right: -.75em; + width: 2em; } } @@ -219,68 +190,63 @@ box-shadow: none; } - .attachment-label { + .attachment-label, + .attachment-metadata { background: $color-white; - color: $brand-primary; - font-family: Lato; - font-size: 16px; - height: 40px; - line-height: 18px; - margin: 0 auto; overflow: hidden; + padding-top: 1em; position: relative; + text-overflow: ellipsis; text-align: center; - top: 20px; transition: $md-transaction; - width: 190px; + white-space: nowrap; + } + + .attachment-label { + @include font-main; + margin-top: 1.5em; z-index: 2; } - .spencer-bonnet-modif { - align-items: center; + .attachment-metadata { + @include font-small; + margin-top: -4em; color: $color-silver-chalice; - display: flex; - font-family: Lato; - font-size: 12px; - height: 40px; - justify-content: center; - line-height: 15px; - margin: 0 auto 5px; - position: relative; - text-align: center; - top: -20px; - transition: $md-transaction; - width: 149px; } .remove-icon { - bottom: 15px; + bottom: .5em; cursor: pointer; display: none; - position: relative; - right: 10px; + position: absolute; + right: .5em; } &:hover { box-shadow: $md-shadow; + .file-preview-link { + text-decoration: none; + } + + .remove-icon { display: inline-block; } - .attachment-label { - top: 0; - } + .attachment-label, + .attachment-metadata { + margin-top: 0; - .spencer-bonnet-modif { - top: 0; } } &.new { background-color: rgba(95, 95, 95, .1); + order: 0 !important; - .attachment-label { + .attachment-label, + .attachment-metadata { background-color: transparent; } @@ -291,9 +257,25 @@ position: relative; } + .attachment-preview { + border: 1px solid $brand-primary; + + &::before { + background: $brand-primary; + border-radius: 0 $border-radius-default; + bottom: 0; + color: $color-white; + content: "NEW"; + left: 0; + line-height: 20px; + position: absolute; + width: 50px; + } + } + &:hover { .attachment-label { - top: 20px; + margin-top: 1.5em; } } } @@ -340,3 +322,15 @@ .expand-all-steps { margin: 0 0 15px 15px; } + +.inline-attachment-container { + @include md-card-style; + grid-column: 1/-1; + grid-row: span 2; + + .active-iframe-preview { + border: 0; + height: 100%; + width: 100%; + } +} diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 3543f3d9b..5d075aa2c 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1400,31 +1400,6 @@ ul.content-activities { } } -.attachment-thumbnail { - display: inline-block; - height: 160px; - margin: 16px 10px 5px; - overflow: hidden; - text-align: center; - width: 100%; - - img { - border-radius: 5px; - max-height: 100%; - max-width: 100%; - } - - .fas { - font-size: 100px; - line-height: 160px; - } - - &.processing { - background-image: url("/images/medium/processing.gif"); - background-position: center; - background-repeat: no-repeat; - } -} // Image preview modal .modal-file-preview { diff --git a/app/views/shared/_asset_placeholder.html.erb b/app/views/shared/_asset_placeholder.html.erb index 34bf8544a..0bb82a865 100644 --- a/app/views/shared/_asset_placeholder.html.erb +++ b/app/views/shared/_asset_placeholder.html.erb @@ -1,34 +1,30 @@ -
- InLine -
- <% if asset.previewable? %> - <%= image_tag asset.medium_preview, - onerror: 'ActiveStoragePreviews.reCheckPreview(event)', - onload: 'ActiveStoragePreviews.showPreview(event)', - style: 'opacity: 0' %> - <% else %> - - <% end %> -
-
- <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> - <%= truncate(asset.file.metadata['name'], length: Constants::FILENAME_TRUNCATION_LENGTH) %> - <% else %> - <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %> - <% end %> -
-
- <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %>
- <%= number_to_human_size(asset.file_size) %> -
- - <% if edit_page %> -
- <% unless ff.object.file.attached? && ff.object.locked? %> - <%= ff.remove_nested_fields_link do %> - - <% end %> - <% end %> -
+
+ <% if asset.previewable? %> + <%= image_tag asset.medium_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + <% end %>
+
+ <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> + <%= truncate(asset.file.metadata['name'], length: Constants::FILENAME_TRUNCATION_LENGTH) %> + <% else %> + <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %> + <% end %> +
+
+ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %>
+ <%= number_to_human_size(asset.file_size) %> +
+<% if edit_page %> +
+ <% unless ff.object.file.attached? && ff.object.locked? %> + <%= ff.remove_nested_fields_link do %> + + <% end %> + <% end %> +
+<% end %> diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb index 3dae462c0..2fc958008 100644 --- a/app/views/steps/_empty_step.html.erb +++ b/app/views/steps/_empty_step.html.erb @@ -72,8 +72,10 @@
<%= f.nested_fields_for :assets do |ff| %> - <%= render partial: 'shared/asset_placeholder.html.erb', - locals: { edit_page: true, asset: ff.object, ff: ff } %> +
+ <%= render partial: 'shared/asset_placeholder.html.erb', + locals: { edit_page: true, asset: ff.object, ff: ff } %> +
<% end %>
diff --git a/app/views/steps/attachments/_inline_attachment.html.erb b/app/views/steps/attachments/_inline_attachment.html.erb new file mode 100644 index 000000000..8569bb0fc --- /dev/null +++ b/app/views/steps/attachments/_inline_attachment.html.erb @@ -0,0 +1,4 @@ +
+
+ +
diff --git a/app/views/steps/attachments/_item.html.erb b/app/views/steps/attachments/_item.html.erb index 2fcbc4785..bc14cd7b4 100644 --- a/app/views/steps/attachments/_item.html.erb +++ b/app/views/steps/attachments/_item.html.erb @@ -1,17 +1,19 @@ - -
- <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), - class: 'file-preview-link', - id: "modal_link#{asset.id}", - data: { no_turbolink: true, - id: true, - 'preview-url': asset_file_preview_path(asset), - 'order-atoz': order_atoz, - 'order-ztoa': order_ztoa, - 'order-new': i, - 'order-old': assets_count - i, - } do %> - - <%= render partial: 'shared/asset_placeholder.html.erb', locals: { edit_page: false, asset: asset } %> - <% end %> -
+<% if wopi_enabled? && wopi_file?(asset) %> + <%= render partial: 'steps/attachments/inline_attachment.html.erb', locals: { asset: asset } %> +<% else %> +
+ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), + class: 'file-preview-link', + id: "modal_link#{asset.id}", + data: { no_turbolink: true, + id: true, + 'preview-url': asset_file_preview_path(asset), + 'order-atoz': order_atoz, + 'order-ztoa': order_ztoa, + 'order-new': i, + 'order-old': assets_count - i, + } do %> + <%= render partial: 'shared/asset_placeholder.html.erb', locals: { edit_page: false, asset: asset } %> + <% end %> +
+<% end %> diff --git a/app/views/steps/attachments/_new_attachment.html.erb b/app/views/steps/attachments/_new_attachment.html.erb index a7bef3902..9425e6928 100644 --- a/app/views/steps/attachments/_new_attachment.html.erb +++ b/app/views/steps/attachments/_new_attachment.html.erb @@ -1,9 +1,9 @@ -
-
+
+
<%= truncate(file_name || file_url, length: Constants::FILENAME_TRUNCATION_LENGTH) %>
-
+
From 780db9d134028c76e50ab4dbf897cf7a99fb8373 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 24 Sep 2020 17:10:36 +0200 Subject: [PATCH 05/35] Add assets view switcher --- app/assets/javascripts/protocols/steps.js.erb | 21 +++++----- .../javascripts/sitewide/file_preview.js | 1 + app/assets/stylesheets/steps.scss | 40 ++++++++++++++++++- app/controllers/assets_controller.rb | 16 +++----- app/views/shared/_asset_placeholder.html.erb | 7 ++++ .../attachments/_inline_attachment.html.erb | 20 +++++++++- app/views/steps/attachments/_item.html.erb | 4 +- 7 files changed, 84 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index cc1f244dd..b46c5762d 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -381,18 +381,19 @@ } function initPreviewToggle(){ - $('.attachment-placeholder').on('click', '.dataPreviewAction', function (e) { - var view_mode = $(this).data('preview-type'); - var asset_id = $(this).data('asset-id'); + $('.attachments').on('click', '.change-preview-type', function (e) { + var viewMode = $(this).data('preview-type'); + var assetId = $(this).data('asset-id'); e.preventDefault(); - + e.stopPropagation(); $.ajax({ - url: `/files/${asset_id}/toggle_view_mode`, + url: `/files/${assetId}/toggle_view_mode`, type: "PATCH", dataType: "json", - data: { asset: { view_mode: view_mode }}, + data: { asset: { view_mode: viewMode }}, success: function (data) { - console.log(data); + $(`.step-asset[data-asset-id=${assetId}]`).replaceWith(data.html); + FilePreviewModal.init(); }, error: function (data) { console.log(data); @@ -757,7 +758,8 @@ var StepInlineAttachments = (function() { setTimeout(() => { var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); if (elementVisible(element) && iframeUrl) { - $(element).html(``); + $(element).find('.iframe-placeholder') + .replaceWith(``); $(element).addClass('active').attr('data-created-at', new Date().getTime()); } },500) @@ -766,7 +768,8 @@ var StepInlineAttachments = (function() { function hideElement(element) { var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); if (!elementVisible(element) && iframeUrl) { - $(element).html(`
`); + $(element).find('iframe') + .replaceWith(`
`); $(element).removeClass('active').attr('data-created-at', null) return true } diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js index 4f3cd6d32..d31b942d8 100644 --- a/app/assets/javascripts/sitewide/file_preview.js +++ b/app/assets/javascripts/sitewide/file_preview.js @@ -18,6 +18,7 @@ var FilePreviewModal = (function() { $('.file-preview-link').off('click'); $('.file-preview-link').click(function(e) { + if ($(e.target.offsetParent).hasClass('change-preview-type')) return; e.preventDefault(); name = $(this).find('.attachment-label').text(); url = $(this).data('preview-url'); diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 7773b0efb..5efef8a6a 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -142,6 +142,19 @@ width: 100%; } + .show-inline { + background: $color-white; + border-radius: $border-radius-default; + line-height: 1em; + padding: .5em; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: 2em; + z-index: 10; + } + .attachment-preview { border-radius: $border-radius-default; height: 170px; @@ -330,7 +343,32 @@ .active-iframe-preview { border: 0; - height: 100%; + height: calc(100% - 4em); width: 100%; } + + .header { + align-items: center; + display: flex; + height: 4em; + padding: 0 1em; + + .show-as-thumbnail { + cursor: pointer; + margin-left: auto; + } + + .file-name { + @include font-main; + color: $brand-primary; + } + + .file-metadata { + @include font-small; + color: $color-silver-chalice; + display: grid; + grid-column-gap: 1em; + grid-template-columns: max-content max-content; + } + } } diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index e8dab1b70..57a4dc252 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -16,7 +16,7 @@ class AssetsController < ApplicationController before_action :load_vars, except: :create_wopi_file before_action :check_read_permission, except: :edit - before_action :check_edit_permission, only: :edit + before_action :check_edit_permission, only: [:edit, :toggle_view_mode] def file_preview file_type = @asset.file.metadata[:asset_type] || (@asset.previewable? ? 'previewable' : false) @@ -98,16 +98,10 @@ class AssetsController < ApplicationController end def toggle_view_mode - # view_mode: card / inline - # @asset.update!(view_mode: toggle_view_mode_params[:view_mode]) - - html = if @asset.inline_card && wopi_enabled? && wopi_file?(@asset) - url = @asset.get_action_url(current_user, 'embedview') - "" - else - render_to_string(partial: 'shared/asset_placeholder.html.erb', locals: { asset: @asset, edit_page: false }) - end - + @asset.update!(view_mode: toggle_view_mode_params[:view_mode]) + html = render_to_string(partial: 'steps/attachments/item.html.erb', + locals: { asset: @asset, i: 999, assets_count: 999, order_atoz: 999, order_ztoa: 999}) + # Sorting will be refactored later respond_to do |format| format.json do render json: { html: html }, status: :ok diff --git a/app/views/shared/_asset_placeholder.html.erb b/app/views/shared/_asset_placeholder.html.erb index 0bb82a865..b27056929 100644 --- a/app/views/shared/_asset_placeholder.html.erb +++ b/app/views/shared/_asset_placeholder.html.erb @@ -1,3 +1,10 @@ +<% if wopi_enabled? && wopi_file?(asset) %> +
+ +
+<% end %>
<% if asset.previewable? %> <%= image_tag asset.medium_preview, diff --git a/app/views/steps/attachments/_inline_attachment.html.erb b/app/views/steps/attachments/_inline_attachment.html.erb index 8569bb0fc..a535e71ae 100644 --- a/app/views/steps/attachments/_inline_attachment.html.erb +++ b/app/views/steps/attachments/_inline_attachment.html.erb @@ -1,4 +1,20 @@ -
-
+
+
+
+
+ <%= asset.file_name %> +
+
+ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> + <%= number_to_human_size(asset.file_size) %> +
+
+
+ +
+
+
diff --git a/app/views/steps/attachments/_item.html.erb b/app/views/steps/attachments/_item.html.erb index bc14cd7b4..aad0f2005 100644 --- a/app/views/steps/attachments/_item.html.erb +++ b/app/views/steps/attachments/_item.html.erb @@ -1,7 +1,7 @@ -<% if wopi_enabled? && wopi_file?(asset) %> +<% if wopi_enabled? && wopi_file?(asset) && asset.show_inline? %> <%= render partial: 'steps/attachments/inline_attachment.html.erb', locals: { asset: asset } %> <% else %> -
+
<%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: 'file-preview-link', id: "modal_link#{asset.id}", From 70a0da17b208b7a83d758a031a1a91a6fddf68bd Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 24 Sep 2020 17:12:53 +0200 Subject: [PATCH 06/35] Fix markup --- app/views/steps/attachments/_inline_attachment.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/steps/attachments/_inline_attachment.html.erb b/app/views/steps/attachments/_inline_attachment.html.erb index a535e71ae..f2d344e70 100644 --- a/app/views/steps/attachments/_inline_attachment.html.erb +++ b/app/views/steps/attachments/_inline_attachment.html.erb @@ -15,6 +15,6 @@
-
+
From 1ed65eddfa0c1d798140671718477e034f5bef5a Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 25 Sep 2020 15:06:09 +0200 Subject: [PATCH 07/35] Move ordering to front-end --- app/assets/javascripts/protocols/steps.js.erb | 52 ++++++++++++---- app/assets/stylesheets/steps.scss | 62 ++++++++----------- app/controllers/assets_controller.rb | 50 ++++----------- .../marvin_js_assets_controller.rb | 16 ++--- app/helpers/application_helper.rb | 2 +- app/models/asset.rb | 8 --- app/views/assets/_asset.html.erb | 5 ++ .../_asset_inline.html.erb} | 7 ++- .../{shared => assets}/_asset_link.html.erb | 0 app/views/assets/_asset_thumbnail.html.erb | 40 ++++++++++++ .../_new_asset.html.erb} | 0 .../_result_user_generated.html.erb | 3 +- app/views/shared/_asset_placeholder.html.erb | 37 ----------- app/views/steps/_empty_step.html.erb | 6 +- .../steps/attachments/_edit_item.html.erb | 30 +++++++++ app/views/steps/attachments/_item.html.erb | 19 ------ app/views/steps/attachments/_list.html.erb | 26 ++++---- 17 files changed, 178 insertions(+), 185 deletions(-) create mode 100644 app/views/assets/_asset.html.erb rename app/views/{steps/attachments/_inline_attachment.html.erb => assets/_asset_inline.html.erb} (76%) rename app/views/{shared => assets}/_asset_link.html.erb (100%) create mode 100644 app/views/assets/_asset_thumbnail.html.erb rename app/views/{steps/attachments/_new_attachment.html.erb => assets/_new_asset.html.erb} (100%) delete mode 100644 app/views/shared/_asset_placeholder.html.erb create mode 100644 app/views/steps/attachments/_edit_item.html.erb delete mode 100644 app/views/steps/attachments/_item.html.erb diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index b46c5762d..429cd376c 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -394,6 +394,7 @@ success: function (data) { $(`.step-asset[data-asset-id=${assetId}]`).replaceWith(data.html); FilePreviewModal.init(); + $(`.step-asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder'); }, error: function (data) { console.log(data); @@ -412,6 +413,7 @@ initDeleteStep(); TinyMCE.highlight(); initPreviewToggle(); + reorderAttachmentsInit(); } /* @@ -700,20 +702,44 @@ } // Reorder attachments - global.reorderAttachments = function reorderAtt(elem, stepId, sortType) { - var label_value = $("#dd-att-step-" + stepId + "> .dropdown-menu > li > a[data-order=" + sortType + "]").html(); - $("#dd-att-step-" + stepId + "-label").html(label_value); - $('#att-' + stepId + ' a.file-preview-link').each(function(){ - var elm = $(this) - elm.parent().css('order', elm.attr('data-order-' + sortType)); - }); + function reorderAttachmentsInit() { + $('.attachments-order').on('click', '.change-order', function(e){ + var orderDropdown = $(this).closest('.attachments-order'); + 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); + assetsContainer.trigger('reorder'); + $.post(orderDropdown.data('state-save-path'), { + assets: { order: order } + }); + }) - $.post( - $(elem).closest('.dropdown-menu').data('stateSavePath'), - { assets: { order: sortType } }, - null, - 'json', - ); + $('.attachments').on('reorder', function() { + var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .step-asset`); + var order = $(this).data('order'); + var sortedAssets = assets.sort(function(a, b) { + if (a.dataset.assetOrder == b.dataset.assetOrder) { + if (order == 'new') { + return b.dataset.assetUpdatedAt - a.dataset.assetUpdatedAt; + } if (order == 'old') { + return a.dataset.assetUpdatedAt - b.dataset.assetUpdatedAt; + } if (order == 'atoz') { + return a.dataset.assetFileName.toLowerCase() > b.dataset.assetFileName.toLowerCase() ? 1 : -1; + } if (order == 'ztoa') { + return b.dataset.assetFileName.toLowerCase() > a.dataset.assetFileName.toLowerCase() ? 1 : -1; + } + } + + return a.dataset.assetOrder > b.dataset.assetOrder ? 1 : -1 + }) + + $.each(sortedAssets, function(i, element){ + element.style.order = i + }) + }) + $('.attachments').trigger('reorder'); } function initInlineAttachment() { diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 5efef8a6a..fcebdc3df 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -5,13 +5,14 @@ // scss-lint:disable NestingDepth // scss-lint:disable SelectorFormat // scss-lint:disable ImportantRule +// scss-lint:disable Unknown @import "constants"; @import "mixins"; :root { - --attachment-card-thumbnail-width: 220px; --attachment-card-thumbnail-height: 280px; + --attachment-card-thumbnail-width: 220px; } @@ -120,16 +121,18 @@ .attachments { display: grid; + grid-auto-rows: var(--attachment-card-thumbnail-height); grid-column-gap: 1em; grid-row-gap: 1em; grid-template-columns: repeat(auto-fill, minmax(var(--attachment-card-thumbnail-width), 1fr)); - grid-auto-rows: var(--attachment-card-thumbnail-height); + justify-content: center; margin: 1em 0; } .attachment-container { @include md-card-style; height: var(--attachment-card-thumbnail-height); + justify-self: center; overflow: hidden; padding: 1em; position: relative; @@ -158,8 +161,8 @@ .attachment-preview { border-radius: $border-radius-default; height: 170px; - text-align: center; position: relative; + text-align: center; width: 100%; img { @@ -171,13 +174,14 @@ &::before, &::after { - content: ""; border-radius: 1em 0 0 1em; + bottom: 1em; + content: ""; display: block; - right: -1em; + height: 2em; line-height: 2em; position: absolute; - bottom: 1em; + right: -1em; width: 2.25em; } @@ -209,13 +213,13 @@ overflow: hidden; padding-top: 1em; position: relative; - text-overflow: ellipsis; text-align: center; + text-overflow: ellipsis; transition: $md-transaction; white-space: nowrap; } - .attachment-label { + .attachment-label { @include font-main; margin-top: 1.5em; z-index: 2; @@ -223,8 +227,8 @@ .attachment-metadata { @include font-small; - margin-top: -4em; color: $color-silver-chalice; + margin-top: -4em; } .remove-icon { @@ -255,13 +259,7 @@ } &.new { - background-color: rgba(95, 95, 95, .1); - order: 0 !important; - - .attachment-label, - .attachment-metadata { - background-color: transparent; - } + border: 1px solid $brand-primary; .dnd-error { bottom: 15px; @@ -270,26 +268,18 @@ position: relative; } - .attachment-preview { - border: 1px solid $brand-primary; - - &::before { - background: $brand-primary; - border-radius: 0 $border-radius-default; - bottom: 0; - color: $color-white; - content: "NEW"; - left: 0; - line-height: 20px; - position: absolute; - width: 50px; - } - } - - &:hover { - .attachment-label { - margin-top: 1.5em; - } + &::before { + background: $brand-primary; + border-radius: 0 $border-radius-default; + bottom: 0; + color: $color-white; + content: "NEW"; + left: 0; + line-height: 20px; + position: absolute; + text-align: center; + width: 50px; + z-index: 2; } } } diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 57a4dc252..b562f976e 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -16,7 +16,7 @@ class AssetsController < ApplicationController before_action :load_vars, except: :create_wopi_file before_action :check_read_permission, except: :edit - before_action :check_edit_permission, only: [:edit, :toggle_view_mode] + before_action :check_edit_permission, only: %i(edit toggle_view_mode) def file_preview file_type = @asset.file.metadata[:asset_type] || (@asset.previewable? ? 'previewable' : false) @@ -98,13 +98,13 @@ class AssetsController < ApplicationController end def toggle_view_mode - @asset.update!(view_mode: toggle_view_mode_params[:view_mode]) - html = render_to_string(partial: 'steps/attachments/item.html.erb', - locals: { asset: @asset, i: 999, assets_count: 999, order_atoz: 999, order_ztoa: 999}) - # Sorting will be refactored later - respond_to do |format| - format.json do - render json: { html: html }, status: :ok + @asset.view_mode = toggle_view_mode_params[:view_mode] + if @asset.save(touch: false) + html = render_to_string(partial: 'assets/asset.html.erb', locals: { asset: @asset }) + respond_to do |format| + format.json do + render json: { html: html }, status: :ok + end end end end @@ -162,34 +162,10 @@ class AssetsController < ApplicationController @asset.post_process_file(@asset.team) @asset.step&.protocol&.update(updated_at: Time.now) - render_html = if @asset.step - assets = @asset.step.assets - order_atoz = az_ordered_assets_index(@asset.step, @asset.id) - order_ztoa = assets.length - az_ordered_assets_index(@asset.step, @asset.id) - asset_position = @asset.step.asset_position(@asset) + render_html = if @asset.step || @asset.result render_to_string( - partial: 'steps/attachments/item.html.erb', - locals: { - asset: @asset, - i: asset_position[:pos], - assets_count: asset_position[:count], - step: @asset.step, - order_atoz: order_atoz, - order_ztoa: order_ztoa - }, - formats: :html - ) - elsif @asset.result - render_to_string( - partial: 'steps/attachments/item.html.erb', - locals: { - asset: @asset, - i: 0, - assets_count: 0, - step: nil, - order_atoz: 0, - order_ztoa: 0 - }, + partial: 'assets/asset.html.erb', + locals: { asset: @asset }, formats: :html ) else @@ -224,7 +200,7 @@ class AssetsController < ApplicationController unless asset.valid?(:wopi_file_creation) render json: { message: asset.errors - }, status: 400 and return + }, status: :bad_request and return end # Create file depending on the type @@ -264,7 +240,7 @@ class AssetsController < ApplicationController private def load_vars - @asset = Asset.find_by_id(params[:id]) + @asset = Asset.find_by(id: params[:id]) return render_404 unless @asset @assoc ||= @asset.step diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb index aa4c1e8a9..eca041604 100644 --- a/app/controllers/marvin_js_assets_controller.rb +++ b/app/controllers/marvin_js_assets_controller.rb @@ -17,15 +17,7 @@ class MarvinJsAssetsController < ApplicationController if result[:asset] && marvin_params[:object_type] == 'Step' render json: { - html: render_to_string( - partial: 'steps/attachments/item.html.erb', - locals: { asset: result[:asset], - i: 0, - assets_count: 0, - step: result[:object], - order_atoz: 0, - order_ztoa: 0 } - ) + html: render_to_string(partial: 'assets/asset.html.erb', locals: { asset: result[:asset] }) } elsif result[:asset] && marvin_params[:object_type] == 'Result' @my_module = result[:object].my_module @@ -63,7 +55,7 @@ class MarvinJsAssetsController < ApplicationController private def load_vars - @asset = current_team.assets.find_by_id(params[:id]) + @asset = current_team.assets.find_by(id: params[:id]) return render_404 unless @asset @assoc ||= @asset.step @@ -77,8 +69,8 @@ class MarvinJsAssetsController < ApplicationController end def load_create_vars - @assoc = Step.find_by_id(marvin_params[:object_id]) if marvin_params[:object_type] == 'Step' - @assoc = MyModule.find_by_id(params[:object_id]) if marvin_params[:object_type] == 'Result' + @assoc = Step.find_by(id: marvin_params[:object_id]) if marvin_params[:object_type] == 'Step' + @assoc = MyModule.find_by(id: params[:object_id]) if marvin_params[:object_type] == 'Result' if @assoc.class == Step @protocol = @assoc.protocol diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 0a7886316..4aeba141e 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -216,6 +216,6 @@ module ApplicationHelper end def wopi_enabled? - ENV['WOPI_ENABLED'] == 'true' + ENV['WOPI_ENABLED'] == 'true' || true end end diff --git a/app/models/asset.rb b/app/models/asset.rb index 6f953e554..b11d9a2f0 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -405,14 +405,6 @@ class Asset < ApplicationRecord return convert_variant_to_base64(medium_preview) if style == :medium end - def small_card - false - end - - def inline_card - !small_card - end - private def tempdir diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb new file mode 100644 index 000000000..57a278f08 --- /dev/null +++ b/app/views/assets/_asset.html.erb @@ -0,0 +1,5 @@ +<% if wopi_enabled? && wopi_file?(asset) && asset.show_inline? %> + <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset } %> +<% else %> + <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { edit_page: false, asset: asset } %> +<% end %> diff --git a/app/views/steps/attachments/_inline_attachment.html.erb b/app/views/assets/_asset_inline.html.erb similarity index 76% rename from app/views/steps/attachments/_inline_attachment.html.erb rename to app/views/assets/_asset_inline.html.erb index f2d344e70..a49d83704 100644 --- a/app/views/steps/attachments/_inline_attachment.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -1,4 +1,9 @@ -
+
diff --git a/app/views/shared/_asset_link.html.erb b/app/views/assets/_asset_link.html.erb similarity index 100% rename from app/views/shared/_asset_link.html.erb rename to app/views/assets/_asset_link.html.erb diff --git a/app/views/assets/_asset_thumbnail.html.erb b/app/views/assets/_asset_thumbnail.html.erb new file mode 100644 index 000000000..1e6f8b7f7 --- /dev/null +++ b/app/views/assets/_asset_thumbnail.html.erb @@ -0,0 +1,40 @@ +
+ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), + class: "file-preview-link", + id: "modal_link#{asset.id}", + data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> + <% if wopi_enabled? && wopi_file?(asset) %> +
+ +
+ <% end %> +
+ <% if asset.previewable? %> + <%= image_tag asset.medium_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + + <% end %> +
+
+ <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> + <%= asset.file.metadata['name'] %> + <% else %> + <%= asset.file_name %> + <% end %> +
+
+ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %>
+ <%= number_to_human_size(asset.file_size) %> +
+ <% end %> +
diff --git a/app/views/steps/attachments/_new_attachment.html.erb b/app/views/assets/_new_asset.html.erb similarity index 100% rename from app/views/steps/attachments/_new_attachment.html.erb rename to app/views/assets/_new_asset.html.erb diff --git a/app/views/my_modules/_result_user_generated.html.erb b/app/views/my_modules/_result_user_generated.html.erb index b00aa5eaf..29ac2e3a7 100644 --- a/app/views/my_modules/_result_user_generated.html.erb +++ b/app/views/my_modules/_result_user_generated.html.erb @@ -3,6 +3,5 @@ <% elsif result.is_table %> <%= render partial: "results/result_table.html.erb", locals: {result: result} %> <% elsif result.is_asset %> - <%= render partial: 'steps/attachments/item.html.erb', - locals: { asset: result.asset, i: 0, assets_count: 0, step: nil, order_atoz: 0, order_ztoa: 0 } %> + <%= render partial: 'assets/asset.html.erb', locals: { asset: result.asset } %> <% end %> diff --git a/app/views/shared/_asset_placeholder.html.erb b/app/views/shared/_asset_placeholder.html.erb deleted file mode 100644 index b27056929..000000000 --- a/app/views/shared/_asset_placeholder.html.erb +++ /dev/null @@ -1,37 +0,0 @@ -<% if wopi_enabled? && wopi_file?(asset) %> -
- -
-<% end %> -
- <% if asset.previewable? %> - <%= image_tag asset.medium_preview, - onerror: 'ActiveStoragePreviews.reCheckPreview(event)', - onload: 'ActiveStoragePreviews.showPreview(event)', - style: 'opacity: 0' %> - <% else %> - - <% end %> -
-
- <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> - <%= truncate(asset.file.metadata['name'], length: Constants::FILENAME_TRUNCATION_LENGTH) %> - <% else %> - <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %> - <% end %> -
-
- <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %>
- <%= number_to_human_size(asset.file_size) %> -
-<% if edit_page %> -
- <% unless ff.object.file.attached? && ff.object.locked? %> - <%= ff.remove_nested_fields_link do %> - - <% end %> - <% end %> -
-<% end %> diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb index 2fc958008..d7a836c7f 100644 --- a/app/views/steps/_empty_step.html.erb +++ b/app/views/steps/_empty_step.html.erb @@ -72,10 +72,8 @@
<%= f.nested_fields_for :assets do |ff| %> -
- <%= render partial: 'shared/asset_placeholder.html.erb', - locals: { edit_page: true, asset: ff.object, ff: ff } %> -
+ <%= render partial: 'steps/attachments/edit_item.html.erb', + locals: { asset: ff.object, ff: ff } %> <% end %>
diff --git a/app/views/steps/attachments/_edit_item.html.erb b/app/views/steps/attachments/_edit_item.html.erb new file mode 100644 index 000000000..a90586ff1 --- /dev/null +++ b/app/views/steps/attachments/_edit_item.html.erb @@ -0,0 +1,30 @@ +
+
+ <% if asset.previewable? %> + <%= image_tag asset.medium_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + + <% end %> +
+
+ <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> + <%= truncate(asset.file.metadata['name'], length: Constants::FILENAME_TRUNCATION_LENGTH) %> + <% else %> + <%= truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %> + <% end %> +
+
+ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %>
+ <%= number_to_human_size(asset.file_size) %> +
+ <% unless asset.locked? %> +
+ <%= ff.remove_nested_fields_link do %> + + <% end %> +
+ <% end %> +
diff --git a/app/views/steps/attachments/_item.html.erb b/app/views/steps/attachments/_item.html.erb deleted file mode 100644 index aad0f2005..000000000 --- a/app/views/steps/attachments/_item.html.erb +++ /dev/null @@ -1,19 +0,0 @@ -<% if wopi_enabled? && wopi_file?(asset) && asset.show_inline? %> - <%= render partial: 'steps/attachments/inline_attachment.html.erb', locals: { asset: asset } %> -<% else %> -
- <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), - class: 'file-preview-link', - id: "modal_link#{asset.id}", - data: { no_turbolink: true, - id: true, - 'preview-url': asset_file_preview_path(asset), - 'order-atoz': order_atoz, - 'order-ztoa': order_ztoa, - 'order-new': i, - 'order-old': assets_count - i, - } do %> - <%= render partial: 'shared/asset_placeholder.html.erb', locals: { edit_page: false, asset: asset } %> - <% end %> -
-<% end %> diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index 54b2446f9..bf6197811 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -1,4 +1,5 @@ -<% assets = ordered_assets(step) %> +<% assets = step.assets %> +<% current_order = step.current_view_state(current_user).state.dig('assets', 'sort') %>
@@ -15,23 +16,21 @@ <% 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#att-#{step.id}" } %> + 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 %> -
-
+
<% assets.each_with_index do |asset, i| %> - <% order_atoz = az_ordered_assets_index(step, asset.id) %> - <% order_ztoa = assets.length - az_ordered_assets_index(step, asset.id) %> - <%= render partial: 'steps/attachments/item.html.erb', - locals: { asset: asset, i: i, assets_count: assets.length, step: step, order_atoz: order_atoz, order_ztoa: order_ztoa } %> + <%= render partial: 'assets/asset.html.erb', locals: { asset: asset } %> <% end %>
From cd9b143bc513df9a90eb7f0fc5e069a9708e8892 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 25 Sep 2020 15:07:00 +0200 Subject: [PATCH 08/35] Fix markup --- app/helpers/application_helper.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 4aeba141e..0a7886316 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -216,6 +216,6 @@ module ApplicationHelper end def wopi_enabled? - ENV['WOPI_ENABLED'] == 'true' || true + ENV['WOPI_ENABLED'] == 'true' end end From 9d64121577ac6a72ef5c7120d9565713a95dc5a4 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 29 Sep 2020 12:58:05 +0200 Subject: [PATCH 09/35] Refactor WOPI discovery --- app/controllers/wopi_controller.rb | 6 +- app/models/asset.rb | 4 +- app/models/wopi_action.rb | 5 -- app/models/wopi_discovery.rb | 39 ---------- app/utilities/wopi_util.rb | 115 ++++++++++++++++++----------- 5 files changed, 79 insertions(+), 90 deletions(-) diff --git a/app/controllers/wopi_controller.rb b/app/controllers/wopi_controller.rb index de1f9a26b..bc04e7411 100644 --- a/app/controllers/wopi_controller.rb +++ b/app/controllers/wopi_controller.rb @@ -1,4 +1,6 @@ -class WopiController < ActionController::Base +# frozen_string_literal: true + +class WopiController < ApplicationController include WopiUtil skip_before_action :verify_authenticity_token @@ -334,7 +336,7 @@ class WopiController < ActionController::Base url = request.original_url.upcase.encode('utf-8') if convert_to_unix_timestamp(timestamp) + 20.minutes >= Time.now - if current_wopi_discovery.verify_proof(token, timestamp, signed_proof, signed_proof_old, url) + if wopi_verify_proof(token, timestamp, signed_proof, signed_proof_old, url) logger.warn 'WOPI: proof verification: successful' else logger.warn 'WOPI: proof verification: not verified' diff --git a/app/models/asset.rb b/app/models/asset.rb index 6f953e554..2aa164fa8 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -320,7 +320,7 @@ class Asset < ApplicationRecord file_ext = file_name.split('.').last action = get_action(file_ext, action) if !action.nil? - action_url = action.urlsrc + action_url = action[:urlsrc] if ENV['WOPI_BUSINESS_USERS'] && ENV['WOPI_BUSINESS_USERS'] == 'true' action_url = action_url.gsub(//, 'IsLicensedUser=1&') @@ -354,7 +354,7 @@ class Asset < ApplicationRecord def favicon_url(action) file_ext = file_name.split('.').last action = get_action(file_ext, action) - action.wopi_app.icon if action.try(:wopi_app) + action[:icon] if action[:icon] end # locked?, lock_asset and refresh_lock rely on the asset diff --git a/app/models/wopi_action.rb b/app/models/wopi_action.rb index 9a51b2b2e..2eff2690f 100644 --- a/app/models/wopi_action.rb +++ b/app/models/wopi_action.rb @@ -4,9 +4,4 @@ class WopiAction < ApplicationRecord belongs_to :wopi_app, foreign_key: 'wopi_app_id', class_name: 'WopiApp' validates :action, :extension, :urlsrc, :wopi_app, presence: true - - def self.find_action(extension, activity) - WopiAction.distinct - .where('extension = ? and action = ?', extension, activity).first - end end diff --git a/app/models/wopi_discovery.rb b/app/models/wopi_discovery.rb index 45bffd41a..6ce192d15 100644 --- a/app/models/wopi_discovery.rb +++ b/app/models/wopi_discovery.rb @@ -13,43 +13,4 @@ class WopiDiscovery < ApplicationRecord :proof_key_old_mod, :proof_key_old_exp, presence: true - - # Verifies if proof from headers, X-WOPI-Proof/X-WOPI-OldProof was encrypted - # with this discovery public key (two key possible old/new) - def verify_proof(token, timestamp, signed_proof, signed_proof_old, url) - token_length = [token.length].pack('>N').bytes - timestamp_bytes = [timestamp.to_i].pack('>Q').bytes.reverse - timestamp_length = [timestamp_bytes.length].pack('>N').bytes - url_length = [url.length].pack('>N').bytes - - expected_proof = token_length + token.bytes + - url_length + url.upcase.bytes + - timestamp_length + timestamp_bytes - - key = generate_key(proof_key_mod, proof_key_exp) - old_key = generate_key(proof_key_old_mod, proof_key_old_exp) - - # Try all possible combiniations - try_verification(expected_proof, signed_proof, key) || - try_verification(expected_proof, signed_proof_old, key) || - try_verification(expected_proof, signed_proof, old_key) - end - - # Generates a public key from given modulus and exponent - def generate_key(modulus, exponent) - mod = Base64.decode64(modulus).unpack('H*').first.to_i(16) - exp = Base64.decode64(exponent).unpack('H*').first.to_i(16) - - seq = OpenSSL::ASN1::Sequence.new([OpenSSL::ASN1::Integer.new(mod), - OpenSSL::ASN1::Integer.new(exp)]) - OpenSSL::PKey::RSA.new(seq.to_der) - end - - # Verify if decrypting signed_proof with public_key equals to expected_proof - def try_verification(expected_proof, signed_proof_b64, public_key) - signed_proof = Base64.decode64(signed_proof_b64) - public_key.verify(OpenSSL::Digest::SHA256.new, signed_proof, - expected_proof.pack('c*')) - end - end diff --git a/app/utilities/wopi_util.rb b/app/utilities/wopi_util.rb index 645e9b4c0..520cee3ee 100644 --- a/app/utilities/wopi_util.rb +++ b/app/utilities/wopi_util.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + module WopiUtil require 'open-uri' @@ -5,72 +7,101 @@ module WopiUtil UNIX_EPOCH_IN_CLR_TICKS = 621355968000000000 CLR_TICKS_PER_SECOND = 10000000 - DISCOVERY_TTL = 1.days + DISCOVERY_TTL = 1.day DISCOVERY_TTL.freeze # For more explanation see this: # http://stackoverflow.com/questions/11888053/ # convert-net-datetime-ticks-property-to-date-in-objective-c def convert_to_unix_timestamp(timestamp) - Time.at((timestamp - UNIX_EPOCH_IN_CLR_TICKS) / CLR_TICKS_PER_SECOND) + Time.zone.at((timestamp - UNIX_EPOCH_IN_CLR_TICKS) / CLR_TICKS_PER_SECOND) end - def get_action(extension, activity) - current_wopi_discovery - WopiAction.find_action(extension, activity) + def get_action(extension, action) + discovery = current_wopi_discovery + discovery[:actions].find { |i| i[:extension] == extension && i[:action] == action } end def current_wopi_discovery - discovery = WopiDiscovery.first - return discovery if discovery && discovery.expires >= Time.now.to_i - initialize_discovery(discovery) + initialize_discovery + end + + # Verifies if proof from headers, X-WOPI-Proof/X-WOPI-OldProof was encrypted + # with this discovery public key (two key possible old/new) + def wopi_verify_proof(token, timestamp, signed_proof, signed_proof_old, url) + discovery = current_wopi_discovery + token_length = [token.length].pack('>N').bytes + timestamp_bytes = [timestamp.to_i].pack('>Q').bytes.reverse + timestamp_length = [timestamp_bytes.length].pack('>N').bytes + url_length = [url.length].pack('>N').bytes + + expected_proof = token_length + token.bytes + + url_length + url.upcase.bytes + + timestamp_length + timestamp_bytes + + key = generate_key(discovery[:proof_key_mod], discovery[:proof_key_exp]) + old_key = generate_key(discovery[:proof_key_old_mod], discovery[:proof_key_old_exp]) + + # Try all possible combiniations + try_verification(expected_proof, signed_proof, key) || + try_verification(expected_proof, signed_proof_old, key) || + try_verification(expected_proof, signed_proof, old_key) end private # Currently only saves Excel, Word and PowerPoint view and edit actions - def initialize_discovery(discovery) - Rails.logger.warn 'Initializing discovery' - discovery.destroy if discovery + def initialize_discovery + Rails.cache.fetch(:wopi_discovery, expires_in: DISCOVERY_TTL) do + @doc = Nokogiri::XML(Kernel.open(ENV['WOPI_DISCOVERY_URL'])) + discovery_json = {} + key = @doc.xpath('//proof-key') + discovery_json[:proof_key_mod] = key.xpath('@modulus').first.value + discovery_json[:proof_key_exp] = key.xpath('@exponent').first.value + discovery_json[:proof_key_old_mod] = key.xpath('@oldmodulus').first.value + discovery_json[:proof_key_old_exp] = key.xpath('@oldexponent').first.value + discovery_json[:actions] = [] - @doc = Nokogiri::XML(Kernel.open(ENV['WOPI_DISCOVERY_URL'])) + @doc.xpath('//app').each do |app| + app_name = app.xpath('@name').first.value + next unless %w(Excel Word PowerPoint WopiTest).include?(app_name) - discovery = WopiDiscovery.new - discovery.expires = Time.now.to_i + DISCOVERY_TTL - key = @doc.xpath('//proof-key') - discovery.proof_key_mod = key.xpath('@modulus').first.value - discovery.proof_key_exp = key.xpath('@exponent').first.value - discovery.proof_key_old_mod = key.xpath('@oldmodulus').first.value - discovery.proof_key_old_exp = key.xpath('@oldexponent').first.value - discovery.save! + icon = app.xpath('@favIconUrl').first.value - @doc.xpath('//app').each do |app| - app_name = app.xpath('@name').first.value - next unless %w(Excel Word PowerPoint WopiTest).include?(app_name) + app.xpath('action').each do |action| + action_name = action.xpath('@name').first.value + next unless %w(view edit editnew embedview wopitest).include?(action_name) - wopi_app = WopiApp.new - wopi_app.name = app.xpath('@name').first.value - wopi_app.icon = app.xpath('@favIconUrl').first.value - wopi_app.wopi_discovery_id = discovery.id - wopi_app.save! - app.xpath('action').each do |action| - name = action.xpath('@name').first.value - next unless %w(view edit editnew embedview wopitest).include?(name) - - wopi_action = WopiAction.new - wopi_action.action = name - wopi_action.extension = action.xpath('@ext').first.value - wopi_action.urlsrc = action.xpath('@urlsrc').first.value - wopi_action.wopi_app_id = wopi_app.id - wopi_action.save! + action_json = {} + action_json[:icon] = icon + action_json[:action] = action_name + action_json[:extension] = action.xpath('@ext').first.value + action_json[:urlsrc] = action.xpath('@urlsrc').first.value + discovery_json[:actions].push(action_json) + end end + discovery_json end - discovery - rescue => e + rescue StandardError => e Rails.logger.warn 'WOPI: initialization failed: ' + e.message e.backtrace.each { |line| Rails.logger.error line } - discovery = WopiDiscovery.first - discovery.destroy if discovery + end + + # Generates a public key from given modulus and exponent + def generate_key(modulus, exponent) + mod = Base64.decode64(modulus).unpack1('H*').to_i(16) + exp = Base64.decode64(exponent).unpack1('H*').to_i(16) + + seq = OpenSSL::ASN1::Sequence.new([OpenSSL::ASN1::Integer.new(mod), + OpenSSL::ASN1::Integer.new(exp)]) + OpenSSL::PKey::RSA.new(seq.to_der) + end + + # Verify if decrypting signed_proof with public_key equals to expected_proof + def try_verification(expected_proof, signed_proof_b64, public_key) + signed_proof = Base64.decode64(signed_proof_b64) + public_key.verify(OpenSSL::Digest::SHA256.new, signed_proof, + expected_proof.pack('c*')) end def create_wopi_file_activity(current_user, started_editing) From 143b4077db0874c9eeb82d2e83415917d12b30db Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 14 Oct 2020 14:25:50 +0200 Subject: [PATCH 10/35] Fix tests --- spec/controllers/assets_controller_spec.rb | 40 ---------------------- 1 file changed, 40 deletions(-) diff --git a/spec/controllers/assets_controller_spec.rb b/spec/controllers/assets_controller_spec.rb index 5a08b756c..a4a853bb8 100644 --- a/spec/controllers/assets_controller_spec.rb +++ b/spec/controllers/assets_controller_spec.rb @@ -67,44 +67,4 @@ describe AssetsController, type: :controller do .to(change { Activity.count }) end end - - describe 'GET asset_card' do - let(:action) { get :toggle_view_mode, params: params, format: :json } - let!(:params) do - { id: asset.id } - end - - it do - action - - expect(response).to have_http_status 200 - end - - context 'when small card' do - it do - action - - expect(response).to have_http_status 200 - # wtf, not working here?, render_to_string is returning nil - # expect(JSON.parse(response.body)['html']).to be_eql 'hellow world' - end - end - - context 'when iframe' do - before do - allow_any_instance_of(Asset).to receive(:small_card).and_return(false) - allow_any_instance_of(Asset).to receive(:get_action_url).and_return('fakeurl.com') - allow(controller).to receive(:wopi_enabled?).and_return(true) - allow(controller).to receive(:wopi_file?).and_return(true) - end - - it do - action - - expect(response).to have_http_status 200 - expect(JSON.parse(response.body)['html']) - .to be_eql '' - end - end - end end From 566ef7aef7a9fd60f7651de5e20e1a7368363cf4 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 16 Oct 2020 11:00:57 +0200 Subject: [PATCH 11/35] Add list view to atachments --- app/assets/javascripts/protocols/steps.js.erb | 11 +-- app/assets/stylesheets/steps.scss | 69 ++++++++++++++++--- app/models/asset.rb | 2 +- app/views/assets/_asset.html.erb | 4 +- app/views/assets/_asset_inline.html.erb | 43 +++++++++--- app/views/assets/_asset_list.html.erb | 35 ++++++++++ app/views/assets/_asset_thumbnail.html.erb | 24 ++++--- 7 files changed, 156 insertions(+), 32 deletions(-) create mode 100644 app/views/assets/_asset_list.html.erb diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index 959df845f..0d191e8c8 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -332,18 +332,19 @@ function initPreviewToggle(){ $('.attachments').on('click', '.change-preview-type', function (e) { var viewMode = $(this).data('preview-type'); - var assetId = $(this).data('asset-id'); + var toggleUrl = $(this).data('toggle-view-url'); + var assetId = $(this).closest('.asset').data('asset-id'); e.preventDefault(); e.stopPropagation(); $.ajax({ - url: `/files/${assetId}/toggle_view_mode`, + url: toggleUrl, type: "PATCH", dataType: "json", data: { asset: { view_mode: viewMode }}, success: function (data) { - $(`.step-asset[data-asset-id=${assetId}]`).replaceWith(data.html); + $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html); FilePreviewModal.init(); - $(`.step-asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder'); + $(`.asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder'); }, error: function (data) { console.log(data); @@ -661,7 +662,7 @@ }) $('.attachments').on('reorder', function() { - var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .step-asset`); + var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`); var order = $(this).data('order'); var sortedAssets = assets.sort(function(a, b) { if (a.dataset.assetOrder == b.dataset.assetOrder) { diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index d7e69669d..7741c0d79 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -11,8 +11,8 @@ @import "mixins"; :root { - --attachment-card-thumbnail-height: 280px; - --attachment-card-thumbnail-width: 220px; + --attachment-row-height: 3em; + --attachment-column-width: 16em; } @@ -135,22 +135,26 @@ .attachments { display: grid; - grid-auto-rows: var(--attachment-card-thumbnail-height); + grid-auto-rows: var(--attachment-row-height); grid-column-gap: 1em; grid-row-gap: 1em; - grid-template-columns: repeat(auto-fill, minmax(var(--attachment-card-thumbnail-width), 1fr)); + grid-template-columns: repeat(auto-fill, minmax(var(--attachment-column-width), 1fr)); justify-content: center; margin: 1em 0; + + .nested_fields { + display: contents; + } } .attachment-container { @include md-card-style; - height: var(--attachment-card-thumbnail-height); + grid-row: span 6; justify-self: center; overflow: hidden; padding: 1em; position: relative; - width: var(--attachment-card-thumbnail-width); + width: var(--attachment-column-width); .file-preview-link { @@ -174,7 +178,7 @@ .attachment-preview { border-radius: $border-radius-default; - height: 170px; + height: 14em; position: relative; text-align: center; width: 100%; @@ -343,7 +347,7 @@ .inline-attachment-container { @include md-card-style; grid-column: 1/-1; - grid-row: span 2; + grid-row: span 12; .active-iframe-preview { border: 0; @@ -351,6 +355,26 @@ width: 100%; } + .image-container, + .general-file-container { + background: $color-concrete; + align-items: center; + display: flex; + height: calc(100% - 4em); + justify-content: center; + padding: .5em; + width: 100%; + + img { + max-width: 100%; + max-height: 100%; + } + + .fas { + font-size: 10em; + } + } + .header { align-items: center; display: flex; @@ -376,3 +400,32 @@ } } } + +.list-attachment-container { + @include md-card-style; + align-items: center; + display: flex; + grid-column: 1/-1; + padding: .5em; + + .file-name { + @include font-main; + } + + .file-name { + @include font-main; + color: $brand-primary; + margin: 0 .5em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .file-metadata { + @include font-small; + color: $color-silver-chalice; + display: grid; + grid-column-gap: 1em; + grid-template-columns: max-content max-content; + } +} diff --git a/app/models/asset.rb b/app/models/asset.rb index 4632048c9..47d2ae451 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -12,7 +12,7 @@ class Asset < ApplicationRecord # Lock duration set to 30 minutes LOCK_DURATION = 60 * 30 - enum view_mode: { show_as_thumbnail: 0, show_inline: 1 } + enum view_mode: { thumbnail: 0, inline: 1, list: 2} # ActiveStorage configuration has_one_attached :file diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index 57a278f08..8feef8c14 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,5 +1,7 @@ -<% if wopi_enabled? && wopi_file?(asset) && asset.show_inline? %> +<% if asset.inline? %> <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset } %> +<% elsif asset.list? %> + <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset } %> <% else %> <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { edit_page: false, asset: asset } %> <% end %> diff --git a/app/views/assets/_asset_inline.html.erb b/app/views/assets/_asset_inline.html.erb index a49d83704..122c106a9 100644 --- a/app/views/assets/_asset_inline.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -1,4 +1,4 @@ -
-
+ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), + class: "file-preview-link file-name", + id: "modal_link#{asset.id}", + data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> <%= asset.file_name %> -
+ <% end %>
<%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> <%= number_to_human_size(asset.file_size) %>
-
- +
+ +
+
+ +
+
+
-
- + <% if wopi_enabled? && wopi_file?(asset) %> +
+ <% elsif asset.previewable? %> +
+ <%= image_tag asset.large_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> +
+ <% else %> +
+ +
+ <% end %>
diff --git a/app/views/assets/_asset_list.html.erb b/app/views/assets/_asset_list.html.erb new file mode 100644 index 000000000..38f187435 --- /dev/null +++ b/app/views/assets/_asset_list.html.erb @@ -0,0 +1,35 @@ +
+
+ +
+ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), + class: "file-preview-link file-name", + id: "modal_link#{asset.id}", + data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> + <%= asset.file_name %> + <% end %> +
+ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> + <%= number_to_human_size(asset.file_size) %> +
+
+ +
+
+ +
+
+ +
+
diff --git a/app/views/assets/_asset_thumbnail.html.erb b/app/views/assets/_asset_thumbnail.html.erb index 1e6f8b7f7..b41997fa4 100644 --- a/app/views/assets/_asset_thumbnail.html.erb +++ b/app/views/assets/_asset_thumbnail.html.erb @@ -1,20 +1,28 @@ -
<%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: "file-preview-link", id: "modal_link#{asset.id}", data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> - <% if wopi_enabled? && wopi_file?(asset) %> -
- +
+ +
+
+ +
+
+
- <% end %>
<% if asset.previewable? %> <%= image_tag asset.medium_preview, From 3fe3c2087f8503f7cc36e51b90928636ee199719 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 16 Oct 2020 11:27:23 +0200 Subject: [PATCH 12/35] Fix hound issues --- app/assets/stylesheets/steps.scss | 8 ++++---- app/models/asset.rb | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 7741c0d79..f93f2a66b 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -11,8 +11,8 @@ @import "mixins"; :root { - --attachment-row-height: 3em; --attachment-column-width: 16em; + --attachment-row-height: 3em; } @@ -357,8 +357,8 @@ .image-container, .general-file-container { - background: $color-concrete; align-items: center; + background: $color-concrete; display: flex; height: calc(100% - 4em); justify-content: center; @@ -366,8 +366,8 @@ width: 100%; img { - max-width: 100%; max-height: 100%; + max-width: 100%; } .fas { @@ -408,7 +408,7 @@ grid-column: 1/-1; padding: .5em; - .file-name { + .file-icon { @include font-main; } diff --git a/app/models/asset.rb b/app/models/asset.rb index 47d2ae451..909b9b7c6 100644 --- a/app/models/asset.rb +++ b/app/models/asset.rb @@ -12,7 +12,7 @@ class Asset < ApplicationRecord # Lock duration set to 30 minutes LOCK_DURATION = 60 * 30 - enum view_mode: { thumbnail: 0, inline: 1, list: 2} + enum view_mode: { thumbnail: 0, inline: 1, list: 2 } # ActiveStorage configuration has_one_attached :file From aefaf4d0c11913df3137f37a9ee0bd86c30f4240 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Sun, 25 Oct 2020 16:57:50 +0100 Subject: [PATCH 13/35] Update image edit modal --- .../stylesheets/shared/image_edit_modal.scss | 37 +++++++++++++ app/assets/stylesheets/themes/scinote.scss | 55 ------------------- app/views/shared/_file_edit_modal.html.erb | 12 ++-- 3 files changed, 45 insertions(+), 59 deletions(-) create mode 100644 app/assets/stylesheets/shared/image_edit_modal.scss diff --git a/app/assets/stylesheets/shared/image_edit_modal.scss b/app/assets/stylesheets/shared/image_edit_modal.scss new file mode 100644 index 000000000..b5f592e90 --- /dev/null +++ b/app/assets/stylesheets/shared/image_edit_modal.scss @@ -0,0 +1,37 @@ +// Image edit modal +.modal-file-edit { + background: transparent; + font-size: $font-size-base; + padding: 0 !important; + + .modal-dialog { + height: 100%; + margin: 0; + width: auto; + } + + .modal-content { + border: 0; + height: 100%; + } + + .modal-header { + align-items: center; + background: $color-white; + display: flex; + height: 4em; + padding: 0 1em; + + .file-name { + font-weight: bold; + margin-right: auto; + } + } + + .modal-body { + height: calc(100% - 4em); + padding: 0; + } +} + + diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 8cfde42c4..1bc515b94 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1591,61 +1591,6 @@ ul.content-activities { } } -// Image edit modal -.modal-file-edit { - background: transparent; - font-size: $font-size-large; - padding: 0 !important; - - .preview-close { - background: transparent; - border: 0; - color: $color-white; - display: inline-block; - float: right; - } - - .modal-dialog { - height: 100%; - margin: 0; - padding: 0; - width: auto; - } - - .modal-content { - background: transparent; - border: 0; - -webkit-box-shadow: none; - box-shadow: none; - color: $color-white; - height: 100%; - width: auto; - } - - .modal-header { - background: $color-black; - border: 0; - height: 60px; - text-align: center; - - .file-name { - float: left; - } - } - - .modal-body { - height: calc(100% - 60px); - padding: 0; - } - - .file-save-link { - color: $color-white; - display: inline-block; - float: right; - margin-right: 20px; - } -} - // Disable textarea resizing throughout application // (will be done via autosize JS plugin) textarea { diff --git a/app/views/shared/_file_edit_modal.html.erb b/app/views/shared/_file_edit_modal.html.erb index 74eced9b4..a57db6bfd 100644 --- a/app/views/shared/_file_edit_modal.html.erb +++ b/app/views/shared/_file_edit_modal.html.erb @@ -8,11 +8,15 @@
- - -

<%= t('SaveClose')%>

- +
+ + <%= t('SaveClose')%> + + +
From 6edcf4b099a60052d9de199ce1976e4b46c068a9 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 26 Oct 2020 15:10:06 +0100 Subject: [PATCH 14/35] Add size label --- app/views/assets/_asset_inline.html.erb | 2 +- app/views/assets/_asset_list.html.erb | 2 +- config/locales/en.yml | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/views/assets/_asset_inline.html.erb b/app/views/assets/_asset_inline.html.erb index 122c106a9..35415b5a2 100644 --- a/app/views/assets/_asset_inline.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -14,7 +14,7 @@ <% end %>
<%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> - <%= number_to_human_size(asset.file_size) %> + <%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %>
<%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> - <%= number_to_human_size(asset.file_size) %> + <%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %>
Date: Wed, 28 Oct 2020 16:32:22 +0100 Subject: [PATCH 15/35] Add filer previews to reports --- app/assets/stylesheets/reports.scss | 9 +++++++++ app/assets/stylesheets/reports_print.scss | 8 ++++++++ app/helpers/reports_helper.rb | 6 +++--- app/services/reports/docx/draw_result_asset.rb | 2 +- app/services/reports/docx/draw_step_asset.rb | 2 +- app/services/reports/docx_renderer.rb | 14 ++++++++++---- app/services/reports/html_to_word_converter.rb | 2 +- app/services/reports/utils.rb | 12 ++++++++++-- .../_my_module_result_asset_element.html.erb | 5 ++--- .../reports/elements/_step_asset_element.html.erb | 7 +++---- 10 files changed, 48 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index e802b82c9..13d6afd90 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -365,6 +365,10 @@ label { margin-left: 15px; } } + + .file-image img { + max-width: 100% + } } // Result table element style @@ -418,6 +422,11 @@ label { } } + + .file-image img { + max-width: 100% + } + .report-element-children { height: 0; } diff --git a/app/assets/stylesheets/reports_print.scss b/app/assets/stylesheets/reports_print.scss index f0953b2ad..03a231823 100644 --- a/app/assets/stylesheets/reports_print.scss +++ b/app/assets/stylesheets/reports_print.scss @@ -93,6 +93,10 @@ div.print-report { &:hover > .report-element-header .attachment-icon { color: $color-black; } + + .file-image img { + max-width: 100% + } } .report-step-table-element { @@ -209,6 +213,10 @@ div.print-report { } } + .file-image img { + max-width: 100% + } + &:hover > .report-element-header { .result-icon, .result-name, diff --git a/app/helpers/reports_helper.rb b/app/helpers/reports_helper.rb index 23f96ffc3..269eed8bd 100644 --- a/app/helpers/reports_helper.rb +++ b/app/helpers/reports_helper.rb @@ -99,9 +99,9 @@ module ReportsHelper # "Hack" to omit file preview URL because of WKHTML issues def report_image_asset_url(asset) - image_tag(asset.medium_preview - .processed - .service_url(expires_in: Constants::URL_LONG_EXPIRE_TIME)) + preview = asset.inline? ? asset.large_preview : asset.medium_preview + image_tag(preview.processed + .service_url(expires_in: Constants::URL_LONG_EXPIRE_TIME)) end # "Hack" to load Glyphicons css directly from the CDN diff --git a/app/services/reports/docx/draw_result_asset.rb b/app/services/reports/docx/draw_result_asset.rb index fb5ffa88d..dc68ced22 100644 --- a/app/services/reports/docx/draw_result_asset.rb +++ b/app/services/reports/docx/draw_result_asset.rb @@ -17,7 +17,7 @@ module Reports::Docx::DrawResultAsset user: result.user.full_name, timestamp: I18n.l(timestamp, format: :full)), color: color[:gray] end - Reports::DocxRenderer.render_asset_image(@docx, asset) if asset.image? + Reports::DocxRenderer.render_asset_image(@docx, asset) if asset.previewable? && !asset.list? subject['children'].each do |child| public_send("draw_#{child['type_of']}", child, result) diff --git a/app/services/reports/docx/draw_step_asset.rb b/app/services/reports/docx/draw_step_asset.rb index 80a87c8da..6431dfe0a 100644 --- a/app/services/reports/docx/draw_step_asset.rb +++ b/app/services/reports/docx/draw_step_asset.rb @@ -15,6 +15,6 @@ module Reports::Docx::DrawStepAsset timestamp: I18n.l(timestamp, format: :full)), color: color[:gray] end - Reports::DocxRenderer.render_asset_image(@docx, asset) if asset.image? + Reports::DocxRenderer.render_asset_image(@docx, asset) if asset.previewable? && !asset.list? end end diff --git a/app/services/reports/docx_renderer.rb b/app/services/reports/docx_renderer.rb index ba73b2511..52697bce0 100644 --- a/app/services/reports/docx_renderer.rb +++ b/app/services/reports/docx_renderer.rb @@ -137,9 +137,9 @@ module Reports def self.render_asset_image(docx, asset) return unless asset - image_path = Reports::Utils.image_path(asset.file) + asset_preview = Reports::Utils.image_prepare(asset) - dimension = FastImage.size(image_path) + dimension = FastImage.size(asset_preview.service_url) return unless dimension x = dimension[0] @@ -148,8 +148,14 @@ module Reports y = y * 300 / x x = 300 end - docx.img image_path.split('&')[0] do - data asset.blob.download + blob_data = if asset_preview.class == ActiveStorage::Preview + asset_preview.image.download + else + asset_preview.blob.download + end + + docx.img asset_preview.service_url.split('&')[0] do + data blob_data width x height y end diff --git a/app/services/reports/html_to_word_converter.rb b/app/services/reports/html_to_word_converter.rb index b5fa20d35..4a4db7001 100644 --- a/app/services/reports/html_to_word_converter.rb +++ b/app/services/reports/html_to_word_converter.rb @@ -121,7 +121,7 @@ module Reports image = TinyMceAsset.find_by(id: Base62.decode(elem.attributes['data-mce-token'].value)) return unless image - image_path = Reports::Utils.image_path(image.image) + image_path = Reports::Utils.image_prepare(image).service_url dimension = FastImage.size(image_path) return unless dimension diff --git a/app/services/reports/utils.rb b/app/services/reports/utils.rb index b61f1cf1c..51c3ad339 100644 --- a/app/services/reports/utils.rb +++ b/app/services/reports/utils.rb @@ -6,8 +6,16 @@ module Reports link[0] == '/' ? scinote_url + link : link end - def self.image_path(attachment) - attachment.service_url + def self.image_prepare(asset) + if asset.class == Asset + if asset.inline? + asset.large_preview + else + asset.medium_preview + end + elsif asset.class == TinyMceAsset + asset.image + end end def self.calculate_color_hsp(color) diff --git a/app/views/reports/elements/_my_module_result_asset_element.html.erb b/app/views/reports/elements/_my_module_result_asset_element.html.erb index 3ff08a35a..3e096f0d9 100644 --- a/app/views/reports/elements/_my_module_result_asset_element.html.erb +++ b/app/views/reports/elements/_my_module_result_asset_element.html.erb @@ -1,9 +1,8 @@ <% result ||= @result %> <% asset = result.asset %> -<% is_image = result.asset.image? %> <% comments = result.result_comments %> <% timestamp = asset.created_at %> -<% icon_class = 'fas ' + (is_image ? 'fa-image' : 'fa-file') %> +<% icon_class = 'fas ' + file_fa_icon_class(asset) if asset.file_name %>
- <% if is_image %> + <% if asset.previewable? && !asset.list? %>
diff --git a/app/views/reports/elements/_step_asset_element.html.erb b/app/views/reports/elements/_step_asset_element.html.erb index ef768927b..2dd309c00 100644 --- a/app/views/reports/elements/_step_asset_element.html.erb +++ b/app/views/reports/elements/_step_asset_element.html.erb @@ -1,12 +1,11 @@ <% asset ||= @asset %> -<% is_image = asset.image? %> <% timestamp = asset.created_at %> -<% icon_class = 'fas ' + (is_image ? 'fa-image' : 'fa-file') %> +<% icon_class = file_fa_icon_class(asset) if asset.file_name %>
" data-icon-class="<%= icon_class %>">
- +
<% if defined? export_all and export_all %> @@ -29,7 +28,7 @@
- <% if is_image %> + <% if asset.previewable? && !asset.list? %>
<% if defined?(export_all) && export_all %> From 16249201f3781a4c2cf57b67e088e64bbd7480a2 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 28 Oct 2020 16:44:28 +0100 Subject: [PATCH 16/35] Fix markup --- app/assets/stylesheets/reports.scss | 8 ++++---- app/assets/stylesheets/reports_print.scss | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index 13d6afd90..6674e38e3 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -366,8 +366,8 @@ label { } } - .file-image img { - max-width: 100% + img { + max-width: 100%; } } @@ -423,8 +423,8 @@ label { } - .file-image img { - max-width: 100% + img { + max-width: 100%; } .report-element-children { diff --git a/app/assets/stylesheets/reports_print.scss b/app/assets/stylesheets/reports_print.scss index 03a231823..fc02a8029 100644 --- a/app/assets/stylesheets/reports_print.scss +++ b/app/assets/stylesheets/reports_print.scss @@ -94,8 +94,8 @@ div.print-report { color: $color-black; } - .file-image img { - max-width: 100% + img { + max-width: 100%; } } @@ -213,8 +213,8 @@ div.print-report { } } - .file-image img { - max-width: 100% + img { + max-width: 100%; } &:hover > .report-element-header { From c56f7912efac1d256009d8aa2fb6539b71e9fbfa Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 19 Oct 2020 15:23:34 +0200 Subject: [PATCH 17/35] Update file preview --- .../javascripts/my_modules/repositories.js | 1 - app/assets/javascripts/my_modules/results.js | 1 - app/assets/javascripts/protocols/index.js | 2 - app/assets/javascripts/protocols/steps.js.erb | 7 +- .../repositories/repository_datatable.js | 3 - .../javascripts/results/result_assets.js | 3 - .../javascripts/sitewide/drag_n_drop.js | 1 - .../javascripts/sitewide/file_preview.js | 465 ++---------------- .../javascripts/sitewide/image_editor.js | 407 +++++++++++++++ .../javascripts/sitewide/marvinjs_editor.js | 1 - .../sitewide/repository_row_info_modal.js | 1 - app/controllers/assets_controller.rb | 27 +- app/views/layouts/application.html.erb | 2 +- app/views/my_modules/archive.html.erb | 2 - .../_repository_row_info_modal.html.erb | 1 - .../shared/file_preview/_content.html.erb | 24 + app/views/shared/file_preview/_modal.html.erb | 13 + 17 files changed, 503 insertions(+), 458 deletions(-) create mode 100644 app/assets/javascripts/sitewide/image_editor.js create mode 100644 app/views/shared/file_preview/_content.html.erb create mode 100644 app/views/shared/file_preview/_modal.html.erb diff --git a/app/assets/javascripts/my_modules/repositories.js b/app/assets/javascripts/my_modules/repositories.js index 897553a4d..b3640dc38 100644 --- a/app/assets/javascripts/my_modules/repositories.js +++ b/app/assets/javascripts/my_modules/repositories.js @@ -186,7 +186,6 @@ var MyModuleRepositories = (function() { drawCallback: function() { FULL_VIEW_TABLE.columns.adjust(); - FilePreviewModal.init(); renderFullViewRepositoryName( tableContainer.attr('data-repository-name'), tableContainer.attr('data-repository-snapshot-created'), diff --git a/app/assets/javascripts/my_modules/results.js b/app/assets/javascripts/my_modules/results.js index 0483d0a49..dd7aa01e3 100644 --- a/app/assets/javascripts/my_modules/results.js +++ b/app/assets/javascripts/my_modules/results.js @@ -118,7 +118,6 @@ ResultAssets.applyEditResultAssetCallback(); applyCreateWopiFileCallback(); toggleResultEditButtons(true); - FilePreviewModal.init(); Comments.init(); ResultAssets.initNewResultAsset(); expandResult($(this)); diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js index dcd29c0c1..99986c960 100644 --- a/app/assets/javascripts/protocols/index.js +++ b/app/assets/javascripts/protocols/index.js @@ -220,8 +220,6 @@ function initProtocolPreviewModal() { modal.modal("show"); ProtocolRepositoryHeader.init(); initHandsOnTable(modalBody); - FilePreviewModal.init({ readOnly: true }); - }, error: function (error) { // TODO } diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index 0d191e8c8..d69fe3ca1 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -79,7 +79,6 @@ setTimeout(function() { initStepsComments(); - FilePreviewModal.init(); SmartAnnotation.preventPropagation('.atwho-user-popover'); TinyMCE.destroyAll(); DragNDropSteps.clearFiles(); @@ -107,7 +106,6 @@ toggleButtons(false); initializeCheckboxSorting(); animateSpinner(null, false); - FilePreviewModal.init(); DragNDropSteps.clearFiles(); if (tinyMCE.editors.step_description_textarea) tinyMCE.editors.step_description_textarea.remove(); TinyMCE.init('#step_description_textarea'); @@ -183,8 +181,6 @@ initCallBacks(); initHandsOnTable($new_step); toggleButtons(true); - FilePreviewModal.init(); - TinyMCE.destroyAll(); SmartAnnotation.preventPropagation('.atwho-user-popover'); // Show the edited step @@ -345,6 +341,7 @@ $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html); FilePreviewModal.init(); $(`.asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder'); + }, error: function (data) { console.log(data); @@ -592,7 +589,6 @@ }); animateSpinner(null, false); DragNDropSteps.clearFiles(); - FilePreviewModal.init(); if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); }, error: function(xhr) { @@ -697,7 +693,6 @@ initCallBacks(); initHandsOnTable($(document)); expandAllSteps(); - FilePreviewModal.init(); TinyMCE.highlight(); SmartAnnotation.preventPropagation('.atwho-user-popover'); newStepHandler(); diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index c05fc64c9..52daf7973 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -118,7 +118,6 @@ var RepositoryDatatable = (function(global) { currentMode = 'viewMode'; // Table specific stuff TABLE.button(0).enable(true); - FilePreviewModal.init(); $(TABLE_WRAPPER_ID).find('tr').removeClass('blocked'); updateButtons(); disableCheckboxToggleOnCheckboxPreview(); @@ -502,7 +501,6 @@ var RepositoryDatatable = (function(global) { animateSpinner(this, false); changeToViewMode(); updateDataTableSelectAllCtrl(); - FilePreviewModal.init(); // Prevent row toggling when selecting user smart annotation link SmartAnnotation.preventPropagation('.atwho-user-popover'); @@ -549,7 +547,6 @@ var RepositoryDatatable = (function(global) { }, fnInitComplete: function() { disableCheckboxToggleOnAssetDownload(); - FilePreviewModal.init(); initHeaderTooltip(); disableCheckboxToggleOnCheckboxPreview(); diff --git a/app/assets/javascripts/results/result_assets.js b/app/assets/javascripts/results/result_assets.js index d8b92a117..35477a682 100644 --- a/app/assets/javascripts/results/result_assets.js +++ b/app/assets/javascripts/results/result_assets.js @@ -50,7 +50,6 @@ $form.remove(); applyEditResultAssetCallback(); Results.toggleResultEditButtons(true); - FilePreviewModal.init(); }); Results.toggleResultEditButtons(false); @@ -71,7 +70,6 @@ Results.toggleResultEditButtons(true); Results.expandResult($newResult); - FilePreviewModal.init(); Comments.init(); initNewResultAsset(); }).on('ajax:error', function(e, xhr) { @@ -97,5 +95,4 @@ ResultAssets.initNewResultAsset(); ResultAssets.applyEditResultAssetCallback(); - FilePreviewModal.init(); }(window)); diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js b/app/assets/javascripts/sitewide/drag_n_drop.js index fbfeb2f77..66682e94d 100644 --- a/app/assets/javascripts/sitewide/drag_n_drop.js +++ b/app/assets/javascripts/sitewide/drag_n_drop.js @@ -435,7 +435,6 @@ initFormSubmitLinks($(this)); ResultAssets.applyEditResultAssetCallback(); Results.toggleResultEditButtons(true); - FilePreviewModal.init(); Comments.init(); ResultAssets.initNewResultAsset(); Results.expandResult($(this)); diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js index d31b942d8..e4ba247ea 100644 --- a/app/assets/javascripts/sitewide/file_preview.js +++ b/app/assets/javascripts/sitewide/file_preview.js @@ -8,439 +8,47 @@ var FilePreviewModal = (function() { 'use strict'; - var readOnly = false; + //var readOnly = false; function initPreviewModal(options = {}) { - var name; - var url; - var downloadUrl; - readOnly = options.readOnly; - - $('.file-preview-link').off('click'); - $('.file-preview-link').click(function(e) { - if ($(e.target.offsetParent).hasClass('change-preview-type')) return; + $(document).on('click', '.file-preview-link', function(e) { e.preventDefault(); - name = $(this).find('.attachment-label').text(); - url = $(this).data('preview-url'); - downloadUrl = $(this).attr('href'); - openPreviewModal(name, url, downloadUrl); - return true; - }); + $.get($(this).data('preview-url'), function(result) { + $('#filePreviewModal .modal-content').html(result.html); + $('#filePreviewModal').modal('show'); + }) + }) + //var name; + //var url; + //var downloadUrl; + //readOnly = options.readOnly; - $('#filePreviewModal').find('.preview-close').click(function() { - $('#filePreviewModal').find('.file-preview-container').html(''); - $('#filePreviewModal').modal('hide'); - if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); - }); + //return false; + // + //$('.file-preview-link').off('click'); + //$('.file-preview-link').click(function(e) { + // if ($(e.target.offsetParent).hasClass('change-preview-type')) return; + // e.preventDefault(); + // name = $(this).find('.attachment-label').text(); + // url = $(this).data('preview-url'); + // downloadUrl = $(this).attr('href'); + // openPreviewModal(name, url, downloadUrl); + // return true; + //}); + // + //$('#filePreviewModal').find('.preview-close').click(function() { + // $('#filePreviewModal').find('.file-preview-container').html(''); + // $('#filePreviewModal').modal('hide'); + // if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); + //}); } // Adding rotation icon - function updateFabricControls() { - fabric.Object.prototype.drawBorders = function(ctx, styleOverride = {}) { - var wh = this._calculateCurrentDimensions(); - var strokeWidth = 1 / this.borderScaleFactor; - var width = wh.x + strokeWidth; - var height = wh.y + strokeWidth; - var drawRotatingPoint = typeof styleOverride.hasRotatingPoint !== 'undefined' - ? styleOverride.hasRotatingPoint : this.hasRotatingPoint; - var hasControls = typeof styleOverride.hasControls !== 'undefined' - ? styleOverride.hasControls : this.hasControls; - var rotatingPointOffset = typeof styleOverride.rotatingPointOffset !== 'undefined' - ? styleOverride.rotatingPointOffset : this.rotatingPointOffset; - var rotateHeight = -height / 2; - ctx.save(); - ctx.strokeStyle = styleOverride.borderColor || this.borderColor; - this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null); - ctx.strokeRect( - -width / 2, - -height / 2, - width, - height - ); - if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) { - ctx.beginPath(); - ctx.moveTo(0, rotateHeight); - ctx.lineTo(0, rotateHeight - rotatingPointOffset + 10); - ctx.stroke(); - } - ctx.restore(); - return this; - }; - fabric.Object.prototype.drawControls = function(ctx) { - var rotationImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAHEklEQVRoge2bYYgdVxXHf/8lhGUJYQ1hKSFIiDXUEoq+e1lClLgfRLSGfNGSVvxgVIyiIqGWEhfpp6IBayiSBJQiQo3YKEQqsQSpmkopYWYJIUSIEkrYhhiWEEIoyxLe3w8zb53Mm/fezNvdlhf7h8feeTv3zvnPPffcc885T8b8P2Hs/RbgvcYHhB90rFurgWOIY8A4sNN2S9JHbG+VtBEYt70E3AFuSvoXcDH/3E7SpL1WcqnKaMUQ1wFjSZosNRkshrgR2A60gKdsR0mTALaRxID2InBR0ingHHA1SZOFIblVootwDHEn8ITtDZJ+naTJxUGDxBAngN2290uaAbaxMu1p274u6S3gN8DfkjS5vYLxltFFOLTCG5KmyQT+h+1n0rn0fFXnXG132n4mJ7qFVbYLtm9KOg8cJSO+InW/j3AMcQr4T+meS8DTSZqc7XwRWmFM0hbbX5U0S7ZW1xpt4DhwwvaVdC69N8wg5dmoUsOdwNEY4nTnC0m7gBNNyNpeaXsM+BbwS0n76jyzCuUZ3gK8UxY0NyrnbT8taQx4yfb2vP1+4AbwLHAySZNGMz1Q4I4FBaYl/QH4M/BwsW+dWVplPAT8HPhhaIWNTTo2taRTnUbhRdRpt4EFYD7/e8/2OmBS0pacQFNZNgKHJC0BP6nbaaBKrwCLwHXgNeBV4Jrtd4EloJ2/jPXABBnhL9h+XNJ2mhnBO7YPSDpdx4J3Ebb9jqTltdvLSRggwAXgmKTXkjS5U1fyGOI4sAf4PjANbK7Tz/ZVSV8Hzg0i3aVGHULlv+V2nwcfk/RKkibzdYQtIkmTReBsDDEB9gHfAeIgL03SNuAQ8G+yZdMTPY1WQ4PTBi5LegI4PgzZIpI0uQW8DOwHzkjqa4ltjwGfBb40aOyh1nDFW75r+2A6l54c1LcpYoibbf8I+BqwobPMAIrt/PqW7U+kc+m1XuPV2kfLW02Fmm+QNBtDbDWjMxhJmixI+rGkl4vLrNzOrzcBB0Mr9OQ1kHC/9VO8B3gUOBFaYXfuY68akjS5YXsWqPTpS7Luk7Sz1z1dgpXXbsP9dlrSMWCmn2DDIJ1Lb9k+BLxd/l9RxYEdwN78iNuFoYzWAM/q42S+d8+3PCwkXQBO5ufm4vdFOdYDn6TgJBXRRbhqO+p1T5/2Y8ALMcStg0g0QZIm7wK/I9t+llGx1HaTncm7UCa8SLbFDEQN//kR2zvqjNUESZpclHSm+F2F5Z4kI92F+wjbvg0kgx5aM1wzD1xpyKcuftt5XgcVmvbpqo73Lex0Lm3HEA8AB4CHbY/12/f6tBckvUjmS68FLgJXc7+7Fyq3yMog3igghvgSmTPSz8B+KJ1L74uFjXJc+p9Fzav6AB8udxplwm+XnSDb97U7IeIiRpaw7eVjZ/EYWzrSbij3G1nCRTQJK40s4Txl02lT1QbulvuNLGHb22rc05WtGFnCkj5WMlDLRqvgL3Sdi9cse7iWyI+fM/3CUcD18h4MI0qY7HCy7GX18ATnqjqOqko/VbyoMlqS/l7VceQIh1Z4DHi83z2SbgNvVv1vpAjHECck7Sc72PTcc22/RYXBghEjTLZ2nwTGywGKwvWSpDfIEm5dGMpo5Xnk7wEztr8t6fJa1mXkz9xk+0VJ23u4kR1cAc70yio2nuG8vOE54AfAp/Kg3aNDcGjyzIeA5/PKhL7ZENt/IjsvV6IR4RjiBtuHbX+D/yW8dtk+Elph1cM5+TM3A4dtfwWq/ebCer4l6UQ/basdAMgfPAt8E5gohXPaki6TRUou5TmiFSEPs24lywN/jsHLbxGYTdLkZ/1uqjXDeVbvObKSgwnoUqsxstKIU7a/G1qh6+DdBKEVNtn+MnAK2Mtgsm3bfwFeGTR2rRkOrfAZSa9SL297F7hANjNnm5QbhVZYL2mP7UP5eq2VLgWuArXSpbUIxxB3AH8lK0uqhbzSbh44C/wRuCZpOSGe39ZJiE8Bnwf22t4OTPTLTZfadyQdAJonxPshhvgkcIQ8TlRTmM7W0Za0YHs+z/AtkS2nSWXlT1vI1bZXlLRH+7akI0ma1C55aLIPn3ZWnfe87am6ZHMBx4ApSVMdgYvod92nfYesWO14Aw7NwrT5sWyP7V+RzXTtba3JCxqUsZR0A3jW9smmBWpDxaVjiDPAYTLy44MEXS3YvicpAV5I0uT3w4wxlC9t+xxwEPipCuUI/TygvN9K2m1JvyCzxqeHkRtWmHnIVXyarKBkD1n50WrP9E3biaSjtl9P59LVKy4dFrnLOaOsqGUPPdZ3gzXbJjvtvEmWOHt9zcqHV4IY4iRZWeIu4ItAy3aT0sBF4JKkU7bPSbqapMnNVROQNUym5eq+EXiErCrgo2QqP0n2E4B7+dZyEyj+BODWe/4TgAcZoxbxWDE+IPyg47+vLtaj5o1LZgAAAABJRU5ErkJggg=='; - var rotate = new Image(); - var rotateLeft; - var rotateTop; - var wh = this._calculateCurrentDimensions(); - var width = wh.x; - var height = wh.y; - var scaleOffset = this.cornerSize; - var left = -(width + scaleOffset) / 2; - var top = -(height + scaleOffset) / 2; - var methodName = this.transparentCorners ? 'stroke' : 'fill'; - - if (!this.hasControls) { - return this; - } - ctx.save(); - ctx.strokeStyle = this.cornerColor; - ctx.fillStyle = this.cornerColor; - if (!this.transparentCorners) { - ctx.strokeStyle = this.cornerStrokeColor; - } - this._setLineDash(ctx, this.cornerDashArray, null); - - // top-left - this._drawControl( - 'tl', - ctx, - methodName, - left, - top - ); - - // top-right - this._drawControl( - 'tr', - ctx, - methodName, - left + width, - top - ); - - // bottom-left - this._drawControl( - 'bl', - ctx, - methodName, - left, - top + height - ); - - // bottom-right - this._drawControl( - 'br', - ctx, - methodName, - left + width, - top + height - ); - - if (!this.get('lockUniScaling')) { - // middle-top - this._drawControl( - 'mt', - ctx, - methodName, - left + width / 2, - top - ); - - // middle-bottom - this._drawControl( - 'mb', - ctx, - methodName, - left + width / 2, - top + height - ); - - // middle-right - this._drawControl( - 'mr', - ctx, - methodName, - left + width, - top + height / 2 - ); - - // middle-left - this._drawControl( - 'ml', - ctx, - methodName, - left, - top + height / 2 - ); - } - // middle-top-rotate - if (this.hasRotatingPoint) { - rotate.src = rotationImage; - rotateLeft = left + width / 2 - 6; - rotateTop = top - this.rotatingPointOffset - 6; - ctx.drawImage(rotate, rotateLeft, rotateTop, 32, 32); - } - ctx.restore(); - - return this; - }; - } - - function preInitImageEditor(data) { - $.ajax({ - url: data['download-url'], - type: 'get', - success: function(responseData) { - var fileUrl = responseData; - initImageEditor(data, fileUrl); - } - }); - } - - function initImageEditor(data, fileUrl) { - var imageEditor; - var ps; - var blackTheme = { - 'common.bi.image': '', - 'common.bisize.width': '0', - 'common.bisize.height': '0', - 'common.backgroundImage': 'none', - 'common.backgroundColor': '#1e1e1e', - 'common.border': '0px', - - // header - 'header.backgroundImage': 'none', - 'header.backgroundColor': 'transparent', - 'header.border': '0px', - - // load button - 'loadButton.backgroundColor': '#fff', - 'loadButton.border': '1px solid #ddd', - 'loadButton.color': '#222', - 'loadButton.fontFamily': '\'Noto Sans\', sans-serif', - 'loadButton.fontSize': '12px', - - // download button - 'downloadButton.backgroundColor': '#fdba3b', - 'downloadButton.border': '1px solid #fdba3b', - 'downloadButton.color': '#fff', - 'downloadButton.fontFamily': '\'Noto Sans\', sans-serif', - 'downloadButton.fontSize': '12px', - - // main icons - 'menu.normalIcon.path': '/images/icon-d.svg', - 'menu.normalIcon.name': 'icon-d', - 'menu.activeIcon.path': '/images/icon-b.svg', - 'menu.activeIcon.name': 'icon-b', - 'menu.disabledIcon.path': '/images/icon-a.svg', - 'menu.disabledIcon.name': 'icon-a', - 'menu.hoverIcon.path': '/images/icon-c.svg', - 'menu.hoverIcon.name': 'icon-c', - 'menu.iconSize.width': '24px', - 'menu.iconSize.height': '24px', - - // submenu primary color - 'submenu.backgroundColor': '#1e1e1e', - 'submenu.partition.color': '#3c3c3c', - - // submenu icons - 'submenu.normalIcon.path': '/images/icon-d.svg', - 'submenu.normalIcon.name': 'icon-d', - 'submenu.activeIcon.path': '/images/icon-c.svg', - 'submenu.activeIcon.name': 'icon-c', - 'submenu.iconSize.width': '32px', - 'submenu.iconSize.height': '32px', - - // submenu labels - 'submenu.normalLabel.color': '#8a8a8a', - 'submenu.normalLabel.fontWeight': 'lighter', - 'submenu.activeLabel.color': '#fff', - 'submenu.activeLabel.fontWeight': 'lighter', - - // checkbox style - 'checkbox.border': '0px', - 'checkbox.backgroundColor': '#fff', - - // range style - 'range.pointer.color': '#fff', - 'range.bar.color': '#666', - 'range.subbar.color': '#d1d1d1', - - 'range.disabledPointer.color': '#414141', - 'range.disabledBar.color': '#282828', - 'range.disabledSubbar.color': '#414141', - - 'range.value.color': '#fff', - 'range.value.fontWeight': 'lighter', - 'range.value.fontSize': '11px', - 'range.value.border': '1px solid #353535', - 'range.value.backgroundColor': '#151515', - 'range.title.color': '#fff', - 'range.title.fontWeight': 'lighter', - - // colorpicker style - 'colorpicker.button.border': '1px solid #1e1e1e', - 'colorpicker.title.color': '#fff' - }; - - animateSpinner(null, true); - imageEditor = new tui.ImageEditor('#tui-image-editor', { - includeUI: { - loadImage: { - path: fileUrl, - name: data.filename - }, - theme: blackTheme, - initMenu: 'draw', - menuBarPosition: 'bottom' - }, - cssMaxWidth: 700, - cssMaxHeight: 500, - selectionStyle: { - cornerSize: 20, - rotatingPointOffset: 70, - borderColor: '#333', - cornerColor: '#333', - cornerStyle: 'circle', - borderScaleFactor: 3 - - }, - usageStatistics: false - }); - - imageEditor.on('image_loaded', () => { - $('.file-save-link').css('display', ''); - animateSpinner(null, false); - }); - - ps = new PerfectScrollbar($('.tui-image-editor-wrap')[0], { wheelSpeed: 0.5 }); - $('#tui-image-editor .tui-image-editor').on('mousewheel', (e) => { - var imageOriginalSize = { - width: imageEditor._graphics.canvasImage.width, - height: imageEditor._graphics.canvasImage.height - }; - var wDelta = e.originalEvent.wheelDelta || e.originalEvent.deltaY; - var imageEditorWindow = e.currentTarget; - var scrollContainer = $('.tui-image-editor-wrap'); - var initWidth = imageEditorWindow.style.width; - var initHeight = imageEditorWindow.style.height; - - var scrollContainerInitial = { - top: scrollContainer.scrollTop(), - left: scrollContainer.scrollLeft(), - height: scrollContainer[0].scrollHeight, - width: scrollContainer[0].scrollWidth - }; - - var mousePosition = { - top: e.clientY - (imageEditorWindow.offsetTop - scrollContainerInitial.top), - left: e.clientX - $(imageEditorWindow).offset().left - }; - - - var newWidth; - var newHeight; - var offsetY; - var offsetX; - if (wDelta > 0) { - newWidth = parseInt(initWidth, 10) * 1.1; - newHeight = parseInt(initHeight, 10) * 1.1; - if (newWidth > imageOriginalSize.width || newHeight > imageOriginalSize.height) { - newWidth = imageOriginalSize.width; - newHeight = imageOriginalSize.height; - } - } else { - newWidth = parseInt(initWidth, 10) * 0.9; - newHeight = parseInt(initHeight, 10) * 0.9; - if (parseInt(imageEditorWindow.dataset.minWidth, 10) * 0.5 > parseInt(newWidth, 10)) { - newWidth = parseInt(imageEditorWindow.dataset.minWidth, 10) * 0.5; - newHeight = parseInt(imageEditorWindow.dataset.minHeight, 10) * 0.5; - } - } - imageEditorWindow.style.width = newWidth + 'px'; - imageEditorWindow.style.height = newHeight + 'px'; - $(imageEditorWindow).find('canvas, .tui-image-editor-canvas-container') - .css('max-width', imageEditorWindow.style.width) - .css('max-height', imageEditorWindow.style.height); - if (imageEditorWindow.dataset.minHeight === undefined) { - imageEditorWindow.dataset.minHeight = initHeight; - imageEditorWindow.dataset.minWidth = initWidth; - } - - offsetY = (scrollContainer[0].scrollHeight - scrollContainerInitial.height) - * (mousePosition.top / scrollContainerInitial.height); - offsetX = (scrollContainer[0].scrollWidth - scrollContainerInitial.width) - * (mousePosition.left / scrollContainerInitial.width); - - scrollContainer.scrollTop(scrollContainerInitial.top + offsetY); - scrollContainer.scrollLeft(scrollContainerInitial.left + offsetX); - - ps.update(); - - e.preventDefault(); - e.stopPropagation(); - }); - $('.tui-image-editor-wrap')[0].onwheel = function() { return false; }; - $('.tui-image-editor-wrap').css('height', 'calc(100% - 150px)'); - - $('#fileEditModal').find('.file-name').text('Editing: ' + data.filename); - $('#fileEditModal').modal('show'); - - $('.tui-image-editor-header').hide(); - - $('.file-save-link').css('display', 'none'); - $('.file-save-link').off().click(function(ev) { - var imageBlob; - var imageDataURL; - var imageParams; - var dataUpload = new FormData(); - var blobArray; - var bytePosition; - - ev.preventDefault(); - ev.stopPropagation(); - - if (data['mime-type'] === 'image/png') { - imageParams = { format: 'png' }; - } else { - imageParams = { format: 'jpeg', quality: (data.quality / 100) }; - } - - imageDataURL = imageEditor.toDataURL(imageParams); - imageDataURL = atob(imageDataURL.split(',')[1]); - - blobArray = new Uint8Array(imageDataURL.length); - - for (bytePosition = 0; bytePosition < imageDataURL.length; bytePosition += 1) { - blobArray[bytePosition] = imageDataURL.charCodeAt(bytePosition); - } - - imageBlob = new Blob([blobArray]); - - function closeEditor() { - animateSpinner(null, false); - imageEditor.destroy(); - imageEditor = {}; - $('#tui-image-editor').html(''); - $('#fileEditModal').modal('hide'); - } - - dataUpload.append('image', imageBlob); - animateSpinner(null, true); - $.ajax({ - type: 'POST', - url: '/files/' + data.id + '/update_image', - data: dataUpload, - contentType: false, - processData: false, - success: function(res) { - $('#modal_link' + data.id).parent().html(res.html); - initPreviewModal(); - } - }).done(function() { - closeEditor(); - - }); - if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); - }); - - window.onresize = function() { - imageEditor.ui.resizeEditor(); - }; - } function openPreviewModal(name, url, downloadUrl) { + + /* var modal = $('#filePreviewModal'); updateFabricControls(); $.ajax({ @@ -480,7 +88,7 @@ var FilePreviewModal = (function() { ev.preventDefault(); ev.stopPropagation(); modal.modal('hide'); - preInitImageEditor(data); + //preInitImageEditor(data); }); } else { modal.find('.file-edit-link').css('display', 'none'); @@ -504,7 +112,7 @@ var FilePreviewModal = (function() { error: function() { // TODO } - }); + });*/ } function clearPrevieModal() { @@ -545,7 +153,8 @@ var FilePreviewModal = (function() { } return Object.freeze({ - init: initPreviewModal, - imageEditor: initImageEditor + init: initPreviewModal }); -}(window)); +}()); + +FilePreviewModal.init(); diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js new file mode 100644 index 000000000..7dfea2fa8 --- /dev/null +++ b/app/assets/javascripts/sitewide/image_editor.js @@ -0,0 +1,407 @@ +var ImageEditorModal = (function() { + function updateFabricControls() { + fabric.Object.prototype.drawBorders = function(ctx, styleOverride = {}) { + var wh = this._calculateCurrentDimensions(); + var strokeWidth = 1 / this.borderScaleFactor; + var width = wh.x + strokeWidth; + var height = wh.y + strokeWidth; + var drawRotatingPoint = typeof styleOverride.hasRotatingPoint !== 'undefined' + ? styleOverride.hasRotatingPoint : this.hasRotatingPoint; + var hasControls = typeof styleOverride.hasControls !== 'undefined' + ? styleOverride.hasControls : this.hasControls; + var rotatingPointOffset = typeof styleOverride.rotatingPointOffset !== 'undefined' + ? styleOverride.rotatingPointOffset : this.rotatingPointOffset; + var rotateHeight = -height / 2; + ctx.save(); + ctx.strokeStyle = styleOverride.borderColor || this.borderColor; + this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null); + ctx.strokeRect( + -width / 2, + -height / 2, + width, + height + ); + if (drawRotatingPoint && this.isControlVisible('mtr') && hasControls) { + ctx.beginPath(); + ctx.moveTo(0, rotateHeight); + ctx.lineTo(0, rotateHeight - rotatingPointOffset + 10); + ctx.stroke(); + } + ctx.restore(); + return this; + }; + + fabric.Object.prototype.drawControls = function(ctx) { + var rotationImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAHEklEQVRoge2bYYgdVxXHf/8lhGUJYQ1hKSFIiDXUEoq+e1lClLgfRLSGfNGSVvxgVIyiIqGWEhfpp6IBayiSBJQiQo3YKEQqsQSpmkopYWYJIUSIEkrYhhiWEEIoyxLe3w8zb53Mm/fezNvdlhf7h8feeTv3zvnPPffcc885T8b8P2Hs/RbgvcYHhB90rFurgWOIY8A4sNN2S9JHbG+VtBEYt70E3AFuSvoXcDH/3E7SpL1WcqnKaMUQ1wFjSZosNRkshrgR2A60gKdsR0mTALaRxID2InBR0ingHHA1SZOFIblVootwDHEn8ITtDZJ+naTJxUGDxBAngN2290uaAbaxMu1p274u6S3gN8DfkjS5vYLxltFFOLTCG5KmyQT+h+1n0rn0fFXnXG132n4mJ7qFVbYLtm9KOg8cJSO+InW/j3AMcQr4T+meS8DTSZqc7XwRWmFM0hbbX5U0S7ZW1xpt4DhwwvaVdC69N8wg5dmoUsOdwNEY4nTnC0m7gBNNyNpeaXsM+BbwS0n76jyzCuUZ3gK8UxY0NyrnbT8taQx4yfb2vP1+4AbwLHAySZNGMz1Q4I4FBaYl/QH4M/BwsW+dWVplPAT8HPhhaIWNTTo2taRTnUbhRdRpt4EFYD7/e8/2OmBS0pacQFNZNgKHJC0BP6nbaaBKrwCLwHXgNeBV4Jrtd4EloJ2/jPXABBnhL9h+XNJ2mhnBO7YPSDpdx4J3Ebb9jqTltdvLSRggwAXgmKTXkjS5U1fyGOI4sAf4PjANbK7Tz/ZVSV8Hzg0i3aVGHULlv+V2nwcfk/RKkibzdYQtIkmTReBsDDEB9gHfAeIgL03SNuAQ8G+yZdMTPY1WQ4PTBi5LegI4PgzZIpI0uQW8DOwHzkjqa4ltjwGfBb40aOyh1nDFW75r+2A6l54c1LcpYoibbf8I+BqwobPMAIrt/PqW7U+kc+m1XuPV2kfLW02Fmm+QNBtDbDWjMxhJmixI+rGkl4vLrNzOrzcBB0Mr9OQ1kHC/9VO8B3gUOBFaYXfuY68akjS5YXsWqPTpS7Luk7Sz1z1dgpXXbsP9dlrSMWCmn2DDIJ1Lb9k+BLxd/l9RxYEdwN78iNuFoYzWAM/q42S+d8+3PCwkXQBO5ufm4vdFOdYDn6TgJBXRRbhqO+p1T5/2Y8ALMcStg0g0QZIm7wK/I9t+llGx1HaTncm7UCa8SLbFDEQN//kR2zvqjNUESZpclHSm+F2F5Z4kI92F+wjbvg0kgx5aM1wzD1xpyKcuftt5XgcVmvbpqo73Lex0Lm3HEA8AB4CHbY/12/f6tBckvUjmS68FLgJXc7+7Fyq3yMog3igghvgSmTPSz8B+KJ1L74uFjXJc+p9Fzav6AB8udxplwm+XnSDb97U7IeIiRpaw7eVjZ/EYWzrSbij3G1nCRTQJK40s4Txl02lT1QbulvuNLGHb22rc05WtGFnCkj5WMlDLRqvgL3Sdi9cse7iWyI+fM/3CUcD18h4MI0qY7HCy7GX18ATnqjqOqko/VbyoMlqS/l7VceQIh1Z4DHi83z2SbgNvVv1vpAjHECck7Sc72PTcc22/RYXBghEjTLZ2nwTGywGKwvWSpDfIEm5dGMpo5Xnk7wEztr8t6fJa1mXkz9xk+0VJ23u4kR1cAc70yio2nuG8vOE54AfAp/Kg3aNDcGjyzIeA5/PKhL7ZENt/IjsvV6IR4RjiBtuHbX+D/yW8dtk+Elph1cM5+TM3A4dtfwWq/ebCer4l6UQ/basdAMgfPAt8E5gohXPaki6TRUou5TmiFSEPs24lywN/jsHLbxGYTdLkZ/1uqjXDeVbvObKSgwnoUqsxstKIU7a/G1qh6+DdBKEVNtn+MnAK2Mtgsm3bfwFeGTR2rRkOrfAZSa9SL297F7hANjNnm5QbhVZYL2mP7UP5eq2VLgWuArXSpbUIxxB3AH8lK0uqhbzSbh44C/wRuCZpOSGe39ZJiE8Bnwf22t4OTPTLTZfadyQdAJonxPshhvgkcIQ8TlRTmM7W0Za0YHs+z/AtkS2nSWXlT1vI1bZXlLRH+7akI0ma1C55aLIPn3ZWnfe87am6ZHMBx4ApSVMdgYvod92nfYesWO14Aw7NwrT5sWyP7V+RzXTtba3JCxqUsZR0A3jW9smmBWpDxaVjiDPAYTLy44MEXS3YvicpAV5I0uT3w4wxlC9t+xxwEPipCuUI/TygvN9K2m1JvyCzxqeHkRtWmHnIVXyarKBkD1n50WrP9E3biaSjtl9P59LVKy4dFrnLOaOsqGUPPdZ3gzXbJjvtvEmWOHt9zcqHV4IY4iRZWeIu4ItAy3aT0sBF4JKkU7bPSbqapMnNVROQNUym5eq+EXiErCrgo2QqP0n2E4B7+dZyEyj+BODWe/4TgAcZoxbxWDE+IPyg47+vLtaj5o1LZgAAAABJRU5ErkJggg=='; + var rotate = new Image(); + var rotateLeft; + var rotateTop; + var wh = this._calculateCurrentDimensions(); + var width = wh.x; + var height = wh.y; + var scaleOffset = this.cornerSize; + var left = -(width + scaleOffset) / 2; + var top = -(height + scaleOffset) / 2; + var methodName = this.transparentCorners ? 'stroke' : 'fill'; + + if (!this.hasControls) { + return this; + } + ctx.save(); + ctx.strokeStyle = this.cornerColor; + ctx.fillStyle = this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = this.cornerStrokeColor; + } + this._setLineDash(ctx, this.cornerDashArray, null); + + // top-left + this._drawControl( + 'tl', + ctx, + methodName, + left, + top + ); + + // top-right + this._drawControl( + 'tr', + ctx, + methodName, + left + width, + top + ); + + // bottom-left + this._drawControl( + 'bl', + ctx, + methodName, + left, + top + height + ); + + // bottom-right + this._drawControl( + 'br', + ctx, + methodName, + left + width, + top + height + ); + + if (!this.get('lockUniScaling')) { + // middle-top + this._drawControl( + 'mt', + ctx, + methodName, + left + width / 2, + top + ); + + // middle-bottom + this._drawControl( + 'mb', + ctx, + methodName, + left + width / 2, + top + height + ); + + // middle-right + this._drawControl( + 'mr', + ctx, + methodName, + left + width, + top + height / 2 + ); + + // middle-left + this._drawControl( + 'ml', + ctx, + methodName, + left, + top + height / 2 + ); + } + // middle-top-rotate + if (this.hasRotatingPoint) { + rotate.src = rotationImage; + rotateLeft = left + width / 2 - 6; + rotateTop = top - this.rotatingPointOffset - 6; + ctx.drawImage(rotate, rotateLeft, rotateTop, 32, 32); + } + ctx.restore(); + + return this; + }; + } + + function preInitImageEditor(data) { + $.ajax({ + url: data['download-url'], + type: 'get', + success: function(responseData) { + var fileUrl = responseData; + initImageEditor(data, fileUrl); + } + }); + } + + function initImageEditor(data, fileUrl) { + var imageEditor; + var ps; + var blackTheme = { + 'common.bi.image': '', + 'common.bisize.width': '0', + 'common.bisize.height': '0', + 'common.backgroundImage': 'none', + 'common.backgroundColor': '#1e1e1e', + 'common.border': '0px', + + // header + 'header.backgroundImage': 'none', + 'header.backgroundColor': 'transparent', + 'header.border': '0px', + + // load button + 'loadButton.backgroundColor': '#fff', + 'loadButton.border': '1px solid #ddd', + 'loadButton.color': '#222', + 'loadButton.fontFamily': '\'Noto Sans\', sans-serif', + 'loadButton.fontSize': '12px', + + // download button + 'downloadButton.backgroundColor': '#fdba3b', + 'downloadButton.border': '1px solid #fdba3b', + 'downloadButton.color': '#fff', + 'downloadButton.fontFamily': '\'Noto Sans\', sans-serif', + 'downloadButton.fontSize': '12px', + + // main icons + 'menu.normalIcon.path': '/images/icon-d.svg', + 'menu.normalIcon.name': 'icon-d', + 'menu.activeIcon.path': '/images/icon-b.svg', + 'menu.activeIcon.name': 'icon-b', + 'menu.disabledIcon.path': '/images/icon-a.svg', + 'menu.disabledIcon.name': 'icon-a', + 'menu.hoverIcon.path': '/images/icon-c.svg', + 'menu.hoverIcon.name': 'icon-c', + 'menu.iconSize.width': '24px', + 'menu.iconSize.height': '24px', + + // submenu primary color + 'submenu.backgroundColor': '#1e1e1e', + 'submenu.partition.color': '#3c3c3c', + + // submenu icons + 'submenu.normalIcon.path': '/images/icon-d.svg', + 'submenu.normalIcon.name': 'icon-d', + 'submenu.activeIcon.path': '/images/icon-c.svg', + 'submenu.activeIcon.name': 'icon-c', + 'submenu.iconSize.width': '32px', + 'submenu.iconSize.height': '32px', + + // submenu labels + 'submenu.normalLabel.color': '#8a8a8a', + 'submenu.normalLabel.fontWeight': 'lighter', + 'submenu.activeLabel.color': '#fff', + 'submenu.activeLabel.fontWeight': 'lighter', + + // checkbox style + 'checkbox.border': '0px', + 'checkbox.backgroundColor': '#fff', + + // range style + 'range.pointer.color': '#fff', + 'range.bar.color': '#666', + 'range.subbar.color': '#d1d1d1', + + 'range.disabledPointer.color': '#414141', + 'range.disabledBar.color': '#282828', + 'range.disabledSubbar.color': '#414141', + + 'range.value.color': '#fff', + 'range.value.fontWeight': 'lighter', + 'range.value.fontSize': '11px', + 'range.value.border': '1px solid #353535', + 'range.value.backgroundColor': '#151515', + 'range.title.color': '#fff', + 'range.title.fontWeight': 'lighter', + + // colorpicker style + 'colorpicker.button.border': '1px solid #1e1e1e', + 'colorpicker.title.color': '#fff' + }; + + animateSpinner(null, true); + imageEditor = new tui.ImageEditor('#tui-image-editor', { + includeUI: { + loadImage: { + path: fileUrl, + name: data.filename + }, + theme: blackTheme, + initMenu: 'draw', + menuBarPosition: 'bottom' + }, + cssMaxWidth: 700, + cssMaxHeight: 500, + selectionStyle: { + cornerSize: 20, + rotatingPointOffset: 70, + borderColor: '#333', + cornerColor: '#333', + cornerStyle: 'circle', + borderScaleFactor: 3 + + }, + usageStatistics: false + }); + + imageEditor.on('image_loaded', () => { + $('.file-save-link').css('display', ''); + animateSpinner(null, false); + }); + + ps = new PerfectScrollbar($('.tui-image-editor-wrap')[0], { wheelSpeed: 0.5 }); + $('#tui-image-editor .tui-image-editor').on('mousewheel', (e) => { + var imageOriginalSize = { + width: imageEditor._graphics.canvasImage.width, + height: imageEditor._graphics.canvasImage.height + }; + var wDelta = e.originalEvent.wheelDelta || e.originalEvent.deltaY; + var imageEditorWindow = e.currentTarget; + var scrollContainer = $('.tui-image-editor-wrap'); + var initWidth = imageEditorWindow.style.width; + var initHeight = imageEditorWindow.style.height; + + var scrollContainerInitial = { + top: scrollContainer.scrollTop(), + left: scrollContainer.scrollLeft(), + height: scrollContainer[0].scrollHeight, + width: scrollContainer[0].scrollWidth + }; + + var mousePosition = { + top: e.clientY - (imageEditorWindow.offsetTop - scrollContainerInitial.top), + left: e.clientX - $(imageEditorWindow).offset().left + }; + + + var newWidth; + var newHeight; + var offsetY; + var offsetX; + if (wDelta > 0) { + newWidth = parseInt(initWidth, 10) * 1.1; + newHeight = parseInt(initHeight, 10) * 1.1; + if (newWidth > imageOriginalSize.width || newHeight > imageOriginalSize.height) { + newWidth = imageOriginalSize.width; + newHeight = imageOriginalSize.height; + } + } else { + newWidth = parseInt(initWidth, 10) * 0.9; + newHeight = parseInt(initHeight, 10) * 0.9; + if (parseInt(imageEditorWindow.dataset.minWidth, 10) * 0.5 > parseInt(newWidth, 10)) { + newWidth = parseInt(imageEditorWindow.dataset.minWidth, 10) * 0.5; + newHeight = parseInt(imageEditorWindow.dataset.minHeight, 10) * 0.5; + } + } + imageEditorWindow.style.width = newWidth + 'px'; + imageEditorWindow.style.height = newHeight + 'px'; + $(imageEditorWindow).find('canvas, .tui-image-editor-canvas-container') + .css('max-width', imageEditorWindow.style.width) + .css('max-height', imageEditorWindow.style.height); + if (imageEditorWindow.dataset.minHeight === undefined) { + imageEditorWindow.dataset.minHeight = initHeight; + imageEditorWindow.dataset.minWidth = initWidth; + } + + offsetY = (scrollContainer[0].scrollHeight - scrollContainerInitial.height) + * (mousePosition.top / scrollContainerInitial.height); + offsetX = (scrollContainer[0].scrollWidth - scrollContainerInitial.width) + * (mousePosition.left / scrollContainerInitial.width); + + scrollContainer.scrollTop(scrollContainerInitial.top + offsetY); + scrollContainer.scrollLeft(scrollContainerInitial.left + offsetX); + + ps.update(); + + e.preventDefault(); + e.stopPropagation(); + }); + $('.tui-image-editor-wrap')[0].onwheel = function() { return false; }; + $('.tui-image-editor-wrap').css('height', 'calc(100% - 150px)'); + + $('#fileEditModal').find('.file-name').text('Editing: ' + data.filename); + $('#fileEditModal').modal('show'); + + $('.tui-image-editor-header').hide(); + + $('.file-save-link').css('display', 'none'); + $('.file-save-link').off().click(function(ev) { + var imageBlob; + var imageDataURL; + var imageParams; + var dataUpload = new FormData(); + var blobArray; + var bytePosition; + + ev.preventDefault(); + ev.stopPropagation(); + + if (data['mime-type'] === 'image/png') { + imageParams = { format: 'png' }; + } else { + imageParams = { format: 'jpeg', quality: (data.quality / 100) }; + } + + imageDataURL = imageEditor.toDataURL(imageParams); + imageDataURL = atob(imageDataURL.split(',')[1]); + + blobArray = new Uint8Array(imageDataURL.length); + + for (bytePosition = 0; bytePosition < imageDataURL.length; bytePosition += 1) { + blobArray[bytePosition] = imageDataURL.charCodeAt(bytePosition); + } + + imageBlob = new Blob([blobArray]); + + function closeEditor() { + animateSpinner(null, false); + imageEditor.destroy(); + imageEditor = {}; + $('#tui-image-editor').html(''); + $('#fileEditModal').modal('hide'); + } + + dataUpload.append('image', imageBlob); + animateSpinner(null, true); + $.ajax({ + type: 'POST', + url: '/files/' + data.id + '/update_image', + data: dataUpload, + contentType: false, + processData: false, + success: function(res) { + $('#modal_link' + data.id).parent().html(res.html); + initPreviewModal(); + } + }).done(function() { + closeEditor(); + + }); + if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); + }); + + window.onresize = function() { + imageEditor.ui.resizeEditor(); + }; + } + +}()); diff --git a/app/assets/javascripts/sitewide/marvinjs_editor.js b/app/assets/javascripts/sitewide/marvinjs_editor.js index 5467d72d6..052591750 100644 --- a/app/assets/javascripts/sitewide/marvinjs_editor.js +++ b/app/assets/javascripts/sitewide/marvinjs_editor.js @@ -166,7 +166,6 @@ var MarvinJsEditorApi = (function() { TinyMCE.updateImages(config.editor); } $(marvinJsModal).modal('hide'); - FilePreviewModal.init(); config.button.dataset.inProgress = false; }).error((response) => { if (response.status === 403) { diff --git a/app/assets/javascripts/sitewide/repository_row_info_modal.js b/app/assets/javascripts/sitewide/repository_row_info_modal.js index af74b1da7..a4d5364fc 100644 --- a/app/assets/javascripts/sitewide/repository_row_info_modal.js +++ b/app/assets/javascripts/sitewide/repository_row_info_modal.js @@ -16,7 +16,6 @@ $(this).find('.modal-body #repository_row-info-table').DataTable().destroy(); $(this).remove(); }); - FilePreviewModal.init(); $('#repository_row-info-table').DataTable({ dom: 'RBltpi', stateSave: false, diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index b562f976e..2f0b27951 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -19,6 +19,25 @@ class AssetsController < ApplicationController before_action :check_edit_permission, only: %i(edit toggle_view_mode) def file_preview + can_edit = if @assoc.class == Step + can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol) + elsif @assoc.class == Result + can_manage_module?(@my_module) + elsif @assoc.class == RepositoryCell && !@repository.is_a?(RepositorySnapshot) + can_manage_repository_rows?(@repository) + end + + render json: {html: render_to_string( + { + partial: "shared/file_preview/content.html.erb", + locals: { + asset: @asset, + can_edit: can_edit + } + } + )} + + return true file_type = @asset.file.metadata[:asset_type] || (@asset.previewable? ? 'previewable' : false) response_json = { 'id' => @asset.id, @@ -28,13 +47,7 @@ class AssetsController < ApplicationController 'download-url' => asset_file_url_path(@asset) } - can_edit = if @assoc.class == Step - can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol) - elsif @assoc.class == Result - can_manage_module?(@my_module) - elsif @assoc.class == RepositoryCell && !@repository.is_a?(RepositorySnapshot) - can_manage_repository_rows?(@repository) - end + if response_json['type'] == 'previewable' if ['image/jpeg', 'image/pjpeg'].include? @asset.file.content_type response_json['quality'] = @asset.file_image_quality || 80 diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f83f49d62..e01e1f280 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -46,7 +46,7 @@ <%= render "shared/about_modal" %> - <%= render "shared/file_preview_modal.html.erb" %> + <%= render "shared/file_preview/modal.html.erb" %> <%= render "shared/file_edit_modal.html.erb" %> <%= render "shared/marvinjs_modal.html.erb" %> <%= render "shared/navigation" %> diff --git a/app/views/my_modules/archive.html.erb b/app/views/my_modules/archive.html.erb index 5b5bed9bd..1ccad0796 100644 --- a/app/views/my_modules/archive.html.erb +++ b/app/views/my_modules/archive.html.erb @@ -17,5 +17,3 @@ <% end %>
- - diff --git a/app/views/repositories/_repository_row_info_modal.html.erb b/app/views/repositories/_repository_row_info_modal.html.erb index ce9ed0173..4745c5fc6 100644 --- a/app/views/repositories/_repository_row_info_modal.html.erb +++ b/app/views/repositories/_repository_row_info_modal.html.erb @@ -93,7 +93,6 @@ <% end %> <% end %>
-
diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb new file mode 100644 index 000000000..0e8c337dc --- /dev/null +++ b/app/views/shared/file_preview/_content.html.erb @@ -0,0 +1,24 @@ +
+ + <%= asset.file_name %> + + +

<%= t('Download')%>

+ + +
+
+
+ <% if asset.previewable? %> + <%= image_tag asset.large_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + <% end %> +
+
+
+
diff --git a/app/views/shared/file_preview/_modal.html.erb b/app/views/shared/file_preview/_modal.html.erb new file mode 100644 index 000000000..380010df0 --- /dev/null +++ b/app/views/shared/file_preview/_modal.html.erb @@ -0,0 +1,13 @@ + From d99e279ecc5608dfc3e3eab1023945a5b86336b1 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 22 Oct 2020 13:41:17 +0200 Subject: [PATCH 18/35] Add gallery to file preview --- app/assets/javascripts/protocols/index.js | 1 + .../repositories/repository_datatable.js | 7 - .../javascripts/sitewide/file_preview.js | 158 ++---------------- .../javascripts/sitewide/image_editor.js | 45 +++-- .../javascripts/sitewide/marvinjs_editor.js | 15 +- .../stylesheets/shared/file_preview.scss | 141 ++++++++++++++++ .../shared_styles/elements/buttons.scss | 3 +- app/assets/stylesheets/steps.scss | 6 + app/assets/stylesheets/themes/scinote.scss | 133 --------------- app/controllers/assets_controller.rb | 140 ++++------------ app/permissions/asset.rb | 33 ++++ app/views/assets/_asset.html.erb | 7 +- app/views/assets/_asset_thumbnail.html.erb | 7 +- .../assets/wopi/_file_wopi_controls.html.erb | 22 +-- .../shared/file_preview/_content.html.erb | 96 ++++++++++- .../shared/file_preview/_file_icon.html.erb | 4 + app/views/steps/attachments/_list.html.erb | 2 +- config/locales/en.yml | 3 + 18 files changed, 385 insertions(+), 438 deletions(-) create mode 100644 app/assets/stylesheets/shared/file_preview.scss create mode 100644 app/permissions/asset.rb create mode 100644 app/views/shared/file_preview/_file_icon.html.erb diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js index 99986c960..8453ff040 100644 --- a/app/assets/javascripts/protocols/index.js +++ b/app/assets/javascripts/protocols/index.js @@ -220,6 +220,7 @@ function initProtocolPreviewModal() { modal.modal("show"); ProtocolRepositoryHeader.init(); initHandsOnTable(modalBody); + }, error: function (error) { // TODO } diff --git a/app/assets/javascripts/repositories/repository_datatable.js b/app/assets/javascripts/repositories/repository_datatable.js index 52daf7973..d0698f9fe 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js +++ b/app/assets/javascripts/repositories/repository_datatable.js @@ -361,12 +361,6 @@ var RepositoryDatatable = (function(global) { }); } - function disableCheckboxToggleOnAssetDownload() { - $('.file-preview-link').on('click', function(ev) { - ev.stopPropagation(); - }); - } - // Adjust columns width in table header function adjustTableHeader() { TABLE.columns.adjust(); @@ -546,7 +540,6 @@ var RepositoryDatatable = (function(global) { }); }, fnInitComplete: function() { - disableCheckboxToggleOnAssetDownload(); initHeaderTooltip(); disableCheckboxToggleOnCheckboxPreview(); diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js index e4ba247ea..20280be98 100644 --- a/app/assets/javascripts/sitewide/file_preview.js +++ b/app/assets/javascripts/sitewide/file_preview.js @@ -1,155 +1,31 @@ /* eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/ /* eslint no-use-before-define: ["error", { "functions": false }]*/ /* eslint-disable no-underscore-dangle */ -/* global Uint8Array fabric tui animateSpinner Assets ActiveStoragePreviews - PerfectScrollbar MarvinJsEditor refreshProtocolStatusBar */ - - var FilePreviewModal = (function() { 'use strict'; - //var readOnly = false; - - function initPreviewModal(options = {}) { + function initPreviewModal() { $(document).on('click', '.file-preview-link', function(e) { + var params = {}; + var galleryViewId = $(this).data('gallery-view-id'); e.preventDefault(); - $.get($(this).data('preview-url'), function(result) { + e.stopPropagation(); + params.gallery = $(`.file-preview-link[data-gallery-view-id=${galleryViewId}]`) + .toArray().sort((a, b) => $(a).closest('.step-asset').css('order') - $(b).closest('.step-asset').css('order')) + .map(i => i.dataset.id); + $.get($(this).data('preview-url'), params, function(result) { $('#filePreviewModal .modal-content').html(result.html); $('#filePreviewModal').modal('show'); - }) - }) - //var name; - //var url; - //var downloadUrl; - //readOnly = options.readOnly; - - //return false; - // - //$('.file-preview-link').off('click'); - //$('.file-preview-link').click(function(e) { - // if ($(e.target.offsetParent).hasClass('change-preview-type')) return; - // e.preventDefault(); - // name = $(this).find('.attachment-label').text(); - // url = $(this).data('preview-url'); - // downloadUrl = $(this).attr('href'); - // openPreviewModal(name, url, downloadUrl); - // return true; - //}); - // - //$('#filePreviewModal').find('.preview-close').click(function() { - // $('#filePreviewModal').find('.file-preview-container').html(''); - // $('#filePreviewModal').modal('hide'); - // if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); - //}); - } - - // Adding rotation icon - - - function openPreviewModal(name, url, downloadUrl) { - - /* - var modal = $('#filePreviewModal'); - updateFabricControls(); - $.ajax({ - url: url, - type: 'GET', - dataType: 'json', - success: function(data) { - var link = modal.find('.file-download-link'); - clearPrevieModal(); - if (Object.prototype.hasOwnProperty.call(data, 'wopi-controls')) { - modal.find('.file-wopi-controls').html(data['wopi-controls']); - } - link.attr('href', downloadUrl); - link.attr('data-no-turbolink', true); - link.attr('data-status', 'asset-present'); - if (data.type === 'previewable') { - animateSpinner('.file-preview-container', false); - if (data['wopi-preview-url']) { - modal.find('.file-preview-container') - .html(``); - } else { - modal.find('.file-preview-container') - .append($('') - .css('opacity', 0) - .attr('src', data['large-preview-url']) - .attr('alt', name) - .on('error', ActiveStoragePreviews.reCheckPreview) - .on('load', ActiveStoragePreviews.showPreview) - .click(function(ev) { - ev.stopPropagation(); - })); - } - if (!readOnly && data.editable) { - modal.find('.file-edit-link').css('display', ''); - modal.find('.file-edit-link').off().click(function(ev) { - $.post('/files/' + data.id + '/start_edit_image'); - ev.preventDefault(); - ev.stopPropagation(); - modal.modal('hide'); - //preInitImageEditor(data); - }); - } else { - modal.find('.file-edit-link').css('display', 'none'); - } - } else if (data.type === 'marvinjs') { - openMarvinEditModal(data, modal); - } else { - modal.find('.file-edit-link').css('display', 'none'); - modal.find('.file-preview-container').html(data['preview-icon']); - } - if (readOnly) { - modal.find('#wopi_file_edit_button').remove(); - } - modal.find('.file-name').text(name); - modal.modal(); - modal.find('a[disabled=disabled]').click(function(ev) { - ev.preventDefault(); - }); - $('.modal-backdrop').last().css('z-index', modal.css('z-index') - 1); - }, - error: function() { - // TODO - } - });*/ - } - - function clearPrevieModal() { - var modal = $('#filePreviewModal'); - modal.find('.file-preview-container').empty(); - modal.find('.file-wopi-controls').empty(); - modal.find('.file-edit-link').css('display', 'none'); - } - - function openMarvinEditModal(data, modal) { - modal.find('.file-preview-container') - .append($('') - .css('opacity', 0) - .attr('src', data['large-preview-url']) - .attr('alt', data.name) - .on('error', ActiveStoragePreviews.reCheckPreview) - .on('load', ActiveStoragePreviews.showPreview) - .click(function(ev) { - ev.stopPropagation(); - })); - if (!readOnly && data.editable) { - modal.find('.file-edit-link').css('display', ''); - modal.find('.file-edit-link').off().click(function(ev) { - ev.preventDefault(); - ev.stopPropagation(); - modal.modal('hide'); - $.post(data['update-url'] + '/start_editing'); - MarvinJsEditor.open({ - mode: 'edit', - data: data.description, - name: data.name, - marvinUrl: data['update-url'] - }); }); - } else { - modal.find('.file-edit-link').css('display', 'none'); - } + }); + + $(document).on('click', '#filePreviewModal .gallery-switcher', function(e) { + e.preventDefault(); + e.stopPropagation(); + $.get($(this).attr('href'), { gallery: $(this).data('gallery-elements') }, function(result) { + $('#filePreviewModal .modal-content').html(result.html); + }); + }); } return Object.freeze({ diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js index 7dfea2fa8..3be16555e 100644 --- a/app/assets/javascripts/sitewide/image_editor.js +++ b/app/assets/javascripts/sitewide/image_editor.js @@ -1,3 +1,6 @@ +/* global animateSpinner fabric PerfectScrollbar refreshProtocolStatusBar tui Uint8Array*/ +/* eslint-disable no-underscore-dangle */ + var ImageEditorModal = (function() { function updateFabricControls() { fabric.Object.prototype.drawBorders = function(ctx, styleOverride = {}) { @@ -141,17 +144,6 @@ var ImageEditorModal = (function() { }; } - function preInitImageEditor(data) { - $.ajax({ - url: data['download-url'], - type: 'get', - success: function(responseData) { - var fileUrl = responseData; - initImageEditor(data, fileUrl); - } - }); - } - function initImageEditor(data, fileUrl) { var imageEditor; var ps; @@ -389,12 +381,10 @@ var ImageEditorModal = (function() { contentType: false, processData: false, success: function(res) { - $('#modal_link' + data.id).parent().html(res.html); - initPreviewModal(); + $(`.step-asset[data-asset-id=${data.id}]`).replaceWith(res.html); + $(`.step-asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder'); + closeEditor(); } - }).done(function() { - closeEditor(); - }); if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar(); }); @@ -404,4 +394,27 @@ var ImageEditorModal = (function() { }; } + function preInitImageEditor() { + $(document).on('click', '.image-edit-button', function() { + var editButton = $(this); + updateFabricControls(); + $.get(editButton.data('image-url'), function(responseData) { + var fileUrl = responseData; + var data = { + id: editButton.data('image-id'), + quality: editButton.data('image-quality'), + filename: editButton.data('image-name'), + 'mime-type': editButton.data('image-mime-type') + }; + $('#filePreviewModal').modal('hide'); + $.post(editButton.data('start-edit-url')); + initImageEditor(data, fileUrl); + }); + }); + } + + return Object.freeze({ + init: preInitImageEditor + }); }()); +ImageEditorModal.init(); diff --git a/app/assets/javascripts/sitewide/marvinjs_editor.js b/app/assets/javascripts/sitewide/marvinjs_editor.js index 052591750..1bf2f63d3 100644 --- a/app/assets/javascripts/sitewide/marvinjs_editor.js +++ b/app/assets/javascripts/sitewide/marvinjs_editor.js @@ -1,5 +1,4 @@ -/* global TinyMCE, ChemicalizeMarvinJs, MarvinJSUtil, I18n, FilePreviewModal, tinymce */ -/* global Results, Comments */ +/* global TinyMCE, ChemicalizeMarvinJs, MarvinJSUtil, I18n, tinymce, HelperModule */ /* eslint-disable no-param-reassign */ /* eslint-disable wrap-iife */ /* eslint-disable no-use-before-define */ @@ -318,7 +317,17 @@ var MarvinJsEditorApi = (function() { })(); // Initialization - +$(document).on('click', '.marvinjs-edit-button', function() { + var editButton = $(this); + $.post(editButton.data('sketch-start-edit-url')); + $('#filePreviewModal').modal('hide'); + MarvinJsEditor.open({ + mode: 'edit', + data: editButton.data('sketch-description'), + name: editButton.data('sketch-name'), + marvinUrl: editButton.data('update-url') + }); +}); $(document).on('turbolinks:load', function() { MarvinJsEditor = MarvinJsEditorApi(); diff --git a/app/assets/stylesheets/shared/file_preview.scss b/app/assets/stylesheets/shared/file_preview.scss new file mode 100644 index 000000000..3e042b78c --- /dev/null +++ b/app/assets/stylesheets/shared/file_preview.scss @@ -0,0 +1,141 @@ +// scss-lint:disable ImportantRule PropertyUnits NestingDepth SelectorDepth + +// Image preview modal +.modal-file-preview { + background: transparent; + font-size: $font-size-base; + padding: 0 !important; + + .modal-dialog { + background: inherit; + height: 100%; + margin: 0; + padding: 0; + width: 100%; + } + + .modal-content { + background: inherit; + border: 0; + border-radius: 0; + height: auto; + min-height: 100%; + } + + .file-preview-container { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + text-align: center; + width: 100%; + + &.processing { + background-image: url("/images/medium/processing.gif"); + background-position: center; + background-repeat: no-repeat; + } + + .wopi-file-preview { + height: 100%; + width: 100%; + } + + } + + img { + background: url(asset-path("custom/checkerboard-pattern.png")); + height: auto; + max-width: 100%; + + @media (max-height: 520px) { + height: 80%; + max-width: 100%; + } + } + + .modal-header { + align-items: center; + background: $color-white; + display: flex; + height: 4em; + padding: 0 1em; + + .file-name { + font-weight: bold; + margin-right: auto; + } + } + + .modal-body { + align-items: center; + background: transparent; + display: flex; + height: calc(100vh - 8em); + justify-content: center; + overflow: hidden; + padding: 0; + width: 100%; + } + + .modal-footer { + background: $color-white; + height: 4em; + padding: 0 1em; + + .gallery { + align-items: center; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + height: 100%; + padding: 0 1em; + width: 100%; + + img { + max-height: 2em; + max-width: 2em; + } + + + .file-counter { + font-weight: bold; + grid-column-start: 2; + margin: 0 auto; + } + + .gallery-switcher { + align-items: center; + color: $color-black; + display: flex; + + &:hover { + text-decoration: none; + } + + .file-name { + display: inline-block; + max-width: 16em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + + .fa-angle-right, + .fa-angle-left { + margin: 0 .5em; + } + + &.previous-asset { + grid-column-start: 1; + margin-right: auto; + } + + &.next-asset { + grid-column-start: 3; + margin-left: auto; + } + } + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss index 18f996c98..a3058c2f3 100644 --- a/app/assets/stylesheets/shared_styles/elements/buttons.scss +++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss @@ -16,7 +16,8 @@ transition: .3s; user-select: none; - .fas { + .fas, + img { color: inherit; margin-right: 5px; } diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index f93f2a66b..4a6fac336 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -183,6 +183,12 @@ text-align: center; width: 100%; + &.processing { + background-image: url("/images/medium/processing.gif"); + background-position: center; + background-repeat: no-repeat; + } + img { max-height: 100%; max-width: 100%; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 1bc515b94..0be53aa44 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1458,139 +1458,6 @@ ul.content-activities { } } - -// Image preview modal -.modal-file-preview { - background: transparent; - font-size: $font-size-large; - padding-right: 0 !important; - z-index: 1060; - - .preview-close { - background: transparent; - border: 0; - color: $color-white; - display: inline-block; - float: right; - } - - .file-wopi-controls { - display: inline-block; - - .btn { - margin: 0 15px; - } - } - - .modal-dialog { - height: 100%; - margin: 0; - padding: 0; - width: auto; - } - - .modal-content { - background: transparent; - border: 0; - -webkit-box-shadow: none; - box-shadow: none; - color: $color-white; - height: 100%; - width: auto; - - .modal-body { - width: 100%; - } - } - - .file-preview-container { - align-items: center; - color: $gray-dark; - display: -moz-flex; - display: -webkit-flex; - display: flex; - height: 100%; - justify-content: center; - text-align: center; - width: 100%; - - &.processing { - background-image: url("/images/medium/processing.gif"); - background-position: center; - background-repeat: no-repeat; - } - - .file-name { - color: $color-black; - margin: 30px 0; - } - - .wopi-file-preview { - border: 0; - height: 100%; - width: 100%; - } - } - - img { - background: url(asset-path("custom/checkerboard-pattern.png")); - height: auto; - max-width: 100%; - - @media (max-height: 520px) { - height: 80%; - max-width: 100%; - } - } - - .modal-header { - background: $color-black; - border: 0; - height: 60px; - line-height: 40px; - text-align: center; - - .file-name { - float: left; - } - } - - .modal-body { - align-items: center; - display: -moz-flex; - display: -webkit-flex; - display: flex; - height: calc(100% - 120px); - justify-content: center; - overflow: hidden; - padding: 0; - } - - .modal-footer { - background: $color-black; - border: 0; - bottom: 0; - height: 60px; - position: absolute; - text-align: center; - width: 100%; - } - - .file-download-link { - color: $color-white; - display: inline-block; - float: right; - margin-right: 20px; - } - - .file-edit-link { - color: $color-white; - display: inline-block; - float: right; - margin-right: 20px; - } -} - // Disable textarea resizing throughout application // (will be done via autosize JS plugin) textarea { diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 2f0b27951..cc34c19f0 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -14,100 +14,21 @@ class AssetsController < ApplicationController include FileIconsHelper include MyModulesHelper + helper_method :wopi_file_edit_button_status + before_action :load_vars, except: :create_wopi_file before_action :check_read_permission, except: :edit before_action :check_edit_permission, only: %i(edit toggle_view_mode) def file_preview - can_edit = if @assoc.class == Step - can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol) - elsif @assoc.class == Result - can_manage_module?(@my_module) - elsif @assoc.class == RepositoryCell && !@repository.is_a?(RepositorySnapshot) - can_manage_repository_rows?(@repository) - end - - render json: {html: render_to_string( - { - partial: "shared/file_preview/content.html.erb", - locals: { - asset: @asset, - can_edit: can_edit - } + render json: { html: render_to_string( + partial: 'shared/file_preview/content.html.erb', + locals: { + asset: @asset, + can_edit: can_manage_asset?(@asset), + gallery: params[:gallery] } - )} - - return true - file_type = @asset.file.metadata[:asset_type] || (@asset.previewable? ? 'previewable' : false) - response_json = { - 'id' => @asset.id, - 'type' => file_type, - 'filename' => truncate(escape_input(@asset.file_name), - length: Constants::FILENAME_TRUNCATION_LENGTH), - 'download-url' => asset_file_url_path(@asset) - } - - - if response_json['type'] == 'previewable' - if ['image/jpeg', 'image/pjpeg'].include? @asset.file.content_type - response_json['quality'] = @asset.file_image_quality || 80 - end - response_json.merge!( - 'editable' => @asset.editable_image? && can_edit, - 'mime-type' => @asset.file.content_type, - 'large-preview-url' => rails_representation_url(@asset.large_preview) - ) - elsif response_json['type'] == 'marvinjs' - response_json.merge!( - 'editable' => can_edit, - 'large-preview-url' => rails_representation_url(@asset.large_preview), - 'update-url' => marvin_js_asset_path(@asset.id), - 'description' => @asset.file.metadata[:description], - 'name' => @asset.file.metadata[:name] - ) - else - - response_json['preview-icon'] = render_to_string(partial: 'shared/file_preview_icon.html.erb', - locals: { asset: @asset }) - end - - if wopi_enabled? && wopi_file?(@asset) - edit_supported, title = wopi_file_edit_button_status - response_json['wopi-preview-url'] = @asset.get_action_url(current_user, 'embedview') - response_json['wopi-controls'] = render_to_string( - partial: 'assets/wopi/file_wopi_controls.html.erb', - locals: { - asset: @asset, - can_edit: can_edit, - edit_supported: edit_supported, - title: title - } - ) - end - respond_to do |format| - format.json do - render json: response_json - end - end - end - - # Check whether the wopi file can be edited and return appropriate response - def wopi_file_edit_button_status - file_ext = @asset.file_name.split('.').last - if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext) - edit_supported = true - title = '' - else - edit_supported = false - title = if Constants::FILE_TEXT_FORMATS.include?(file_ext) - I18n.t('assets.wopi_supported_text_formats_title') - elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) - I18n.t('assets.wopi_supported_table_formats_title') - else - I18n.t('assets.wopi_supported_presentation_formats_title') - end - end - return edit_supported, title + ) } end def toggle_view_mode @@ -139,7 +60,7 @@ class AssetsController < ApplicationController tkn = current_user.get_wopi_token @token = tkn.token @ttl = (tkn.ttl * 1000).to_s - @asset.step&.protocol&.update(updated_at: Time.now) + @asset.step&.protocol&.update(updated_at: Time.zone.now) create_wopi_file_activity(current_user, true) @@ -173,7 +94,7 @@ class AssetsController < ApplicationController @asset.team.release_space(orig_file_size) # Post process file here @asset.post_process_file(@asset.team) - @asset.step&.protocol&.update(updated_at: Time.now) + @asset.step&.protocol&.update(updated_at: Time.zone.now) render_html = if @asset.step || @asset.result render_to_string( @@ -183,7 +104,7 @@ class AssetsController < ApplicationController ) else render_to_string( - partial: 'shared/asset_link', + partial: 'assets/asset_link.html.erb', locals: { asset: @asset, display_image_tag: true }, formats: :html ) @@ -222,7 +143,7 @@ class AssetsController < ApplicationController render_403 && return unless can_manage_protocol_in_module?(step.protocol) || can_manage_protocol_in_repository?(step.protocol) step_asset = StepAsset.create!(step: step, asset: asset) - step.protocol&.update(updated_at: Time.now) + step.protocol&.update(updated_at: Time.zone.now) edit_url = edit_asset_url(step_asset.asset_id) elsif params[:element_type] == 'Result' @@ -270,25 +191,30 @@ class AssetsController < ApplicationController end def check_read_permission - if @assoc.class == Step - render_403 && return unless can_read_protocol_in_module?(@protocol) || - can_read_protocol_in_repository?(@protocol) - elsif @assoc.class == Result - render_403 and return unless can_read_experiment?(@my_module.experiment) - elsif @assoc.class == RepositoryCell - render_403 and return unless can_read_repository?(@repository) - end + render_403 unless can_read_asset?(@asset) end def check_edit_permission - if @assoc.class == Step - render_403 && return unless can_manage_protocol_in_module?(@protocol) || - can_manage_protocol_in_repository?(@protocol) - elsif @assoc.class == Result - render_403 and return unless can_manage_module?(@my_module) - elsif @assoc.class == RepositoryCell - render_403 and return unless can_manage_repository_rows?(@repository) + render_403 unless can_manage_asset?(@asset) + end + + # Check whether the wopi file can be edited and return appropriate response + def wopi_file_edit_button_status(asset) + file_ext = asset.file_name.split('.').last + if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext) + edit_supported = true + title = '' + else + edit_supported = false + title = if Constants::FILE_TEXT_FORMATS.include?(file_ext) + I18n.t('assets.wopi_supported_text_formats_title') + elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) + I18n.t('assets.wopi_supported_table_formats_title') + else + I18n.t('assets.wopi_supported_presentation_formats_title') + end end + return edit_supported, title end def append_wd_params(url) diff --git a/app/permissions/asset.rb b/app/permissions/asset.rb new file mode 100644 index 000000000..6cea35793 --- /dev/null +++ b/app/permissions/asset.rb @@ -0,0 +1,33 @@ +# frozen_string_literal: true + +Canaid::Permissions.register_for(Asset) do + can :read_asset do |user, asset| + object ||= asset.step + object ||= asset.result + object ||= asset.repository_cell + + if object.class == Step + protocol = object.protocol + can_read_protocol_in_module?(user, protocol) || can_read_protocol_in_repository?(user, protocol) + elsif object.class == Result + can_read_experiment?(user, object.my_module.experiment) + elsif object.class == RepositoryCell + can_read_repository?(user, object.repository_column.repository) + end + end + + can :manage_asset do |user, asset| + object ||= asset.step + object ||= asset.result + object ||= asset.repository_cell + + if object.class == Step + protocol = object.protocol + can_manage_protocol_in_module?(user, protocol) || can_manage_protocol_in_repository?(user, protocol) + elsif object.class == Result + can_manage_experiment?(user, object.my_module.experiment) + elsif object.class == RepositoryCell && !object.repository_column.repository.is_a?(RepositorySnapshot) + can_manage_repository?(user, object.repository_column.repository) + end + end +end diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index 8feef8c14..67ab3f91b 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,7 +1,8 @@ +<% gallery_view_id = nil unless defined? gallery_view_id %> <% if asset.inline? %> - <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset } %> + <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> <% elsif asset.list? %> - <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset } %> + <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> <% else %> - <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { edit_page: false, asset: asset } %> + <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> <% end %> diff --git a/app/views/assets/_asset_thumbnail.html.erb b/app/views/assets/_asset_thumbnail.html.erb index b41997fa4..4be1a891c 100644 --- a/app/views/assets/_asset_thumbnail.html.erb +++ b/app/views/assets/_asset_thumbnail.html.erb @@ -7,7 +7,12 @@ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: "file-preview-link", id: "modal_link#{asset.id}", - data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> + data: { + no_turbolink: true, + id: asset.id, + gallery_view_id: gallery_view_id, + preview_url: asset_file_preview_path(asset) + } do %>
diff --git a/app/views/assets/wopi/_file_wopi_controls.html.erb b/app/views/assets/wopi/_file_wopi_controls.html.erb index 836c91b72..f86e59554 100644 --- a/app/views/assets/wopi/_file_wopi_controls.html.erb +++ b/app/views/assets/wopi/_file_wopi_controls.html.erb @@ -1,28 +1,18 @@ -<%= link_to view_asset_url(id: asset), - id: 'wopi_file_view_button', - class: 'btn btn-default btn-sm', - target: '_blank', - style: 'display: inline-block' do %> - <%= file_application_icon(asset) %> - <%= wopi_button_text(asset, 'view') %> -<% end %> -<% if can_edit && edit_supported %> +<% if edit_supported %> <%= link_to edit_asset_url(id: asset), id: 'wopi_file_edit_button', - class: 'btn btn-default btn-sm', - target: '_blank', - style: 'display: inline-block' do %> + class: 'btn btn-light', + target: '_blank' do %> <%= file_application_icon(asset) %> <%= wopi_button_text(asset, 'edit') %> <% end %> -<% elsif can_edit %> +<% else %> <%= link_to edit_asset_url(id: asset), id: 'wopi_file_edit_button', - class: 'btn btn-default btn-sm', + class: 'btn btn-light', target: '_blank', title: title, - disabled: true, - style: 'display: inline-block' do %> + disabled: true do %> <%= file_application_icon(asset) %> <%= wopi_button_text(asset, 'edit') %> <% end %> diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb index 0e8c337dc..109a628e9 100644 --- a/app/views/shared/file_preview/_content.html.erb +++ b/app/views/shared/file_preview/_content.html.erb @@ -1,24 +1,102 @@
- <%= asset.file_name %> - - -

<%= t('Download')%>

- - +
+ <% if can_edit %> + <% if wopi_enabled? && wopi_file?(asset) %> + <% edit_supported, title = wopi_file_edit_button_status(asset) %> + <%= render partial: 'assets/wopi/file_wopi_controls.html.erb', + locals: { + asset: asset, + edit_supported: edit_supported, + title: title + } %> + <% elsif asset.file.metadata[:asset_type] == 'marvinjs' %> + + <% elsif asset.editable_image? %> + + <% end %> + <% end %> + + <%= t('Download')%> + + +
<% if asset.previewable? %> - <%= image_tag asset.large_preview, + <% if wopi_enabled? && wopi_file?(asset) %> + + <% else %> + <%= image_tag asset.large_preview, onerror: 'ActiveStoragePreviews.reCheckPreview(event)', onload: 'ActiveStoragePreviews.showPreview(event)', style: 'opacity: 0' %> + <% end %> <% else %> + <%= render partial: 'shared/file_preview/file_icon.html.erb', locals: { asset: asset } %> <% end %>
+ <% if gallery %> +
+ <% previous_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[0]&.last) %> + <% next_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[1]&.first) %> + <% if previous_asset && can_read_asset?(previous_asset) %> + <%= link_to asset_file_preview_path(previous_asset), + class: "previous-asset gallery-switcher", + data: {id: previous_asset.id, gallery_elements: gallery} do %> + <% if previous_asset.previewable? %> + <%= image_tag previous_asset.medium_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + + <% end %> + + <%= previous_asset.file_name %> + <% end %> + <% end %> + + <%= gallery.split(asset.id.to_s)[0].length + 1 %> of <%= gallery.length %> attachments + + <% if next_asset && can_read_asset?(next_asset) %> + <%= link_to asset_file_preview_path(next_asset), + class: "next-asset gallery-switcher", + data: {id: next_asset.id, gallery_elements: gallery} do %> + <%= next_asset.file_name %> + + <% if next_asset.previewable? %> + <%= image_tag next_asset.medium_preview, + onerror: 'ActiveStoragePreviews.reCheckPreview(event)', + onload: 'ActiveStoragePreviews.showPreview(event)', + style: 'opacity: 0' %> + <% else %> + + <% end %> + <% end %> + <% end %> +
+ <% end %>
diff --git a/app/views/shared/file_preview/_file_icon.html.erb b/app/views/shared/file_preview/_file_icon.html.erb new file mode 100644 index 000000000..337f8969e --- /dev/null +++ b/app/views/shared/file_preview/_file_icon.html.erb @@ -0,0 +1,4 @@ +
+ +

+
diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index bf6197811..5d0b71461 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -41,7 +41,7 @@
<% assets.each_with_index do |asset, i| %> - <%= render partial: 'assets/asset.html.erb', locals: { asset: asset } %> + <%= render partial: 'assets/asset.html.erb', locals: { asset: asset, gallery_view_id: step.id } %> <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 7f553010a..523ad9e7d 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2283,6 +2283,9 @@ en: errors: forbidden: 'You do not have permission to add files.' not_found: 'Element not found.' + file_preview: + edit_in_scinote: "Edit in SciNote" + edit_in_marvinjs: "Edit in Marvin JS" atwho: no_results: projects: "Projects with this name were not found" From 131d487e6900962162bf4e413af2ced8ed0422fd Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 26 Oct 2020 17:16:31 +0100 Subject: [PATCH 19/35] Add file preview to list view --- app/assets/javascripts/sitewide/file_preview.js | 2 +- app/assets/javascripts/sitewide/image_editor.js | 4 ++-- app/controllers/assets_controller.rb | 9 ++++++++- app/views/assets/_asset_inline.html.erb | 7 ++++++- app/views/assets/_asset_list.html.erb | 7 ++++++- 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/sitewide/file_preview.js b/app/assets/javascripts/sitewide/file_preview.js index 20280be98..715bcb6d0 100644 --- a/app/assets/javascripts/sitewide/file_preview.js +++ b/app/assets/javascripts/sitewide/file_preview.js @@ -11,7 +11,7 @@ var FilePreviewModal = (function() { e.preventDefault(); e.stopPropagation(); params.gallery = $(`.file-preview-link[data-gallery-view-id=${galleryViewId}]`) - .toArray().sort((a, b) => $(a).closest('.step-asset').css('order') - $(b).closest('.step-asset').css('order')) + .toArray().sort((a, b) => $(a).closest('.asset').css('order') - $(b).closest('.asset').css('order')) .map(i => i.dataset.id); $.get($(this).data('preview-url'), params, function(result) { $('#filePreviewModal .modal-content').html(result.html); diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js index 3be16555e..209b73844 100644 --- a/app/assets/javascripts/sitewide/image_editor.js +++ b/app/assets/javascripts/sitewide/image_editor.js @@ -381,8 +381,8 @@ var ImageEditorModal = (function() { contentType: false, processData: false, success: function(res) { - $(`.step-asset[data-asset-id=${data.id}]`).replaceWith(res.html); - $(`.step-asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder'); + $(`.asset[data-asset-id=${data.id}]`).replaceWith(res.html); + $(`.asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder'); closeEditor(); } }); diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index cc34c19f0..15a65ca60 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -34,7 +34,14 @@ class AssetsController < ApplicationController def toggle_view_mode @asset.view_mode = toggle_view_mode_params[:view_mode] if @asset.save(touch: false) - html = render_to_string(partial: 'assets/asset.html.erb', locals: { asset: @asset }) + if @assoc.class == Step + gallery_view_id = @assoc.id + end + + html = render_to_string(partial: 'assets/asset.html.erb', locals: { + asset: @asset, + gallery_view_id: gallery_view_id + }) respond_to do |format| format.json do render json: { html: html }, status: :ok diff --git a/app/views/assets/_asset_inline.html.erb b/app/views/assets/_asset_inline.html.erb index 35415b5a2..9db49bb4f 100644 --- a/app/views/assets/_asset_inline.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -9,7 +9,12 @@ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: "file-preview-link file-name", id: "modal_link#{asset.id}", - data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> + data: { + no_turbolink: true, + id: asset.id, + gallery_view_id: gallery_view_id, + preview_url: asset_file_preview_path(asset) + } do %> <%= asset.file_name %> <% end %>
diff --git a/app/views/assets/_asset_list.html.erb b/app/views/assets/_asset_list.html.erb index ab9349d23..d27d8c76e 100644 --- a/app/views/assets/_asset_list.html.erb +++ b/app/views/assets/_asset_list.html.erb @@ -10,7 +10,12 @@ <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: "file-preview-link file-name", id: "modal_link#{asset.id}", - data: { no_turbolink: true, id: true, 'preview-url': asset_file_preview_path(asset)} do %> + data: { + no_turbolink: true, + id: asset.id, + gallery_view_id: gallery_view_id, + preview_url: asset_file_preview_path(asset) + } do %> <%= asset.file_name %> <% end %>
From 21f584a2c4dd67648d9a287017468723900ca931 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 26 Oct 2020 17:20:34 +0100 Subject: [PATCH 20/35] Fix markup --- app/controllers/assets_controller.rb | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 15a65ca60..b6c461cae 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -34,14 +34,12 @@ class AssetsController < ApplicationController def toggle_view_mode @asset.view_mode = toggle_view_mode_params[:view_mode] if @asset.save(touch: false) - if @assoc.class == Step - gallery_view_id = @assoc.id - end + gallery_view_id = @assoc.id if @assoc.class == Step html = render_to_string(partial: 'assets/asset.html.erb', locals: { - asset: @asset, - gallery_view_id: gallery_view_id - }) + asset: @asset, + gallery_view_id: gallery_view_id + }) respond_to do |format| format.json do render json: { html: html }, status: :ok From b0fe68553a43ef338469d1d4b4bb796486c1b7f6 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 27 Oct 2020 13:25:30 +0100 Subject: [PATCH 21/35] Fix tests --- app/views/shared/file_preview/_content.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb index 109a628e9..e951761b9 100644 --- a/app/views/shared/file_preview/_content.html.erb +++ b/app/views/shared/file_preview/_content.html.erb @@ -35,7 +35,7 @@ <% end %> <% end %> - + <%= t('Download')%> From f51416d83ab03d1f33fc587960c4b58363486714 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 29 Oct 2020 14:59:14 +0100 Subject: [PATCH 22/35] Update permission markup --- .../javascripts/sitewide/image_editor.js | 2 +- app/permissions/asset.rb | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/sitewide/image_editor.js b/app/assets/javascripts/sitewide/image_editor.js index 209b73844..2e0b8d477 100644 --- a/app/assets/javascripts/sitewide/image_editor.js +++ b/app/assets/javascripts/sitewide/image_editor.js @@ -407,7 +407,7 @@ var ImageEditorModal = (function() { 'mime-type': editButton.data('image-mime-type') }; $('#filePreviewModal').modal('hide'); - $.post(editButton.data('start-edit-url')); + $.post(editButton.data('image-start-edit-url')); initImageEditor(data, fileUrl); }); }); diff --git a/app/permissions/asset.rb b/app/permissions/asset.rb index 6cea35793..482c56a8a 100644 --- a/app/permissions/asset.rb +++ b/app/permissions/asset.rb @@ -2,31 +2,31 @@ Canaid::Permissions.register_for(Asset) do can :read_asset do |user, asset| - object ||= asset.step - object ||= asset.result - object ||= asset.repository_cell + object = asset.step || asset.result || asset.repository_cell - if object.class == Step + case object + when Step protocol = object.protocol can_read_protocol_in_module?(user, protocol) || can_read_protocol_in_repository?(user, protocol) - elsif object.class == Result + when Result can_read_experiment?(user, object.my_module.experiment) - elsif object.class == RepositoryCell + when RepositoryCell can_read_repository?(user, object.repository_column.repository) end end can :manage_asset do |user, asset| - object ||= asset.step - object ||= asset.result - object ||= asset.repository_cell + object = asset.step || asset.result || asset.repository_cell - if object.class == Step + case object + when Step protocol = object.protocol can_manage_protocol_in_module?(user, protocol) || can_manage_protocol_in_repository?(user, protocol) - elsif object.class == Result + when Result can_manage_experiment?(user, object.my_module.experiment) - elsif object.class == RepositoryCell && !object.repository_column.repository.is_a?(RepositorySnapshot) + when RepositoryCell + return false if object.repository_column.repository.is_a?(RepositorySnapshot) + can_manage_repository?(user, object.repository_column.repository) end end From 12991e8fd3bdee1634a6d8ea4332211341a91700 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 28 Oct 2020 11:45:47 +0100 Subject: [PATCH 23/35] Commit add asset preview mode switcher to step --- app/assets/javascripts/protocols/steps.js.erb | 37 +++++++------------ app/assets/javascripts/sitewide/assets.js | 17 +++++++++ .../javascripts/sitewide/drag_n_drop.js | 2 +- app/controllers/assets_controller.rb | 2 +- app/controllers/steps_controller.rb | 28 ++++++++++++-- app/models/step.rb | 2 + app/views/steps/attachments/_list.html.erb | 4 ++ config/routes.rb | 1 + ...1027133634_add_assets_view_mode_to_step.rb | 7 ++++ db/structure.sql | 6 ++- 10 files changed, 75 insertions(+), 31 deletions(-) create mode 100644 app/assets/javascripts/sitewide/assets.js create mode 100644 db/migrate/20201027133634_add_assets_view_mode_to_step.rb diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index d69fe3ca1..fd9d89d00 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -325,29 +325,15 @@ }); } - function initPreviewToggle(){ - $('.attachments').on('click', '.change-preview-type', function (e) { - var viewMode = $(this).data('preview-type'); - var toggleUrl = $(this).data('toggle-view-url'); - var assetId = $(this).closest('.asset').data('asset-id'); - e.preventDefault(); - e.stopPropagation(); - $.ajax({ - url: toggleUrl, - type: "PATCH", - dataType: "json", - data: { asset: { view_mode: viewMode }}, - success: function (data) { - $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html); - FilePreviewModal.init(); - $(`.asset[data-asset-id=${assetId}]`).closest('.attachments').trigger('reorder'); - - }, - error: function (data) { - console.log(data); - } - }); - }); + function initAssetViewModeToggle(){ + $('.attachments-actions').on('click', '.attachments-view-mode', function () { + var viewModeBtn = $(this); + $.post(viewModeBtn.data('url'), { + assets_view_mode: viewModeBtn.data('assets-view-mode') + }, function(result) { + viewModeBtn.closest('.step').find('.attachments').html(result.html) + }) + }) } function initCallBacks() { @@ -358,8 +344,8 @@ applyMoveStepCallBack(); initDeleteStep(); TinyMCE.highlight(); - initPreviewToggle(); reorderAttachmentsInit(); + initAssetViewModeToggle(); } /* @@ -680,6 +666,9 @@ element.style.order = i }) }) + .on('DOMSubtreeModified', function() { + $(this).trigger('reorder'); + }) $('.attachments').trigger('reorder'); } diff --git a/app/assets/javascripts/sitewide/assets.js b/app/assets/javascripts/sitewide/assets.js new file mode 100644 index 000000000..bd2776233 --- /dev/null +++ b/app/assets/javascripts/sitewide/assets.js @@ -0,0 +1,17 @@ + +$(document).on('click', '.asset .change-preview-type', function(e) { + var viewMode = $(this).data('preview-type'); + var toggleUrl = $(this).data('toggle-view-url'); + var assetId = $(this).closest('.asset').data('asset-id'); + e.preventDefault(); + e.stopPropagation(); + $.ajax({ + url: toggleUrl, + type: 'PATCH', + dataType: 'json', + data: { asset: { view_mode: viewMode } }, + success: function(data) { + $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html); + } + }); +}); diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js b/app/assets/javascripts/sitewide/drag_n_drop.js index 66682e94d..a83c357c7 100644 --- a/app/assets/javascripts/sitewide/drag_n_drop.js +++ b/app/assets/javascripts/sitewide/drag_n_drop.js @@ -324,7 +324,7 @@ function listItems() { totalSize = 0; enableSubmitButton(); - $('.attachment-placeholder.new').remove(); + $('.attachment-container.new').remove(); dragNdropAssetsOff(); for (let i = 0; i < droppedFiles.length; i += 1) { diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index b6c461cae..5b243d340 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -18,7 +18,7 @@ class AssetsController < ApplicationController before_action :load_vars, except: :create_wopi_file before_action :check_read_permission, except: :edit - before_action :check_edit_permission, only: %i(edit toggle_view_mode) + before_action :check_edit_permission, only: :edit def file_preview render json: { html: render_to_string( diff --git a/app/controllers/steps_controller.rb b/app/controllers/steps_controller.rb index 820044161..5a3d25db0 100644 --- a/app/controllers/steps_controller.rb +++ b/app/controllers/steps_controller.rb @@ -5,11 +5,11 @@ class StepsController < ApplicationController include MarvinJsActions before_action :load_vars, only: %i(edit update destroy show toggle_step_state checklistitem_state update_view_state - move_up move_down) + move_up move_down update_asset_view_mode) before_action :load_vars_nested, only: %i(new create) before_action :convert_table_contents_to_utf8, only: %i(create update) - before_action :check_view_permissions, only: %i(show update_view_state) + before_action :check_view_permissions, only: %i(show update_view_state update_asset_view_mode) before_action :check_manage_permissions, only: %i(new create edit update destroy move_up move_down toggle_step_state) before_action :check_complete_and_checkbox_permissions, only: %i(toggle_step_state checklistitem_state) @@ -145,7 +145,12 @@ class StepsController < ApplicationController step_params_all[:assets_attributes]&.each do |key, value| next unless value[:signed_blob_id] - new_asset = @step.assets.create!(created_by: current_user, last_modified_by: current_user, team: current_team) + new_asset = @step.assets.create!( + created_by: current_user, + last_modified_by: current_user, + team: current_team, + view_mode: @step.assets_view_mode + ) new_asset.file .attach(value[:signed_blob_id]) new_assets.push(new_asset.id) @@ -218,6 +223,23 @@ class StepsController < ApplicationController end end + def update_asset_view_mode + html = '' + ActiveRecord::Base.transaction do + @step.assets_view_mode = params[:assets_view_mode] + @step.save!(touch: false) + @step.assets.each do |asset| + asset.view_mode = @step.assets_view_mode + asset.save!(touch: false) + html += render_to_string(partial: 'assets/asset.html.erb', locals: { asset: asset }) + end + end + render json: { html: html }, status: :ok + rescue StandardError => e + Rails.logger.error(e.message) + render json: {}, status: :unprocessable_entity + end + def destroy if @step.can_destroy? diff --git a/app/models/step.rb b/app/models/step.rb index 90eb0cd38..cf36a81d0 100644 --- a/app/models/step.rb +++ b/app/models/step.rb @@ -4,6 +4,8 @@ class Step < ApplicationRecord include TinyMceImages include ViewableModel + enum assets_view_mode: { thumbnail: 0, inline: 1, list: 2 } + auto_strip_attributes :name, :description, nullify: false validates :name, presence: true, diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index 5d0b71461..bd3c524f7 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -35,6 +35,10 @@ <% end %>
+ + + +
diff --git a/config/routes.rb b/config/routes.rb index 683704383..2a95a95bd 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -421,6 +421,7 @@ Rails.application.routes.draw do put 'move_down' put 'move_up' post 'update_view_state' + post 'update_asset_view_mode' end end diff --git a/db/migrate/20201027133634_add_assets_view_mode_to_step.rb b/db/migrate/20201027133634_add_assets_view_mode_to_step.rb new file mode 100644 index 000000000..7723bf846 --- /dev/null +++ b/db/migrate/20201027133634_add_assets_view_mode_to_step.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +class AddAssetsViewModeToStep < ActiveRecord::Migration[6.0] + def change + add_column :steps, :assets_view_mode, :integer, default: 0, null: false + end +end diff --git a/db/structure.sql b/db/structure.sql index 9e85529fd..d8e70b8a7 100644 --- a/db/structure.sql +++ b/db/structure.sql @@ -2316,7 +2316,8 @@ CREATE TABLE public.steps ( created_at timestamp without time zone NOT NULL, updated_at timestamp without time zone NOT NULL, last_modified_by_id bigint, - protocol_id bigint NOT NULL + protocol_id bigint NOT NULL, + assets_view_mode integer DEFAULT 0 NOT NULL ); @@ -7639,6 +7640,7 @@ INSERT INTO "schema_migrations" (version) VALUES ('20200714082503'), ('20200826143431'), ('20200902093234'), -('20200909121441'); +('20200909121441'), +('20201027133634'); From 6193f91192d36e945623fb680fc9e173b149b80f Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 29 Oct 2020 16:21:10 +0100 Subject: [PATCH 24/35] Update view mode switcher logic --- app/controllers/steps_controller.rb | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/controllers/steps_controller.rb b/app/controllers/steps_controller.rb index 5a3d25db0..e39f31e4d 100644 --- a/app/controllers/steps_controller.rb +++ b/app/controllers/steps_controller.rb @@ -228,16 +228,15 @@ class StepsController < ApplicationController ActiveRecord::Base.transaction do @step.assets_view_mode = params[:assets_view_mode] @step.save!(touch: false) - @step.assets.each do |asset| - asset.view_mode = @step.assets_view_mode - asset.save!(touch: false) - html += render_to_string(partial: 'assets/asset.html.erb', locals: { asset: asset }) - end + @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 }) end render json: { html: html }, status: :ok - rescue StandardError => e + rescue ActiveRecord::RecordInvalid => e Rails.logger.error(e.message) - render json: {}, status: :unprocessable_entity + render json: { errors: e.message }, status: :unprocessable_entity end def destroy From eca39a00b5dedabe8422a33764757481d68bc9a8 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 2 Nov 2020 18:47:08 +0100 Subject: [PATCH 25/35] Add attachments dropdown to step --- app/assets/images/icon_small/marvinjs.svg | 11 ++- app/assets/javascripts/protocols/steps.js.erb | 13 ++-- app/assets/stylesheets/marvinjs.scss | 23 +------ app/assets/stylesheets/my_modules.scss | 6 +- .../stylesheets/my_modules/results/index.scss | 8 +-- .../shared_styles/elements/buttons.scss | 2 +- app/assets/stylesheets/steps.scss | 52 ++++++++++---- app/controllers/steps_controller.rb | 5 +- .../_create_marvin_sketch_button.html.erb | 12 ---- .../_create_marvin_sketch_li.html.erb | 24 ++++--- .../wopi/_create_wopi_file_button.html.erb | 12 ---- app/views/steps/attachments/_list.html.erb | 68 +++++++++++-------- config/locales/en.yml | 7 ++ 13 files changed, 131 insertions(+), 112 deletions(-) delete mode 100644 app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb delete mode 100644 app/views/assets/wopi/_create_wopi_file_button.html.erb 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" From 84a7d49023477a1aacdaeae79116f0e5ca2ce405 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 2 Nov 2020 18:51:21 +0100 Subject: [PATCH 26/35] Fix markup --- app/assets/stylesheets/steps.scss | 6 +++--- app/controllers/steps_controller.rb | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 7968a405b..5e06ebe7a 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -337,7 +337,7 @@ .change-order { padding-left: 2.75em; - &.selected:after { + &.selected::after { @include font-awesome; content: $font-fas-check; margin-left: auto; @@ -346,12 +346,12 @@ } } - .attachments-view-mode { + .attachments-view-mode { .fas { width: 1.5em; } - &.selected:after { + &.selected::after { @include font-awesome; content: $font-fas-check; margin-left: auto; diff --git a/app/controllers/steps_controller.rb b/app/controllers/steps_controller.rb index 7780bebc6..f656f21ec 100644 --- a/app/controllers/steps_controller.rb +++ b/app/controllers/steps_controller.rb @@ -232,9 +232,9 @@ class StepsController < ApplicationController end @step.assets.each do |asset| html += render_to_string(partial: 'assets/asset.html.erb', locals: { - asset: asset, - gallery_view_id: @step.id - }) + asset: asset, + gallery_view_id: @step.id + }) end render json: { html: html }, status: :ok rescue ActiveRecord::RecordInvalid => e From e8e9244d967e4e702f341c330dc445e7ab751f7c Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 3 Nov 2020 09:07:49 +0100 Subject: [PATCH 27/35] Fix I18n and double loading --- app/assets/javascripts/protocols/steps.js.erb | 186 +++++++++--------- app/views/steps/attachments/_list.html.erb | 2 +- config/locales/en.yml | 1 + 3 files changed, 93 insertions(+), 96 deletions(-) diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index f1cd94161..6e6045283 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -315,19 +315,6 @@ }); } - function initAssetViewModeToggle(){ - $('.attachments-actions').on('click', '.attachments-view-mode', function () { - var viewModeBtn = $(this); - $.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) - }) - }) - } - function initCallBacks() { if (typeof(applyCreateWopiFileCallback) === 'function') applyCreateWopiFileCallback(); applyCheckboxCallBack(); @@ -336,8 +323,6 @@ applyMoveStepCallBack(); initDeleteStep(); TinyMCE.highlight(); - reorderAttachmentsInit(); - initAssetViewModeToggle(); } /* @@ -620,9 +605,84 @@ Comments.init(); } - // Reorder attachments + // On init + initCallBacks(); + initHandsOnTable($(document)); + expandAllSteps(); + TinyMCE.highlight(); + SmartAnnotation.preventPropagation('.atwho-user-popover'); + newStepHandler(); + + $(function () { + $("[data-action='collapse-steps']").click(function () { + $('.step .panel-collapse').collapse('hide'); + }); + $("[data-action='expand-steps']").click(expandAllSteps); + }); + + global.initHandsOnTable = initHandsOnTable; +})(window); + + +(function() { + var StepInlineAttachments = (function() { + function elementVisible(element) { + var elementRect = element.getBoundingClientRect(); + var elementHeight = $(element).height() + return elementRect.top + (elementHeight / 2) >= 0 && + elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2) + } + + function showElement(element) { + setTimeout(() => { + var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); + if (elementVisible(element) && iframeUrl) { + $(element).find('.iframe-placeholder') + .replaceWith(``); + $(element).addClass('active').attr('data-created-at', new Date().getTime()); + } + },500) + } + + function hideElement(element) { + var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); + if (!elementVisible(element) && iframeUrl) { + $(element).find('iframe') + .replaceWith(`
    `); + $(element).removeClass('active').attr('data-created-at', null) + return true + } + return false + } + + function checkForAttachmentsState() { + $.each($('.inline-attachment-container'), function(i, element){ + showElement(element) + }) + if ($('.active-iframe-preview').length > 5){ + let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) { + return +a.dataset.createdAt - +b.dataset.createdAt; + }) + $.each(sortedIframes, function(i, element){ + if (hideElement(element)) return false + }) + } + } + + return { + init: () => { + windowScrollEvents['StepInlineAttachments'] = StepInlineAttachments.scrollEvent; + }, + scrollEvent: () => { + checkForAttachmentsState() + } + } + + })(); + + // Reorder attachments function reorderAttachmentsInit() { - $('.attachments-actions').on('click', '.change-order', function(e){ + $('#steps').on('click', '.attachments-actions .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'); @@ -636,7 +696,7 @@ }); }) - $('.attachments').on('reorder', function() { + $('#steps').on('reorder', '.attachments', function() { var assets = $(`.attachments[data-step-id=${$(this).data('step-id')}] .asset`); var order = $(this).data('order'); var sortedAssets = assets.sort(function(a, b) { @@ -665,84 +725,20 @@ $('.attachments').trigger('reorder'); } - function initInlineAttachment() { - $(document).on('scroll', 'body', function(){ - console.log(1) + function initAssetViewModeToggle(){ + $('#steps').on('click', '.attachments-actions .attachments-view-mode', function () { + var viewModeBtn = $(this); + $.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) + }) }) } - // On init - initCallBacks(); - initHandsOnTable($(document)); - expandAllSteps(); - TinyMCE.highlight(); - SmartAnnotation.preventPropagation('.atwho-user-popover'); - newStepHandler(); - - $(function () { - $("[data-action='collapse-steps']").click(function () { - $('.step .panel-collapse').collapse('hide'); - }); - $("[data-action='expand-steps']").click(expandAllSteps); - }); - - global.initHandsOnTable = initHandsOnTable; -})(window); - - -var StepInlineAttachments = (function() { - function elementVisible(element) { - var elementRect = element.getBoundingClientRect(); - var elementHeight = $(element).height() - return elementRect.top + (elementHeight / 2) >= 0 && - elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2) - } - - function showElement(element) { - setTimeout(() => { - var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); - if (elementVisible(element) && iframeUrl) { - $(element).find('.iframe-placeholder') - .replaceWith(``); - $(element).addClass('active').attr('data-created-at', new Date().getTime()); - } - },500) - } - - function hideElement(element) { - var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); - if (!elementVisible(element) && iframeUrl) { - $(element).find('iframe') - .replaceWith(`
    `); - $(element).removeClass('active').attr('data-created-at', null) - return true - } - return false - } - - function checkForAttachmentsState() { - $.each($('.inline-attachment-container'), function(i, element){ - showElement(element) - }) - if ($('.active-iframe-preview').length > 5){ - let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) { - return +a.dataset.createdAt - +b.dataset.createdAt; - }) - $.each(sortedIframes, function(i, element){ - if (hideElement(element)) return false - }) - } - } - - return { - init: () => { - windowScrollEvents['StepInlineAttachments'] = StepInlineAttachments.scrollEvent; - }, - scrollEvent: () => { - checkForAttachmentsState() - } - } - + StepInlineAttachments.init(); + reorderAttachmentsInit(); + initAssetViewModeToggle(); })(); - -StepInlineAttachments.init(); diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index 0c45382c6..c8b8b6d60 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -14,7 +14,7 @@
      Date: Wed, 4 Nov 2020 13:08:40 +0100 Subject: [PATCH 28/35] Add context menu to attahcments --- app/assets/javascripts/protocols/steps.js.erb | 61 +--- app/assets/javascripts/sitewide/assets.js | 90 +++++- app/assets/stylesheets/shared/assets.scss | 301 ++++++++++++++++++ .../stylesheets/shared/file_preview.scss | 4 + app/assets/stylesheets/steps.scss | 247 -------------- app/controllers/assets_controller.rb | 31 +- .../marvin_js_assets_controller.rb | 5 +- app/helpers/application_helper.rb | 19 ++ app/views/assets/_asset.html.erb | 31 +- app/views/assets/_asset_context_menu.html.erb | 70 ++++ app/views/assets/_asset_inline.html.erb | 18 +- app/views/assets/_asset_list.html.erb | 16 +- app/views/assets/_asset_thumbnail.html.erb | 16 +- .../_result_user_generated.html.erb | 2 +- .../shared/file_preview/_content.html.erb | 3 + config/locales/en.yml | 7 + config/routes.rb | 1 + 17 files changed, 538 insertions(+), 384 deletions(-) create mode 100644 app/assets/stylesheets/shared/assets.scss create mode 100644 app/views/assets/_asset_context_menu.html.erb diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index 6e6045283..69e40ed2b 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -542,7 +542,7 @@ expandStep($new_step); toggleButtons(true); SmartAnnotation.preventPropagation('.atwho-user-popover'); - + $new_step.find('.attachments').trigger('reorder'); tinyMCE.editors.step_description_textarea.remove(); MarvinJsEditor.initNewButton('.new-marvinjs-upload-button'); @@ -623,63 +623,7 @@ global.initHandsOnTable = initHandsOnTable; })(window); - (function() { - var StepInlineAttachments = (function() { - function elementVisible(element) { - var elementRect = element.getBoundingClientRect(); - var elementHeight = $(element).height() - return elementRect.top + (elementHeight / 2) >= 0 && - elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2) - } - - function showElement(element) { - setTimeout(() => { - var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); - if (elementVisible(element) && iframeUrl) { - $(element).find('.iframe-placeholder') - .replaceWith(``); - $(element).addClass('active').attr('data-created-at', new Date().getTime()); - } - },500) - } - - function hideElement(element) { - var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); - if (!elementVisible(element) && iframeUrl) { - $(element).find('iframe') - .replaceWith(`
      `); - $(element).removeClass('active').attr('data-created-at', null) - return true - } - return false - } - - function checkForAttachmentsState() { - $.each($('.inline-attachment-container'), function(i, element){ - showElement(element) - }) - if ($('.active-iframe-preview').length > 5){ - let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) { - return +a.dataset.createdAt - +b.dataset.createdAt; - }) - $.each(sortedIframes, function(i, element){ - if (hideElement(element)) return false - }) - } - } - - return { - init: () => { - windowScrollEvents['StepInlineAttachments'] = StepInlineAttachments.scrollEvent; - }, - scrollEvent: () => { - checkForAttachmentsState() - } - } - - })(); - // Reorder attachments function reorderAttachmentsInit() { $('#steps').on('click', '.attachments-actions .change-order', function(e){ @@ -719,7 +663,7 @@ element.style.order = i }) }) - .on('DOMSubtreeModified', function() { + .on('DOMSubtreeModified', '.attachments', function() { $(this).trigger('reorder'); }) $('.attachments').trigger('reorder'); @@ -738,7 +682,6 @@ }) } - StepInlineAttachments.init(); reorderAttachmentsInit(); initAssetViewModeToggle(); })(); diff --git a/app/assets/javascripts/sitewide/assets.js b/app/assets/javascripts/sitewide/assets.js index bd2776233..e3aa289dd 100644 --- a/app/assets/javascripts/sitewide/assets.js +++ b/app/assets/javascripts/sitewide/assets.js @@ -1,8 +1,9 @@ - -$(document).on('click', '.asset .change-preview-type', function(e) { - var viewMode = $(this).data('preview-type'); - var toggleUrl = $(this).data('toggle-view-url'); - var assetId = $(this).closest('.asset').data('asset-id'); +/* global windowScrollEvents HelperModule I18n */ +$(document).on('click', '.asset-context-menu .change-preview-type', function(e) { + var viewModeBtn = $(this); + var viewMode = viewModeBtn.data('preview-type'); + var toggleUrl = viewModeBtn.closest('.dropdown-menu').data('toggle-view-url'); + var assetId = viewModeBtn.closest('.dropdown-menu').data('asset-id'); e.preventDefault(); e.stopPropagation(); $.ajax({ @@ -11,7 +12,86 @@ $(document).on('click', '.asset .change-preview-type', function(e) { dataType: 'json', data: { asset: { view_mode: viewMode } }, success: function(data) { + viewModeBtn.closest('.dropdown-menu').find('.change-preview-type').removeClass('selected'); + viewModeBtn.addClass('selected'); $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html); } }); }); + +$(document).on('click', '.asset .delete-asset', function(e) { + var asset = $(this).closest('.asset'); + e.preventDefault(); + e.stopPropagation(); + $.ajax({ + url: $(this).attr('href'), + type: 'DELETE', + dataType: 'json', + success: function(result) { + asset.remove(); + HelperModule.flashAlertMsg(result.flash, 'success'); + }, + error: function() { + HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger'); + } + }); +}); + +var InlineAttachments = (function() { + function elementVisible(element) { + var elementRect = element.getBoundingClientRect(); + var elementHeight = $(element).height(); + return elementRect.top + (elementHeight / 2) >= 0 + && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2); + } + + function showElement(element) { + setTimeout(() => { + var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url'); + if (elementVisible(element) && iframeUrl) { + $(element).find('.iframe-placeholder') + .replaceWith(``); + $(element).addClass('active').attr('data-created-at', new Date().getTime()); + } + }, 500); + } + + function hideElement(element) { + var iframeUrl = $(element).find('.active-iframe-preview').attr('src'); + if (!elementVisible(element) && iframeUrl) { + $(element).find('iframe') + .replaceWith(`
      `); + $(element).removeClass('active').attr('data-created-at', null); + return true; + } + return false; + } + + function checkForAttachmentsState() { + $.each($('.inline-attachment-container'), function(i, element) { + showElement(element); + }); + if ($('.active-iframe-preview').length > 5) { + let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) { + return +a.dataset.createdAt - +b.dataset.createdAt; + }); + $.each(sortedIframes, function(i, element) { + if (hideElement(element)) return false; + }); + } + } + + return { + init: () => { + windowScrollEvents.InlineAttachments = InlineAttachments.scrollEvent; + }, + scrollEvent: () => { + checkForAttachmentsState(); + } + }; +})(); + +$(document).on('turbolinks:load', function() { + InlineAttachments.init(); + InlineAttachments.scrollEvent(); +}); diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss new file mode 100644 index 000000000..a97a72da3 --- /dev/null +++ b/app/assets/stylesheets/shared/assets.scss @@ -0,0 +1,301 @@ +// scss-lint:disable ImportantRule PropertyUnits NestingDepth SelectorDepth + +.attachment-container { + @include md-card-style; + grid-row: span 6; + height: 23em; + overflow: hidden; + padding: 1em; + position: relative; + width: var(--attachment-column-width); + + + .file-preview-link { + display: block; + height: 100%; + width: 100%; + } + + .attachment-preview { + border-radius: $border-radius-default; + color: $color-volcano; + height: 14em; + position: relative; + text-align: center; + width: 100%; + + &.processing { + background-image: url("/images/medium/processing.gif"); + background-position: center; + background-repeat: no-repeat; + } + + img { + max-height: 100%; + max-width: 100%; + } + + &.marvinjs { + + &::before, + &::after { + border-radius: 1em 0 0 1em; + bottom: 1em; + content: ""; + display: block; + height: 2em; + line-height: 2em; + position: absolute; + right: -1em; + width: 2.25em; + } + + &::before { + background: $marvinjs-color; + } + + &::after { + background-image: url("/images/icon_small/marvinjs-white.svg"); + height: 2.25em; + right: -.75em; + width: 2em; + } + } + + .fas { + font-size: 100px; + line-height: 160px; + } + } + + .no-shadow { + box-shadow: none; + } + + .attachment-label, + .attachment-metadata { + background: $color-white; + overflow: hidden; + padding-top: 1em; + position: relative; + text-align: center; + text-overflow: ellipsis; + transition: $md-transaction; + white-space: nowrap; + } + + .attachment-label { + @include font-main; + margin-top: 1.5em; + z-index: 2; + } + + .attachment-metadata { + @include font-small; + color: $color-silver-chalice; + margin-top: -4em; + } + + .remove-icon { + bottom: .5em; + cursor: pointer; + display: none; + position: absolute; + right: .5em; + } + + &:hover { + box-shadow: $md-shadow; + + .file-preview-link { + text-decoration: none; + } + + + .remove-icon { + display: inline-block; + } + + .attachment-label, + .attachment-metadata { + margin-top: 0; + + } + } + + &.new { + border: 1px solid $brand-primary; + + .dnd-error { + bottom: 15px; + float: left; + padding-left: 5px; + position: relative; + } + + &::before { + background: $brand-primary; + border-radius: 0 $border-radius-default; + bottom: 0; + color: $color-white; + content: "NEW"; + left: 0; + line-height: 20px; + position: absolute; + text-align: center; + width: 50px; + z-index: 2; + } + } + + .asset-context-menu { + position: absolute; + right: 0; + top: 0; + } +} + +.inline-attachment-container { + @include md-card-style; + grid-column: 1/-1; + grid-row: span 12; + height: 47em; + + .active-iframe-preview { + border: 0; + height: calc(100% - 4em); + width: 100%; + } + + .image-container, + .general-file-container { + align-items: center; + background: $color-concrete; + display: flex; + height: calc(100% - 4em); + justify-content: center; + padding: .5em; + width: 100%; + + img { + max-height: 100%; + max-width: 100%; + } + + .fas { + font-size: 10em; + } + } + + .header { + align-items: center; + display: flex; + height: 4em; + padding: 0 1em; + + .show-as-thumbnail { + cursor: pointer; + margin-left: auto; + } + + .file-name { + @include font-main; + color: $brand-primary; + } + + .file-metadata { + @include font-small; + color: $color-silver-chalice; + display: grid; + grid-column-gap: 1em; + grid-template-columns: max-content max-content; + } + + .asset-context-menu { + margin-left: auto; + } + } +} + +.list-attachment-container { + @include md-card-style; + align-items: center; + display: flex; + grid-column: 1/-1; + height: 3em; + padding: .5em; + + .file-icon { + @include font-main; + } + + .file-name { + @include font-main; + color: $brand-primary; + margin: 0 .5em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .file-metadata { + @include font-small; + color: $color-silver-chalice; + display: grid; + grid-column-gap: 1em; + grid-template-columns: max-content max-content; + } + + .asset-context-menu { + margin-left: auto; + } +} + +.asset-context-menu { + display: inline-block; + + #dropdownAssetContextMenu { + background: $color-white; + + &:focus, + &:active { + box-shadow: none; + } + + &:hover { + background: $color-concrete; + } + } + + .dropdown-menu { + @include font-button; + min-width: 200px; + + .divider-label { + @include font-small; + color: $color-alto; + padding-left: 1em; + } + + a { + cursor: pointer; + padding: .5em 1em; + text-align: left; + } + + .change-preview-type, + .delete-asset { + .fas { + width: 1.5em; + } + + &.selected::after { + @include font-awesome; + content: $font-fas-check; + margin-left: auto; + position: absolute; + right: 1em; + } + } + } +} diff --git a/app/assets/stylesheets/shared/file_preview.scss b/app/assets/stylesheets/shared/file_preview.scss index 3e042b78c..ca255ef3d 100644 --- a/app/assets/stylesheets/shared/file_preview.scss +++ b/app/assets/stylesheets/shared/file_preview.scss @@ -65,6 +65,10 @@ font-weight: bold; margin-right: auto; } + + .asset-context-menu { + float: left; + } } .modal-body { diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index 2257c620c..72dd7ffb1 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -156,7 +156,6 @@ grid-column-gap: 1em; grid-row-gap: 1em; grid-template-columns: repeat(auto-fill, minmax(var(--attachment-column-width), 1fr)); - justify-content: center; margin: 1em 0; .nested_fields { @@ -164,168 +163,8 @@ } } -.attachment-container { - @include md-card-style; - grid-row: span 6; - justify-self: center; - overflow: hidden; - padding: 1em; - position: relative; - width: var(--attachment-column-width); - .file-preview-link { - display: block; - height: 100%; - width: 100%; - } - - .show-inline { - background: $color-white; - border-radius: $border-radius-default; - line-height: 1em; - padding: .5em; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 2em; - z-index: 10; - } - - .attachment-preview { - border-radius: $border-radius-default; - color: $color-volcano; - height: 14em; - position: relative; - text-align: center; - width: 100%; - - &.processing { - background-image: url("/images/medium/processing.gif"); - background-position: center; - background-repeat: no-repeat; - } - - img { - max-height: 100%; - max-width: 100%; - } - - &.marvinjs { - - &::before, - &::after { - border-radius: 1em 0 0 1em; - bottom: 1em; - content: ""; - display: block; - height: 2em; - line-height: 2em; - position: absolute; - right: -1em; - width: 2.25em; - } - - &::before { - background: $marvinjs-color; - } - - &::after { - background-image: url("/images/icon_small/marvinjs-white.svg"); - height: 2.25em; - right: -.75em; - width: 2em; - } - } - - i.fas { - font-size: 100px; - line-height: 160px; - } - } - - .no-shadow { - box-shadow: none; - } - - .attachment-label, - .attachment-metadata { - background: $color-white; - overflow: hidden; - padding-top: 1em; - position: relative; - text-align: center; - text-overflow: ellipsis; - transition: $md-transaction; - white-space: nowrap; - } - - .attachment-label { - @include font-main; - margin-top: 1.5em; - z-index: 2; - } - - .attachment-metadata { - @include font-small; - color: $color-silver-chalice; - margin-top: -4em; - } - - .remove-icon { - bottom: .5em; - cursor: pointer; - display: none; - position: absolute; - right: .5em; - } - - &:hover { - box-shadow: $md-shadow; - - .file-preview-link { - text-decoration: none; - } - - - .remove-icon { - display: inline-block; - } - - .attachment-label, - .attachment-metadata { - margin-top: 0; - - } - } - - &.new { - border: 1px solid $brand-primary; - - .dnd-error { - bottom: 15px; - float: left; - padding-left: 5px; - position: relative; - } - - &::before { - background: $brand-primary; - border-radius: 0 $border-radius-default; - bottom: 0; - color: $color-white; - content: "NEW"; - left: 0; - line-height: 20px; - position: absolute; - text-align: center; - width: 50px; - z-index: 2; - } - } -} - .attachments-actions { align-items: center; display: flex; @@ -390,89 +229,3 @@ .expand-all-steps { margin: 0 0 15px 15px; } - -.inline-attachment-container { - @include md-card-style; - grid-column: 1/-1; - grid-row: span 12; - - .active-iframe-preview { - border: 0; - height: calc(100% - 4em); - width: 100%; - } - - .image-container, - .general-file-container { - align-items: center; - background: $color-concrete; - display: flex; - height: calc(100% - 4em); - justify-content: center; - padding: .5em; - width: 100%; - - img { - max-height: 100%; - max-width: 100%; - } - - .fas { - font-size: 10em; - } - } - - .header { - align-items: center; - display: flex; - height: 4em; - padding: 0 1em; - - .show-as-thumbnail { - cursor: pointer; - margin-left: auto; - } - - .file-name { - @include font-main; - color: $brand-primary; - } - - .file-metadata { - @include font-small; - color: $color-silver-chalice; - display: grid; - grid-column-gap: 1em; - grid-template-columns: max-content max-content; - } - } -} - -.list-attachment-container { - @include md-card-style; - align-items: center; - display: flex; - grid-column: 1/-1; - padding: .5em; - - .file-icon { - @include font-main; - } - - .file-name { - @include font-main; - color: $brand-primary; - margin: 0 .5em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .file-metadata { - @include font-small; - color: $color-silver-chalice; - display: grid; - grid-column-gap: 1em; - grid-template-columns: max-content max-content; - } -} diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index 5b243d340..ff2df9844 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -17,8 +17,8 @@ class AssetsController < ApplicationController helper_method :wopi_file_edit_button_status before_action :load_vars, except: :create_wopi_file - before_action :check_read_permission, except: :edit - before_action :check_edit_permission, only: :edit + before_action :check_read_permission, except: %i(edit destroy) + before_action :check_edit_permission, only: %i(edit destroy) def file_preview render json: { html: render_to_string( @@ -176,6 +176,14 @@ class AssetsController < ApplicationController }, status: :ok end + def destroy + if @asset.destroy + render json: { flash: 'File deleted' } + else + render json: {}, status: :unprocessable_entity + end + end + private def load_vars @@ -203,25 +211,6 @@ class AssetsController < ApplicationController render_403 unless can_manage_asset?(@asset) end - # Check whether the wopi file can be edited and return appropriate response - def wopi_file_edit_button_status(asset) - file_ext = asset.file_name.split('.').last - if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext) - edit_supported = true - title = '' - else - edit_supported = false - title = if Constants::FILE_TEXT_FORMATS.include?(file_ext) - I18n.t('assets.wopi_supported_text_formats_title') - elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) - I18n.t('assets.wopi_supported_table_formats_title') - else - I18n.t('assets.wopi_supported_presentation_formats_title') - end - end - return edit_supported, title - end - def append_wd_params(url) exclude_params = %w(wdPreviousSession wdPreviousCorrelation) wd_params = params.as_json.select { |key, _value| key[/^wd.*/] && !(exclude_params.include? key) }.to_query diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb index eca041604..cf1c40669 100644 --- a/app/controllers/marvin_js_assets_controller.rb +++ b/app/controllers/marvin_js_assets_controller.rb @@ -17,7 +17,10 @@ class MarvinJsAssetsController < ApplicationController if result[:asset] && marvin_params[:object_type] == 'Step' render json: { - html: render_to_string(partial: 'assets/asset.html.erb', locals: { asset: result[:asset] }) + html: render_to_string(partial: 'assets/asset.html.erb', locals: { + asset: result[:asset], + gallery_view_id: marvin_params[:object_id] + }) } elsif result[:asset] && marvin_params[:object_type] == 'Result' @my_module = result[:object].my_module diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 579b70df2..5c48e7ef8 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -186,4 +186,23 @@ module ApplicationHelper def wopi_enabled? ENV['WOPI_ENABLED'] == 'true' end + + # Check whether the wopi file can be edited and return appropriate response + def wopi_file_edit_button_status(asset) + file_ext = asset.file_name.split('.').last + if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext) + edit_supported = true + title = '' + else + edit_supported = false + title = if Constants::FILE_TEXT_FORMATS.include?(file_ext) + I18n.t('assets.wopi_supported_text_formats_title') + elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) + I18n.t('assets.wopi_supported_table_formats_title') + else + I18n.t('assets.wopi_supported_presentation_formats_title') + end + end + return edit_supported, title + end end diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index 67ab3f91b..abbd66543 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,8 +1,31 @@ -<% gallery_view_id = nil unless defined? gallery_view_id %> +<% +unless defined? gallery_view_id + gallery_view_id = nil +end + +unless defined? deletable + deletable = if asset.step + true + else + false + end +end + +unless defined? editable + editable = true +end + +partial_locals = { + asset: asset, + gallery_view_id: gallery_view_id, + deletable: deletable, + editable: editable +} +%> <% if asset.inline? %> - <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> + <%= render partial: 'assets/asset_inline.html.erb', locals: partial_locals %> <% elsif asset.list? %> - <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> + <%= render partial: 'assets/asset_list.html.erb', locals: partial_locals %> <% else %> - <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %> + <%= render partial: 'assets/asset_thumbnail.html.erb', locals: partial_locals %> <% end %> diff --git a/app/views/assets/_asset_context_menu.html.erb b/app/views/assets/_asset_context_menu.html.erb new file mode 100644 index 000000000..7ea576f63 --- /dev/null +++ b/app/views/assets/_asset_context_menu.html.erb @@ -0,0 +1,70 @@ +
      + + +
      diff --git a/app/views/assets/_asset_inline.html.erb b/app/views/assets/_asset_inline.html.erb index 9db49bb4f..cc1037c67 100644 --- a/app/views/assets/_asset_inline.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -22,24 +22,10 @@ <%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %>
    -
    - -
    -
    - -
    -
    - -
    + <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
    <% if wopi_enabled? && wopi_file?(asset) %> -
    +
    <% elsif asset.previewable? %>
    <%= image_tag asset.large_preview, diff --git a/app/views/assets/_asset_list.html.erb b/app/views/assets/_asset_list.html.erb index d27d8c76e..cec89d37d 100644 --- a/app/views/assets/_asset_list.html.erb +++ b/app/views/assets/_asset_list.html.erb @@ -22,19 +22,5 @@ <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> <%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %>
    -
    - -
    -
    - -
    -
    - -
    + <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
    diff --git a/app/views/assets/_asset_thumbnail.html.erb b/app/views/assets/_asset_thumbnail.html.erb index 4be1a891c..59106809b 100644 --- a/app/views/assets/_asset_thumbnail.html.erb +++ b/app/views/assets/_asset_thumbnail.html.erb @@ -13,21 +13,6 @@ gallery_view_id: gallery_view_id, preview_url: asset_file_preview_path(asset) } do %> -
    - -
    -
    - -
    -
    - -
    <% if asset.previewable? %> <%= image_tag asset.medium_preview, @@ -50,4 +35,5 @@ <%= number_to_human_size(asset.file_size) %>
    <% end %> + <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
    diff --git a/app/views/my_modules/_result_user_generated.html.erb b/app/views/my_modules/_result_user_generated.html.erb index 29ac2e3a7..dfd3a9d68 100644 --- a/app/views/my_modules/_result_user_generated.html.erb +++ b/app/views/my_modules/_result_user_generated.html.erb @@ -3,5 +3,5 @@ <% elsif result.is_table %> <%= render partial: "results/result_table.html.erb", locals: {result: result} %> <% elsif result.is_asset %> - <%= render partial: 'assets/asset.html.erb', locals: { asset: result.asset } %> + <%= render partial: 'assets/asset.html.erb', locals: { asset: result.asset, gallery_view_id: result.my_module.id } %> <% end %> diff --git a/app/views/shared/file_preview/_content.html.erb b/app/views/shared/file_preview/_content.html.erb index e951761b9..e4699bfa7 100644 --- a/app/views/shared/file_preview/_content.html.erb +++ b/app/views/shared/file_preview/_content.html.erb @@ -38,6 +38,9 @@ <%= t('Download')%> + <% if asset.step || asset.result %> + <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: false, editable: false } %> + <% end %>
    diff --git a/config/locales/en.yml b/config/locales/en.yml index c21dde5da..b9e409cc0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2124,6 +2124,13 @@ en: file_preview: edit_in_scinote: "Edit in SciNote" edit_in_marvinjs: "Edit in Marvin JS" + context_menu: + set_view_size: "Set view size" + delete: "Delete file" + inline_html: " Extra large" + thumbnail_html: " Medium" + list_html: " List" + atwho: no_results: projects: "Projects with this name were not found" diff --git a/config/routes.rb b/config/routes.rb index b5bf88050..d4b6bd990 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -603,6 +603,7 @@ Rails.application.routes.draw do patch 'files/:id/toggle_view_mode', to: 'assets#toggle_view_mode', as: 'toggle_view_mode' post 'files/:id/update_image', to: 'assets#update_image', as: 'update_asset_image' + delete 'files/:id/', to: 'assets#destroy', as: 'asset_destroy' post 'files/create_wopi_file', to: 'assets#create_wopi_file', as: 'create_wopi_file' From 5d0ab1f2e9544b7e6a2f3db0e6e8a519f18f83b2 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 4 Nov 2020 13:32:34 +0100 Subject: [PATCH 29/35] Fix markup --- app/controllers/marvin_js_assets_controller.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb index cf1c40669..ed5c7745d 100644 --- a/app/controllers/marvin_js_assets_controller.rb +++ b/app/controllers/marvin_js_assets_controller.rb @@ -18,9 +18,9 @@ class MarvinJsAssetsController < ApplicationController if result[:asset] && marvin_params[:object_type] == 'Step' render json: { html: render_to_string(partial: 'assets/asset.html.erb', locals: { - asset: result[:asset], - gallery_view_id: marvin_params[:object_id] - }) + asset: result[:asset], + gallery_view_id: marvin_params[:object_id] + }) } elsif result[:asset] && marvin_params[:object_type] == 'Result' @my_module = result[:object].my_module From 99b52e5d80bed9e587c05057b681e667c24cae7c Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 5 Nov 2020 08:44:48 +0100 Subject: [PATCH 30/35] Fix markup --- app/assets/stylesheets/shared/assets.scss | 1 + app/views/assets/_asset.html.erb | 6 ++---- app/views/assets/_asset_context_menu.html.erb | 2 +- app/views/assets/_asset_inline.html.erb | 8 ++++++-- app/views/assets/_asset_list.html.erb | 6 +++++- config/locales/en.yml | 2 +- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss index a97a72da3..b64a668b7 100644 --- a/app/assets/stylesheets/shared/assets.scss +++ b/app/assets/stylesheets/shared/assets.scss @@ -270,6 +270,7 @@ .dropdown-menu { @include font-button; min-width: 200px; + padding: .5em 0; .divider-label { @include font-small; diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index abbd66543..9d9b1de43 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,10 +1,8 @@ <% -unless defined? gallery_view_id - gallery_view_id = nil -end +gallery_view_id = nil unless defined? gallery_view_id unless defined? deletable - deletable = if asset.step + deletable = if asset.step.present? true else false diff --git a/app/views/assets/_asset_context_menu.html.erb b/app/views/assets/_asset_context_menu.html.erb index 7ea576f63..ff3d87ee4 100644 --- a/app/views/assets/_asset_context_menu.html.erb +++ b/app/views/assets/_asset_context_menu.html.erb @@ -49,7 +49,7 @@ <% end %> <% end %> -
  • <%= t("protocols.steps.attachments.attachments_view_mode") %>
    • +
  • <%= t("assets.context_menu.set_view_size") %>
    • <% ['inline', 'thumbnail', 'list'].each do |view_mode| %>
  • diff --git a/app/views/assets/_asset_inline.html.erb b/app/views/assets/_asset_inline.html.erb index cc1037c67..67fe6a5bf 100644 --- a/app/views/assets/_asset_inline.html.erb +++ b/app/views/assets/_asset_inline.html.erb @@ -15,7 +15,11 @@ gallery_view_id: gallery_view_id, preview_url: asset_file_preview_path(asset) } do %> - <%= asset.file_name %> + <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> + <%= asset.file.metadata['name'] %> + <% else %> + <%= asset.file_name %> + <% end %> <% end %>
    <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> @@ -25,7 +29,7 @@ <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
    <% if wopi_enabled? && wopi_file?(asset) %> -
    +
    <% elsif asset.previewable? %>
    <%= image_tag asset.large_preview, diff --git a/app/views/assets/_asset_list.html.erb b/app/views/assets/_asset_list.html.erb index cec89d37d..88d5f675b 100644 --- a/app/views/assets/_asset_list.html.erb +++ b/app/views/assets/_asset_list.html.erb @@ -16,7 +16,11 @@ gallery_view_id: gallery_view_id, preview_url: asset_file_preview_path(asset) } do %> - <%= asset.file_name %> + <% if asset.file.attached? && asset&.file&.metadata['asset_type'] %> + <%= asset.file.metadata['name'] %> + <% else %> + <%= asset.file_name %> + <% end %> <% end %>
    <%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %> diff --git a/config/locales/en.yml b/config/locales/en.yml index b9e409cc0..089fb14d0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2125,7 +2125,7 @@ en: edit_in_scinote: "Edit in SciNote" edit_in_marvinjs: "Edit in Marvin JS" context_menu: - set_view_size: "Set view size" + set_view_size: "SET VIEW SIZE" delete: "Delete file" inline_html: " Extra large" thumbnail_html: " Medium" From 8145a292fd5a3f2fa07db2ca7651564c4985a913 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 5 Nov 2020 10:03:15 +0100 Subject: [PATCH 31/35] Clear code and add missed I18n translation --- app/controllers/assets_controller.rb | 2 +- app/views/assets/_asset.html.erb | 14 ++------------ config/locales/en.yml | 1 + 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index ff2df9844..a6259e650 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -178,7 +178,7 @@ class AssetsController < ApplicationController def destroy if @asset.destroy - render json: { flash: 'File deleted' } + render json: { flash: I18n.t("assets.file_deleted", file_name: @asset.file_name ) } else render json: {}, status: :unprocessable_entity end diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index 9d9b1de43..08be9a957 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,17 +1,7 @@ <% gallery_view_id = nil unless defined? gallery_view_id - -unless defined? deletable - deletable = if asset.step.present? - true - else - false - end -end - -unless defined? editable - editable = true -end +deletable = true if asset.step.present? +editable = true partial_locals = { asset: asset, diff --git a/config/locales/en.yml b/config/locales/en.yml index 089fb14d0..91ae4b39c 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2088,6 +2088,7 @@ en: task_completed: "%{user} completed task %{module}. %{date} | Project: %{project} | Experiment: %{experiment}" assets: + file_deleted: "File \"%{file_name}\" deleted" head_title: edit: "SciNote | %{file_name} | Edit" view: "SciNote | %{file_name} | View" From e8592d911d1e77376202d568bc35e389e225568b Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 5 Nov 2020 10:04:27 +0100 Subject: [PATCH 32/35] Fix markup --- app/controllers/assets_controller.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index a6259e650..af44ef7c0 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -178,7 +178,7 @@ class AssetsController < ApplicationController def destroy if @asset.destroy - render json: { flash: I18n.t("assets.file_deleted", file_name: @asset.file_name ) } + render json: { flash: I18n.t('assets.file_deleted', file_name: @asset.file_name ) } else render json: {}, status: :unprocessable_entity end From d29a62dad133fb10b12f3ef658e0d0573b5190b8 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 5 Nov 2020 10:41:06 +0100 Subject: [PATCH 33/35] Improve markup --- app/views/assets/_asset.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb index 08be9a957..ce712b9c4 100644 --- a/app/views/assets/_asset.html.erb +++ b/app/views/assets/_asset.html.erb @@ -1,6 +1,6 @@ <% gallery_view_id = nil unless defined? gallery_view_id -deletable = true if asset.step.present? +deletable = asset.step.present? editable = true partial_locals = { From 7fd7c2de6a3f959328b4272d71b52a77c1b233e8 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 11 Nov 2020 15:48:00 +0100 Subject: [PATCH 34/35] Add download link to reports --- app/assets/stylesheets/reports.scss | 1 + app/services/reports/docx/draw_result_asset.rb | 5 +++++ app/services/reports/docx/draw_step_asset.rb | 5 +++++ .../_my_module_result_asset_element.html.erb | 9 +++++++-- .../reports/elements/_step_asset_element.html.erb | 14 +++++++++----- config/locales/en.yml | 1 + 6 files changed, 28 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index f57bc6d17..3cb0d39fd 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -458,6 +458,7 @@ label { .report-element-header { .file-name { margin-left: 5px; + white-space: nowrap; } } diff --git a/app/services/reports/docx/draw_result_asset.rb b/app/services/reports/docx/draw_result_asset.rb index dc68ced22..5edb70978 100644 --- a/app/services/reports/docx/draw_result_asset.rb +++ b/app/services/reports/docx/draw_result_asset.rb @@ -7,10 +7,15 @@ module Reports::Docx::DrawResultAsset asset = result.asset timestamp = asset.created_at + asset_url = Rails.application.routes.url_helpers.asset_download_url(asset) color = @color @docx.p @docx.p do text result.name, italic: true + text ' ' + link I18n.t('projects.reports.elements.download'), asset_url do + italic true + end text ' ' + I18n.t('search.index.archived'), color: color[:gray] if result.archived? text ' ' + I18n.t('projects.reports.elements.result_asset.file_name', file: asset.file_name) text ' ' + I18n.t('projects.reports.elements.result_asset.user_time', diff --git a/app/services/reports/docx/draw_step_asset.rb b/app/services/reports/docx/draw_step_asset.rb index 6431dfe0a..657148833 100644 --- a/app/services/reports/docx/draw_step_asset.rb +++ b/app/services/reports/docx/draw_step_asset.rb @@ -6,11 +6,16 @@ module Reports::Docx::DrawStepAsset return unless asset timestamp = asset.created_at + asset_url = Rails.application.routes.url_helpers.asset_download_url(asset) color = @color @docx.p @docx.p do text (I18n.t 'projects.reports.elements.step_asset.file_name', file: asset.file_name), italic: true text ' ' + link I18n.t('projects.reports.elements.download'), asset_url do + italic true + end + text ' ' text I18n.t('projects.reports.elements.step_asset.user_time', timestamp: I18n.l(timestamp, format: :full)), color: color[:gray] end diff --git a/app/views/reports/elements/_my_module_result_asset_element.html.erb b/app/views/reports/elements/_my_module_result_asset_element.html.erb index 3e096f0d9..a90520949 100644 --- a/app/views/reports/elements/_my_module_result_asset_element.html.erb +++ b/app/views/reports/elements/_my_module_result_asset_element.html.erb @@ -28,8 +28,13 @@ <%= t("projects.reports.elements.result_asset.file_name", file: filename) %> <% else %> - <%= t("projects.reports.elements.result_asset.file_name", - file: truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH)) %> + + <%= t("projects.reports.elements.result_asset.file_name", + file: truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH)) %> + + <%= t('projects.reports.elements.download') %> + + <% end %>
    diff --git a/app/views/reports/elements/_step_asset_element.html.erb b/app/views/reports/elements/_step_asset_element.html.erb index 2dd309c00..321af96b7 100644 --- a/app/views/reports/elements/_step_asset_element.html.erb +++ b/app/views/reports/elements/_step_asset_element.html.erb @@ -10,13 +10,17 @@
    <% if defined? export_all and export_all %> - <%=t 'projects.reports.elements.step_asset.file_name', - file: filename %> + <%= t('projects.reports.elements.step_asset.file_name', file: filename) %> <% else %> - <%=t 'projects.reports.elements.step_asset.file_name', - file: truncate(asset.file_name, - length: Constants::FILENAME_TRUNCATION_LENGTH) %> + + <%= t('projects.reports.elements.step_asset.file_name', + file: truncate(asset.file_name, length: Constants::FILENAME_TRUNCATION_LENGTH)) %> + + <%= t('projects.reports.elements.download') %> + + + <% end %>
    diff --git a/config/locales/en.yml b/config/locales/en.yml index 91ae4b39c..67fdbb71e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -444,6 +444,7 @@ en: appended_image: "Appended image - %{name}" appended_table: "Appended table" elements: + download: "[Download]" modals: project_contents: head_title: "Add contents to report" From 45efc9a43a8391989b926b516ee83e70131cc186 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 12 Nov 2020 13:21:47 +0100 Subject: [PATCH 35/35] Remove skip asset permission check for wopi creation --- app/controllers/assets_controller.rb | 6 +++--- app/controllers/wopi_controller.rb | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb index af44ef7c0..05fe68420 100644 --- a/app/controllers/assets_controller.rb +++ b/app/controllers/assets_controller.rb @@ -17,7 +17,7 @@ class AssetsController < ApplicationController helper_method :wopi_file_edit_button_status before_action :load_vars, except: :create_wopi_file - before_action :check_read_permission, except: %i(edit destroy) + before_action :check_read_permission, except: %i(edit destroy create_wopi_file) before_action :check_edit_permission, only: %i(edit destroy) def file_preview @@ -204,11 +204,11 @@ class AssetsController < ApplicationController end def check_read_permission - render_403 unless can_read_asset?(@asset) + render_403 and return unless can_read_asset?(@asset) end def check_edit_permission - render_403 unless can_manage_asset?(@asset) + render_403 and return unless can_manage_asset?(@asset) end def append_wd_params(url) diff --git a/app/controllers/wopi_controller.rb b/app/controllers/wopi_controller.rb index bc04e7411..b0e4d811e 100644 --- a/app/controllers/wopi_controller.rb +++ b/app/controllers/wopi_controller.rb @@ -1,6 +1,4 @@ -# frozen_string_literal: true - -class WopiController < ApplicationController +class WopiController < ActionController::Base include WopiUtil skip_before_action :verify_authenticity_token