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

client/components/Reader/SettingsPage/ConvertTab/ConvertTab.vue

@@ -116,7 +116,7 @@ const componentOptions = {
         NumInput
     },
 };
-class PageMoveTab {
+class ConvertTab {
     _options = componentOptions;
     _props = {
         form: Object,
@@ -133,7 +133,7 @@ class PageMoveTab {
     }
 }
 
-export default vueComponent(PageMoveTab);
+export default vueComponent(ConvertTab);
 //-----------------------------------------------------------------------------
 </script>
 

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

@@ -8,7 +8,7 @@
                 indicator-color="white"
                 dense
                 no-caps
-                class="no-mp bg-grey-4 text-grey-7"
+                class="bg-grey-4 text-grey-7"
             >
                 <q-tab name="mouse" label="Мышь/тачскрин" />
                 <q-tab name="keyboard" label="Клавиатура" />

client/components/Reader/SettingsPage/OthersTab.inc

@@ -1,91 +0,0 @@
-<!---------------------------------------------->
-<div class="part-header">Подсказки, уведомления</div>
-
-<div class="item row no-wrap">
-    <div class="label-6">Подсказка</div>
-    <q-checkbox size="xs" v-model="showClickMapPage" label="Показывать области управления кликом" :disable="!clickControl" >
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать или нет подсказку при каждой загрузке книги
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Подсказка</div>
-    <q-checkbox size="xs" v-model="blinkCachedLoad" label="Предупреждать о загрузке из кэша">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Мерцать сообщением в строке статуса и на кнопке<br>
-            обновления при загрузке книги из кэша
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row no-wrap">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showServerStorageMessages" label="Показывать сообщения синхронизации">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать уведомления и ошибки от<br>
-            синхронизатора данных с сервером
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showWhatsNewDialog">
-        Показывать уведомление "Что нового"
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать уведомления "Что нового"<br>
-            при появлении новой версии читалки
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showDonationDialog">
-        Показывать форму доната
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать диалог для сбора пожертвований
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<!---------------------------------------------->
-<div class="part-header">Другое</div>
-
-<div class="item row">
-    <div class="label-6">Обработка</div>
-    <q-checkbox size="xs" v-model="lazyParseEnabled" label="Предварительная подготовка текста">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Включение этой опции позволяет делать предварительную<br>
-            подготовку всего текста в ленивом режиме сразу после<br>
-            загрузки книги. Это может повысить отзывчивость читалки,<br>
-            но нагружает процессор каждый раз при открытии книги.
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Парам. в URL</div>
-    <q-checkbox size="xs" v-model="allowUrlParamBookPos">
-        Добавлять параметр "__p"
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Добавление параметра "__p" в строке браузера<br>
-            позволяет передавать ссылку на книгу в читалке<br>
-            без потери текущей позиции. Однако в этом случае<br>
-            при листании забивается история браузера, т.к. на<br>
-            каждое изменение позиции происходит смена URL.
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Копирование</div>
-    <q-checkbox size="xs" v-model="copyFullText" label="Загружать весь текст">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Загружать весь текст в окно<br>
-            копирования текста со страницы
-        </q-tooltip>
-    </q-checkbox>
-</div>

client/components/Reader/SettingsPage/OthersTab/OthersTab.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Подсказки, уведомления
+        </div>
+
+        <div class="sets-item row no-wrap">
+            <div class="sets-label label">
+                Подсказка
+            </div>
+            <q-checkbox v-model="form.showClickMapPage" size="xs" label="Показывать области управления кликом" :disable="!form.clickControl">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать или нет подсказку при каждой загрузке книги
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Подсказка
+            </div>
+            <q-checkbox v-model="form.blinkCachedLoad" size="xs" label="Предупреждать о загрузке из кэша">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Мерцать сообщением в строке статуса и на кнопке<br>
+                    обновления при загрузке книги из кэша
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row no-wrap">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showServerStorageMessages" size="xs" label="Показывать сообщения синхронизации">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать уведомления и ошибки от<br>
+                    синхронизатора данных с сервером
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showWhatsNewDialog" size="xs">
+                Показывать уведомление "Что нового"
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать уведомления "Что нового"<br>
+                    при появлении новой версии читалки
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showDonationDialog" size="xs">
+                Показывать форму доната
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать диалог для сбора пожертвований
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Другое
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Обработка
+            </div>
+            <q-checkbox v-model="form.lazyParseEnabled" size="xs" label="Предварительная подготовка текста">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Включение этой опции позволяет делать предварительную<br>
+                    подготовку всего текста в ленивом режиме сразу после<br>
+                    загрузки книги. Это может повысить отзывчивость читалки,<br>
+                    но нагружает процессор каждый раз при открытии книги.
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Парам. в URL
+            </div>
+            <q-checkbox v-model="form.allowUrlParamBookPos" size="xs">
+                Добавлять параметр "__p"
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Добавление параметра "__p" в строке браузера<br>
+                    позволяет передавать ссылку на книгу в читалке<br>
+                    без потери текущей позиции. Однако в этом случае<br>
+                    при листании забивается история браузера, т.к. на<br>
+                    каждое изменение позиции происходит смена URL.
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Копирование
+            </div>
+            <q-checkbox v-model="form.copyFullText" size="xs" label="Загружать весь текст">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Загружать весь текст в окно<br>
+                    копирования текста со страницы
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+const componentOptions = {
+    components: {
+    },
+};
+class OthersTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+}
+
+export default vueComponent(OthersTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 100px;
+}
+
+</style>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -93,9 +93,7 @@
                 <!-- Обновление ------------------------------------------------------------------>
                 <UpdateTab v-if="selectedTab == 'update'" :form="form" />
                 <!-- Прочее ---------------------------------------------------------------------->
-                <!--div v-if="selectedTab == 'others'" class="fit tab-panel">
-                    @@include('./OthersTab.inc');
-                </div-->
+                <OthersTab v-if="selectedTab == 'others'" :form="form" />
                 <!-- Сброс ----------------------------------------------------------------------->
                 <!--div v-if="selectedTab == 'reset'" class="fit tab-panel">
                     @@include('./ResetTab.inc');
@@ -128,6 +126,7 @@ import KeysTab from './KeysTab/KeysTab.vue';
 import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
 import ConvertTab from './ConvertTab/ConvertTab.vue';
 import UpdateTab from './UpdateTab/UpdateTab.vue';
+import OthersTab from './OthersTab/OthersTab.vue';
 
 const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
@@ -141,6 +140,7 @@ const componentOptions = {
         PageMoveTab,
         ConvertTab,
         UpdateTab,
+        OthersTab,
     },
     watch: {
         settings: function() {
@@ -516,10 +516,6 @@ export default vueComponent(SettingsPage);
     width: 110px;
 }
 
-.label-6 {
-    width: 100px;
-}
-
 .input {
     max-width: 150px;
 }

client/components/Reader/SettingsPage/UpdateTab/UpdateTab.vue

@@ -94,7 +94,7 @@ const componentOptions = {
         NumInput
     },
 };
-class PageMoveTab {
+class UpdateTab {
     _options = componentOptions;
     _props = {
         form: Object,
@@ -111,7 +111,7 @@ class PageMoveTab {
     }
 }
 
-export default vueComponent(PageMoveTab);
+export default vueComponent(UpdateTab);
 //-----------------------------------------------------------------------------
 </script>