Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-17 00:08:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update multi select highlight color to yellow, remove console logs

Browse Source
This commit is contained in:
advplyr 2024-03-10 09:43:24 -05:00
parent fa71f9db2e
commit 727dad7e19
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/components/ui/MultiSelect.vue
View File

@ -17,7 +17,7 @@
<ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label"> <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
<template v-for="item in itemsToShow"> <template v-for="item in itemsToShow">
<li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-sky-400' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent> <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
<div class="flex items-center"> <div class="flex items-center">
<span class="font-normal ml-3 block truncate">{{ item }}</span> <span class="font-normal ml-3 block truncate">{{ item }}</span>
</div> </div>
@ -129,14 +129,12 @@ export default {
} else { } else {
this.selectedMenuItemIndex = Math.min(this.selectedMenuItemIndex + 1, items.length - 1) this.selectedMenuItemIndex = Math.min(this.selectedMenuItemIndex + 1, items.length - 1)
} }
console.log('ArrowDown. this.selectedMenuItemIndex=', this.selectedMenuItemIndex)
} else if (event.key === 'ArrowUp') { } else if (event.key === 'ArrowUp') {
if (this.selectedMenuItemIndex === null) { if (this.selectedMenuItemIndex === null) {
this.selectedMenuItemIndex = items.length - 1 this.selectedMenuItemIndex = items.length - 1
} else { } else {
this.selectedMenuItemIndex = Math.max(this.selectedMenuItemIndex - 1, 0) this.selectedMenuItemIndex = Math.max(this.selectedMenuItemIndex - 1, 0)
} }
console.log('ArrowUp. this.selectedMenuItemIndex=', this.selectedMenuItemIndex)
} }
this.recalcScroll() this.recalcScroll()
return return
@ -144,7 +142,6 @@ export default {
if (this.selectedMenuItemIndex !== null) { if (this.selectedMenuItemIndex !== null) {
this.clickedOption(event, items[this.selectedMenuItemIndex]) this.clickedOption(event, items[this.selectedMenuItemIndex])
} else { } else {
console.log('Enter. this.textInput=', this.textInput)
this.submitForm() this.submitForm()
} }
return return

2
client/components/ui/MultiSelectQueryInput.vue
View File

@ -20,7 +20,7 @@
<ul ref="menu" v-show="showMenu" class="absolute z-60 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label"> <ul ref="menu" v-show="showMenu" class="absolute z-60 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
<template v-for="item in itemsToShow"> <template v-for="item in itemsToShow">
<li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-sky-400' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent> <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
<div class="flex items-center"> <div class="flex items-center">
<span class="font-normal ml-3 block truncate">{{ item.name }}</span> <span class="font-normal ml-3 block truncate">{{ item.name }}</span>
</div> </div>