Переход на quasar

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -185,9 +185,15 @@ selectedTabOld = null;//todo: remove
         return this.$store.state.reader.profiles;
     }
 
-    get profilesArray() {
-        const result = Object.keys(this.profiles)
-        result.sort();
+
+    get currentProfileOptions() {
+        const profNames = Object.keys(this.profiles)
+        profNames.sort();
+
+        let result = [{label: 'Нет', value: ''}];
+        profNames.forEach(name => {
+            result.push({label: name, value: name});
+        });
         return result;
     }
 
@@ -437,13 +443,14 @@ selectedTabOld = null;//todo: remove
     overflow-x: hidden;
     overflow-y: auto;
     font-size: 90%;
-    padding: 15px 10px 15px 10px;
+    padding: 0 10px 15px 10px;
 }
 
 .part-header {
     border-top: 2px solid #bbbbbb;
     font-weight: bold;
     font-size: 110%;
+    margin-top: 15px;
     margin-bottom: 5px;
 }
 
@@ -465,15 +472,15 @@ selectedTabOld = null;//todo: remove
     font-size: 90%;
     line-height: 130%;
 }
+
+.button {
+    margin-right: 15px;
+    padding: 0 5px 0 5px;
+}
 </style>
 
 <style scoped>
 /* TODO: REMOVE */
-.text {
-    font-size: 90%;
-    line-height: 130%;
-}
-
 .el-form {
     border-top: 2px solid #bbbbbb;
     margin-bottom: 5px;

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

@@ -5,8 +5,8 @@
     <q-checkbox class="col" v-model="serverSyncEnabled" size="xs" label="Включить синхронизацию с сервером" />
 </div>
 
-<div class="q-pt-sm"/>
 <div v-show="serverSyncEnabled">
+    <!---------------------------------------------->
     <div class="part-header">Профили устройств</div>
 
     <div class="item row">
@@ -16,94 +16,72 @@
             <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
         </div>
     </div>
-    <div class="item row">
+     <div class="item row">
         <div class="label col-2">Устройство</div>
+        <div class="col">
+            <q-select v-model="currentProfile" :options="currentProfileOptions"
+                style="width: 275px"
+                dropdown-icon="la la-angle-down la-sm"
+                outlined dense emit-value map-options
+            />
+        </div>
+    </div>
+    <div class="item row">
+        <div class="label col-2"></div>
+        <q-btn class="button" dense no-caps @click="addProfile">Добавить</q-btn>
+        <q-btn class="button" dense no-caps @click="delProfile">Удалить</q-btn>
+        <q-btn class="button" dense no-caps @click="delAllProfiles">Удалить все</q-btn>
+    </div>
+
+    <!---------------------------------------------->
+    <div class="part-header">Ключ доступа</div>
+    <div class="item row">
+        <div class="label col-2"></div>
         <div class="text col">
-            Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
-            <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
+            Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
+            Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
+        </div>
+    </div>
+    <div class="item row">
+        <div class="label col-2"></div>
+        <q-btn class="button" style="width: 250px" dense no-caps @click="showServerStorageKey">
+                <span v-show="serverStorageKeyVisible">Скрыть</span>
+                <span v-show="!serverStorageKeyVisible">Показать</span>
+                &nbsp;ключ доступа
+         </q-btn>
+    </div>
+    <div class="item row">
+        <div class="label col-2"></div>
+        <div v-if="!serverStorageKeyVisible">
+            <hr/>
+            <b>{{ partialStorageKey }}</b> (часть вашего ключа)
+            <hr/>
+        </div>
+        <div v-else style="line-height: 100%">
+            <hr/>
+            <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;"><b>{{ serverStorageKey }}</b></div>
+            <br><div class="center">
+                <q-btn class="button" style="width: 250px" dense no-caps @click="copyToClip(serverStorageKey, 'Ключ')">Скопировать ключ</q-btn>
+            </div>
+            <div v-if="mode == 'omnireader'">
+                <br>Переход по ссылке позволит автоматически ввести ключ доступа:
+                <br><div class="center" style="margin-top: 5px">
+                    <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
+                </div>
+                <br><div class="center">
+                    <el-button size="mini" class="copy-button" @click="copyToClip(setStorageKeyLink, 'Ссылка')">Скопировать ссылку</el-button>
+                </div>
+            </div>
+            <hr/>
         </div>
     </div>
 </div>
 
 
-            <!--el-tab-pane label="Профили">
-                <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
-                    <div class="partHeader">Управление синхронизацией данных</div>
-                    <el-form-item label="">
-                        <el-checkbox v-model="serverSyncEnabled">Включить синхронизацию с сервером</el-checkbox>
-                    </el-form-item>
-                </el-form>
+<!--
 
-                <div v-show="serverSyncEnabled">
-                <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
-                    <div class="partHeader">Профили устройств</div>
 
                     <el-form-item label="">
-                        <div class="text">
-                            Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
-                            <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
-                        </div>
-                    </el-form-item>
-
-                    <el-form-item label="Устройство">
-                        <el-select v-model="currentProfile" placeholder="">
-                            <el-option label="Нет" value=""></el-option>
-                            <el-option v-for="item in profilesArray"
-                                :key="item"
-                                :label="item"
-                                :value="item">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-
-                    <el-form-item label="">
-                            <el-button @click="addProfile">Добавить</el-button>
-                            <el-button @click="delProfile">Удалить</el-button>
-                            <el-button @click="delAllProfiles">Удалить все</el-button>
-                    </el-form-item>
-                </el-form>
-
-                <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
-                    <div class="partHeader">Ключ доступа</div>
-
-                    <el-form-item label="">
-                        <div class="text">
-                            Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
-                            Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
-                        </div>
-                    </el-form-item>
-
-                    <el-form-item label="">
-                            <el-button style="width: 250px" @click="showServerStorageKey">
-                                <span v-show="serverStorageKeyVisible">Скрыть</span>
-                                <span v-show="!serverStorageKeyVisible">Показать</span>
-                                ключ доступа
-                         </el-button>
-                    </el-form-item>
-
-                    <el-form-item label="">
-                        <div v-if="!serverStorageKeyVisible">
-                            <hr/>
-                            <b>{{ partialStorageKey }}</b> (часть вашего ключа)
-                            <hr/>
-                        </div>
-                        <div v-else style="line-height: 100%">
-                            <hr/>
-                            <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;"><b>{{ serverStorageKey }}</b></div>
-                            <br><div class="center">
-                                <el-button size="mini" class="copy-button" @click="copyToClip(serverStorageKey, 'Ключ')">Скопировать ключ</el-button>
-                            </div>
-                            <div v-if="mode == 'omnireader'">
-                                <br>Переход по ссылке позволит автоматически ввести ключ доступа:
-                                <br><div class="center" style="margin-top: 5px">
-                                    <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
-                                </div>
-                                <br><div class="center">
-                                    <el-button size="mini" class="copy-button" @click="copyToClip(setStorageKeyLink, 'Ссылка')">Скопировать ссылку</el-button>
-                                </div>
-                            </div>
-                            <hr/>
-                        </div>
                     </el-form-item>
 
                     <el-form-item label="">

client/quasar.js

@@ -26,7 +26,7 @@ import {QTooltip} from 'quasar/src/components/tooltip';
 import {QSpinner} from 'quasar/src/components/spinner';
 import {QTable, QTh, QTr, QTd} from 'quasar/src/components/table';
 import {QCheckbox} from 'quasar/src/components/checkbox';
-      
+import {QSelect} from 'quasar/src/components/select';
 const components = {
     //QLayout,
     //QPageContainer, QPage,
@@ -47,6 +47,7 @@ const components = {
     QSpinner,
     QTable, QTh, QTr, QTd,
     QCheckbox,
+    QSelect,
 };
 
 //directives