Update assets action toolbar [SCI-10834]

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;

app/javascript/vue/shared/content/attachments/attachment_actions.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="flex items-center gap-1.5 justify-end w-[184px]">
+    <OpenMenu
+      :attachment="attachment"
+      :multipleOpenOptions="multipleOpenOptions"
+      @open="$emit('attachment:toggle_menu', $event)"
+      @close="$emit('attachment:toggle_menu', $event)"
+      @option:click="$emit('attachment:open', $event)"
+    />
+    <a v-if="attachment.attributes.urls.move"
+      @click.prevent.stop="$emit('attachment:move_modal')"
+      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="$emit('attachment:viewMode', $event)"
+      @attachment:delete="$emit('attachment:delete', $event)"
+      @attachment:moved="$emit('attachment:moved', $event)"
+      @attachment:uploaded="$emit('attachment:uploaded', $event)"
+      @attachment:changed="$emit('attachment:changed', $event)"
+      @attachment:update="$emit('attachment:update', $event)"
+      @menu-toggle="$emit('attachment:toggle_menu', $event)"
+      :withBorder="withBorder"
+    />
+  </div>
+</template>
+
+<script>
+import OpenLocallyMixin from './mixins/open_locally.js';
+import OpenMenu from './open_menu.vue';
+import ContextMenu from './context_menu.vue';
+
+export default {
+  name: 'attachmentActions',
+  props: {
+    attachment: Object,
+    withBorder: false
+  },
+  mixins: [OpenLocallyMixin],
+  components: {
+    OpenMenu,
+    ContextMenu
+  },
+  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;
+    }
+  }
+};
+</script>

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'),

app/javascript/vue/shared/content/attachments/inline.vue

@@ -32,31 +32,18 @@
         </div>
       </div>
       <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
+        <AttachmentActions
           :attachment="attachment"
+          :showOptions="showOptions"
           @attachment:viewMode="updateViewMode"
           @attachment:delete="deleteAttachment"
           @attachment:moved="attachmentMoved"
           @attachment:uploaded="reloadAttachments"
+          @attachment:changed="$emit('attachment:changed', $event)"
           @attachment:update="$emit('attachment:update', $event)"
+          @attachment:toggle_menu="toggleMenuDropdown"
+          @attachment:move_modal="showMoveModal"
+          @attachment:open="$emit($event)"
         />
       </div>
     </div>
@@ -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: {

app/javascript/vue/shared/content/attachments/list.vue

@@ -21,42 +21,29 @@
       <img :src="this.imageLoadError ? attachment.attributes.urls.blob : attachment.attributes.medium_preview" @error="ActiveStoragePreviews.reCheckPreview"
             @load="ActiveStoragePreviews.showPreview"/>
     </div>
-    <div class="file-metadata">
-      <span>
+    <div class="flex items-center gap-2 text-xs text-sn-grey overflow-hidden ml-auto">
+      <span class="truncate" :title="i18n.t('assets.placeholder.modified_label') + ' ' + attachment.attributes.updated_at_formatted">
           {{ i18n.t('assets.placeholder.modified_label') }}
           {{ attachment.attributes.updated_at_formatted }}
       </span>
-      <span>
+      <span class="truncate" :title="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>
     </div>
-    <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 class="attachment-actions shrink-0 ml-auto">
+      <AttachmentActions
+          :attachment="attachment"
+          :showOptions="showOptions"
+          @attachment:viewMode="updateViewMode"
+          @attachment:delete="deleteAttachment"
+          @attachment:moved="attachmentMoved"
+          @attachment:uploaded="reloadAttachments"
+          @attachment:changed="$emit('attachment:changed', $event)"
+          @attachment:update="$emit('attachment:update', $event)"
+          @attachment:toggle_menu="toggleMenuDropdown"
+          @attachment:move_modal="showMoveModal"
+          @attachment:open="$emit($event)"
+        />
     </div>
     <Teleport to="body">
       <moveAssetModal
@@ -75,6 +62,7 @@ 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 AttachmentActions from './attachment_actions.vue';
 import OpenMenu from './open_menu.vue';
 
 export default {
@@ -83,7 +71,8 @@ export default {
   components: {
     ContextMenu,
     MoveAssetModal,
-    OpenMenu
+    OpenMenu,
+    AttachmentActions
   },
   props: {
     attachment: {

app/javascript/vue/shared/content/attachments/thumbnail.vue

@@ -33,7 +33,7 @@
     <div :class="{ hidden: !showOptions }" class="hovered-thumbnail h-full">
       <a
         :href="attachment.attributes.urls.blob"
-        class="file-preview-link file-name"
+        class="file-preview-link file-name max-h-36 overflow-auto"
         :id="`modal_link${attachment.id}`"
         data-no-turbolink="true"
         :data-id="attachment.id"
@@ -45,38 +45,20 @@
       <div class="absolute bottom-16 text-sn-grey">
         {{ attachment.attributes.file_size_formatted }}
       </div>
-      <div class="absolute bottom-4 w-[184px] grid grid-cols-[repeat(4,_2.5rem)] justify-between">
-        <openMenu
+      <div class="absolute bottom-4">
+        <AttachmentActions
+          :withBorder="true"
           :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"
-          :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
-          class="!relative !top-0 !left-0"
-          v-show="showOptions"
-          :attachment="attachment"
-          :hideEdit="true"
+          :showOptions="showOptions"
           @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-toggle="toggleMenu"
-          :withBorder="true"
+          @attachment:toggle_menu="toggleMenu"
+          @attachment:move_modal="showMoveModal"
+          @attachment:open="$emit($event)"
         />
       </div>
     </div>
@@ -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: {

app/javascript/vue/shared/menu_dropdown.vue

@@ -9,7 +9,7 @@
     <template v-if="isOpen">
       <teleport to="body">
         <div ref="flyout"
-            class="fixed z-[3000] sn-menu-dropdown bg-sn-white 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 overflow-auto sn-shadow-menu-sm flex flex-col gap-[1px]"
             :class="{
                 'right-0': position === 'right',
                 'left-0': position === 'left',