fix: Fix Z-index of Action Menu to avoid being on top of a Drawer - M…

…EED-7920 - Meeds-io/meeds#2657 (#1790) Prior to this change, when displaying the Locked Actions Menu, the Drawers are displayed under the Menu. This change will ensure to close the menu once a drawer is opened. In addition, this will decrease the z-index of Locked Action Menu.
Meeds-io · Dec 10, 2024 · 303e2ef · 303e2ef
1 parent 08ae9c8
commit 303e2ef
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/portlets/src/main/webapp/vue-app/engagement-center-actions/components/card/RuleCard.vue b/portlets/src/main/webapp/vue-app/engagement-center-actions/components/card/RuleCard.vue
@@ -25,23 +25,26 @@
       height="230"
       max-height="230"
       outlined
-      hover
       @click="$root.$emit('rule-detail-drawer', ruleWithProgram)">
       <div v-if="!isValid">
-        <div v-show="hover" class="d-flex position-absolute full-width z-index-drawer">
+        <div v-show="hover" class="d-flex position-absolute full-width z-index-two">
           <div class="ms-auto mb-auto mt-4 me-4">
-            <div
+            <v-card
               v-if="isProgramMember"
               v-show="hover"
               :class="hover && 'd-inline-flex'"
-              class="my-auto">
+              width="28"
+              height="8"
+              class="my-auto position-relative"
+              flat>
               <rule-favorite-button
                 :rule-id="rule.id"
                 :space-id="rule.spaceId"
                 :favorite.sync="rule.favorite"
                 type="rule"
-                type-label="rules" />
-            </div>
+                type-label="rules"
+                class="absolute-vertical-center" />
+            </v-card>
             <engagement-center-rule-menu
               v-if="canEdit"
               :rule="ruleWithProgram"

diff --git a/portlets/src/main/webapp/vue-app/rules/components/detail/RuleMenu.vue b/portlets/src/main/webapp/vue-app/rules/components/detail/RuleMenu.vue
@@ -164,19 +164,38 @@ export default {
     },
     enableDisableButtonLabel() {
       return this.isEnabled ? this.$t('programs.details.rule.button.disable') : this.$t('programs.details.rule.button.enable');
-    }
+    },
+  },
+  watch: {
+    showMenu() {
+      if (this.showMenu) {
+        document.addEventListener('modalOpened', this.closeMenu);
+        document.addEventListener('drawerOpened', this.closeMenu);
+        document.addEventListener('closeAllDrawers', this.closeMenu);
+        document.addEventListener('closeDisplayedDrawer', this.closeMenu);
+      } else {
+        document.removeEventListener('modalOpened', this.closeMenu);
+        document.removeEventListener('drawerOpened', this.closeMenu);
+        document.removeEventListener('closeAllDrawers', this.closeMenu);
+        document.removeEventListener('closeDisplayedDrawer', this.closeMenu);
+      }
+    },
   },
   created() {
     // Workaround to fix closing menu when clicking outside
-    $(document).mousedown(() => {
+    document.addEventListener('mousedown', this.closeMenu);
+  },
+  beforeDestroy() {
+    document.removeEventListener('mousedown', this.closeMenu);
+  },
+  methods: {
+    closeMenu() {
       if (this.showMenu) {
         window.setTimeout(() => {
           this.showMenu = false;
         }, 200);
       }
-    });
-  },
-  methods: {
+    },
     editRule(event) {
       if (event) {
         event.preventDefault();