From 62ac60887e152ccf8bb085013cfbbbe7638d0e13 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 12 Oct 2022 16:25:58 +0700
Subject: [PATCH] =?UTF-8?q?=D0=93=D0=BB=D0=BE=D0=B1=D0=B0=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3=20SettingsPage=20(=D0=B2=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=86=D0=B5=D1=81=D1=81=D0=B5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HotkeysHelpPage/HotkeysHelpPage.vue       |  3 -
 client/components/Reader/Reader.vue           |  1 +
 .../Reader/SettingsPage/KeysTab.inc           | 33 --------
 .../Reader/SettingsPage/KeysTab/KeysTab.vue   | 78 +++++++++++++++++++
 .../{ => KeysTab}/UserHotKeys/UserHotKeys.vue |  5 +-
 .../SettingsPage/ProfilesTab/ProfilesTab.vue  |  2 +-
 .../Reader/SettingsPage/SettingsPage.vue      | 33 ++++----
 .../SettingsPage/ToolBarTab/ToolBarTab.vue    |  2 +-
 8 files changed, 96 insertions(+), 61 deletions(-)
 delete mode 100644 client/components/Reader/SettingsPage/KeysTab.inc
 create mode 100644 client/components/Reader/SettingsPage/KeysTab/KeysTab.vue
 rename client/components/Reader/SettingsPage/{ => KeysTab}/UserHotKeys/UserHotKeys.vue (98%)

diff --git a/client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue b/client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue
index ff0f541e..fb510141 100644
--- a/client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue
+++ b/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 {
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index c8fd99c0..e7f0f208 100644
--- a/client/components/Reader/Reader.vue
+++ b/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>
diff --git a/client/components/Reader/SettingsPage/KeysTab.inc b/client/components/Reader/SettingsPage/KeysTab.inc
deleted file mode 100644
index 0a43d57b..00000000
--- a/client/components/Reader/SettingsPage/KeysTab.inc
+++ /dev/null
@@ -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>
diff --git a/client/components/Reader/SettingsPage/KeysTab/KeysTab.vue b/client/components/Reader/SettingsPage/KeysTab/KeysTab.vue
new file mode 100644
index 00000000..3913f8d4
--- /dev/null
+++ b/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>
diff --git a/client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue b/client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue
similarity index 98%
rename from client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue
rename to client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue
index 0ed02657..35b9eb9e 100644
--- a/client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue
+++ b/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: {
diff --git a/client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue b/client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue
index dafff3fd..649f7d63 100644
--- a/client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue
+++ b/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>
diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue
index 45bb37f6..9a219d1c 100644
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/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;
diff --git a/client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue b/client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue
index c0ec6190..5e376fab 100644
--- a/client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue
+++ b/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>