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

feat(webreader): display reading direction on book opening

Browse source
This commit is contained in:
Gauthier Roebroeck 2020-08-06 10:41:16 +08:00
parent 44c814a5ba
commit ebf2aac0ac
1 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -185,13 +185,12 @@
<v-snackbar <v-snackbar
v-model="jumpToPreviousBook" v-model="jumpToPreviousBook"
:timeout="jumpConfirmationDelay" :timeout="jumpConfirmationDelay"
vertical
top top
color="rgba(0, 0, 0, 0.7)" color="rgba(0, 0, 0, 0.8)"
multi-line multi-line
class="mt-12" class="mt-12"
> >
<div class="text-h6 pa-6"> <div class="body-1 pa-6">
<p>You're at the beginning<br/>of the book.</p> <p>You're at the beginning<br/>of the book.</p>
<p v-if="!$_.isEmpty(siblingPrevious)">Click or press previous again<br/>to move to the previous book.</p> <p v-if="!$_.isEmpty(siblingPrevious)">Click or press previous again<br/>to move to the previous book.</p>
</div> </div>
@ -200,36 +199,27 @@
<v-snackbar <v-snackbar
v-model="jumpToNextBook" v-model="jumpToNextBook"
:timeout="jumpConfirmationDelay" :timeout="jumpConfirmationDelay"
vertical
top top
color="rgba(0, 0, 0, 0.7)" color="rgba(0, 0, 0, 0.8)"
multi-line multi-line
class="mt-12" class="mt-12"
> >
<div class="title pa-6"> <div class="text-body-1 pa-6">
<p>You've reached the end<br/>of the book.</p> <p>You've reached the end<br/>of the book.</p>
<p v-if="!$_.isEmpty(siblingNext)">Click or press next again<br/>to move to the next book.</p> <p v-if="!$_.isEmpty(siblingNext)">Click or press next again<br/>to move to the next book.</p>
<p v-else>Click or press next again<br/>to exit the reader.</p> <p v-else>Click or press next again<br/>to exit the reader.</p>
</div> </div>
</v-snackbar> </v-snackbar>
<v-snackbar v-model="snackReadingDirection" <v-snackbar
color="info" v-model="notificationReadingDirection.enabled"
multi-line color="rgba(0, 0, 0, 0.8)"
vertical bottom
top timeout="3000"
> >
<div>This book has specific reading direction set.</div> <p class="text-body-1 text-center ma-0">
<div>Reading direction has been set to <span {{ readingDirectionText }}{{ notificationReadingDirection.fromMetadata ? ' (from book metadata)' : '' }}
class="font-weight-bold">{{ readingDirectionText }}</span>. </p>
</div>
<div>This only applies to this book and will not overwrite your settings.</div>
<v-btn
text
@click="snackReadingDirection = false"
>
Dismiss
</v-btn>
</v-snackbar> </v-snackbar>
<v-snackbar <v-snackbar
@ -238,9 +228,9 @@
centered centered
:timeout="notification.timeout" :timeout="notification.timeout"
> >
<span class="text-h6"> <p class="text-h6 text-center ma-0">
{{ notification.message }} {{ notification.message }}
</span> </p>
</v-snackbar> </v-snackbar>
<shortcut-help-dialog <shortcut-help-dialog
@ -295,7 +285,10 @@ export default Vue.extend({
jumpToNextBook: false, jumpToNextBook: false,
jumpToPreviousBook: false, jumpToPreviousBook: false,
jumpConfirmationDelay: 3000, jumpConfirmationDelay: 3000,
snackReadingDirection: false, notificationReadingDirection: {
enabled: false,
fromMetadata: false,
},
pages: [] as PageDtoWithUrl[], pages: [] as PageDtoWithUrl[],
page: 1, page: 1,
supportedMediaTypes: ['image/jpeg', 'image/png', 'image/gif'], supportedMediaTypes: ['image/jpeg', 'image/png', 'image/gif'],
@ -514,7 +507,9 @@ export default Vue.extend({
if (this.book.metadata.readingDirection in ReadingDirection && this.readingDirection !== this.book.metadata.readingDirection) { if (this.book.metadata.readingDirection in ReadingDirection && this.readingDirection !== this.book.metadata.readingDirection) {
// bypass setter so cookies aren't set // bypass setter so cookies aren't set
this.settings.readingDirection = this.book.metadata.readingDirection as ReadingDirection this.settings.readingDirection = this.book.metadata.readingDirection as ReadingDirection
this.snackReadingDirection = true this.sendNotificationReadingDirection(true)
} else {
this.sendNotificationReadingDirection(false)
} }
try { try {
@ -634,6 +629,10 @@ export default Vue.extend({
} }
this.closeBook() this.closeBook()
}, },
sendNotificationReadingDirection (fromMetadata: boolean) {
this.notificationReadingDirection.fromMetadata = fromMetadata
this.notificationReadingDirection.enabled = true
},
sendNotification (message: string, timeout: number = 4000) { sendNotification (message: string, timeout: number = 4000) {
this.notification.timeout = timeout this.notification.timeout = timeout
this.notification.message = message this.notification.message = message