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

Update:Library settings tab settings in 2 columns and cleanup

Browse source
This commit is contained in:
advplyr 2024-10-23 17:11:41 -05:00
parent c47c75aefe
commit 6ca277a21d
3 changed files with 83 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/components/ui/ToggleSwitch.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
<span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
<button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer justify-start" :style="{ width: buttonWidth + 'px' }" :aria-checked="toggleValue" :class="className" @click="clickToggle">
<span class="rounded-full border border-black-50 shadow transform transition-transform duration-100" :style="{ width: cursorHeightWidth + 'px', height: cursorHeightWidth + 'px' }" :class="switchClassName"></span>
</button>
</div>
</template>
@ -19,7 +19,11 @@ export default {
default: 'primary'
},
disabled: Boolean,
labeledBy: String
labeledBy: String,
size: {
type: String,
default: 'md'
}
},
computed: {
toggleValue: {
@ -37,6 +41,13 @@ export default {
switchClassName() {
var bgColor = this.disabled ? 'bg-gray-300' : 'bg-white'
return this.toggleValue ? 'translate-x-5 ' + bgColor : bgColor
},
cursorHeightWidth() {
if (this.size === 'sm') return 16
return 20
},
buttonWidth() {
return this.cursorHeightWidth * 2
}
},
methods: {