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

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

4
client/components/ui/TextInput.vue
View file

@ -57,7 +57,8 @@ export default {
inputName: String,
showCopy: Boolean,
step: [String, Number],
min: [String, Number]
min: [String, Number],
customInputClass: String
},
data() {
return {
@ -82,6 +83,7 @@ export default {
_list.push(`py-${this.paddingY}`)
if (this.noSpinner) _list.push('no-spinner')
if (this.textCenter) _list.push('text-center')
if (this.customInputClass) _list.push(this.customInputClass)
return _list.join(' ')
},
actualType() {

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: {