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..f93f2a66b 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-column-width: 16em; + --attachment-row-height: 3em; } @@ -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 { + 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; @@ -376,3 +400,32 @@ } } } + +.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/models/asset.rb b/app/models/asset.rb index 4632048c9..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: { 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..35415b5a2 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) %> + <%= t('assets.placeholder.size_label', size: 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..ab9349d23 --- /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 %> + <%= t('assets.placeholder.size_label', size: 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, diff --git a/config/locales/en.yml b/config/locales/en.yml index d32185828..7f553010a 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2266,6 +2266,7 @@ en: file_name_placeholder: 'Image' placeholder: modified_label: "Modified:" + size_label: "Size: %{size}" wopi_supported_text_formats_title: 'Only .docx, .docm, .odt file formats are supported for editing in Word Online.' wopi_supported_table_formats_title: 'Only .xlsx, .xlsm, .xlsb, .ods file formats are supported for editing in Excel Online.' wopi_supported_presentation_formats_title: 'Only .pptx, ppsx, .odp file formats are supported for editing in Powerpoint Online.'