Переход на quasar

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -82,19 +82,9 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
 import rstore from '../../../store/modules/reader';
+import defPalette from './defPalette';
 
-const defPalette = [
-  'rgb(255,204,204)', 'rgb(255,230,204)', 'rgb(255,255,204)', 'rgb(204,255,204)', 'rgb(204,255,230)', 'rgb(204,255,255)', 'rgb(204,230,255)', 'rgb(204,204,255)', 'rgb(230,204,255)', 'rgb(255,204,255)',
-  'rgb(255,153,153)', 'rgb(255,204,153)', 'rgb(255,255,153)', 'rgb(153,255,153)', 'rgb(153,255,204)', 'rgb(153,255,255)', 'rgb(153,204,255)', 'rgb(153,153,255)', 'rgb(204,153,255)', 'rgb(255,153,255)',
-  'rgb(255,102,102)', 'rgb(255,179,102)', 'rgb(255,255,102)', 'rgb(102,255,102)', 'rgb(102,255,179)', 'rgb(102,255,255)', 'rgb(102,179,255)', 'rgb(102,102,255)', 'rgb(179,102,255)', 'rgb(255,102,255)',
-  'rgb(255,51,51)', 'rgb(255,153,51)', 'rgb(255,255,51)', 'rgb(51,255,51)', 'rgb(51,255,153)', 'rgb(51,255,255)', 'rgb(51,153,255)', 'rgb(51,51,255)', 'rgb(153,51,255)', 'rgb(255,51,255)',
-  'rgb(255,0,0)', 'rgb(255,128,0)', 'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,255,128)', 'rgb(0,255,255)', 'rgb(0,128,255)', 'rgb(0,0,255)', 'rgb(128,0,255)', 'rgb(255,0,255)',
-  'rgb(245,0,0)', 'rgb(245,123,0)', 'rgb(245,245,0)', 'rgb(0,245,0)', 'rgb(0,245,123)', 'rgb(0,245,245)', 'rgb(0,123,245)', 'rgb(0,0,245)', 'rgb(123,0,245)', 'rgb(245,0,245)',
-  'rgb(214,0,0)', 'rgb(214,108,0)', 'rgb(214,214,0)', 'rgb(0,214,0)', 'rgb(0,214,108)', 'rgb(0,214,214)', 'rgb(0,108,214)', 'rgb(0,0,214)', 'rgb(108,0,214)', 'rgb(214,0,214)',
-  'rgb(163,0,0)', 'rgb(163,82,0)', 'rgb(163,163,0)', 'rgb(0,163,0)', 'rgb(0,163,82)', 'rgb(0,163,163)', 'rgb(0,82,163)', 'rgb(0,0,163)', 'rgb(82,0,163)', 'rgb(163,0,163)',
-  'rgb(92,0,0)', 'rgb(92,46,0)', 'rgb(92,92,0)', 'rgb(0,92,0)', 'rgb(0,92,46)', 'rgb(0,92,92)', 'rgb(0,46,92)', 'rgb(0,0,92)', 'rgb(46,0,92)', 'rgb(92,0,92)',
-  'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
-];
+const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
 export default @Component({
     components: {
@@ -134,6 +124,20 @@ export default @Component({
             if (newValue != '' && this.pageChangeAnimation == 'flip')
                 this.pageChangeAnimation = '';
         },
+        textColor: function(newValue) {
+            this.textColorFiltered = newValue;
+        },
+        textColorFiltered: function(newValue) {
+            if (hex.test(newValue))
+                this.textColor = newValue;
+        },
+        backgroundColor: function(newValue) {
+            this.bgColorFiltered = newValue;
+        },
+        bgColorFiltered: function(newValue) {
+            if (hex.test(newValue))
+                this.backgroundColor = newValue;
+        },
     },
 })
 class SettingsPage extends Vue {
@@ -144,6 +148,8 @@ selectedTabOld = null;//todo: remove
     fontItalic = false;
     vertShift = 0;
     tabsScrollable = false;
+    textColorFiltered = '';
+    bgColorFiltered = '';
 
     webFonts = [];
     fonts = [];
@@ -227,7 +233,7 @@ selectedTabOld = null;//todo: remove
 
     get wallpaperOptions() {
         let result = [{label: 'Нет', value: ''}];        
-        for (let i = 0; i < 10; i++) {
+        for (let i = 1; i < 10; i++) {
             result.push({label: i, value: `paper${i}`});
         }
         return result;
@@ -261,6 +267,10 @@ selectedTabOld = null;//todo: remove
           '#323232',
           '#aaaaaa',
           '#00c0c0',
+          '#ebe2c9',
+          '#cfdc99',
+          '#478355',
+          '#909080',
         ]);
     }
 

client/components/Reader/SettingsPage/defPalette.js

@@ -0,0 +1,17 @@
+const defPalette = [
+    'rgb(255,204,204)', 'rgb(255,230,204)', 'rgb(255,255,204)', 'rgb(204,255,204)', 'rgb(204,255,230)',
+        'rgb(204,255,255)', 'rgb(204,230,255)', 'rgb(204,204,255)', 'rgb(230,204,255)', 'rgb(255,204,255)',
+    'rgb(255,153,153)', 'rgb(255,204,153)', 'rgb(255,255,153)', 'rgb(153,255,153)', 'rgb(153,255,204)',
+        'rgb(153,255,255)', 'rgb(153,204,255)', 'rgb(153,153,255)', 'rgb(204,153,255)', 'rgb(255,153,255)',
+    'rgb(255,102,102)', 'rgb(255,179,102)', 'rgb(255,255,102)', 'rgb(102,255,102)', 'rgb(102,255,179)',
+        'rgb(102,255,255)', 'rgb(102,179,255)', 'rgb(102,102,255)', 'rgb(179,102,255)', 'rgb(255,102,255)',
+    'rgb(255,51,51)', 'rgb(255,153,51)', 'rgb(255,255,51)', 'rgb(51,255,51)', 'rgb(51,255,153)', 'rgb(51,255,255)', 'rgb(51,153,255)', 'rgb(51,51,255)', 'rgb(153,51,255)', 'rgb(255,51,255)',
+    'rgb(255,0,0)', 'rgb(255,128,0)', 'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,255,128)', 'rgb(0,255,255)', 'rgb(0,128,255)', 'rgb(0,0,255)', 'rgb(128,0,255)', 'rgb(255,0,255)',
+    'rgb(245,0,0)', 'rgb(245,123,0)', 'rgb(245,245,0)', 'rgb(0,245,0)', 'rgb(0,245,123)', 'rgb(0,245,245)', 'rgb(0,123,245)', 'rgb(0,0,245)', 'rgb(123,0,245)', 'rgb(245,0,245)',
+    'rgb(214,0,0)', 'rgb(214,108,0)', 'rgb(214,214,0)', 'rgb(0,214,0)', 'rgb(0,214,108)', 'rgb(0,214,214)', 'rgb(0,108,214)', 'rgb(0,0,214)', 'rgb(108,0,214)', 'rgb(214,0,214)',
+    'rgb(163,0,0)', 'rgb(163,82,0)', 'rgb(163,163,0)', 'rgb(0,163,0)', 'rgb(0,163,82)', 'rgb(0,163,163)', 'rgb(0,82,163)', 'rgb(0,0,163)', 'rgb(82,0,163)', 'rgb(163,0,163)',
+    'rgb(92,0,0)', 'rgb(92,46,0)', 'rgb(92,92,0)', 'rgb(0,92,0)', 'rgb(0,92,46)', 'rgb(0,92,92)', 'rgb(0,46,92)', 'rgb(0,0,92)', 'rgb(46,0,92)', 'rgb(92,0,92)',
+    'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
+];
+
+export default defPalette;

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

@@ -22,7 +22,7 @@
             <q-select v-model="currentProfile" :options="currentProfileOptions"
                 style="width: 275px"
                 dropdown-icon="la la-angle-down la-sm"
-                outlined dense emit-value
+                outlined dense emit-value map-options
             />
         </div>
     </div>

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

@@ -6,7 +6,7 @@
         <div class="col-left-2">
             <q-input
                 outlined dense
-                v-model="textColor"
+                v-model="textColorFiltered"
                 :rules="['hexColor']"
                 class="no-mp"
                 style="max-width: 150px"
@@ -15,8 +15,11 @@
                 <template v-slot:prepend>
                     <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('text')">
                         <q-popup-proxy anchor="bottom middle" self="top middle">
-                            <div><q-color v-model="textColor" no-header default-view="palette" :palette="predefineTextColors"
-                            /></div>
+                            <div>
+                                <q-color v-model="textColor"
+                                    no-header default-view="palette" :palette="predefineTextColors"
+                                />
+                            </div>
                         </q-popup-proxy>
                     </q-icon>
                 </template>
@@ -34,7 +37,7 @@
         <div class="col-left-2">
             <q-input
                 outlined dense
-                v-model="backgroundColor"
+                v-model="bgColorFiltered"
                 :rules="['hexColor']"
                 class="no-mp"
                 style="max-width: 150px"
@@ -43,8 +46,9 @@
                 <template v-slot:prepend>
                     <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('bg')">
                         <q-popup-proxy anchor="bottom middle" self="top middle">
-                            <div><q-color v-model="backgroundColor" no-header default-view="palette" :palette="predefineBackgroundColors"
-                            /></div>
+                            <div>
+                                <q-color v-model="backgroundColor" no-header default-view="palette" :palette="predefineBackgroundColors"/>
+                            </div>
                         </q-popup-proxy>
                     </q-icon>
                 </template>
@@ -54,7 +58,7 @@
         <q-select class="col" v-model="wallpaper" :options="wallpaperOptions"
             style="max-width: 120px; margin-left: 30px"
             dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value
+            outlined dense emit-value map-options
         />
     </div>
 </div>