Add toolbar option for displaying details on book card hover

client/components/app/BookShelfToolbar.vue

@@ -159,6 +159,7 @@ export default {
       }
 
       this.addSubtitlesMenuItem(items)
+      this.addDetailsOnHoverMenuItem(items)
 
       return items
     },
@@ -329,6 +330,7 @@ export default {
 
       this.addSubtitlesMenuItem(items)
       this.addCollapseSeriesMenuItem(items)
+      this.addDetailsOnHoverMenuItem(items)
 
       return items
     },
@@ -367,6 +369,21 @@ export default {
         }
       }
     },
+    addDetailsOnHoverMenuItem(items) {
+      if (this.isBookLibrary && (!this.page || this.page === 'search')) {
+        if (this.settings.showDetailsOnHover) {
+          items.push({
+            text: this.$strings.LabelHideDetailsOnHover,
+            action: 'hide-details-on-hover'
+          })
+        } else {
+          items.push({
+            text: this.$strings.LabelShowDetailsOnHover,
+            action: 'show-details-on-hover'
+          })
+        }
+      }
+    },
     handleSubtitlesAction(action) {
       if (action === 'show-subtitles') {
         this.settings.showSubtitles = true
@@ -393,6 +410,19 @@ export default {
       }
       return false
     },
+    handleDetailsOnHoverAction(action) {
+      if (action === 'show-details-on-hover') {
+        this.settings.showDetailsOnHover = true
+        this.updateShowDetailsOnHover()
+        return true
+      }
+      if (action === 'hide-details-on-hover') {
+        this.settings.showDetailsOnHover = false
+        this.updateShowDetailsOnHover()
+        return true
+      }
+      return false
+    },
     contextMenuAction({ action }) {
       if (action === 'export-opml') {
         this.exportOPML()
@@ -401,6 +431,8 @@ export default {
         return
       } else if (this.handleCollapseSeriesAction(action)) {
         return
+      } else if (this.handleDetailsOnHoverAction(action)) {
+        return
       }
     },
     exportOPML() {
@@ -423,6 +455,8 @@ export default {
         this.markSeriesFinished()
       } else if (this.handleSubtitlesAction(action)) {
         return
+      } else if (this.handleDetailsOnHoverAction(action)) {
+        return
       }
     },
     showOpenSeriesRSSFeed() {
@@ -555,6 +589,9 @@ export default {
     updateShowSubtitles() {
       this.saveSettings()
     },
+    updateShowDetailsOnHover() {
+      this.saveSettings()
+    },
     updateAuthorSort() {
       this.saveSettings()
     },

client/components/cards/LazyBookCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: coverWidth + 'px', maxWidth: coverWidth + 'px' }" class="absolute rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
-    <ui-tooltip :direction="'top'" :text="getTooltipText()">
+    <ui-tooltip :disabled="!userShowDetailsOnHover" :direction="'bottom'" :delayOnShow="500" :text="getTooltipText()">
       <div :id="`cover-area-${index}`" class="relative w-full top-0 left-0 rounded overflow-hidden z-10 bg-primary box-shadow-book" :style="{ height: coverHeight + 'px ' }">
         <!-- When cover image does not fill -->
         <div cy-id="coverBg" v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
@@ -485,6 +485,9 @@ export default {
     userIsAdminOrUp() {
       return this.store.getters['user/getIsAdminOrUp']
     },
+    userShowDetailsOnHover() {
+      return this.store.getters['user/getUserSetting']('showDetailsOnHover')
+    },
     moreMenuItems() {
       if (this.isMusic) return []
 

client/store/user.js

@@ -9,6 +9,7 @@ export const state = () => ({
     collapseSeries: false,
     collapseBookSeries: false,
     showSubtitles: false,
+    showDetailsOnHover: false,
     useChapterTrack: false,
     seriesSortBy: 'name',
     seriesSortDesc: false,

client/strings/en-us.json

@@ -265,6 +265,7 @@
   "LabelDeleteFromFileSystemCheckbox": "Delete from file system (uncheck to only remove from database)",
   "LabelDescription": "Description",
   "LabelDeselectAll": "Deselect All",
+  "LabelShowDetailsOnHover": "Show Details on Hover",
   "LabelDevice": "Device",
   "LabelDeviceInfo": "Device Info",
   "LabelDeviceIsAvailableTo": "Device is available to...",
@@ -326,6 +327,7 @@
   "LabelHasEbook": "Has ebook",
   "LabelHasSupplementaryEbook": "Has supplementary ebook",
   "LabelHideSubtitles": "Hide Subtitles",
+  "LabelHideDetailsOnHover": "Hide Details on Hover",
   "LabelHighestPriority": "Highest priority",
   "LabelHost": "Host",
   "LabelHour": "Hour",