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

2023-01-08 20:08:03 +07:00
parent 91097515f2
commit 9e4be96522
5 changed files with 69 additions and 15 deletions
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -115,6 +115,12 @@

                <div class="col"></div>

+                <button v-show="showToolButton['nightMode']" ref="nightMode" v-ripple class="tool-button" :class="buttonActiveClass('nightMode')" @click="buttonClick('nightMode')">
+                    <q-icon name="la la-moon" size="32px" />
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        {{ rstore.readerActions['nightMode'] }}
+                    </q-tooltip>
+                </button>
                <button v-show="showToolButton['clickControl']" ref="clickControl" v-ripple class="tool-button" :class="buttonActiveClass('clickControl')" @click="buttonClick('clickControl')">
                    <q-icon name="la la-mouse" size="32px" />
                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
@@ -290,6 +296,8 @@ class Reader {
    contentsActive = false;    
    libsActive = false;
    recentBooksActive = false;
+    
+    nightModeActive = false;
    clickControlActive = false;
    settingsActive = false;

@@ -462,8 +470,8 @@ class Reader {
        this.allowUrlParamBookPos = settings.allowUrlParamBookPos;
        this.copyFullText = settings.copyFullText;
        this.showClickMapPage = settings.showClickMapPage;
-        this.clickControl = settings.clickControl;
-        this.clickControlActive = this.clickControl;
+        this.nightModeActive = settings.nightMode;
+        this.clickControlActive = settings.clickControl;
        this.blinkCachedLoad = settings.blinkCachedLoad;
        this.showToolButton = settings.showToolButton;
        this.toolBarHideOnScroll = settings.toolBarHideOnScroll;
@@ -1014,10 +1022,16 @@ class Reader {
        }
    }

+    nightModeToggle() {
+        if (!this.nightModeActive && !utils.hasProp(this.settings.nightColorSets, 'textColor')) {
+            this.$root.notify.warning(`Ночной режим активирован впервые. Цвета заданы по умолчанию.`);
+        }
+
+        this.commit('reader/nightModeToggle');
+    }
+
    clickControlToggle() {
-        const newSettings = _.cloneDeep(this.settings);
-        newSettings.clickControl = !this.clickControl;
-        this.commit('reader/setSettings', newSettings);
+        this.commit('reader/setSettings', {clickControl: !this.clickControlActive});
    }

    offlineModeToggle() {
@@ -1119,6 +1133,7 @@ class Reader {
            case 'contents':
            case 'libs':
            case 'recentBooks':
+            case 'nightMode':
            case 'clickControl':
            case 'offlineMode':
            case 'settings':
@@ -1167,7 +1182,7 @@ class Reader {
    }

    async activateClickMapPage() {
-        if (this.clickControl && this.showClickMapPage && !this.clickMapActive) {
+        if (this.clickControlActive && this.showClickMapPage && !this.clickMapActive) {
            this.clickMapActive = true;
            await this.$refs.clickMapPage.slowDisappear();
            this.clickMapActive = false;
@@ -1525,6 +1540,9 @@ class Reader {
            case 'recentBooks':
                this.recentBooksToggle();
                break;
+            case 'nightMode':
+                this.nightModeToggle();
+                break;
            case 'clickControl':
                this.clickControlToggle();
                break;
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/client/components/Reader/SettingsPage/SettingsPage.vue
@@ -35,7 +35,7 @@
                <!-- Профили --------------------------------------------------------------------->
                <ProfilesTab v-if="selectedTab == 'profiles'" :form="form" />
                <!-- Вид ------------------------------------------------------------------------->                    
-                <ViewTab v-if="selectedTab == 'view'" :form="form" />
+                <ViewTab v-if="selectedTab == 'view'" :form="form" @tab-event="tabEvent" />
                <!-- Кнопки ---------------------------------------------------------------------->
                <ToolBarTab v-if="selectedTab == 'toolbar'" :form="form" />
                <!-- Управление ------------------------------------------------------------------>
@@ -178,6 +178,7 @@ class SettingsPage {

        switch (event.action) {
            case 'set-defaults': this.setDefaults(); break;
+            case 'night-mode': this.$emit('do-action', {action: 'nightMode'}); break;
        }
    }

--- a/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue
+++ b/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue
@@ -8,7 +8,7 @@
        <div class="sets-item row">
            <div class="sets-label label"></div>
            <div class="col row">
-                <q-checkbox v-model="form.nightMode" size="xs" label="Ночной режим" />
+                <q-checkbox v-model="nightMode" size="xs" label="Ночной режим" @update:modelValue="nightModeToggle" />
            </div>
        </div>

@@ -192,6 +192,7 @@ class Mode {

    isFormChanged = false;
    dualDivColorFiltered = '';
+    nightMode = false;

    created() {
        this.formChanged();//no await
@@ -209,11 +210,17 @@ class Mode {
                && (this.form.pageChangeAnimation == 'flip' || this.form.pageChangeAnimation == 'rightShift')
                )
                this.form.pageChangeAnimation = '';
+
+            this.nightMode = this.form.nightMode;
        } finally {
            await this.$nextTick();
            this.isFormChanged = false;
        }
    }
+
+    nightModeToggle() {
+        this.$emit('tab-event', {action: 'night-mode'});
+    }
 }

 export default vueComponent(Mode);
--- a/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue
+++ b/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue
@@ -19,7 +19,7 @@
        <div class="q-mb-sm" />

        <div class="col sets-tab-panel">
-            <Mode v-if="selectedTab == 'mode'" :form="form" />
+            <Mode v-if="selectedTab == 'mode'" :form="form" @tab-event="tabEvent" />
            <Color v-if="selectedTab == 'color'" :form="form" />
            <Font v-if="selectedTab == 'font'" :form="form" />
            <Text v-if="selectedTab == 'text'" :form="form" />
@@ -61,6 +61,14 @@ class ViewTab {
    mounted() {
    }

+    tabEvent(event) {
+        if (!event || !event.action)
+            return;
+
+        switch (event.action) {
+            case 'night-mode': this.$emit('tab-event', {action: 'night-mode'}); break;
+        }
+    }
 }

 export default vueComponent(ViewTab);
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import * as utils from '../../share/utils';
 import googleFonts from './fonts/fonts.json';

@@ -21,6 +22,7 @@ const readerActions = {
    'copyText': 'Скопировать текст со страницы',
    'convOptions': 'Настроить конвертирование',
    'refresh': 'Принудительно обновить книгу',
+    'nightMode': 'Ночной режим',
    'clickControl': 'Управление кликом',
    'offlineMode': 'Автономный режим (без интернета)',
    'contents': 'Оглавление/закладки',
@@ -57,6 +59,7 @@ const toolButtons = [
    {name: 'contents',    show: true},
    {name: 'libs',        show: true},
    {name: 'recentBooks', show: true},
+    {name: 'nightMode',   show: true},
    {name: 'clickControl', show: true},
    {name: 'offlineMode', show: true},
 ];
@@ -80,6 +83,7 @@ const hotKeys = [
    {name: 'contents', codes: ['C']},
    {name: 'libs', codes: ['L']},
    {name: 'recentBooks', codes: ['X']},
+    {name: 'nightMode',   codes: ['Equal']},
    {name: 'clickControl', codes: ['Ctrl+B']},
    {name: 'offlineMode', codes: ['O']},

@@ -320,7 +324,7 @@ const state = {
    whatsNewContentHash: '',
    donationNextPopup: Date.now() + dayMs*30,
    currentProfile: '',
-    settings: Object.assign({}, settingDefaults),
+    settings: _.cloneDeep(settingDefaults),
    settingsRev: {},
    libs: false,
    libsRev: 0,
@@ -365,14 +369,30 @@ const mutations = {
        state.currentProfile = value;
    },
    setSettings(state, value) {
-        const newSettings = Object.assign({}, state.settings, value);
+        let newSettings = Object.assign({}, state.settings, value);
+
+        //при смене профиля подгружаются старые настройки, могут отсутствовать атрибуты
+        //поэтому:
+        const added = addDefaultsToSettings(newSettings);
+        if (added)
+            newSettings = added;
+
+        state.settings = newSettings;
+    },
+    nightModeToggle(state) {
        //переключение режима день-ночь
-        const prevNightMode = state.settings.nightMode;
-        if (utils.hasProp(value, 'nightMode') && prevNightMode != value.nightMode) {
-            saveColorSets(prevNightMode, newSettings);
-            restoreColorSets(newSettings.nightMode, newSettings);
+        const newSettings = Object.assign({}, state.settings);
+
+        saveColorSets(newSettings.nightMode, newSettings);
+        newSettings.nightMode = !newSettings.nightMode;
+
+        if (newSettings.nightMode && !utils.hasProp(newSettings.nightColorSets, 'textColor')) {
+            // Ночной режим активирован впервые. Цвета заданы по умолчанию.
+            newSettings.nightColorSets = {textColor: '#778a9e', backgroundColor: '#363131'};
        }

+        restoreColorSets(newSettings.nightMode, newSettings);
+
        state.settings = newSettings;
    },
    setSettingsRev(state, value) {