mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-12-09 13:46:21 +08:00
Merge pull request #2900 from aignatov-bio/ai-sci-5109-add-list-view-for-files
Add list view to attachments [SCI-5109]
This commit is contained in:
aignatov-bio
GitHub
commit
2d84a34cec
8 changed files with 158 additions and 33 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="inline-attachment-container step-asset"
|
||||
<div class="inline-attachment-container asset"
|
||||
data-asset-id="<%= asset.id %>"
|
||||
data-asset-file-name="<%= asset.file_name %>"
|
||||
data-asset-updated-at="<%= asset.updated_at.to_i %>"
|
||||
|
|
@ -6,20 +6,45 @@
|
|||
>
|
||||
<div class="header">
|
||||
<div class="file-info">
|
||||
<div class="file-name">
|
||||
<%= 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 %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="file-metadata">
|
||||
<span><%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %></span>
|
||||
<span><%= number_to_human_size(asset.file_size) %></span>
|
||||
<span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-as-thumbnail change-preview-type"
|
||||
data-preview-type="show_as_thumbnail"
|
||||
data-asset-id="<%= asset.id %>" >
|
||||
<i class="fas fa-compress"></i>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="inline"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-desktop"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="list"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-list"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="thumbnail"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iframe-placeholder" data-iframe-url="<%= asset.get_action_url(current_user, 'embedview') %>"></div>
|
||||
|
||||
<% if wopi_enabled? && wopi_file?(asset) %>
|
||||
<div class="iframe-placeholder" data-iframe-url="<%= asset.get_action_url(current_user, 'embedview') %>"></div>
|
||||
<% elsif asset.previewable? %>
|
||||
<div class="image-container">
|
||||
<%= image_tag asset.large_preview,
|
||||
onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
|
||||
onload: 'ActiveStoragePreviews.showPreview(event)',
|
||||
style: 'opacity: 0' %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="general-file-container">
|
||||
<i class="fas <%= file_fa_icon_class(asset) if asset.file_name %>"></i>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
35
app/views/assets/_asset_list.html.erb
Normal file
35
app/views/assets/_asset_list.html.erb
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<div class="list-attachment-container asset"
|
||||
data-asset-id="<%= asset.id %>"
|
||||
data-asset-file-name="<%= asset.file_name %>"
|
||||
data-asset-updated-at="<%= asset.updated_at.to_i %>"
|
||||
data-asset-order="1"
|
||||
>
|
||||
<div class="file-icon">
|
||||
<i class="fas <%= file_fa_icon_class(asset) if asset.file_name %>"></i>
|
||||
</div>
|
||||
<%= 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 %>
|
||||
<div class="file-metadata">
|
||||
<span><%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %></span>
|
||||
<span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="inline"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-desktop"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="list"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-list"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="thumbnail"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,20 +1,28 @@
|
|||
<div class="attachment-container step-asset"
|
||||
<div class="attachment-container asset"
|
||||
data-asset-id="<%= asset.id %>"
|
||||
data-asset-file-name="<%= asset.file_name %>"
|
||||
data-asset-updated-at="<%= asset.updated_at.to_i %>"
|
||||
data-asset-order="1"
|
||||
data-asset-order="2"
|
||||
>
|
||||
<%= 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) %>
|
||||
<div class="show-inline change-preview-type"
|
||||
data-preview-type="show_inline"
|
||||
data-asset-id="<%= asset.id %>">
|
||||
<i class="fas fa-expand"></i>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="inline"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-desktop"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="list"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-list"></i>
|
||||
</div>
|
||||
<div class="change-preview-type"
|
||||
data-preview-type="thumbnail"
|
||||
data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="attachment-preview <%= asset.file.attached? ? asset.file.metadata['asset_type'] : '' %>">
|
||||
<% if asset.previewable? %>
|
||||
<%= image_tag asset.medium_preview,
|
||||
|
|
|
|||
|
|
@ -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.'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue