Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-16 13:33:49 +01: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>
<v-container class="ma-0 pa-0 full-height" fluid v-if="pages.length > 0" style="width: 100%;"
v-touch="{
left: () => turnLeft(),
right: () => turnRight(),
v-touch="{
left: () => turnRight(),
right: () => turnLeft(),
}"
>
<div>
@ -45,7 +45,7 @@
v-if="toolbar"
>
<v-row justify="center">
<!-- Menu: page slider -->
<!-- Menu: page slider -->
<v-col>
<v-slider
hide-details
@ -57,7 +57,7 @@
:max="pagesCount"
>
<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>
{{ currentPage }}
</v-label>
@ -66,31 +66,31 @@
<v-label>
{{ pagesCount }}
</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>
</v-slider>
<!-- <v-dialog v-model="dialogGoto" persistent max-width="290">-->
<!-- <template v-slot:activator="{ on }">-->
<!-- <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>-->
<!-- </template>-->
<!-- <v-card >-->
<!-- <v-card-text class="d-flex flex-row">-->
<!-- <v-text-field-->
<!-- v-model="goToPage"-->
<!-- hide-details-->
<!-- single-line-->
<!-- type="number"-->
<!-- autofocus-->
<!-- />-->
<!-- </v-card-text>-->
<!-- <v-dialog v-model="dialogGoto" persistent max-width="290">-->
<!-- <template v-slot:activator="{ on }">-->
<!-- <v-icon large class="ma-auto" v-on="on">mdi-arrow-right-bold-circle</v-icon>-->
<!-- </template>-->
<!-- <v-card >-->
<!-- <v-card-text class="d-flex flex-row">-->
<!-- <v-text-field-->
<!-- v-model="goToPage"-->
<!-- hide-details-->
<!-- single-line-->
<!-- type="number"-->
<!-- autofocus-->
<!-- />-->
<!-- </v-card-text>-->
<!-- <v-card-actions>-->
<!-- <v-spacer></v-spacer>-->
<!-- <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-card-actions>-->
<!-- </v-card>-->
<!-- </v-dialog>-->
<!-- <v-card-actions>-->
<!-- <v-spacer></v-spacer>-->
<!-- <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-card-actions>-->
<!-- </v-card>-->
<!-- </v-dialog>-->
</v-col>
</v-row>
@ -117,7 +117,7 @@
/>
<div class="full-height">
<!-- Carousel -->
<!-- Carousel -->
<v-carousel v-model="carouselPage"
:show-arrows="false"
:continuous="false"
@ -135,7 +135,7 @@
:reverse-transition="animations ? undefined : false"
>
<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)"
:height="maxHeight"
:width="maxWidth(p)"
@ -185,14 +185,14 @@
v-model="readingDirection"
label="Reading Direction"
>
<template v-slot:item="data" >
<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) }}
{{ readingDirectionDisplay(data.item) }}
</div>
</template>
</settings-select>
@ -210,7 +210,7 @@
</template>
<template v-slot:selection="data">
<div class="text-capitalize">
{{ imageFitDisplay(data.item) }}
{{ imageFitDisplay(data.item) }}
</div>
</template>
</settings-select>
@ -304,7 +304,7 @@ export default Vue.extend({
imageFits: Object.values(ImageFit),
fit: ImageFit.HEIGHT,
readingDirections: Object.values(ReadingDirection),
readingDirection: ReadingDirection.RightToLeft,
readingDirection: ReadingDirection.LeftToRight,
animations: true
}
}
@ -320,10 +320,20 @@ export default Vue.extend({
window.addEventListener('keydown', this.keyPressed)
this.setup(this.bookId, Number(this.$route.query.page))
this.loadFromCookie(cookieReadingDirection, (v) => { this.readingDirection = 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 } })
this.loadFromCookie(cookieReadingDirection, (v) => {
this.readingDirection = 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 () {
window.removeEventListener('keydown', this.keyPressed)
@ -600,7 +610,7 @@ export default Vue.extend({
<style scoped>
.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 {