groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-03-01 13:39:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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">
<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)">
<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>
</template>
</div>
@ -91,9 +98,24 @@ export default {
},
isScanningLibrary() {
return !!this.$store.getters['tasks/getRunningLibraryScanTask'](this.currentLibraryId)
},
viewAllButtonTooltip() {
return this.$strings.ButtonViewAll
}
},
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) {
const shelf = this.shelves[shelfIndex]
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>
<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">
<span class="material-symbols text-base">arrow_forward</span>
<span class="material-symbols text-xl"> arrow_forward </span>
</button>
</ui-tooltip>
</div>
@ -91,7 +91,7 @@ export default {
return this.$store.getters['globals/getIsBatchSelectingMediaItems']
},
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: {
@ -99,10 +99,10 @@ export default {
if (this.shelf.id === 'recently-added') {
this.$store.dispatch('user/updateUserSettings', { orderBy: 'addedAt', orderDesc: true })
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.$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.$router.push(`/library/${this.currentLibraryId}/bookshelf/authors`)
}