Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-09 05:10:19 +02:00
Code Issues Projects Releases Wiki Activity

fix(webreader): defaults to LTR and fix touch

Browse source
This commit is contained in:
Gauthier Roebroeck 2020-03-03 12:10:54 +08:00
parent 4f5c14e87a
commit 2eae83f561
1 changed files with 48 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template> <template>
<v-container class="ma-0 pa-0 full-height" fluid v-if="pages.length > 0" style="width: 100%;" <v-container class="ma-0 pa-0 full-height" fluid v-if="pages.length > 0" style="width: 100%;"
v-touch="{ v-touch="{
left: () => turnLeft(), left: () => turnRight(),
right: () => turnRight(), right: () => turnLeft(),
}" }"
> >
<div> <div>
@ -45,7 +45,7 @@
v-if="toolbar" v-if="toolbar"
> >
<v-row justify="center"> <v-row justify="center">
<!-- Menu: page slider --> <!-- Menu: page slider -->
<v-col> <v-col>
<v-slider <v-slider
hide-details hide-details
@ -57,7 +57,7 @@
:max="pagesCount" :max="pagesCount"
> >
<template v-slot:prepend> <template v-slot:prepend>
<v-icon @click="goToFirst" class="mx-2">mdi-arrow-collapse-left</v-icon> <v-icon @click="goToFirst" class="mx-2">mdi-arrow-collapse-left</v-icon>
<v-label> <v-label>
{{ currentPage }} {{ currentPage }}
</v-label> </v-label>
@ -66,31 +66,31 @@
<v-label> <v-label>
{{ pagesCount }} {{ pagesCount }}
</v-label> </v-label>
<v-icon @click="goToLast" class="mx-2">mdi-arrow-collapse-right</v-icon> <v-icon @click="goToLast" class="mx-2">mdi-arrow-collapse-right</v-icon>
</template> </template>
</v-slider> </v-slider>
<!-- <v-dialog v-model="dialogGoto" persistent max-width="290">--> <!-- <v-dialog v-model="dialogGoto" persistent max-width="290">-->
<!-- <template v-slot:activator="{ on }">--> <!-- <template v-slot:activator="{ on }">-->
<!-- <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>--> <!-- <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>-->
<!-- </template>--> <!-- </template>-->
<!-- <v-card >--> <!-- <v-card >-->
<!-- <v-card-text class="d-flex flex-row">--> <!-- <v-card-text class="d-flex flex-row">-->
<!-- <v-text-field--> <!-- <v-text-field-->
<!-- v-model="goToPage"--> <!-- v-model="goToPage"-->
<!-- hide-details--> <!-- hide-details-->
<!-- single-line--> <!-- single-line-->
<!-- type="number"--> <!-- type="number"-->
<!-- autofocus--> <!-- autofocus-->
<!-- />--> <!-- />-->
<!-- </v-card-text>--> <!-- </v-card-text>-->
<!-- <v-card-actions>--> <!-- <v-card-actions>-->
<!-- <v-spacer></v-spacer>--> <!-- <v-spacer></v-spacer>-->
<!-- <v-btn color="darken-1" text @click="dialogGoto = false">Close</v-btn>--> <!-- <v-btn color="darken-1" text @click="dialogGoto = false">Close</v-btn>-->
<!-- <v-btn color="green darken-1" text @click="goTo(goToPage)">Go To</v-btn>--> <!-- <v-btn color="green darken-1" text @click="goTo(goToPage)">Go To</v-btn>-->
<!-- </v-card-actions>--> <!-- </v-card-actions>-->
<!-- </v-card>--> <!-- </v-card>-->
<!-- </v-dialog>--> <!-- </v-dialog>-->
</v-col> </v-col>
</v-row> </v-row>
@ -117,7 +117,7 @@
/> />
<div class="full-height"> <div class="full-height">
<!-- Carousel --> <!-- Carousel -->
<v-carousel v-model="carouselPage" <v-carousel v-model="carouselPage"
:show-arrows="false" :show-arrows="false"
:continuous="false" :continuous="false"
@ -135,7 +135,7 @@
:reverse-transition="animations ? undefined : false" :reverse-transition="animations ? undefined : false"
> >
<div class="full-height d-flex flex-column justify-center reader-background"> <div class="full-height d-flex flex-column justify-center reader-background">
<div :class="`d-flex flex-row${flipDirection ? '-reverse' : ''} justify-center px-0 mx-0` " > <div :class="`d-flex flex-row${flipDirection ? '-reverse' : ''} justify-center px-0 mx-0` ">
<img :src="getPageUrl(p)" <img :src="getPageUrl(p)"
:height="maxHeight" :height="maxHeight"
:width="maxWidth(p)" :width="maxWidth(p)"
@ -185,14 +185,14 @@
v-model="readingDirection" v-model="readingDirection"
label="Reading Direction" label="Reading Direction"
> >
<template v-slot:item="data" > <template v-slot:item="data">
<div class="text-capitalize"> <div class="text-capitalize">
{{ readingDirectionDisplay(data.item) }} {{ readingDirectionDisplay(data.item) }}
</div> </div>
</template> </template>
<template v-slot:selection="data"> <template v-slot:selection="data">
<div class="text-capitalize"> <div class="text-capitalize">
{{ readingDirectionDisplay(data.item) }} {{ readingDirectionDisplay(data.item) }}
</div> </div>
</template> </template>
</settings-select> </settings-select>
@ -210,7 +210,7 @@
</template> </template>
<template v-slot:selection="data"> <template v-slot:selection="data">
<div class="text-capitalize"> <div class="text-capitalize">
{{ imageFitDisplay(data.item) }} {{ imageFitDisplay(data.item) }}
</div> </div>
</template> </template>
</settings-select> </settings-select>
@ -304,7 +304,7 @@ export default Vue.extend({
imageFits: Object.values(ImageFit), imageFits: Object.values(ImageFit),
fit: ImageFit.HEIGHT, fit: ImageFit.HEIGHT,
readingDirections: Object.values(ReadingDirection), readingDirections: Object.values(ReadingDirection),
readingDirection: ReadingDirection.RightToLeft, readingDirection: ReadingDirection.LeftToRight,
animations: true animations: true
} }
} }
@ -320,10 +320,20 @@ export default Vue.extend({
window.addEventListener('keydown', this.keyPressed) window.addEventListener('keydown', this.keyPressed)
this.setup(this.bookId, Number(this.$route.query.page)) this.setup(this.bookId, Number(this.$route.query.page))
this.loadFromCookie(cookieReadingDirection, (v) => { this.readingDirection = v }) this.loadFromCookie(cookieReadingDirection, (v) => {
this.loadFromCookie(cookieAnimations, (v) => { this.animations = (v === 'true') }) this.readingDirection = v
this.loadFromCookie(cookieDoublePages, (v) => { this.doublePages = (v === 'true') }) })
this.loadFromCookie(cookieFit, (v) => { if (v) { this.imageFit = v } }) this.loadFromCookie(cookieAnimations, (v) => {
this.animations = (v === 'true')
})
this.loadFromCookie(cookieDoublePages, (v) => {
this.doublePages = (v === 'true')
})
this.loadFromCookie(cookieFit, (v) => {
if (v) {
this.imageFit = v
}
})
}, },
destroyed () { destroyed () {
window.removeEventListener('keydown', this.keyPressed) window.removeEventListener('keydown', this.keyPressed)
@ -600,7 +610,7 @@ export default Vue.extend({
<style scoped> <style scoped>
.reader-background { .reader-background {
background-color: white; /* TODO add a setting for this, some books might not be white */ background-color: white; /* TODO add a setting for this, some books might not be white */
} }
.settings { .settings {