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

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

app/assets/stylesheets/shared/assets.scss

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

app/assets/stylesheets/shared/content/attachments.scss

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

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

@@ -31,6 +31,25 @@
           </span>
         </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
           :attachment="attachment"
           @attachment:viewMode="updateViewMode"
@@ -40,6 +59,7 @@
           @attachment:update="$emit('attachment:update', $event)"
         />
       </div>
+    </div>
     <template v-if="attachment.attributes.wopi">
       <div v-if="showWopi"
            class="iframe-placeholder"
@@ -67,7 +87,6 @@
         <i class="text-sn-grey sn-icon" :class="attachment.attributes.icon"></i>
       </div>
     </template>
-  </div>
     <Teleport to="body">
       <MoveAssetModal
         v-if="movingAttachment"
@@ -76,6 +95,8 @@
         @confirm="moveAttachment($event)" @cancel="closeMoveModal"
       />
     </Teleport>
+  </div>
+
 </template>
 
 <script>

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

@@ -30,6 +30,25 @@
         {{ 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"
@@ -47,6 +66,7 @@
         @confirm="moveAttachment($event)" @cancel="closeMoveModal"
       />
     </Teleport>
+  </div>
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-
+  <span>
     <!-- multiple options -->
     <MenuDropdown
       v-if="multipleOpenOptions.length > 1"
@@ -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>

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

@@ -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
+        <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"
           @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: {