Глобальный рефакторинг SettingsPage (в процессе)

client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue

@@ -19,11 +19,8 @@
 //-----------------------------------------------------------------------------
 import vueComponent from '../../../vueComponent.js';
 
-import UserHotKeys from '../../SettingsPage/UserHotKeys/UserHotKeys.vue';
-
 const componentOptions = {
     components: {
-        UserHotKeys,
     },
 };
 class HotkeysHelpPage {

client/components/Reader/Reader.vue

@@ -164,6 +164,7 @@
             <LibsPage v-show="hidden" ref="libsPage" @load-book="loadBook" @libs-close="libsClose" @do-action="doAction"></LibsPage>
             <RecentBooksPage v-show="recentBooksActive" ref="recentBooksPage" @load-book="loadBook" @recent-books-close="recentBooksClose" @update-count-changed="updateCountChanged"></RecentBooksPage>
             <SettingsPage v-show="settingsActive" ref="settingsPage" @do-action="doAction"></SettingsPage>
+            <!-- HelpPage после SettingsPage для использования UserHotKeys -->
             <HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage>
             <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
             <ContentsPage v-show="contentsActive" ref="contentsPage" :book-pos="bookPos" :is-visible="contentsActive" @do-action="doAction" @book-pos-changed="bookPosChanged"></ContentsPage>

client/components/Reader/SettingsPage/KeysTab.inc

@@ -1,33 +0,0 @@
-<div class="bg-grey-3 row">
-    <q-tabs
-        v-model="selectedKeysTab"
-        active-color="black"
-        active-bg-color="white"
-        indicator-color="white"
-        dense
-        no-caps
-        class="no-mp bg-grey-4 text-grey-7"
-    >
-        <q-tab name="mouse" label="Мышь/тачскрин" />
-        <q-tab name="keyboard" label="Клавиатура" />
-    </q-tabs>
-</div>
-
-<div class="q-mb-sm"/>
-
-<div class="col tab-panel">
-    <div v-if="selectedKeysTab == 'mouse'">
-        <div class="item row">
-            <div class="label-4"></div>
-            <div class="col row">
-                <q-checkbox size="xs" v-model="clickControl" label="Включить управление кликом" />
-            </div>
-        </div>
-    </div>
-
-    <div v-if="selectedKeysTab == 'keyboard'">
-        <div class="item row">
-            <UserHotKeys v-model="userHotKeys" />
-        </div>
-    </div>
-</div>

client/components/Reader/SettingsPage/KeysTab/KeysTab.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="fit column">
+        <div class="bg-grey-3 row">
+            <q-tabs
+                v-model="selectedTab"
+                active-color="black"
+                active-bg-color="white"
+                indicator-color="white"
+                dense
+                no-caps
+                class="no-mp bg-grey-4 text-grey-7"
+            >
+                <q-tab name="mouse" label="Мышь/тачскрин" />
+                <q-tab name="keyboard" label="Клавиатура" />
+            </q-tabs>
+        </div>
+
+        <div class="q-mb-sm" />
+
+        <div class="col sets-tab-panel">
+            <div v-if="selectedTab == 'mouse'">
+                <div class="sets-item row">
+                    <div class="sets-label label"></div>
+                    <div class="col row">
+                        <q-checkbox v-model="form.clickControl" size="xs" label="Включить управление кликом" />
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="selectedTab == 'keyboard'">
+                <div class="sets-item row">
+                    <UserHotKeys v-model="form.userHotKeys" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
+
+const componentOptions = {
+    components: {
+        UserHotKeys,
+    },
+};
+class KeysTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    selectedTab = 'mouse';
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+}
+
+export default vueComponent(KeysTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+</style>

client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue

@@ -73,10 +73,9 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
+import vueComponent from '../../../../vueComponent.js';
 
-import rstore from '../../../../store/modules/reader';
-//import * as utils from '../../share/utils';
+import rstore from '../../../../../store/modules/reader';
 
 const componentOptions = {
     watch: {

client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="fit sets-tab-panel">
         <div class="sets-part-header">
             Управление синхронизацией данных
         </div>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -39,9 +39,7 @@
 
             <div class="col fit">
                 <!-- Профили --------------------------------------------------------------------->
-                <div v-if="selectedTab == 'profiles'" class="fit tab-panel">
-                    <ProfilesTab :form="form" />
-                </div>
+                <ProfilesTab v-if="selectedTab == 'profiles'" :form="form" />
                 <!-- Вид ------------------------------------------------------------------------->                    
                 <!--div v-if="selectedTab == 'view'" class="fit column">
                     <q-tabs
@@ -85,13 +83,9 @@
                     </div>
                 </div-->
                 <!-- Кнопки ---------------------------------------------------------------------->
-                <div v-if="selectedTab == 'toolbar'" class="fit tab-panel">
-                    <ToolBarTab :form="form" />
-                </div>
+                <ToolBarTab v-if="selectedTab == 'toolbar'" :form="form" />
                 <!-- Управление ------------------------------------------------------------------>
-                <!--div v-if="selectedTab == 'keys'" class="fit column">
-                    @@include('./KeysTab.inc');
-                </div-->
+                <KeysTab v-if="selectedTab == 'keys'" :form="form" />
                 <!-- Листание -------------------------------------------------------------------->
                 <!--div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
                     @@include('./PageMoveTab.inc');
@@ -128,7 +122,6 @@ import * as utils from '../../../share/utils';
 import * as cryptoUtils from '../../../share/cryptoUtils';
 import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
-import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
 import wallpaperStorage from '../share/wallpaperStorage';
 
 import readerApi from '../../../api/reader';
@@ -138,6 +131,7 @@ import defPalette from './defPalette';
 //pages
 import ProfilesTab from './ProfilesTab/ProfilesTab.vue';
 import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
+import KeysTab from './KeysTab/KeysTab.vue';
 
 const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
@@ -145,10 +139,10 @@ const componentOptions = {
     components: {
         Window,
         NumInput,
-        UserHotKeys,
         //pages
         ProfilesTab,
         ToolBarTab,
+        KeysTab,
     },
     watch: {
         settings: function() {
@@ -228,7 +222,6 @@ class SettingsPage {
 
     selectedTab = 'profiles';
     selectedViewTab = 'mode';
-    selectedKeysTab = 'mouse';
     fontBold = false;
     fontItalic = false;
     vertShift = 0;
@@ -542,18 +535,11 @@ export default vueComponent(SettingsPage);
     justify-content: initial;
 }
 
-.tab-panel {
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 90%;
-    padding: 0 10px 15px 10px;
-}
-
 .label-7 {
     width: 75px;
 }
 
-.label-2, .label-4, .label-5 {
+.label-2, .label-5 {
     width: 110px;
 }
 
@@ -576,6 +562,13 @@ export default vueComponent(SettingsPage);
 </style>
 
 <style>
+.sets-tab-panel {
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 90%;
+    padding: 0 10px 15px 10px;
+}
+
 .sets-part-header {
     border-top: 2px solid #bbbbbb;
     font-weight: bold;

client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="fit sets-tab-panel">
         <div class="sets-part-header">
             Отображение
         </div>