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

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -30,7 +30,7 @@
                     <q-tab class="tab" name="keys" icon="la la-gamepad" label="Управление" />
                     <q-tab class="tab" name="pagemove" icon="la la-school" label="Листание" />
                     <q-tab class="tab" name="convert" icon="la la-magic" label="Конвертир." />
-                    <q-tab class="tab" name="update" icon="la la-sync" label="Обновление" />
+                    <q-tab class="tab" name="update" icon="la la-retweet" label="Обновление" />
                     <q-tab class="tab" name="others" icon="la la-list-ul" label="Прочее" />
                     <q-tab class="tab" name="reset" icon="la la-broom" label="Сброс" />
                     <div v-show="tabsScrollable" class="q-pt-lg" />
@@ -91,9 +91,7 @@
                 <!-- Конвертирование ------------------------------------------------------------->
                 <ConvertTab v-if="selectedTab == 'convert'" :form="form" />
                 <!-- Обновление ------------------------------------------------------------------>
-                <!--div v-if="selectedTab == 'update'" class="fit tab-panel">
-                    @@include('./UpdateTab.inc');
-                </div-->
+                <UpdateTab v-if="selectedTab == 'update'" :form="form" />
                 <!-- Прочее ---------------------------------------------------------------------->
                 <!--div v-if="selectedTab == 'others'" class="fit tab-panel">
                     @@include('./OthersTab.inc');
@@ -129,6 +127,7 @@ import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
 import KeysTab from './KeysTab/KeysTab.vue';
 import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
 import ConvertTab from './ConvertTab/ConvertTab.vue';
+import UpdateTab from './UpdateTab/UpdateTab.vue';
 
 const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
@@ -141,6 +140,7 @@ const componentOptions = {
         KeysTab,
         PageMoveTab,
         ConvertTab,
+        UpdateTab,
     },
     watch: {
         settings: function() {
@@ -292,10 +292,6 @@ class SettingsPage {
         return this.$store.state.reader.settings;
     }
 
-    get configBucEnabled() {
-        return this.$store.state.config.bucEnabled;
-    }
-
     get wallpaperOptions() {
         let result = [{label: 'Нет', value: ''}];
 

client/components/Reader/SettingsPage/UpdateTab.inc

@@ -1,76 +0,0 @@
-<!---------------------------------------------->
-<div class="part-header">Обновление читалки</div>
-<div class="item row">
-    <div class="label-6"></div>
-    <q-checkbox size="xs" v-model="showNeedUpdateNotify">
-        Проверять наличие новой версии
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Напоминать о необходимости обновления страницы<br>
-            при появлении новой версии читалки
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<!---------------------------------------------->
-<div class="part-header">Обновление книг</div>
-<div v-show="!configBucEnabled" class="item row">
-    <div class="label-6"></div>
-    <div>Сервер обновлений временно не работает</div>
-</div>
-
-<div v-show="configBucEnabled" class="item row">
-    <div class="label-6"></div>
-    <q-checkbox size="xs" v-model="bucEnabled">
-        Проверять обновления книг
-    </q-checkbox>
-</div>
-
-<div v-show="configBucEnabled && bucEnabled" class="item row">
-    <div class="label-6"></div>
-    <div class="col-5 column justify-center items-end q-pr-xs">Разница размеров</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="bucSizeDiff" />
-
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Уведомлять о наличии обновления книги в списке загруженных<br>
-            при указанной разнице в размерах старого и нового файлов.<br>
-            Разница указывается в байтах и может быть отрицательной.
-        </q-tooltip>
-    </div>
-</div>
-
-<div v-show="configBucEnabled && bucEnabled" class="item row">
-    <div class="label-6"></div>
-    <q-checkbox size="xs" v-model="bucSetOnNew">
-        Автопроверка для вновь загружаемых
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Автоматически устанавливать флаг проверки<br>
-            обновлений для всех вновь загружаемых книг
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div v-show="configBucEnabled && bucEnabled" class="item row">
-    <div class="label-6"></div>
-    <q-checkbox size="xs" v-model="bucCancelEnabled">
-        Отменять проверку через {{ bucCancelDays }} дней{{ (bucCancelEnabled ? ':' : '') }}
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Снимать флаг проверки с книги, если не было<br>
-            обновлений в течение {{ bucCancelDays }} дней
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div v-show="configBucEnabled && bucEnabled && bucCancelEnabled" class="item row">
-    <div class="label-6"></div>
-    <div class="col-5"></div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="bucCancelDays" :min="1" :max="10000"/>
-
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Снимать флаг проверки с книги, если не было<br>
-            обновлений в течение {{ bucCancelDays }} дней
-        </q-tooltip>
-    </div>
-</div>
-

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

@@ -0,0 +1,122 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Обновление читалки
+        </div>
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.showNeedUpdateNotify" 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-part-header">
+            Обновление книг
+        </div>
+        <div v-show="!configBucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div>Сервер обновлений временно не работает</div>
+        </div>
+
+        <div v-show="configBucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucEnabled" size="xs">
+                Проверять обновления книг
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-4 column justify-center items-end q-pr-xs">
+                Разница размеров
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.bucSizeDiff" style="width: 200px" />
+
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Уведомлять о наличии обновления книги в списке загруженных<br>
+                    при указанной разнице в размерах старого и нового файлов.<br>
+                    Разница указывается в байтах и может быть отрицательной.
+                </q-tooltip>
+            </div>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucSetOnNew" size="xs">
+                Автопроверка для вновь загружаемых
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Автоматически устанавливать флаг проверки<br>
+                    обновлений для всех вновь загружаемых книг
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucCancelEnabled" size="xs">
+                Отменять проверку через {{ form.bucCancelDays }} дней{{ (form.bucCancelEnabled ? ':' : '') }}
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Снимать флаг проверки с книги, если не было<br>
+                    обновлений в течение {{ form.bucCancelDays }} дней
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled && form.bucCancelEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-4"></div>
+            <div class="col row">
+                <NumInput v-model="form.bucCancelDays" :min="1" :max="10000" />
+
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Снимать флаг проверки с книги, если не было<br>
+                    обновлений в течение {{ form.bucCancelDays }} дней
+                </q-tooltip>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+import NumInput from '../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput
+    },
+};
+class PageMoveTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get configBucEnabled() {
+        return this.$store.state.config.bucEnabled;
+    }
+}
+
+export default vueComponent(PageMoveTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 100px;
+}
+</style>