Merge pull request #6923 from ivanscinote/SCI-9974-ik2

Keep attachment thumbnail menu open when mouse moves out [SCI-9974]

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

@@ -33,6 +33,7 @@
       @delete="deleteModal = true"
       @viewMode="changeViewMode"
       @move="showMoveModal"
+      @menu-visibility-changed="$emit('menu-visibility-changed', $event)"
     ></MenuDropdown>
     <deleteAttachmentModal
         v-if="deleteModal"

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

@@ -1,10 +1,10 @@
 <template>
   <div class="attachment-container asset"
        :data-asset-id="attachment.id"
-       @mouseover="isHovered = true"
-       @mouseleave="isHovered = false"
+       @mouseover="showOptions = true"
+       @mouseleave="handleMouseLeave"
   >
-    <a  :class="{ hidden: isHovered }"
+    <a  :class="{ hidden: showOptions }"
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
         :id="`modal_link${attachment.id}`"
@@ -27,7 +27,7 @@
         {{ attachment.attributes.file_name }}
       </div>
     </a>
-    <div :class="{ hidden: !isHovered }" class="hovered-thumbnail h-full">
+    <div :class="{ hidden: !showOptions }" class="hovered-thumbnail h-full">
       <a
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
@@ -98,12 +98,13 @@
       </div>
     </div>
     <ContextMenu
-      v-if="isHovered"
+      v-show="showOptions"
       :attachment="attachment"
       @attachment:viewMode="updateViewMode"
       @attachment:delete="deleteAttachment"
       @attachment:moved="attachmentMoved"
       @attachment:uploaded="reloadAttachments"
+      @menu-visibility-changed="handleMenuVisibilityChange"
       :withBorder="true"
     />
     <deleteAttachmentModal
@@ -144,7 +145,8 @@ export default {
   },
   data() {
     return {
-      isHovered: false,
+      showOptions: false,
+      isMenuOpen: false,
       deleteModal: false
     };
   },
@@ -170,6 +172,15 @@ export default {
   methods: {
     openOVEditor(url) {
       window.showIFrameModal(url);
+    },
+    handleMouseLeave() {
+      if (!this.isMenuOpen) {
+        this.showOptions = false;
+      }
+    },
+    handleMenuVisibilityChange(newValue) {
+      this.isMenuOpen = newValue;
+      this.showOptions = newValue;
     }
   }
 };

app/javascript/vue/shared/menu_dropdown.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="relative" v-if="listItems.length > 0" v-click-outside="closeMenu">
-    <button ref="openBtn" :class="btnClasses" @click="showMenu = !showMenu">
+  <div class="relative" v-if="listItems.length > 0" v-click-outside="closeMenuAndEmit">
+    <button
+      ref="openBtn"
+      :class="btnClasses"
+      :title="showMenu ? '' : title"
+      @click="showMenu = !showMenu"
+    >
       <i v-if="btnIcon" :class="btnIcon"></i>
       {{ btnText }}
       <i v-if="caret && showMenu" class="sn-icon sn-icon-up"></i>
@@ -86,7 +91,11 @@ export default {
     'click-outside': vOnClickOutside
   },
   watch: {
-    showMenu() {
+    showMenu(newValue) {
+      if (newValue) {
+        this.$emit('menu-visibility-changed', newValue);
+      }
+
       if (this.showMenu) {
         this.openUp = false;
         this.$nextTick(() => {
@@ -106,6 +115,14 @@ export default {
     closeMenu() {
       this.showMenu = false;
     },
+    closeMenuAndEmit(event) {
+      const isClickInsideModal = event.target.closest('.modal');
+
+      if (!isClickInsideModal) {
+        this.showMenu = false;
+        this.$emit('menu-visibility-changed', false);
+      }
+    },
     handleClick(event, item) {
       if (!item.url) {
         event.preventDefault();