scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-11 08:51:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #7654 from aignatov-bio/ai-sci-10804-fix-attachment-section

Browse source 
Fix atachment section [SCI-9884][SCI-10804][SCI-10805]
This commit is contained in:
aignatov-bio 2024-06-20 11:51:14 +02:00 • committed by GitHub
commit 56f11cdeba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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; grid-template-columns: max-content max-content;
} }
.asset-context-menu {
margin-left: auto;
}
.inline-attachment-action-buttons { .inline-attachment-action-buttons {
display: none; display: none;
} }

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

@ -3,7 +3,7 @@
:root { :root {
--attachment-column-width: 13.625rem; --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> </span>
</div> </div>
</div> </div>
<ContextMenu <div class="flex items-center ml-auto gap-2">
:attachment="attachment" <openMenu
@attachment:viewMode="updateViewMode" :attachment="attachment"
@attachment:delete="deleteAttachment" :multipleOpenOptions="multipleOpenOptions"
@attachment:moved="attachmentMoved" @open="toggleMenuDropdown"
@attachment:uploaded="reloadAttachments" @close="toggleMenuDropdown"
@attachment:update="$emit('attachment:update', $event)" @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> </div>
<template v-if="attachment.attributes.wopi"> <template v-if="attachment.attributes.wopi">
<div v-if="showWopi" <div v-if="showWopi"
@ -67,15 +87,16 @@
<i class="text-sn-grey sn-icon" :class="attachment.attributes.icon"></i> <i class="text-sn-grey sn-icon" :class="attachment.attributes.icon"></i>
</div> </div>
</template> </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> </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> </template>
<script> <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}) }} {{ i18n.t('assets.placeholder.size_label', {size: attachment.attributes.file_size_formatted}) }}
</span> </span>
</div> </div>
<ContextMenu <div class="attachment-actions shrink-0 ml-4">
:attachment="attachment" <openMenu
@attachment:viewMode="updateViewMode" :attachment="attachment"
@attachment:delete="deleteAttachment" :multipleOpenOptions="multipleOpenOptions"
@attachment:moved="attachmentMoved" @open="toggleMenuDropdown"
@attachment:uploaded="reloadAttachments" @close="toggleMenuDropdown"
@attachment:update="$emit('attachment:update', $event)" @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> </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> </template>
<script> <script>

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

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

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

@ -46,62 +46,13 @@
{{ attachment.attributes.file_size_formatted }} {{ attachment.attributes.file_size_formatted }}
</div> </div>
<div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between"> <div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between">
<MenuDropdown <openMenu
v-if="multipleOpenOptions.length > 1" :attachment="attachment"
:listItems="multipleOpenOptions" :multipleOpenOptions="multipleOpenOptions"
:btnClasses="'btn btn-light icon-btn thumbnail-action-btn'" @open="toggleMenu"
:position="'left'" @close="toggleMenu"
:btnIcon="'sn-icon sn-icon-open'" @option:click="$emit($event)"
: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>
<a v-if="attachment.attributes.urls.move" <a v-if="attachment.attributes.urls.move"
@click.prevent.stop="showMoveModal" @click.prevent.stop="showMoveModal"
class="btn btn-light icon-btn thumbnail-action-btn" class="btn btn-light icon-btn thumbnail-action-btn"
@ -124,24 +75,11 @@
@attachment:uploaded="reloadAttachments" @attachment:uploaded="reloadAttachments"
@attachment:changed="$emit('attachment:changed', $event)" @attachment:changed="$emit('attachment:changed', $event)"
@attachment:update="$emit('attachment:update', $event)" @attachment:update="$emit('attachment:update', $event)"
@menu-visibility-changed="handleMenuVisibilityChange"
@menu-toggle="toggleMenu" @menu-toggle="toggleMenu"
:withBorder="true" :withBorder="true"
/> />
</div> </div>
</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"> <Teleport to="body">
<deleteAttachmentModal <deleteAttachmentModal
v-if="deleteModal" v-if="deleteModal"
@ -195,6 +133,7 @@ import MenuDropdown from '../../../shared/menu_dropdown.vue';
import MoveAssetModal from '../modal/move.vue'; import MoveAssetModal from '../modal/move.vue';
import MoveMixin from './mixins/move.js'; import MoveMixin from './mixins/move.js';
import OpenLocallyMixin from './mixins/open_locally.js'; import OpenLocallyMixin from './mixins/open_locally.js';
import OpenMenu from './open_menu.vue';
import { vOnClickOutside } from '@vueuse/components'; import { vOnClickOutside } from '@vueuse/components';
export default { export default {
@ -204,7 +143,8 @@ export default {
ContextMenu, ContextMenu,
deleteAttachmentModal, deleteAttachmentModal,
MoveAssetModal, MoveAssetModal,
MenuDropdown MenuDropdown,
OpenMenu
}, },
props: { props: {
attachment: { attachment: {