scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-05 20:23:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix atachment section [SCI-9884][SCI-10804][SCI-10805]

Browse source
This commit is contained in:
Anton 2024-06-20 11:48:35 +02:00
parent 1c573cfd62
commit 062ea4e3da
6 changed files with 156 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/shared/assets.scss
View file

@ -209,10 +209,6 @@
grid-template-columns: max-content max-content;
}
.asset-context-menu {
margin-left: auto;
}
.inline-attachment-action-buttons {
display: none;
}

2
app/assets/stylesheets/shared/content/attachments.scss
View file

@ -3,7 +3,7 @@
:root {
--attachment-column-width: 13.625rem;
--attachment-row-height: 2.5rem;
--attachment-row-height: 3rem;
}

53
app/javascript/vue/shared/content/attachments/inline.vue
View file

@ -31,14 +31,34 @@
</span>
</div>
</div>
<ContextMenu
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
@attachment:moved="attachmentMoved"
@attachment:uploaded="reloadAttachments"
@attachment:update="$emit('attachment:update', $event)"
/>
<div class="flex items-center ml-auto gap-2">
<openMenu
:attachment="attachment"
:multipleOpenOptions="multipleOpenOptions"
@open="toggleMenuDropdown"
@close="toggleMenuDropdown"
@option:click="$emit($event)"
/>
<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>
<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>
<ContextMenu
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
@attachment:moved="attachmentMoved"
@attachment:uploaded="reloadAttachments"
@attachment:update="$emit('attachment:update', $event)"
/>
</div>
</div>
<template v-if="attachment.attributes.wopi">
<div v-if="showWopi"
@ -67,15 +87,16 @@
<i class="text-sn-grey sn-icon" :class="attachment.attributes.icon"></i>
</div>
</template>
<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>
</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>

52
app/javascript/vue/shared/content/attachments/list.vue
View file

@ -30,23 +30,43 @@
{{ 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"
@attachment:update="$emit('attachment:update', $event)"
/>
<div class="attachment-actions shrink-0 ml-4">
<openMenu
:attachment="attachment"
:multipleOpenOptions="multipleOpenOptions"
@open="toggleMenuDropdown"
@close="toggleMenuDropdown"
@option:click="$emit($event)"
/>
<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>
<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>
<ContextMenu
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
@attachment:moved="attachmentMoved"
@attachment:uploaded="reloadAttachments"
@attachment:update="$emit('attachment:update', $event)"
/>
</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>
</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>

143
app/javascript/vue/shared/content/attachments/open_menu.vue
View file

@ -1,81 +1,81 @@
<template>
<span>
<!-- multiple options -->
<MenuDropdown
v-if="multipleOpenOptions.length > 1"
:listItems="multipleOpenOptions"
:btnClasses="'btn btn-light icon-btn thumbnail-action-btn'"
:position="'left'"
:btnIcon="'sn-icon sn-icon-open'"
:title="i18n.t('attachments.thumbnail.buttons.open')"
@menu-toggle="toggleMenu"
@open_locally="openLocally"
@open_scinote_editor="openScinoteEditor"
>
</MenuDropdown>
<!-- multiple options -->
<MenuDropdown
v-if="multipleOpenOptions.length > 1"
:listItems="multipleOpenOptions"
:btnClasses="'btn btn-light icon-btn thumbnail-action-btn'"
:position="'left'"
:btnIcon="'sn-icon sn-icon-open'"
:title="i18n.t('attachments.thumbnail.buttons.open')"
@menu-toggle="toggleMenu"
@open_locally="openLocally"
@open_scinote_editor="openScinoteEditor"
>
</MenuDropdown>
<!-- open locally -->
<a
class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="canOpenLocally"
@click="openLocally"
:title="i18n.t('attachments.thumbnail.buttons.open')"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- open locally -->
<a
class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="canOpenLocally"
@click="openLocally"
:title="i18n.t('attachments.thumbnail.buttons.open')"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- wopi -->
<a
class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset"
:href="attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
id="wopi_file_edit_button"
:class="attachment.attributes.wopi_context.edit_supported ? '' : 'disabled'"
target="_blank"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- wopi -->
<a
class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset"
:href="attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
id="wopi_file_edit_button"
:class="attachment.attributes.wopi_context.edit_supported ? '' : 'disabled'"
target="_blank"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- gene sequence -->
<a
class="btn btn-light icon-btn thumbnail-action-btn ove-edit-button"
v-else-if="attachment.attributes.asset_type == 'gene_sequence' && attachment.attributes.urls.open_vector_editor_edit"
@click="openOVEditor(attachment.attributes.urls.open_vector_editor_edit)"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- gene sequence -->
<a
class="btn btn-light icon-btn thumbnail-action-btn ove-edit-button"
v-else-if="attachment.attributes.asset_type == 'gene_sequence' && attachment.attributes.urls.open_vector_editor_edit"
@click="openOVEditor(attachment.attributes.urls.open_vector_editor_edit)"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- marvin js -->
<a
class="btn btn-light icon-btn thumbnail-action-btn marvinjs-edit-button"
v-else-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-id="attachment.id"
:data-update-url="attachment.attributes.urls.marvin_js"
:data-sketch-start-edit-url="attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-name="attachment.attributes.metadata.name"
:data-sketch-description="attachment.attributes.metadata.description"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- marvin js -->
<a
class="btn btn-light icon-btn thumbnail-action-btn marvinjs-edit-button"
v-else-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-id="attachment.id"
:data-update-url="attachment.attributes.urls.marvin_js"
:data-sketch-start-edit-url="attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-name="attachment.attributes.metadata.name"
:data-sketch-description="attachment.attributes.metadata.description"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- editing -->
<a
class="btn btn-light icon-btn thumbnail-action-btn image-edit-button"
v-else-if="attachment.attributes.image_editable && attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
:data-image-id="attachment.id"
:data-image-name="attachment.attributes.file_name"
:data-image-url="attachment.attributes.urls.asset_file"
:data-image-quality="attachment.attributes.image_context && attachment.attributes.image_context.quality"
:data-image-mime-type="attachment.attributes.image_context && attachment.attributes.image_context.type"
:data-image-start-edit-url="attachment.attributes.urls.start_edit_image"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- editing -->
<a
class="btn btn-light icon-btn thumbnail-action-btn image-edit-button"
v-else-if="attachment.attributes.image_editable && attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
:data-image-id="attachment.id"
:data-image-name="attachment.attributes.file_name"
:data-image-url="attachment.attributes.urls.asset_file"
:data-image-quality="attachment.attributes.image_context && attachment.attributes.image_context.quality"
:data-image-mime-type="attachment.attributes.image_context && attachment.attributes.image_context.type"
:data-image-start-edit-url="attachment.attributes.urls.start_edit_image"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<!-- hidden -->
<a class="image-edit-button hidden"
<!-- hidden -->
<a class="image-edit-button hidden"
v-if="attachment.attributes.asset_type != 'marvinjs'
&& attachment.attributes.image_editable
&& attachment.attributes.urls.start_edit_image"
@ -87,6 +87,7 @@
:data-image-mime-type="attachment.attributes.image_context.type"
:data-image-start-edit-url="attachment.attributes.urls.start_edit_image"
></a>
</span>
</template>
<script>

80
app/javascript/vue/shared/content/attachments/thumbnail.vue
View file

@ -46,62 +46,13 @@
{{ attachment.attributes.file_size_formatted }}
</div>
<div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between">
<MenuDropdown
v-if="multipleOpenOptions.length > 1"
:listItems="multipleOpenOptions"
:btnClasses="'btn btn-light icon-btn thumbnail-action-btn'"
:position="'left'"
:btnIcon="'sn-icon sn-icon-open'"
:title="i18n.t('attachments.thumbnail.buttons.open')"
@menu-toggle="toggleMenu"
@open_locally="openLocally"
@open_scinote_editor="openScinoteEditor"
></MenuDropdown>
<a class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="canOpenLocally"
@click="openLocally"
:title="i18n.t('attachments.thumbnail.buttons.open')"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<a class="btn btn-light icon-btn thumbnail-action-btn"
v-else-if="this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset"
:href="attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
id="wopi_file_edit_button"
:class="attachment.attributes.wopi_context.edit_supported ? '' : 'disabled'"
target="_blank"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<a class="btn btn-light icon-btn thumbnail-action-btn ove-edit-button"
v-else-if="attachment.attributes.asset_type == 'gene_sequence' && attachment.attributes.urls.open_vector_editor_edit"
@click="openOVEditor(attachment.attributes.urls.open_vector_editor_edit)"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<a class="btn btn-light icon-btn thumbnail-action-btn marvinjs-edit-button"
v-else-if="attachment.attributes.asset_type == 'marvinjs' && attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-id="attachment.id"
:data-update-url="attachment.attributes.urls.marvin_js"
:data-sketch-start-edit-url="attachment.attributes.urls.marvin_js_start_edit"
:data-sketch-name="attachment.attributes.metadata.name"
:data-sketch-description="attachment.attributes.metadata.description"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<a class="btn btn-light icon-btn thumbnail-action-btn image-edit-button"
v-else-if="attachment.attributes.image_editable && attachment.attributes.urls.edit_asset"
:title="i18n.t('attachments.thumbnail.buttons.open')"
:data-image-id="attachment.id"
:data-image-name="attachment.attributes.file_name"
:data-image-url="attachment.attributes.urls.asset_file"
:data-image-quality="attachment.attributes.image_context && attachment.attributes.image_context.quality"
:data-image-mime-type="attachment.attributes.image_context && attachment.attributes.image_context.type"
:data-image-start-edit-url="attachment.attributes.urls.start_edit_image"
>
<i class="sn-icon sn-icon-open"></i>
</a>
<openMenu
:attachment="attachment"
:multipleOpenOptions="multipleOpenOptions"
@open="toggleMenu"
@close="toggleMenu"
@option:click="$emit($event)"
/>
<a v-if="attachment.attributes.urls.move"
@click.prevent.stop="showMoveModal"
class="btn btn-light icon-btn thumbnail-action-btn"
@ -124,24 +75,11 @@
@attachment:uploaded="reloadAttachments"
@attachment:changed="$emit('attachment:changed', $event)"
@attachment:update="$emit('attachment:update', $event)"
@menu-visibility-changed="handleMenuVisibilityChange"
@menu-toggle="toggleMenu"
:withBorder="true"
/>
</div>
</div>
<ContextMenu
v-show="showOptions"
:attachment="attachment"
@attachment:viewMode="updateViewMode"
@attachment:delete="deleteAttachment"
@attachment:moved="attachmentMoved"
@attachment:uploaded="reloadAttachments"
@attachment:changed="$emit('attachment:changed', $event)"
@attachment:update="$emit('attachment:update', $event)"
@menu-visibility-changed="handleMenuVisibilityChange"
:withBorder="true"
/>
<Teleport to="body">
<deleteAttachmentModal
v-if="deleteModal"
@ -195,6 +133,7 @@ import MenuDropdown from '../../../shared/menu_dropdown.vue';
import MoveAssetModal from '../modal/move.vue';
import MoveMixin from './mixins/move.js';
import OpenLocallyMixin from './mixins/open_locally.js';
import OpenMenu from './open_menu.vue';
import { vOnClickOutside } from '@vueuse/components';
export default {
@ -204,7 +143,8 @@ export default {
ContextMenu,
deleteAttachmentModal,
MoveAssetModal,
MenuDropdown
MenuDropdown,
OpenMenu
},
props: {
attachment: {