mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
Update:Libraries table using context menu instead of hover buttons. Cleanup mobile view #1342
This commit is contained in:
advplyr
parent
3588e1e8d3
commit
5255bf13cc
@ -109,13 +109,7 @@ export default {
|
||||
totalEntities: 0,
|
||||
processingSeries: false,
|
||||
processingIssues: false,
|
||||
processingAuthors: false,
|
||||
contextMenuItems: [
|
||||
{
|
||||
text: 'cat',
|
||||
action: 'dog'
|
||||
}
|
||||
]
|
||||
processingAuthors: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<!-- Mobile context menu icon -->
|
||||
<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,37 +138,52 @@ export default {
|
||||
})
|
||||
},
|
||||
forceScan() {
|
||||
if (confirm(this.$strings.MessageConfirmForceReScan)) {
|
||||
this.$store
|
||||
.dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
|
||||
.then(() => {
|
||||
this.$toast.success(this.$strings.ToastLibraryScanStarted)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to start scan', error)
|
||||
this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
|
||||
})
|
||||
const payload = {
|
||||
message: this.$strings.MessageConfirmForceReScan,
|
||||
callback: (confirmed) => {
|
||||
if (confirmed) {
|
||||
this.$store
|
||||
.dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
|
||||
.then(() => {
|
||||
this.$toast.success(this.$strings.ToastLibraryScanStarted)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to start scan', error)
|
||||
this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
|
||||
})
|
||||
}
|
||||
},
|
||||
type: 'yesNo'
|
||||
}
|
||||
this.$store.commit('globals/setConfirmPrompt', payload)
|
||||
},
|
||||
deleteClick() {
|
||||
if (confirm(this.$getString('MessageConfirmDeleteLibrary', [this.library.name]))) {
|
||||
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 {
|
||||
this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to delete library', error)
|
||||
this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
|
||||
this.isDeleting = false
|
||||
})
|
||||
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) => {
|
||||
if (data.error) {
|
||||
this.$toast.error(data.error)
|
||||
} else {
|
||||
this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
|
||||
}
|
||||
})
|
||||
.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() {}
|
||||
|
||||
@ -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">
|
||||
<span class="material-icons">more_vert</span>
|
||||
<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" :class="iconClass">more_vert</span>
|
||||
</button>
|
||||
|
||||
<transition name="menu">
|
||||
@ -23,6 +23,10 @@ export default {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
iconClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"ButtonCreate": "Create",
|
||||
"ButtonCreateBackup": "Create Backup",
|
||||
"ButtonDelete": "Delete",
|
||||
"ButtonEdit": "Edit",
|
||||
"ButtonEditChapters": "Edit Chapters",
|
||||
"ButtonEditPodcast": "Edit Podcast",
|
||||
"ButtonForceReScan": "Force Re-Scan",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"ButtonCreate": "Create",
|
||||
"ButtonCreateBackup": "Create Backup",
|
||||
"ButtonDelete": "Delete",
|
||||
"ButtonEdit": "Edit",
|
||||
"ButtonEditChapters": "Edit Chapters",
|
||||
"ButtonEditPodcast": "Edit Podcast",
|
||||
"ButtonForceReScan": "Force Re-Scan",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"ButtonCreate": "Napravi",
|
||||
"ButtonCreateBackup": "Napravi backup",
|
||||
"ButtonDelete": "Obriši",
|
||||
"ButtonEdit": "Edit",
|
||||
"ButtonEditChapters": "Uredi poglavlja",
|
||||
"ButtonEditPodcast": "Uredi podcast",
|
||||
"ButtonForceReScan": "Prisilno ponovno skeniranje",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"ButtonCreate": "Crea",
|
||||
"ButtonCreateBackup": "Crea un Backup",
|
||||
"ButtonDelete": "Elimina",
|
||||
"ButtonEdit": "Edit",
|
||||
"ButtonEditChapters": "Modifica Capitoli",
|
||||
"ButtonEditPodcast": "Modifica Podcast",
|
||||
"ButtonForceReScan": "Forza Re-Scan",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"ButtonCreate": "创建",
|
||||
"ButtonCreateBackup": "创建备份",
|
||||
"ButtonDelete": "删除",
|
||||
"ButtonEdit": "Edit",
|
||||
"ButtonEditChapters": "编辑章节",
|
||||
"ButtonEditPodcast": "编辑播客",
|
||||
"ButtonForceReScan": "强制重新扫描",
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user