Fix:Submenu overflowing page #1828

advplyr · Jun 7, 2023 · 2f04d34 · 2f04d34
1 parent 09566c0
commit 2f04d34
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 18 deletions.
diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
@@ -82,7 +82,7 @@
         <!-- issues page remove all button -->
         <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
 
-        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" menu-width="110px" class="ml-2" @action="contextMenuAction" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="110" class="ml-2" @action="contextMenuAction" />
       </template>
       <!-- search page -->
       <template v-else-if="page === 'search'">

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
@@ -888,7 +888,7 @@ export default {
       var wrapperBox = this.$refs.moreIcon.getBoundingClientRect()
       var el = instance.$el
 
-      var elHeight = this.moreMenuItems.length * 28 + 2
+      var elHeight = this.moreMenuItems.length * 28 + 10
       var elWidth = 130
 
       var bottomOfIcon = wrapperBox.top + wrapperBox.height

diff --git a/client/components/tables/AudioTracksTableRow.vue b/client/components/tables/AudioTracksTableRow.vue
@@ -17,7 +17,7 @@
       {{ $secondsToTimestamp(track.duration) }}
     </td>
     <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
     </td>
   </tr>
 </template>

diff --git a/client/components/tables/LibraryFilesTableRow.vue b/client/components/tables/LibraryFilesTableRow.vue
@@ -12,7 +12,7 @@
       </div>
     </td>
     <td v-if="contextMenuItems.length" class="text-center">
-      <ui-context-menu-dropdown :items="contextMenuItems" menu-width="110px" @action="contextMenuAction" />
+      <ui-context-menu-dropdown :items="contextMenuItems" :menu-width="110" @action="contextMenuAction" />
     </td>
   </tr>
 </template>

diff --git a/client/components/ui/ContextMenuDropdown.vue b/client/components/ui/ContextMenuDropdown.vue
@@ -7,13 +7,21 @@
     </slot>
 
     <transition name="menu">
-      <div v-show="showMenu" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth }">
+      <div v-show="showMenu" ref="menuWrapper" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg rounded-md py-1 focus:outline-none sm:text-sm" :style="{ width: menuWidth + 'px' }">
         <template v-for="(item, index) in items">
           <template v-if="item.subitems">
-            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
+            <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
               <p>{{ item.text }}</p>
             </div>
-            <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50 -ml-px" :style="{ left: menuWidth, top: index * 29 + 'px' }">
+            <div
+              v-if="mouseoverItemIndex === index"
+              :key="`subitems-${index}`"
+              @mouseover="mouseoverSubItemMenu(index)"
+              @mouseleave="mouseleaveSubItemMenu(index)"
+              class="absolute bg-bg border rounded-b-md border-black-200 shadow-lg z-50 -ml-px py-1"
+              :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'"
+              :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }"
+            >
               <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.action, subitem.data)">
                 <p>{{ subitem.text }}</p>
               </div>
@@ -41,8 +49,8 @@ export default {
       default: ''
     },
     menuWidth: {
-      type: String,
-      default: '192px'
+      type: Number,
+      default: 192
     }
   },
   data() {
@@ -52,12 +60,18 @@ export default {
         events: ['mousedown'],
         isActive: true
       },
+      submenuWidth: 144,
       showMenu: false,
       mouseoverItemIndex: null,
-      isOverSubItemMenu: false
+      isOverSubItemMenu: false,
+      openSubMenuLeft: false
+    }
+  },
+  computed: {
+    submenuLeftPos() {
+      return this.openSubMenuLeft ? -(this.submenuWidth - 1) : this.menuWidth - 0.5
     }
   },
-  computed: {},
   methods: {
     mouseoverSubItemMenu(index) {
       this.isOverSubItemMenu = true
@@ -80,6 +94,12 @@ export default {
     clickShowMenu() {
       if (this.disabled) return
       this.showMenu = !this.showMenu
+      this.$nextTick(() => {
+        const boundingRect = this.$refs.menuWrapper?.getBoundingClientRect()
+        if (boundingRect) {
+          this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
+        }
+      })
     },
     clickedOutside() {
       this.showMenu = false

diff --git a/client/components/widgets/MoreMenu.vue b/client/components/widgets/MoreMenu.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" style="top: 0; left: 0">
+  <div ref="wrapper" class="absolute bg-bg rounded-md py-1 border border-black-200 shadow-lg z-50" v-click-outside="clickOutsideObj" :style="{ width: menuWidth + 'px' }" style="top: 0; left: 0">
     <template v-for="(item, index) in items">
       <template v-if="item.subitems">
-        <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
+        <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-default" :class="{ 'bg-white/5': mouseoverItemIndex == index }" @mouseover="mouseoverItem(index)" @mouseleave="mouseleaveItem(index)" @click.stop>
           <p>{{ item.text }}</p>
         </div>
-        <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute w-36 bg-bg rounded-md border border-black-200 shadow-lg z-50" :style="{ left: 143 + 'px', top: index * 28 + 'px' }">
+        <div v-if="mouseoverItemIndex === index" :key="`subitems-${index}`" @mouseover="mouseoverSubItemMenu(index)" @mouseleave="mouseleaveSubItemMenu(index)" class="absolute bg-bg rounded-b-md border border-black-200 py-1 shadow-lg z-50" :class="openSubMenuLeft ? 'rounded-l-md' : 'rounded-r-md'" :style="{ left: submenuLeftPos + 'px', top: index * 28 + 'px', width: submenuWidth + 'px' }">
           <div v-for="(subitem, subitemindex) in item.subitems" :key="`subitem-${subitemindex}`" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(subitem.func, subitem.data)">
             <p>{{ subitem.text }}</p>
           </div>
@@ -33,11 +33,18 @@ export default {
         events: ['mousedown'],
         isActive: true
       },
+      submenuWidth: 144,
+      menuWidth: 144,
       mouseoverItemIndex: null,
-      isOverSubItemMenu: false
+      isOverSubItemMenu: false,
+      openSubMenuLeft: false
+    }
+  },
+  computed: {
+    submenuLeftPos() {
+      return this.openSubMenuLeft ? -this.submenuWidth : this.menuWidth - 1.5
     }
   },
-  computed: {},
   methods: {
     mouseoverSubItemMenu(index) {
       this.isOverSubItemMenu = true
@@ -77,7 +84,14 @@ export default {
       this.$el.parentNode.removeChild(this.$el)
     }
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      const boundingRect = this.$refs.wrapper?.getBoundingClientRect()
+      if (boundingRect) {
+        this.openSubMenuLeft = window.innerWidth - boundingRect.x < this.menuWidth + this.submenuWidth + 5
+      }
+    })
+  },
   beforeDestroy() {}
 }
 </script>
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
@@ -122,7 +122,7 @@
               <ui-icon-btn icon="search" class="mx-0.5" :loading="fetchingRSSFeed" outlined @click="findEpisodesClick" />
             </ui-tooltip>
 
-            <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" menu-width="148px" @action="contextMenuAction">
+            <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="148" @action="contextMenuAction">
               <template #default="{ showMenu, clickShowMenu, disabled }">
                 <button type="button" :disabled="disabled" class="mx-0.5 icon-btn bg-primary border border-gray-600 w-9 h-9 rounded-md flex items-center justify-center relative" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
                   <span class="material-icons">more_horiz</span>