mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-10-31 10:27:01 -04:00
Update:New library icons and picker using icon font
This commit is contained in:
advplyr
parent
6b8d71c0b0
commit
b16e69ee86
@ -45,7 +45,7 @@
|
||||
content: "\e900";
|
||||
}
|
||||
|
||||
.icon-database-2:before {
|
||||
.icon-database:before {
|
||||
content: "\e906";
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
content: "\e91e";
|
||||
}
|
||||
|
||||
.icon-book:before {
|
||||
.icon-book-1:before {
|
||||
content: "\e91f";
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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 v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
|
||||
<widgets-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
|
||||
<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'" />
|
||||
<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>
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
<div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
|
||||
<button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
|
||||
<div class="flex items-center justify-center sm:justify-start">
|
||||
<widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
|
||||
<ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
|
||||
<span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<transition name="menu">
|
||||
<ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
|
||||
<ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
|
||||
<template v-for="library in librariesFiltered">
|
||||
<li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
|
||||
<li :key="library.id" class="text-gray-400 hover:text-white select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="selectLibrary(library)">
|
||||
<div class="flex items-center px-2">
|
||||
<widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
|
||||
<ui-library-icon :icon="library.icon" class="mr-1.5" />
|
||||
<span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
37
client/components/ui/LibraryIcon.vue
Normal file
37
client/components/ui/LibraryIcon.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div :class="`h-${size} w-${size} min-w-${size} text-${fontSize}`" class="flex items-center justify-center">
|
||||
<span class="abs-icons" :class="`icon-${iconToUse}`"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'audiobookshelf'
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: 'lg'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
iconToUse() {
|
||||
return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf'
|
||||
},
|
||||
icons() {
|
||||
return this.$store.state.globals.libraryIcons
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@ -3,19 +3,19 @@
|
||||
<p class="text-sm font-semibold">{{ label }}</p>
|
||||
|
||||
<button type="button" :disabled="disabled" class="relative h-full w-full border border-gray-600 rounded shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer bg-primary text-gray-100 hover:text-gray-200" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
|
||||
<span class="flex items-center">
|
||||
<widgets-library-icon :icon="selected" />
|
||||
</span>
|
||||
<ui-library-icon :icon="selectedItem" />
|
||||
</button>
|
||||
|
||||
<transition name="menu">
|
||||
<ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
|
||||
<template v-for="type in types">
|
||||
<li :key="type.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400 flex justify-center" id="listbox-option-0" role="option" @click="select(type)">
|
||||
<widgets-library-icon :icon="type.id" />
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<div v-show="showMenu" class="absolute -left-[4.5rem] z-10 -mt-px bg-primary border border-black-200 shadow-lg max-h-56 w-48 rounded-md py-1 overflow-auto focus:outline-none sm:text-sm">
|
||||
<div class="flex justify-center items-center flex-wrap">
|
||||
<template v-for="icon in icons">
|
||||
<div :key="icon" class="p-2">
|
||||
<span class="abs-icons text-xl text-white text-opacity-80 hover:text-opacity-100 cursor-pointer" :class="`icon-${icon}`" @click="select(icon)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@ -37,29 +37,7 @@ export default {
|
||||
events: ['mousedown'],
|
||||
isActive: true
|
||||
},
|
||||
showMenu: false,
|
||||
types: [
|
||||
{
|
||||
id: 'database',
|
||||
name: 'Database'
|
||||
},
|
||||
{
|
||||
id: 'audiobook',
|
||||
name: 'Audiobooks'
|
||||
},
|
||||
{
|
||||
id: 'book',
|
||||
name: 'Books'
|
||||
},
|
||||
{
|
||||
id: 'podcast',
|
||||
name: 'Podcasts'
|
||||
},
|
||||
{
|
||||
id: 'comic',
|
||||
name: 'Comics'
|
||||
}
|
||||
]
|
||||
showMenu: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -71,11 +49,11 @@ export default {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
selectedItem() {
|
||||
return this.types.find((t) => t.id === this.selected)
|
||||
icons() {
|
||||
return this.$store.state.globals.libraryIcons
|
||||
},
|
||||
selectedName() {
|
||||
return this.selectedItem ? this.selectedItem.name : 'Database'
|
||||
selectedItem() {
|
||||
return this.icons.find((i) => i === this.selected) || 'audiobookshelf'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -86,9 +64,9 @@ export default {
|
||||
clickedOutside() {
|
||||
this.showMenu = false
|
||||
},
|
||||
select(type) {
|
||||
select(icon) {
|
||||
if (this.disabled) return
|
||||
this.selected = type.id
|
||||
this.selected = icon
|
||||
this.showMenu = false
|
||||
}
|
||||
},
|
||||
|
||||
@ -28,7 +28,8 @@ export const state = () => ({
|
||||
text: 'YYYY-MM-DD',
|
||||
value: 'yyyy-MM-dd'
|
||||
}
|
||||
]
|
||||
],
|
||||
libraryIcons: ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
|
||||
})
|
||||
|
||||
export const getters = {
|
||||
|
||||
@ -8,7 +8,7 @@ class Library {
|
||||
this.name = null
|
||||
this.folders = []
|
||||
this.displayOrder = 1
|
||||
this.icon = 'database' // database, podcast, book, audiobook, comic
|
||||
this.icon = 'database'
|
||||
this.mediaType = 'book' // book, podcast
|
||||
this.provider = 'google'
|
||||
|
||||
@ -46,14 +46,15 @@ class Library {
|
||||
|
||||
this.createdAt = library.createdAt
|
||||
this.lastUpdate = library.lastUpdate
|
||||
this.cleanOldValues() // mediaType changed for v2
|
||||
this.cleanOldValues() // mediaType changed for v2 and icon change for v2.2.2
|
||||
}
|
||||
|
||||
cleanOldValues() {
|
||||
var availableIcons = ['database', 'audiobook', 'book', 'comic', 'podcast']
|
||||
const availableIcons = ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
|
||||
if (!availableIcons.includes(this.icon)) {
|
||||
if (this.icon === 'default') this.icon = 'database'
|
||||
else if (this.icon.endsWith('s') && availableIcons.includes(this.icon.slice(0, -1))) this.icon = this.icon.slice(0, -1)
|
||||
if (this.icon === 'audiobook') this.icon = 'audiobookshelf'
|
||||
else if (this.icon === 'book') this.icon = 'books-1'
|
||||
else if (this.icon === 'comic') this.icon = 'file-picture'
|
||||
else this.icon = 'database'
|
||||
}
|
||||
if (!this.mediaType || (this.mediaType !== 'podcast' && this.mediaType !== 'book' && this.mediaType !== 'video')) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user