Update:Libraries table using context menu instead of hover buttons. Cleanup mobile view #1342

client/components/app/BookShelfToolbar.vue

@@ -109,13 +109,7 @@ export default {
       totalEntities: 0,
       processingSeries: false,
       processingIssues: false,
-      processingAuthors: false,
+      processingAuthors: false
-      contextMenuItems: [
-        {
-          text: 'cat',
-          action: 'dog'
-        }
-      ]
     }
   },
   computed: {

client/components/tables/library/LibraryItem.vue

@@ -1,32 +1,29 @@
 <template>
-  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
+  <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>
-    <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
+    <p class="text-base md:text-xl font-book pl-2 md:pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
+
     <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan" class="hidden md:block" small color="success" @click.stop="scan">{{ $strings.ButtonScan }}</ui-btn>
-    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2 hidden md:block" @click.stop="forceScan">{{ $strings.ButtonForceReScan }}</ui-btn>
 
-    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2 hidden md:block" @click.stop="matchAll">{{ $strings.ButtonMatchBooks }}</ui-btn>
+    <!-- Desktop context menu icon -->
+    <ui-context-menu-dropdown v-if="!libraryScan && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
 
-    <span v-if="isHovering && !libraryScan" class="!hidden md:!block material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
+    <!-- Mobile context menu icon -->
-    <span v-if="!libraryScan && isHovering && !isDeleting" class="!hidden md:!block material-icons text-xl text-gray-300 ml-3 hover:text-gray-50 cursor-pointer" @click.stop="deleteClick">delete</span>
+    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
 
-    <!-- For mobile -->
-    <span v-if="!libraryScan" class="!block md:!hidden material-icons text-xl text-gray-300 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-2xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
     <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
       <svg viewBox="0 0 24 24" class="w-6 h-6">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
+    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-2 md:ml-4">reorder</span>
 
     <!-- For mobile -->
-    <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" />
+    <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="contextMenuItems" @action="contextMenuAction" />
   </div>
 </template>
 
@@ -63,34 +60,45 @@ export default {
     menuTitle() {
       return this.library.name
     },
-    mobileMenuItems() {
+    contextMenuItems() {
       const items = [
+        {
+          text: this.$strings.ButtonEdit,
+          action: 'edit',
+          value: 'edit'
+        },
         {
           text: this.$strings.ButtonScan,
+          action: 'scan',
           value: 'scan'
         },
         {
           text: this.$strings.ButtonForceReScan,
+          action: 'force-scan',
           value: 'force-scan'
         }
       ]
       if (this.isBookLibrary) {
         items.push({
           text: this.$strings.ButtonMatchBooks,
+          action: 'match-books',
           value: 'match-books'
         })
       }
       items.push({
         text: this.$strings.ButtonDelete,
+        action: 'delete',
         value: 'delete'
       })
       return items
     }
   },
   methods: {
-    mobileMenuAction(action) {
+    contextMenuAction(action) {
       this.showMobileMenu = false
-      if (action === 'scan') {
+      if (action === 'edit') {
+        this.editClick()
+      } else if (action === 'scan') {
         this.scan()
       } else if (action === 'force-scan') {
         this.forceScan()
@@ -130,7 +138,10 @@ export default {
         })
     },
     forceScan() {
-      if (confirm(this.$strings.MessageConfirmForceReScan)) {
+      const payload = {
+        message: this.$strings.MessageConfirmForceReScan,
+        callback: (confirmed) => {
+          if (confirmed) {
             this.$store
               .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
               .then(() => {
@@ -142,13 +153,19 @@ export default {
               })
           }
         },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     deleteClick() {
-      if (confirm(this.$getString('MessageConfirmDeleteLibrary', [this.library.name]))) {
+      const payload = {
+        message: this.$getString('MessageConfirmDeleteLibrary', [this.library.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
             this.isDeleting = true
             this.$axios
               .$delete(`/api/libraries/${this.library.id}`)
               .then((data) => {
-            this.isDeleting = false
                 if (data.error) {
                   this.$toast.error(data.error)
                 } else {
@@ -158,9 +175,15 @@ export default {
               .catch((error) => {
                 console.error('Failed to delete library', error)
                 this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
+              })
+              .finally(() => {
                 this.isDeleting = false
               })
           }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     }
   },
   mounted() {}

client/components/ui/ContextMenuDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
-    <button type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <button type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
-      <span class="material-icons">more_vert</span>
+      <span class="material-icons" :class="iconClass">more_vert</span>
     </button>
 
     <transition name="menu">
@@ -23,6 +23,10 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    iconClass: {
+      type: String,
+      default: ''
     }
   },
   data() {

client/strings/de.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Ertsellen",
   "ButtonCreateBackup": "Sicherung erstellen",
   "ButtonDelete": "Löschen",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Kapitel bearbeiten",
   "ButtonEditPodcast": "Podcast bearbeiten",
   "ButtonForceReScan": "Erzwinge kompletten Neu-Scan",

client/strings/en-us.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Create",
   "ButtonCreateBackup": "Create Backup",
   "ButtonDelete": "Delete",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Edit Chapters",
   "ButtonEditPodcast": "Edit Podcast",
   "ButtonForceReScan": "Force Re-Scan",

client/strings/es.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Create",
   "ButtonCreateBackup": "Create Backup",
   "ButtonDelete": "Delete",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Edit Chapters",
   "ButtonEditPodcast": "Edit Podcast",
   "ButtonForceReScan": "Force Re-Scan",

client/strings/fr.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Créer",
   "ButtonCreateBackup": "Créer une Sauvegarde",
   "ButtonDelete": "Effacer",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Editer Chapitre",
   "ButtonEditPodcast": "Editer Podcast",
   "ButtonForceReScan": "Forcer un Re-Scan",

client/strings/hr.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Napravi",
   "ButtonCreateBackup": "Napravi backup",
   "ButtonDelete": "Obriši",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Uredi poglavlja",
   "ButtonEditPodcast": "Uredi podcast",
   "ButtonForceReScan": "Prisilno ponovno skeniranje",

client/strings/it.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Crea",
   "ButtonCreateBackup": "Crea un Backup",
   "ButtonDelete": "Elimina",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Modifica Capitoli",
   "ButtonEditPodcast": "Modifica Podcast",
   "ButtonForceReScan": "Forza Re-Scan",

client/strings/pl.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "Utwórz",
   "ButtonCreateBackup": "Utwórz kopię zapasową",
   "ButtonDelete": "Usuń",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "Edytuj rozdziały",
   "ButtonEditPodcast": "Edytuj podcast",
   "ButtonForceReScan": "Wymuś ponowne skanowanie",

client/strings/zh-cn.json

@@ -20,6 +20,7 @@
   "ButtonCreate": "创建",
   "ButtonCreateBackup": "创建备份",
   "ButtonDelete": "删除",
+  "ButtonEdit": "Edit",
   "ButtonEditChapters": "编辑章节",
   "ButtonEditPodcast": "编辑播客",
   "ButtonForceReScan": "强制重新扫描",

client/tailwind.config.js

@@ -20,7 +20,8 @@ module.exports = {
       'w-3.5',
       'h-3.5',
       'border-warning',
-      'mb-px'
+      'mb-px',
+      'text-1.5xl'
     ],
   },
   theme: {
@@ -94,6 +95,7 @@ module.exports = {
       },
       fontSize: {
         xxs: '0.625rem',
+        '1.5xl': '1.375rem',
         '2.5xl': '1.6875rem'
       },
       zIndex: {