groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-06 01:11:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI: Support alternative home view and improve View All buttons

Browse source
This commit is contained in:
Tiberiu Ichim 2026-02-17 17:22:52 +02:00
parent 2369e19fe7
commit 5bf60d5ae3
2 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/components/app/BookShelfCategorized.vue
View file

@ -17,7 +17,14 @@
<div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e"> <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
<template v-for="(shelf, index) in supportedShelves"> <template v-for="(shelf, index) in supportedShelves">
<widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)"> <widgets-item-slider :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :type="shelf.type" class="bookshelf-row pl-8e my-6e" @selectEntity="(payload) => selectEntity(payload, index)">
<h2 class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</h2> <div class="flex items-center">
<h2 class="font-semibold text-gray-100">{{ $strings[shelf.labelStringKey] }}</h2>
<ui-tooltip v-if="['recently-added', 'recent-series', 'newest-authors', 'series', 'authors'].includes(shelf.id)" :text="viewAllButtonTooltip" direction="top" class="ml-2">
<button class="flex items-center justify-center hover:text-yellow-400 opacity-60 hover:opacity-100 transition-opacity" @click.stop="goToShelfFullPage(shelf)">
<span class="material-symbols text-xl"> arrow_forward </span>
</button>
</ui-tooltip>
</div>
</widgets-item-slider> </widgets-item-slider>
</template> </template>
</div> </div>
@ -91,9 +98,24 @@ export default {
}, },
isScanningLibrary() { isScanningLibrary() {
return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId) return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
},
viewAllButtonTooltip() {
return this.$strings.ButtonViewAll
} }
}, },
methods: { methods: {
goToShelfFullPage(shelf) {
if (shelf.id === 'recently-added') {
this.$store.dispatch('user/updateUserSettings', { orderBy: 'addedAt', orderDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
} else if (shelf.id === 'recent-series' || shelf.id === 'series') {
this.$store.dispatch('user/updateUserSettings', { seriesSortBy: 'addedAt', seriesSortDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/series`)
} else if (shelf.id === 'newest-authors' || shelf.id === 'authors') {
this.$store.dispatch('user/updateUserSettings', { authorSortBy: 'addedAt', authorSortDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/authors`)
}
},
selectEntity({ entity, shiftKey }, shelfIndex) { selectEntity({ entity, shiftKey }, shelfIndex) {
const shelf = this.shelves[shelfIndex] const shelf = this.shelves[shelfIndex]
const entityShelfIndex = shelf.entities.findIndex((ent) => ent.id === entity.id) const entityShelfIndex = shelf.entities.findIndex((ent) => ent.id === entity.id)

8
client/components/app/BookShelfRow.vue
View file

@ -40,7 +40,7 @@
<h2 :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</h2> <h2 :style="{ fontSize: 0.9 + 'em' }">{{ $strings[shelf.labelStringKey] }}</h2>
<ui-tooltip v-if="isLinkableShelf" :text="$strings.ButtonViewAll" direction="top" class="ml-2"> <ui-tooltip v-if="isLinkableShelf" :text="$strings.ButtonViewAll" direction="top" class="ml-2">
<button class="flex items-center justify-center hover:text-yellow-400 opacity-60 hover:opacity-100 transition-opacity" @click.stop="goToShelfFullPage"> <button class="flex items-center justify-center hover:text-yellow-400 opacity-60 hover:opacity-100 transition-opacity" @click.stop="goToShelfFullPage">
<span class="material-symbols text-base">arrow_forward</span> <span class="material-symbols text-xl"> arrow_forward </span>
</button> </button>
</ui-tooltip> </ui-tooltip>
</div> </div>
@ -91,7 +91,7 @@ export default {
return this.$store.getters['globals/getIsBatchSelectingMediaItems'] return this.$store.getters['globals/getIsBatchSelectingMediaItems']
}, },
isLinkableShelf() { isLinkableShelf() {
return ['recently-added', 'recent-series', 'newest-authors'].includes(this.shelf.id) return ['recently-added', 'recent-series', 'newest-authors', 'series', 'authors'].includes(this.shelf.id)
} }
}, },
methods: { methods: {
@ -99,10 +99,10 @@ export default {
if (this.shelf.id === 'recently-added') { if (this.shelf.id === 'recently-added') {
this.$store.dispatch('user/updateUserSettings', { orderBy: 'addedAt', orderDesc: true }) this.$store.dispatch('user/updateUserSettings', { orderBy: 'addedAt', orderDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf`) this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
} else if (this.shelf.id === 'recent-series') { } else if (this.shelf.id === 'recent-series' || this.shelf.id === 'series') {
this.$store.dispatch('user/updateUserSettings', { seriesSortBy: 'addedAt', seriesSortDesc: true }) this.$store.dispatch('user/updateUserSettings', { seriesSortBy: 'addedAt', seriesSortDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/series`) this.$router.push(`/library/${this.currentLibraryId}/bookshelf/series`)
} else if (this.shelf.id === 'newest-authors') { } else if (this.shelf.id === 'newest-authors' || this.shelf.id === 'authors') {
this.$store.dispatch('user/updateUserSettings', { authorSortBy: 'addedAt', authorSortDesc: true }) this.$store.dispatch('user/updateUserSettings', { authorSortBy: 'addedAt', authorSortDesc: true })
this.$router.push(`/library/${this.currentLibraryId}/bookshelf/authors`) this.$router.push(`/library/${this.currentLibraryId}/bookshelf/authors`)
} }