deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Переход на quasar

Browse Source
This commit is contained in:
Book Pauk
2020-02-14 19:32:00 +07:00
parent 024b15b4f9
commit 551a707ee4
4 changed files with 112 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
client/components/Reader/SettingsPage/SettingsPage.vue
View File

@@ -4,6 +4,8 @@
Настройки
</template>
<q-color v-show="false" ref="defPalette"/>
<div class="col row">
<div class="full-height">
<q-tabs
@@ -81,6 +83,19 @@ import * as utils from '../../../share/utils';
import Window from '../../share/Window.vue';
import rstore from '../../../store/modules/reader';
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 @Component({
components: {
Window,
@@ -210,6 +225,14 @@ selectedTabOld = null;//todo: remove
return result;
}
get wallpaperOptions() {
let result = [{label: 'Нет', value: ''}];
for (let i = 0; i < 10; i++) {
result.push({label: i, value: `paper${i}`});
}
return result;
}
get currentProfile() {
return this.$store.state.reader.currentProfile;
}
@@ -231,18 +254,18 @@ selectedTabOld = null;//todo: remove
}
get predefineTextColors() {
return [
return defPalette.concat([
'#ffffff',
'#000000',
'#202020',
'#323232',
'#aaaaaa',
'#00c0c0',
];
]);
}
get predefineBackgroundColors() {
return [
return defPalette.concat([
'#ffffff',
'#000000',
'#202020',
@@ -253,7 +276,20 @@ selectedTabOld = null;//todo: remove
'#909080',
'#808080',
'#c8c8c8',
];
]);
}
colorPanStyle(type) {
let result = 'width: 30px; height: 30px; border: 1px solid black; border-radius: 4px;';
switch (type) {
case 'text':
result += `background-color: ${this.textColor};`
break;
case 'bg':
result += `background-color: ${this.backgroundColor};`
break;
}
return result;
}
needReload() {
@@ -478,7 +514,7 @@ selectedTabOld = null;//todo: remove
}
.label-2 {
width: 75px;
width: 100px;
}
.label-1, .label-2 {
@@ -506,6 +542,19 @@ selectedTabOld = null;//todo: remove
font-size: 120%;
color: blue;
}
.input {
max-width: 150px;
}
.no-mp {
margin: 0;
padding: 0;
}
.col-left-2 {
width: 150px;
}
</style>
<style scoped>

17
client/components/Reader/SettingsPage/include/ProfilesTab.inc
View File

@@ -99,20 +99,3 @@
</div>
</div>
</div>
<!--
<el-form-item label="">
<el-button style="width: 250px" @click="enterServerStorageKey">Ввести ключ доступа</el-button>
</el-form-item>
<el-form-item label="">
<el-button style="width: 250px" @click="generateServerStorageKey">Сгенерировать новый ключ</el-button>
</el-form-item>
<el-form-item label="">
</el-form-item>
</el-form>
</div>
</el-tab-pane-->

88
client/components/Reader/SettingsPage/include/ViewTab.inc
View File

@@ -2,49 +2,67 @@
<div class="item row">
<div class="label-2">Текст</div>
<div class="col">
<span style="position: relative; top: 20px;">Обои:</span>
<div class="col row">
<div class="col-left-2">
<q-input
outlined dense
v-model="textColor"
:rules="['hexColor']"
class="no-mp"
style="max-width: 150px"
:disabled="wallpaper != ''"
>
<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>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<span class="col" style="position: relative; top: 35px; left: 30px;">Обои:</span>
</div>
</div>
<!--el-tab-pane label="Вид">
<div class="q-mt-md"/>
<div class="item row">
<div class="label-2">Фон</div>
<div class="col row">
<div class="col-left-2">
<q-input
outlined dense
v-model="backgroundColor"
:rules="['hexColor']"
class="no-mp"
style="max-width: 150px"
:disabled="wallpaper != ''"
>
<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>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<el-form :model="form" size="small" label-width="120px" @submit.native.prevent>
<div class="partHeader">Цвет</div>
<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
/>
</div>
</div>
<el-form-item label="Текст">
<el-col :span="12">
<el-color-picker v-model="textColor" color-format="hex" :predefine="predefineTextColors"></el-color-picker>
<span class="color-picked"><b>{{ textColor }}</b></span>
</el-col>
<el-col :span="5">
</el-col>
</el-form-item>
<el-form-item label="Фон">
<el-col :span="12">
<el-color-picker v-model="backgroundColor" color-format="hex" :predefine="predefineBackgroundColors" :disabled="wallpaper != ''"></el-color-picker>
<span v-show="wallpaper == ''" class="color-picked"><b>{{ backgroundColor }}</b></span>
</el-col>
<el-col :span="11">
<el-select v-model="wallpaper">
<el-option label="Нет" value=""></el-option>
<el-option label="1" value="paper1"></el-option>
<el-option label="2" value="paper2"></el-option>
<el-option label="3" value="paper3"></el-option>
<el-option label="4" value="paper4"></el-option>
<el-option label="5" value="paper5"></el-option>
<el-option label="6" value="paper6"></el-option>
<el-option label="7" value="paper7"></el-option>
<el-option label="8" value="paper8"></el-option>
<el-option label="9" value="paper9"></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
<el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
<!--el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
<div class="partHeader">Шрифт</div>
<el-form-item label="Локальный/веб">

5
client/quasar.js
View File

@@ -27,6 +27,9 @@ 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';
import {QColor} from 'quasar/src/components/color';
import {QPopupProxy} from 'quasar/src/components/popup-proxy';
const components = {
//QLayout,
//QPageContainer, QPage,
@@ -48,6 +51,8 @@ const components = {
QTable, QTh, QTr, QTd,
QCheckbox,
QSelect,
QColor,
QPopupProxy,
};
//directives