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

Update server settings ui and add display settings section

Browse Source
This commit is contained in:
advplyr 2022-06-18 10:32:12 -05:00
parent 7f6baf35b7
commit 8ab0f164a6
2 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
client/pages/config/index.vue
View File

@ -4,7 +4,7 @@
<div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8"> <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<h1 class="text-xl">Settings</h1> <h1 class="text-xl font-semibold">Settings</h1>
</div> </div>
<div class="flex items-center py-2"> <div class="flex items-center py-2">
@ -27,26 +27,6 @@
</ui-tooltip> </ui-tooltip>
</div> </div>
<div class="flex items-center py-2">
<ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
<ui-tooltip :text="tooltips.coverAspectRatio">
<p class="pl-4 text-lg">
Use square book covers
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
<div class="flex items-center py-2">
<ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
<ui-tooltip :text="tooltips.bookshelfView">
<p class="pl-4 text-lg">
Use alternative bookshelf view
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
<div class="flex items-center py-2"> <div class="flex items-center py-2">
<ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" /> <ui-toggle-switch v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
<ui-tooltip :text="tooltips.sortingIgnorePrefix"> <ui-tooltip :text="tooltips.sortingIgnorePrefix">
@ -66,7 +46,36 @@
</div> </div>
<div class="flex items-center mb-2 mt-8"> <div class="flex items-center mb-2 mt-8">
<h1 class="text-xl">Scanner Settings</h1> <h1 class="text-xl font-semibold">Display Settings</h1>
</div>
<div class="flex items-center py-2">
<ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
<ui-tooltip :text="tooltips.coverAspectRatio">
<p class="pl-4 text-lg">
Use square book covers
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
<div class="flex items-center py-2">
<ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
<ui-tooltip :text="tooltips.bookshelfView">
<p class="pl-4 text-lg">
Use alternative bookshelf view
<span class="material-icons icon-text">info_outlined</span>
</p>
</ui-tooltip>
</div>
<div class="flex items-center py-2">
<p class="pr-4 text-lg">Date Format</p>
<ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small class="max-w-40" @input="(val) => updateSettingsKey('dateFormat', val)" />
</div>
<div class="flex items-center mb-2 mt-8">
<h1 class="text-xl font-semibold">Scanner Settings</h1>
</div> </div>
<div class="flex items-center py-2"> <div class="flex items-center py-2">
@ -144,7 +153,7 @@
</div> </div>
<div class="flex items-center mb-2 mt-8"> <div class="flex items-center mb-2 mt-8">
<h1 class="text-xl">Experimental Feature Settings</h1> <h1 class="text-xl font-semibold">Experimental Feature Settings</h1>
</div> </div>
<div class="flex items-center py-2"> <div class="flex items-center py-2">
@ -156,15 +165,6 @@
</p> </p>
</ui-tooltip> </ui-tooltip>
</div> </div>
<div clas="flex items-center py-2">
<ui-dropdown v-model="newServerSettings.dateFormat" :items="dateFormats" small @input="(val) => updateSettingsKey('dateFormat', val)" style="width: 10em; display:inline-flex" />
<p class="pl-4 text-lg" style="display:inline-flex; vertical-align: top;">
Date Format
<span class="material-icons icon-text">info_outlined</span>
</p>
</div>
</div> </div>
<div class="h-0.5 bg-primary bg-opacity-30 w-full" /> <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
@ -297,9 +297,6 @@ export default {
} }
}, },
methods: { methods: {
updateEnableChromecast(val) {
this.updateServerSettings({ enableChromecast: val })
},
updateSortingPrefixes(val) { updateSortingPrefixes(val) {
if (!val || !val.length) { if (!val || !val.length) {
this.$toast.error('Must have at least 1 prefix') this.$toast.error('Must have at least 1 prefix')
@ -337,10 +334,12 @@ export default {
.then((success) => { .then((success) => {
console.log('Updated Server Settings', success) console.log('Updated Server Settings', success)
this.updatingServerSettings = false this.updatingServerSettings = false
this.$toast.success('Server settings updated')
}) })
.catch((error) => { .catch((error) => {
console.error('Failed to update server settings', error) console.error('Failed to update server settings', error)
this.updatingServerSettings = false this.updatingServerSettings = false
this.$toast.error('Failed to update server settings')
}) })
}, },
initServerSettings() { initServerSettings() {

1
client/tailwind.config.js
View File

@ -31,6 +31,7 @@ module.exports = {
'20': '5rem', '20': '5rem',
'24': '6rem', '24': '6rem',
'32': '8rem', '32': '8rem',
'40': '10rem',
'48': '12rem', '48': '12rem',
'64': '16rem', '64': '16rem',
'80': '20rem' '80': '20rem'