mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-11-17 22:42:22 +08:00
Merge pull request #7328 from lasniscinote/gl_SCI_10313
(fix) Improve the appearance of List view in File attachments [SCI-10313]
This commit is contained in:
Martin Artnik
GitHub
commit
167d57b3d1
4 changed files with 227 additions and 44 deletions
|
|
@ -240,7 +240,7 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
grid-column: 1/-1;
|
||||
height: 3em;
|
||||
height: 40px;
|
||||
padding: .5em;
|
||||
|
||||
.file-icon {
|
||||
|
|
@ -282,7 +282,96 @@
|
|||
}
|
||||
|
||||
.asset-context-menu {
|
||||
margin-left: 1rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
// normal screen
|
||||
@media (min-width: 640px) {
|
||||
|
||||
&:hover {
|
||||
justify-content: space-between;
|
||||
|
||||
#action-buttons {
|
||||
display: flex;
|
||||
|
||||
.icon-btn {
|
||||
&:hover {
|
||||
background-color: var(--sn-light-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#file-metadata {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// context menu dropdown is open
|
||||
&.context-menu-open,
|
||||
&.menu-dropdown-open {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
#action-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#file-metadata {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// context menu dropdown is closed
|
||||
#action-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// small screens
|
||||
@media (max-width: 640px) {
|
||||
display: grid;
|
||||
height: 60px;
|
||||
|
||||
#file-metadata {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#action-buttons {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
right: 144px;
|
||||
|
||||
.icon-btn {
|
||||
&:hover {
|
||||
background-color: var(--sn-light-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// context menu dropdown is open
|
||||
&.context-menu-open {
|
||||
|
||||
#action-buttons {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
right: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
// context menu dropdown is closed
|
||||
#action-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.attachments:has(> .list-attachment-container) {
|
||||
grid-row-gap: 10px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-row-gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-file-modal {
|
||||
.file-drop-zone {
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,53 +1,99 @@
|
|||
<template>
|
||||
<div class="list-attachment-container asset"
|
||||
:data-asset-id="attachment.id"
|
||||
>
|
||||
<i class="text-sn-grey asset-icon sn-icon" :class="attachment.attributes.icon"></i>
|
||||
<a :href="attachment.attributes.urls.blob"
|
||||
class="file-preview-link file-name"
|
||||
:id="`modal_link${attachment.id}`"
|
||||
data-no-turbolink="true"
|
||||
:data-id="attachment.id"
|
||||
:data-gallery-view-id="parentId"
|
||||
:data-preview-url="attachment.attributes.urls.preview"
|
||||
>
|
||||
<span class="attachment-name" data-toggle="tooltip"
|
||||
data-placement="bottom">
|
||||
{{ attachment.attributes.file_name }}
|
||||
</span>
|
||||
</a>
|
||||
<div v-if="attachment.attributes.medium_preview !== null" class="attachment-image-tooltip bg-white sn-shadow-menu-sm">
|
||||
<img :src="this.imageLoadError ? attachment.attributes.urls.blob : attachment.attributes.medium_preview" @error="ActiveStoragePreviews.reCheckPreview"
|
||||
@load="ActiveStoragePreviews.showPreview"/>
|
||||
</div>
|
||||
<div class="file-metadata">
|
||||
<span>
|
||||
{{ i18n.t('assets.placeholder.modified_label') }}
|
||||
{{ attachment.attributes.updated_at_formatted }}
|
||||
</span>
|
||||
<span>
|
||||
{{ i18n.t('assets.placeholder.size_label', {size: attachment.attributes.file_size_formatted}) }}
|
||||
</span>
|
||||
</div>
|
||||
<ContextMenu
|
||||
:attachment="attachment"
|
||||
@attachment:viewMode="updateViewMode"
|
||||
@attachment:delete="deleteAttachment"
|
||||
@attachment:moved="attachmentMoved"
|
||||
@attachment:uploaded="reloadAttachments"
|
||||
/>
|
||||
<div class="list-attachment-container asset hover:bg-sn-super-light-grey"
|
||||
:class="[{'menu-dropdown-open': isMenuDropdownOpen}, {'context-menu-open': isContextMenuOpen }]"
|
||||
:data-asset-id="attachment.id">
|
||||
<div id="icon-with-filename" class="h-6 my-auto">
|
||||
<i class="text-sn-grey asset-icon sn-icon mb-1" :class="attachment.attributes.icon"></i>
|
||||
<a :href="attachment.attributes.urls.blob"
|
||||
class="file-preview-link file-name"
|
||||
:id="`modal_link${attachment.id}`"
|
||||
data-no-turbolink="true"
|
||||
:data-id="attachment.id"
|
||||
:data-gallery-view-id="parentId"
|
||||
:data-preview-url="attachment.attributes.urls.preview"
|
||||
>
|
||||
<span class="attachment-name" data-toggle="tooltip"
|
||||
data-placement="bottom">
|
||||
{{ attachment.attributes.file_name }}
|
||||
</span>
|
||||
</a>
|
||||
<div v-if="attachment.attributes.medium_preview !== null" class="attachment-image-tooltip bg-white sn-shadow-menu-sm">
|
||||
<img :src="this.imageLoadError ? attachment.attributes.urls.blob : attachment.attributes.medium_preview" @error="ActiveStoragePreviews.reCheckPreview"
|
||||
@load="ActiveStoragePreviews.showPreview"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="file-metadata" class="file-metadata">
|
||||
<span class="my-auto">
|
||||
{{ attachment.attributes.updated_at_formatted }}
|
||||
</span>
|
||||
<span class="my-auto">
|
||||
{{ attachment.attributes.file_size_formatted }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row" id="action-buttons">
|
||||
|
||||
<!-- open -->
|
||||
<OpenMenu
|
||||
:attachment="attachment"
|
||||
:multipleOpenOptions="multipleOpenOptions"
|
||||
@menu-dropdown-toggle="toggleMenuDropdown"
|
||||
>
|
||||
</OpenMenu>
|
||||
|
||||
<!-- move -->
|
||||
<a v-if="attachment.attributes.urls.move"
|
||||
@click.prevent.stop="showMoveModal"
|
||||
class="btn btn-light icon-btn thumbnail-action-btn"
|
||||
:title="i18n.t('attachments.thumbnail.buttons.move')">
|
||||
<i class="sn-icon sn-icon-move"></i>
|
||||
</a>
|
||||
|
||||
<!-- download -->
|
||||
<a class="btn btn-light icon-btn thumbnail-action-btn"
|
||||
:title="i18n.t('attachments.thumbnail.buttons.download')"
|
||||
:href="attachment.attributes.urls.download" data-turbolinks="false">
|
||||
<i class="sn-icon sn-icon-export"></i>
|
||||
</a>
|
||||
|
||||
<!-- more options -->
|
||||
<ContextMenu
|
||||
:attachment="attachment"
|
||||
@attachment:viewMode="updateViewMode"
|
||||
@attachment:delete="deleteAttachment"
|
||||
@attachment:moved="attachmentMoved"
|
||||
@attachment:uploaded="reloadAttachments"
|
||||
@menu-toggle="toggleContextMenu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Teleport to="body">
|
||||
<moveAssetModal
|
||||
v-if="movingAttachment"
|
||||
:parent_type="attachment.attributes.parent_type"
|
||||
:targets_url="attachment.attributes.urls.move_targets"
|
||||
@confirm="moveAttachment($event)" @cancel="closeMoveModal"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AttachmentMovedMixin from './mixins/attachment_moved.js';
|
||||
import ContextMenuMixin from './mixins/context_menu.js';
|
||||
import ContextMenu from './context_menu.vue';
|
||||
import MoveMixin from './mixins/move.js';
|
||||
import MoveAssetModal from '../modal/move.vue';
|
||||
import OpenMenu from './open_menu.vue';
|
||||
|
||||
export default {
|
||||
name: 'listAttachment',
|
||||
mixins: [ContextMenuMixin, AttachmentMovedMixin],
|
||||
components: { ContextMenu },
|
||||
mixins: [ContextMenuMixin, AttachmentMovedMixin, MoveMixin],
|
||||
components: {
|
||||
ContextMenu,
|
||||
MoveAssetModal,
|
||||
OpenMenu
|
||||
},
|
||||
props: {
|
||||
attachment: {
|
||||
type: Object,
|
||||
|
|
@ -60,12 +106,52 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageLoadError: false
|
||||
imageLoadError: false,
|
||||
isContextMenuOpen: false,
|
||||
isMenuDropdownOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleImageError() {
|
||||
this.imageLoadError = true;
|
||||
},
|
||||
toggleContextMenu(isOpen) {
|
||||
this.isContextMenuOpen = isOpen;
|
||||
},
|
||||
toggleMenuDropdown(isOpen) {
|
||||
this.isMenuDropdownOpen = isOpen;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
multipleOpenOptions() {
|
||||
const options = [];
|
||||
if (this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset) {
|
||||
options.push({
|
||||
text: this.attachment.attributes.wopi_context.button_text,
|
||||
url: this.attachment.attributes.urls.edit_asset,
|
||||
url_target: '_blank'
|
||||
});
|
||||
}
|
||||
if (this.attachment.attributes.asset_type !== 'marvinjs'
|
||||
&& this.attachment.attributes.image_editable
|
||||
&& this.attachment.attributes.urls.start_edit_image) {
|
||||
options.push({
|
||||
text: this.i18n.t('assets.file_preview.edit_in_scinote'),
|
||||
emit: 'open_scinote_editor'
|
||||
});
|
||||
}
|
||||
if (this.canOpenLocally) {
|
||||
const text = this.localAppName
|
||||
? this.i18n.t('attachments.open_locally_in', { application: this.localAppName })
|
||||
: this.i18n.t('attachments.open_locally');
|
||||
|
||||
options.push({
|
||||
text,
|
||||
emit: 'open_locally',
|
||||
data_e2e: 'e2e-BT-attachmentOptions-openLocally'
|
||||
});
|
||||
}
|
||||
return options;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="relative" v-if="listItems.length > 0 || alwaysShow" v-click-outside="closeMenu" >
|
||||
<div class="inline" v-if="listItems.length > 0 || alwaysShow" v-click-outside="closeMenu" >
|
||||
<button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen">
|
||||
<i v-if="btnIcon" :class="btnIcon"></i>
|
||||
{{ btnText }}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<template v-if="isOpen">
|
||||
<teleport to="body">
|
||||
<div ref="flyout"
|
||||
class="fixed z-[3000] sn-menu-dropdown bg-sn-white inline-block rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]"
|
||||
class="fixed z-[3000] sn-menu-dropdown bg-sn-white rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]"
|
||||
:class="{
|
||||
'right-0': position === 'right',
|
||||
'left-0': position === 'left',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue