fix: Avoid overflowing submenus in conversation context menu (#5113)

* Scroll overflowing content inside submenus * Disable submenus if options are not available
chatwoot · Oct 19, 2022 · 3de8f25 · 3de8f25
1 parent 2e7ab48
commit 3de8f25
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -17,7 +17,10 @@
         @click="snoozeConversation(option.snoozedUntil)"
       />
     </menu-item-with-submenu>
-    <menu-item-with-submenu :option="labelMenuConfig">
+    <menu-item-with-submenu
+      :option="labelMenuConfig"
+      :sub-menu-available="!!labels.length"
+    >
       <template>
         <menu-item
           v-for="label in labels"
@@ -28,7 +31,10 @@
         />
       </template>
     </menu-item-with-submenu>
-    <menu-item-with-submenu :option="agentMenuConfig">
+    <menu-item-with-submenu
+      :option="agentMenuConfig"
+      :sub-menu-available="!!assignableAgents.length"
+    >
       <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
       <template v-else>
         <menu-item
@@ -40,7 +46,10 @@
         />
       </template>
     </menu-item-with-submenu>
-    <menu-item-with-submenu :option="teamMenuConfig">
+    <menu-item-with-submenu
+      :option="teamMenuConfig"
+      :sub-menu-available="!!teams.length"
+    >
       <menu-item
         v-for="team in teams"
         :key="team.id"

diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -18,7 +18,7 @@
       size="20px"
       class="agent-thumbnail"
     />
-    <p class="menu-label truncate-text">{{ option.label }}</p>
+    <p class="menu-label text-truncate">{{ option.label }}</p>
   </div>
 </template>
 
@@ -50,7 +50,6 @@ export default {
   padding: var(--space-smaller);
   border-radius: var(--border-radius-small);
   overflow: hidden;
-
   .menu-label {
     margin: 0;
     font-size: var(--font-size-mini);

diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,11 +1,14 @@
 <template>
-  <div class="menu-with-submenu flex-between">
+  <div
+    class="menu-with-submenu flex-between"
+    :class="{ disabled: !subMenuAvailable }"
+  >
     <div class="menu-left">
       <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
       <p class="menu-label">{{ option.label }}</p>
     </div>
     <fluent-icon icon="chevron-right" size="12" />
-    <div class="submenu">
+    <div v-if="subMenuAvailable" class="submenu">
       <slot />
     </div>
   </div>
@@ -18,6 +21,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    subMenuAvailable: {
+      type: Boolean,
+      default: true,
+    },
   },
 };
 </script>
@@ -55,6 +62,11 @@ export default {
     left: 100%;
     top: 0;
     display: none;
+    min-height: min-content;
+    max-height: var(--space-giga);
+    overflow-y: auto;
+    // Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
+    overflow-x: hidden;
   }
 
   &:hover {
@@ -73,5 +85,10 @@ export default {
       clip-path: polygon(100% 0, 0% 0%, 100% 100%);
     }
   }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
 }
 </style>