Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-21 16:03:03 +01:00
Code Issues Projects Releases Wiki Activity

refactor: simplify settings-select

Browse source 
use item.text and item.value instead of mandatory slots
remove the reader specific ReaderReadingDirection enum
This commit is contained in:
Gauthier Roebroeck 2020-03-18 10:54:22 +08:00
parent 791f5dff08
commit a90b47cee9
3 changed files with 27 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
komga-webui/src/components/SettingsSelect.vue
View file

@ -13,14 +13,7 @@
@input="updateInput"
@change="updateInput"
hide-details="true"
>
<template v-slot:item="data">
<slot name="item" v-bind="data"></slot>
</template>
<template v-slot:selection="data">
<slot name="selection" v-bind="data"></slot>
</template>
</v-select>
/>
</v-col>
</v-row>
</template>

11
komga-webui/src/types/common.ts
View file

@ -3,14 +3,3 @@ export enum LoadState {
NotLoaded,
Loading
}
export enum ImageFit {
WIDTH = 'width',
HEIGHT = 'height',
ORIGINAL = 'original'
}
export enum ReaderReadingDirection {
LeftToRight = 'ltr',
RightToLeft = 'rtl'
}

74
komga-webui/src/views/BookReader.vue
View file

@ -174,46 +174,26 @@
<v-list class="full-height full-width">
<v-list-item>
<settings-switch v-model="doublePages" label="Page Layout" :status="`${ doublePages ? 'Double Pages' : 'Single Page'}`"></settings-switch>
<settings-switch v-model="doublePages" label="Page Layout"
:status="`${ doublePages ? 'Double Pages' : 'Single Page'}`"></settings-switch>
</v-list-item>
<v-list-item>
<settings-switch v-model="animations" label="Page Transitions"></settings-switch>
</v-list-item>
<v-list-item>
<settings-select
:items="settings.readingDirections"
:items="readingDirs"
v-model="readingDirection"
label="Reading Direction"
>
<template v-slot:item="data">
<div class="text-capitalize">
{{ readingDirectionDisplay(data.item) }}
</div>
</template>
<template v-slot:selection="data">
<div class="text-capitalize">
{{ readingDirectionDisplay(data.item) }}
</div>
</template>
</settings-select>
/>
</v-list-item>
<v-list-item>
<settings-select
:items="settings.imageFits"
:items="imageFits"
v-model="imageFit"
label="Scaling"
>
<template v-slot:item="data">
<div class="text-capitalize">
{{ imageFitDisplay(data.item) }}
</div>
</template>
<template v-slot:selection="data">
<div class="text-capitalize">
{{ imageFitDisplay(data.item) }}
</div>
</template>
</settings-select>
/>
</v-list-item>
</v-list>
</v-container>
@ -267,14 +247,10 @@ const cookieReadingDirection = 'webreader.readingDirection'
const cookieDoublePages = 'webreader.doublePages'
const cookieAnimations = 'webreader.animations'
const fitDisplay = {
[ImageFit.HEIGHT]: 'fit to height',
[ImageFit.WIDTH]: 'fit to width',
[ImageFit.ORIGINAL]: 'original'
}
const dirDisplay = {
[ReaderReadingDirection.RightToLeft]: 'right to left',
[ReaderReadingDirection.LeftToRight]: 'left to right'
enum ImageFit {
WIDTH = 'width',
HEIGHT = 'height',
ORIGINAL = 'original'
}
export default Vue.extend({
@ -303,10 +279,18 @@ export default Vue.extend({
doublePages: false,
imageFits: Object.values(ImageFit),
fit: ImageFit.HEIGHT,
readingDirections: Object.values(ReaderReadingDirection),
readingDirection: ReaderReadingDirection.LeftToRight,
readingDirection: ReadingDirection.LEFT_TO_RIGHT,
animations: true
}
},
readingDirs: [
{ text: 'Left to right', value: ReadingDirection.LEFT_TO_RIGHT },
{ text: 'Right to left', value: ReadingDirection.RIGHT_TO_LEFT }
],
imageFits: [
{ text: 'Fit to height', value: ImageFit.HEIGHT },
{ text: 'Fit to width', value: ImageFit.WIDTH },
{ text: 'Original', value: ImageFit.ORIGINAL }
]
}
},
created () {
@ -412,19 +396,19 @@ export default Vue.extend({
}
},
readingDirection: {
get: function (): ReaderReadingDirection {
get: function (): ReadingDirection {
return this.settings.readingDirection
},
set: function (readingDirection: ReaderReadingDirection): void {
set: function (readingDirection: ReadingDirection): void {
this.settings.readingDirection = readingDirection
this.$cookies.set(cookieReadingDirection, readingDirection, Infinity)
}
},
flipDirection (): boolean {
switch (this.readingDirection) {
case ReaderReadingDirection.LeftToRight:
case ReadingDirection.LEFT_TO_RIGHT:
return false
case ReaderReadingDirection.RightToLeft:
case ReadingDirection.RIGHT_TO_LEFT:
default:
return true
}
@ -606,12 +590,6 @@ export default Vue.extend({
}
return this.$vuetify.breakpoint.width
},
imageFitDisplay (fit: ImageFit): string {
return fitDisplay[fit]
},
readingDirectionDisplay (dir: ReaderReadingDirection): string {
return dirDisplay[dir]
},
loadFromCookie (cookieKey: string, setter: (value: any) => void): void {
if (this.$cookies.isKey(cookieKey)) {
let value = this.$cookies.get(cookieKey)