deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Book Pauk
2023-01-10 21:06:54 +07:00
parent c0aec66f0f
commit 7b1d0bb778
2 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/components/App.vue
View File

@@ -48,7 +48,7 @@ class App {
let darkMode = null; let darkMode = null;
this.$root.setDarkMode = (value) => { this.$root.setDarkMode = (value) => {
if (darkMode !== value) { if (darkMode !== value) {
const vars = ['--app-bg-color', '--app-text-color']; const vars = ['--app-bg-color', '--app-text-color', '--bg-input-color'];
let root = document.querySelector(':root'); let root = document.querySelector(':root');
let cs = getComputedStyle(root); let cs = getComputedStyle(root);
@@ -218,14 +218,21 @@ export default vueComponent(App);
/* current */ /* current */
--app-bg-color: #fff; --app-bg-color: #fff;
--app-text-color: #000; --app-text-color: #000;
--bg-input-color: #fff;
/* light */ /* light */
--app-bg-color-light: #ebe2c9; --app-bg-color-light: #ebe2c9;
--app-text-color-light: #000; --app-text-color-light: #000;
--bg-input-color-light: #fff;
/* dark */ /* dark */
--app-bg-color-dark: #222; --app-bg-color-dark: #222;
--app-text-color-dark: #bbb; --app-text-color-dark: #bbb;
--bg-input-color-dark: #333;
}
.bg-input {
background-color: var(--bg-input-color);
} }
body, html, #app { body, html, #app {

24
client/components/Reader/LoaderPage/LoaderPage.vue
View File

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