Работа над ночным режимом

This commit is contained in:
Book Pauk
2023-01-10 19:35:40 +07:00
parent 9e4be96522
commit 9724ec230c
2 changed files with 30 additions and 9 deletions

View File

@@ -14,7 +14,7 @@
<div class="col-auto column justify-start items-center no-wrap overflow-hidden">
<q-input
ref="input" v-model="bookUrl" class="full-width q-px-sm" style="max-width: 700px"
outlined dense bg-color="white" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
outlined dense :bg-color="dark ? 'grey-9' : 'white'" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
>
<template #append>
<q-btn rounded flat style="width: 40px" icon="la la-check" @click="submitUrl" />
@@ -29,13 +29,13 @@
/>
<div class="q-my-sm"></div>
<q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadFileClick">
<q-btn no-caps dense class="q-px-sm" :color="dark ? 'teal-9' : 'primary'" size="13px" @click="loadFileClick">
<q-icon class="q-mr-xs" name="la la-caret-square-up" size="24px" />
Загрузить файл с диска
</q-btn>
<div class="q-my-sm"></div>
<q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadBufferClick">
<q-btn no-caps dense class="q-px-sm" :color="dark ? 'teal-9' : 'primary'" size="13px" @click="loadBufferClick">
<q-icon class="q-mr-xs" name="la la-comment" size="24px" />
Из буфера обмена
</q-btn>
@@ -50,13 +50,13 @@
</div>
</div>
<div class="q-my-sm"></div-->
<span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openComments">Отзывы о читалке</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openOldVersion">Старая версия</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openComments">Отзывы о читалке</span>
<span v-if="mode == 'omnireader'" class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openOldVersion">Старая версия</span>
</div>
<div class="col column justify-end items-center no-wrap overflow-hidden">
<span class="bottom-span clickable" @click="openHelp">Справка</span>
<span class="bottom-span clickable" @click="openDonate">Помочь проекту</span>
<span class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openHelp">Справка</span>
<span class="bottom-span clickable" :class="{'clickable-dark': dark}" @click="openDonate">Помочь проекту</span>
<span v-if="version == clientVersion" class="bottom-span">v{{ version }}</span>
<span v-else class="bottom-span">Версия сервера {{ version }}, версия клиента {{ clientVersion }}, необходимо обновить страницу</span>
@@ -134,6 +134,10 @@ class LoaderPage {
return versionHistory[0].version;
}
get dark() {
return this.$store.state.reader.settings.nightMode;
}
submitUrl() {
if (this.bookUrl) {
this.$emit('load-book', {url: this.bookUrl, force: true});
@@ -216,12 +220,16 @@ export default vueComponent(LoaderPage);
line-height: 160%;
}
.clickable {
.clickable, .clickable-dark {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.clickable-dark {
color: #aaf;
}
.bottom-span {
font-size: 70%;
margin-bottom: 10px;

View File

@@ -142,7 +142,7 @@
</div>
</div>
<div class="main col row relative-position">
<div class="col row relative-position main" :class="{dark}">
<keep-alive>
<component
:is="activePage"
@@ -470,7 +470,11 @@ class Reader {
this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
this.copyFullText = settings.copyFullText;
this.showClickMapPage = settings.showClickMapPage;
//dark mode
this.nightModeActive = settings.nightMode;
this.$q.dark.set(this.nightModeActive);
this.clickControlActive = settings.clickControl;
this.blinkCachedLoad = settings.blinkCachedLoad;
this.showToolButton = settings.showToolButton;
@@ -828,6 +832,10 @@ class Reader {
return this.$store.state.reader.settings;
}
get dark() {
return this.$store.state.reader.settings.nightMode;
}
addAction(pos) {
let a = this.actionList;
if (!a.length || a[a.length - 1] != pos) {
@@ -1696,6 +1704,11 @@ export default vueComponent(Reader);
color: #000;
}
.dark {
background-color: #222;
color: #ddd;
}
.tool-button {
margin: 0px 2px 7px 2px;
padding: 0;