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

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;

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;
         }
     }
 

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);

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);

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) {