mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-31 07:09:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Library update migrate to use book mediaType, disable editing mediaType, set icon instead of media category

Browse source
This commit is contained in:
advplyr 2022-03-18 17:09:17 -05:00
parent 6a06ba4327
commit a9b9e23f46
6 changed files with 81 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/components/ui/Dropdown.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="relative w-full" v-click-outside="clickOutsideObj">
<p class="text-sm font-semibold">{{ label }}</p>
<button type="button" :disabled="disabled" class="relative w-full border border-gray-600 rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" :class="small ? 'h-9' : 'h-10'" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
<p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
<button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
<span class="flex items-center">
<span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons text-gray-100">expand_more</span>
<span class="material-icons">expand_more</span>
</span>
</button>
@ -63,6 +63,16 @@ export default {
},
selectedText() {
return this.selectedItem ? this.selectedItem.text : ''
},
buttonClass() {
var classes = []
if (this.small) classes.push('h-9')
else classes.push('h-10')
if (this.disabled) classes.push('cursor-not-allowed border-gray-600 bg-primary bg-opacity-70 border-opacity-70 text-gray-400')
else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
return classes.join(' ')
}
},
methods: {

15
client/components/ui/MediaCategoryPicker.vue → client/components/ui/MediaIconPicker.vue
View file

@ -4,22 +4,15 @@
<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" class="mr-2" />
<span class="block truncate text-sm">{{ selectedName }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons text-gray-100">expand_more</span>
<widgets-library-icon :icon="selected" />
</span>
</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" id="listbox-option-0" role="option" @click="select(type)">
<div class="flex items-center px-3">
<widgets-library-icon :icon="type.id" class="mr-2" />
<span class="font-normal block truncate font-sans text-sm">{{ type.name }}</span>
</div>
<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>
@ -34,7 +27,7 @@ export default {
disabled: Boolean,
label: {
type: String,
default: 'Media Category'
default: 'Icon'
}
},
data() {