Переход на quasar

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -55,6 +55,11 @@
                 <div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
                     @@include('./include/PageMoveTab.inc');
                 </div>
+                <!-- Прочее ---------------------------------------------------------------------->
+                <div v-if="selectedTab == 'others'" class="fit tab-panel">
+                    @@include('./include/OthersTab.inc');
+                </div>
+
 
             </div>
 
@@ -67,9 +72,6 @@
             <el-tabs type="border-card" tab-position="left" v-model="selectedTabOld">
 
                 
-                <!-- Прочее ---------------------------------------------------------------------->
-                @@include('./includeOld/OthersTabOld.inc');
-
                 <!-- Сброс ----------------------------------------------------------------------->
                 @@include('./includeOld/ResetTabOld.inc');
 
@@ -558,23 +560,11 @@ class SettingsPage extends Vue {
     width: 75px;
 }
 
-.label-2 {
+.label-2, .label-3, .label-4, .label-5, .label-6 {
     width: 110px;
 }
 
-.label-3 {
+.label-1, .label-2, .label-3, .label-4, .label-5, .label-6 {
-    width: 110px;
-}
-
-.label-4 {
-    width: 110px;
-}
-
-.label-5 {
-    width: 110px;
-}
-
-.label-1, .label-2, .label-3, .label-4, .label-5 {
     display: flex;
     flex-direction: column;
     justify-content: center;

client/components/Reader/SettingsPage/include/OthersTab.inc

@@ -1,87 +1,91 @@
-            <el-tab-pane label="Прочее">
+<!---------------------------------------------->
-                <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
+<div class="part-header">Подсказки, уведомления</div>
-                    <div class="partHeader">Подсказки, уведомления</div>
 
-                    <el-form-item label="Подсказка">
+<div class="item row">
-                        <el-tooltip :open-delay="500" effect="light">
+    <div class="label-6">Подсказка</div>
-                            <template slot="content">
+    <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%">
-                            </template>
+            Показывать или нет подсказку при каждой загрузке книги
-                            <el-checkbox v-model="showClickMapPage" :disabled="!clickControl">Показывать области управления кликом</el-checkbox>
+        </q-tooltip>
-                        </el-tooltip>
+    </q-checkbox>
-                    </el-form-item>
+</div>
-                    <el-form-item label="Подсказка">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Мерцать сообщением в строке статуса и на кнопке<br>
-                                обновления при загрузке книги из кэша
-                            </template>
-                            <el-checkbox v-model="blinkCachedLoad">Предупреждать о загрузке из кэша</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="Уведомление">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Показывать уведомления и ошибки от<br>
-                                синхронизатора данных с сервером
-                            </template>
-                            <el-checkbox v-model="showServerStorageMessages">Показывать сообщения синхронизации</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="Уведомление">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Показывать уведомления "Что нового"<br>
-                                при каждом выходе новой версии читалки
-                            </template>
-                            <el-checkbox v-model="showWhatsNewDialog">Показывать уведомление "Что нового"</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="Уведомление">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Показывать уведомление "Оплатим хостинг вместе"
-                            </template>
-                            <el-checkbox v-model="showDonationDialog2020">Показывать "Оплатим хостинг вместе"</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                </el-form>
 
-                <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
+<div class="item row">
-                    <div class="partHeader">Другое</div>
+    <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>
 
-                    <el-form-item label="Парам. в URL">
+<div class="item row">
-                        <el-tooltip :open-delay="500" effect="light">
+    <div class="label-6">Уведомление</div>
-                            <template slot="content">
+    <q-checkbox size="xs" v-model="showServerStorageMessages" label="Показывать сообщения синхронизации">
-                                Добавление параметра "__p" в строке браузера<br>
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                                позволяет передавать ссылку на книгу в читалке<br>
+            Показывать уведомления и ошибки от<br>
-                                без потери текущей позиции. Однако в этом случае<br>
+            синхронизатора данных с сервером
-                                при листании забивается история браузера, т.к. на<br>
+        </q-tooltip>
-                                каждое изменение позиции происходит смена URL.
+    </q-checkbox>
-                            </template>
+</div>
-                            <el-checkbox v-model="allowUrlParamBookPos">Добавлять параметр "__p"</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="Парсинг">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Включение этой опции позволяет делать предварительную<br>
-                                обработку текста в ленивом режиме сразу после загрузки<br>
-                                книги. Это может повысить отзывчивость читалки, но<br>
-                                нагружает процессор каждый раз при открытии книги.
-                            </template>
-                            <el-checkbox v-model="lazyParseEnabled">Предварительная обработка текста</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                    <el-form-item label="Копирование">
-                        <el-tooltip :open-delay="500" effect="light">
-                            <template slot="content">
-                                Загружать весь текст в окно<br>
-                                копирования текста со страницы
-                            </template>
-                            <el-checkbox v-model="copyFullText">Загружать весь текст</el-checkbox>
-                        </el-tooltip>
-                    </el-form-item>
-                </el-form>
-            </el-tab-pane>
 
+<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="showDonationDialog2020">
+        Показывать "Оплатим хостинг вместе"
+        <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">Парам. в 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="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">Копирование</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>