diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss index ca1eba7c7..90aa4a179 100644 --- a/app/assets/stylesheets/shared/assets.scss +++ b/app/assets/stylesheets/shared/assets.scss @@ -125,12 +125,6 @@ z-index: 2; } } - - .asset-context-menu { - position: absolute; - right: 1rem; - top: 1rem; - } } .inline-attachment-container { @@ -290,7 +284,7 @@ @media (min-width: 640px) { &:hover { - justify-content: space-between; + #action-buttons { display: flex; diff --git a/app/javascript/vue/shared/content/attachments/attachment_actions.vue b/app/javascript/vue/shared/content/attachments/attachment_actions.vue new file mode 100644 index 000000000..7dee070e4 --- /dev/null +++ b/app/javascript/vue/shared/content/attachments/attachment_actions.vue @@ -0,0 +1,84 @@ + + + diff --git a/app/javascript/vue/shared/content/attachments/context_menu.vue b/app/javascript/vue/shared/content/attachments/context_menu.vue index 53857def2..e6b8d51d0 100644 --- a/app/javascript/vue/shared/content/attachments/context_menu.vue +++ b/app/javascript/vue/shared/content/attachments/context_menu.vue @@ -118,80 +118,6 @@ export default { computed: { menu() { const menu = []; - if (this.displayInDropdown.includes('edit')) { - if (this.attachment.attributes.wopi && this.attachment.attributes.urls.edit_asset) { - menu.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 === 'gene_sequence' && this.attachment.attributes.urls.open_vector_editor_edit) { - menu.push({ - text: this.i18n.t('open_vector_editor.edit_sequence'), - emit: 'open_ove_editor' - }); - } - if (this.attachment.attributes.asset_type === 'marvinjs' && this.attachment.attributes.urls.marvin_js_start_edit) { - menu.push({ - text: this.i18n.t('assets.file_preview.edit_in_marvinjs'), - emit: 'open_marvinjs_editor' - }); - } - if (this.attachment.attributes.asset_type !== 'marvinjs' - && this.attachment.attributes.image_editable - && this.attachment.attributes.urls.start_edit_image) { - menu.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'); - - menu.push({ - text, - emit: 'open_locally', - data_e2e: 'e2e-BT-attachmentOptions-openLocally' - }); - } - } - if (this.attachment.attributes.asset_type === 'gene_sequence' && this.attachment.attributes.urls.open_vector_editor_edit) { - menu.push({ - text: this.i18n.t('open_vector_editor.edit_sequence'), - emit: 'open_ove_editor', - data_e2e: 'e2e-BT-attachmentOptions-openInOve' - }); - } - if (this.attachment.attributes.asset_type === 'marvinjs' && this.attachment.attributes.urls.marvin_js_start_edit) { - menu.push({ - text: this.i18n.t('assets.file_preview.edit_in_marvinjs'), - emit: 'open_marvinjs_editor', - data_e2e: 'e2e-BT-attachmentOptions-openInMarvin' - }); - } - if (this.attachment.attributes.asset_type !== 'marvinjs' - && this.attachment.attributes.image_editable - && this.attachment.attributes.urls.start_edit_image) { - menu.push({ - text: this.i18n.t('assets.file_preview.edit_in_scinote'), - emit: 'open_scinote_editor', - data_e2e: 'e2e-BT-attachmentOptions-openInImageEditor' - }); - } - if (this.canOpenLocally) { - const text = this.localAppName - ? this.i18n.t('attachments.open_locally_in', { application: this.localAppName }) - : this.i18n.t('attachments.open_locally'); - - menu.push({ - text, - emit: 'open_locally', - data_e2e: 'e2e-BT-attachmentOptions-openLocally' - }); - } if (this.displayInDropdown.includes('download')) { menu.push({ text: this.i18n.t('Download'), @@ -200,13 +126,6 @@ export default { data_e2e: 'e2e-BT-attachmentOptions-download' }); } - if (this.attachment.attributes.urls.move_targets) { - menu.push({ - text: this.i18n.t('assets.context_menu.move'), - emit: 'move', - data_e2e: 'e2e-BT-attachmentOptions-move' - }); - } if (this.attachment.attributes.urls.duplicate) { menu.push({ text: this.i18n.t('assets.context_menu.duplicate'), diff --git a/app/javascript/vue/shared/content/attachments/inline.vue b/app/javascript/vue/shared/content/attachments/inline.vue index a9cb8de55..df5fae80d 100644 --- a/app/javascript/vue/shared/content/attachments/inline.vue +++ b/app/javascript/vue/shared/content/attachments/inline.vue @@ -32,31 +32,18 @@
- - - - - - - -
@@ -107,6 +94,7 @@ import PdfViewer from '../../pdf_viewer.vue'; import MoveAssetModal from '../modal/move.vue'; import MoveMixin from './mixins/move.js'; import OpenLocallyMixin from './mixins/open_locally.js'; +import AttachmentActions from './attachment_actions.vue'; import OpenMenu from './open_menu.vue'; export default { @@ -116,7 +104,8 @@ export default { ContextMenu, PdfViewer, MoveAssetModal, - OpenMenu + OpenMenu, + AttachmentActions }, props: { attachment: { diff --git a/app/javascript/vue/shared/content/attachments/list.vue b/app/javascript/vue/shared/content/attachments/list.vue index 8e9529226..d29b21d6f 100644 --- a/app/javascript/vue/shared/content/attachments/list.vue +++ b/app/javascript/vue/shared/content/attachments/list.vue @@ -21,42 +21,29 @@ -
- +
+ {{ i18n.t('assets.placeholder.modified_label') }} {{ attachment.attributes.updated_at_formatted }} - + {{ i18n.t('assets.placeholder.size_label', {size: attachment.attributes.file_size_formatted}) }}
- -
@@ -134,6 +116,7 @@ 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 AttachmentActions from './attachment_actions.vue'; import { vOnClickOutside } from '@vueuse/components'; export default { @@ -144,7 +127,8 @@ export default { deleteAttachmentModal, MoveAssetModal, MenuDropdown, - OpenMenu + OpenMenu, + AttachmentActions }, props: { attachment: { diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue index 145f5df1d..3066bcb3d 100644 --- a/app/javascript/vue/shared/menu_dropdown.vue +++ b/app/javascript/vue/shared/menu_dropdown.vue @@ -9,7 +9,7 @@