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

Глобальный рефакторинг SettingsPage (закончено)

Browse Source
This commit is contained in:
Book Pauk
2022-10-13 21:12:56 +07:00
parent e8d1817566
commit 9160b4ef90
9 changed files with 375 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,13 +106,6 @@ const componentOptions = {
}, },
deep: true, deep: true,
}, },
statusBarColor(newValue) {
this.statusBarColorFiltered = newValue;
},
statusBarColorFiltered(newValue) {
if (hex.test(newValue))
this.statusBarColor = newValue;
},
}, },
}; };
class SettingsPage { class SettingsPage {
@@ -135,8 +128,6 @@ class SettingsPage {
isSetsChanged = false; isSetsChanged = false;
statusBarColorFiltered = '';
created() { created() {
this.commit = this.$store.commit; this.commit = this.$store.commit;
@@ -159,9 +150,6 @@ class SettingsPage {
this.isSetsChanged = true; this.isSetsChanged = true;
try { try {
this.form = reactive(_.cloneDeep(this.settings)); this.form = reactive(_.cloneDeep(this.settings));
const form = this.form;
this.statusBarColorFiltered = form.statusBarColor;
} finally { } finally {
await this.$nextTick(); await this.$nextTick();
this.isSetsChanged = false; this.isSetsChanged = false;
@@ -172,10 +160,6 @@ class SettingsPage {
return this.$store.state.reader.settings; return this.$store.state.reader.settings;
} }
needReload() {
this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
}
close() { close() {
this.$emit('do-action', {action: 'settings'}); this.$emit('do-action', {action: 'settings'});
} }

4
client/components/Reader/SettingsPage/ViewTab/Color/Color.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="fit sets-tab-panel"> <div>
<!----------------------------------------------> <!---------------------------------------------->
<div class="hidden sets-part-header"> <div class="hidden sets-part-header">
Цвет Цвет
@@ -319,7 +319,7 @@ export default vueComponent(Color);
} }
.col-left { .col-left {
width: 150px; width: 145px;
} }
.no-mp { .no-mp {

4
client/components/Reader/SettingsPage/ViewTab/Font/Font.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="fit sets-tab-panel"> <div>
<!----------------------------------------------> <!---------------------------------------------->
<div class="hidden sets-part-header"> <div class="hidden sets-part-header">
Шрифт Шрифт
@@ -171,6 +171,6 @@ export default vueComponent(Font);
} }
.col-left { .col-left {
width: 150px; width: 145px;
} }
</style> </style>

4
client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="fit sets-tab-panel"> <div>
<!----------------------------------------------> <!---------------------------------------------->
<div class="hidden sets-part-header"> <div class="hidden sets-part-header">
Режим Режим
@@ -219,7 +219,7 @@ export default vueComponent(Mode);
} }
.col-left { .col-left {
width: 150px; width: 145px;
} }
.no-mp { .no-mp {

64
client/components/Reader/SettingsPage/ViewTab/Status.inc
View File

@@ -1,64 +0,0 @@
<!---------------------------------------------->
<div class="hidden part-header">Строка статуса</div>
<div class="item row">
<div class="label-2">Статус</div>
<div class="col row">
<q-checkbox v-model="showStatusBar" size="xs" label="Показывать" />
<q-checkbox v-show="showStatusBar" class="q-ml-sm" v-model="statusBarTop" size="xs" label="Вверху/внизу" />
</div>
</div>
<div v-show="showStatusBar" class="item row no-wrap">
<div class="label-2">Цвет</div>
<div class="col-left row">
<q-input class="col-left no-mp"
outlined dense
v-model="statusBarColorFiltered"
:rules="['hexColor']"
style="max-width: 150px"
:disable="statusBarColorAsText"
>
<template v-slot:prepend>
<q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('statusbar')">
<q-popup-proxy anchor="bottom middle" self="top middle">
<div>
<q-color v-model="statusBarColor"
no-header default-view="palette" :palette="predefineTextColors"
/>
</div>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="q-px-xs"/>
<q-checkbox v-model="statusBarColorAsText" size="xs" label="Как у текста"/>
</div>
<div v-show="showStatusBar" class="item row">
<div class="label-2">Прозрачность</div>
<div class="col row">
<NumInput class="col-left" v-model="statusBarColorAlpha" :min="0" :max="1" :digits="2" :step="0.1"/>
</div>
</div>
<div v-show="showStatusBar" class="item row">
<div class="label-2">Высота</div>
<div class="col row">
<NumInput class="col-left" v-model="statusBarHeight" :min="5" :max="100"/>
</div>
</div>
<div v-show="showStatusBar" class="item row">
<div class="label-2"></div>
<div class="col row">
<q-checkbox v-model="statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
По клику на автора-название в строке статуса<br>
открывать оригинал произведения в новой вкладке
</q-tooltip>
</q-checkbox>
</div>
</div>

153
client/components/Reader/SettingsPage/ViewTab/Status/Status.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div>
<!---------------------------------------------->
<div class="hidden sets-part-header">
Строка статуса
</div>
<div class="sets-item row">
<div class="sets-label label">
Статус
</div>
<div class="col row">
<q-checkbox v-model="form.showStatusBar" size="xs" label="Показывать" />
<q-checkbox v-show="form.showStatusBar" v-model="form.statusBarTop" class="q-ml-sm" size="xs" label="Вверху/внизу" />
</div>
</div>
<div v-show="form.showStatusBar" class="sets-item row no-wrap">
<div class="sets-label label">
Цвет
</div>
<div class="col-left row">
<q-input
v-model="statusBarColorFiltered"
class="col-left no-mp"
outlined dense
:rules="['hexColor']"
style="max-width: 150px"
:disable="form.statusBarColorAsText"
>
<template #prepend>
<q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.statusBarColor)">
<q-popup-proxy anchor="bottom middle" self="top middle">
<div>
<q-color
v-model="form.statusBarColor"
no-header default-view="palette" :palette="defPalette.predefineTextColors"
/>
</div>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
<div class="q-px-xs" />
<q-checkbox v-model="form.statusBarColorAsText" size="xs" label="Как у текста" />
</div>
<div v-show="form.showStatusBar" class="sets-item row">
<div class="sets-label label">
Прозрачность
</div>
<div class="col row">
<NumInput v-model="form.statusBarColorAlpha" class="col-left" :min="0" :max="1" :digits="2" :step="0.1" />
</div>
</div>
<div v-show="form.showStatusBar" class="sets-item row">
<div class="sets-label label">
Высота
</div>
<div class="col row">
<NumInput v-model="form.statusBarHeight" class="col-left" :min="5" :max="100" />
</div>
</div>
<div v-show="form.showStatusBar" class="sets-item row">
<div class="sets-label label"></div>
<div class="col row">
<q-checkbox v-model="form.statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
По клику на автора-название в строке статуса<br>
открывать оригинал произведения в новой вкладке
</q-tooltip>
</q-checkbox>
</div>
</div>
</div>
</template>
<script>
//-----------------------------------------------------------------------------
import vueComponent from '../../../../vueComponent.js';
import NumInput from '../../../../share/NumInput.vue';
import * as helper from '../helper';
import defPalette from '../defPalette';
const componentOptions = {
components: {
NumInput,
},
watch: {
form: {
handler() {
this.formChanged();//no await
},
deep: true,
},
statusBarColorFiltered(newValue) {
if (!this.isFormChanged && this.helper.isHexColor(newValue))
this.form.statusBarColor = newValue;
},
},
};
class Text {
_options = componentOptions;
_props = {
form: Object,
};
helper = helper;
defPalette = defPalette;
statusBarColorFiltered = '';
created() {
this.formChanged();//no await
}
mounted() {
}
async formChanged() {
this.isFormChanged = true;
try {
this.statusBarColorFiltered = this.form.statusBarColor;
} finally {
await this.$nextTick();
this.isFormChanged = false;
}
}
}
export default vueComponent(Text);
//-----------------------------------------------------------------------------
</script>
<style scoped>
.label {
width: 110px;
}
.col-left {
width: 145px;
}
.no-mp {
margin: 0;
padding: 0;
}
</style>

127
client/components/Reader/SettingsPage/ViewTab/Text.inc
View File

@@ -1,127 +0,0 @@
<!---------------------------------------------->
<div class="hidden part-header">Текст</div>
<div class="item row">
<div class="label-2">Интервал</div>
<div class="col row">
<NumInput class="col-left" v-model="lineInterval" :min="0" :max="200"/>
</div>
</div>
<div class="item row">
<div class="label-2">Параграф</div>
<div class="col row">
<NumInput class="col-left" v-model="p" :min="0" :max="2000"/>
</div>
</div>
<div class="item row">
<div class="label-2">Сдвиг</div>
<div class="col row">
<NumInput class="col-left" v-model="textVertShift" :min="-100" :max="100">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Сдвиг текста по вертикали в процентах от размера шрифта.<br>
Отрицательное значение сдвигает вверх, положительное -<br>
вниз.
</q-tooltip>
</NumInput>
</div>
</div>
<div class="item row">
<div class="label-2">Скроллинг</div>
<div class="col row">
<NumInput class="col-left" v-model="scrollingDelay" :min="1" :max="10000">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Замедление скроллинга в миллисекундах.<br>
Определяет время, за которое текст<br>
прокручивается на одну строку.
</q-tooltip>
</NumInput>
<div class="q-px-sm"/>
<q-select class="col" v-model="scrollingType" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
>
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Вид скроллинга: линейный,<br>
ускорение-замедление и пр.
</q-tooltip>
</q-select>
</div>
</div>
<div class="item row">
<div class="label-2">Выравнивание</div>
<div class="col row">
<q-checkbox v-model="textAlignJustify" size="xs" label="По ширине" />
<q-checkbox class="q-ml-sm" v-model="wordWrap" size="xs" label="Перенос по слогам" />
</div>
</div>
<div class="item row">
<div class="label-2"></div>
<div class="col-left column justify-center text-right">
Компактность
</div>
<div class="q-px-sm"/>
<NumInput class="col" v-model="compactTextPerc" :min="0" :max="100">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Степень компактности текста в процентах.<br>
Чем больше компактность, тем хуже выравнивание<br>
по правому краю.
</q-tooltip>
</NumInput>
</div>
<div class="item row">
<div class="label-2">Обработка</div>
<div class="col row">
<q-checkbox v-model="cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
</div>
</div>
<div class="item row">
<div class="label-2"></div>
<div class="col-left column justify-center text-right">
Добавлять пустые
</div>
<div class="q-px-sm"/>
<NumInput class="col" v-model="addEmptyParagraphs" :min="0" :max="2"/>
</div>
<div class="item row">
<div class="label-2">Изображения</div>
<div class="col row">
<q-checkbox v-model="showImages" size="xs" label="Показывать" />
<q-checkbox class="q-ml-sm" v-model="showInlineImagesInCenter" @input="needReload" :disable="!showImages" size="xs" label="Инлайн в центр">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Выносить все изображения в центр экрана
</q-tooltip>
</q-checkbox>
</div>
</div>
<div class="item row">
<div class="label-2"></div>
<div class="col row">
<q-checkbox v-model="imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!showImages || dualPageMode"/>
</div>
</div>
<div class="item row">
<div class="label-2"></div>
<div class="col-left column justify-center text-right">
Высота не более
</div>
<div class="q-px-sm"/>
<NumInput class="col" v-model="imageHeightLines" :min="1" :max="100" :disable="!showImages">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Определяет высоту изображения количеством строк.<br>
В случае превышения высоты, изображение будет<br>
уменьшено с сохранением пропорций так, чтобы<br>
помещаться в указанное количество строк.
</q-tooltip>
</NumInput>
</div>

210
client/components/Reader/SettingsPage/ViewTab/Text/Text.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div>
<!---------------------------------------------->
<div class="hidden sets-part-header">
Текст
</div>
<div class="sets-item row">
<div class="sets-label label">
Интервал
</div>
<div class="col row">
<NumInput v-model="form.lineInterval" class="col-left" :min="0" :max="200" />
</div>
</div>
<div class="sets-item row">
<div class="sets-label label">
Параграф
</div>
<div class="col row">
<NumInput v-model="form.p" class="col-left" :min="0" :max="2000" />
</div>
</div>
<div class="sets-item row">
<div class="sets-label label">
Сдвиг
</div>
<div class="col row">
<NumInput v-model="form.textVertShift" class="col-left" :min="-100" :max="100">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Сдвиг текста по вертикали в процентах от размера шрифта.<br>
Отрицательное значение сдвигает вверх, положительное -<br>
вниз.
</q-tooltip>
</NumInput>
</div>
</div>
<div class="sets-item row">
<div class="sets-label label">
Скроллинг
</div>
<div class="col row">
<NumInput v-model="form.scrollingDelay" class="col-left" :min="1" :max="10000">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Замедление скроллинга в миллисекундах.<br>
Определяет время, за которое текст<br>
прокручивается на одну строку.
</q-tooltip>
</NumInput>
<div class="q-px-sm" />
<q-select
v-model="form.scrollingType" class="col" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
>
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Вид скроллинга: линейный,<br>
ускорение-замедление и пр.
</q-tooltip>
</q-select>
</div>
</div>
<div class="sets-item row">
<div class="sets-label label">
Выравнивание
</div>
<div class="col row">
<q-checkbox v-model="form.textAlignJustify" size="xs" label="По ширине" />
<q-checkbox v-model="form.wordWrap" class="q-ml-sm" size="xs" label="Перенос по слогам" />
</div>
</div>
<div class="sets-item row">
<div class="sets-label label"></div>
<div class="col-left column justify-center text-right">
Компактность
</div>
<div class="q-px-sm" />
<NumInput v-model="form.compactTextPerc" class="col" :min="0" :max="100">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Степень компактности текста в процентах.<br>
Чем больше компактность, тем хуже выравнивание<br>
по правому краю.
</q-tooltip>
</NumInput>
</div>
<div class="sets-item row">
<div class="sets-label label">
Обработка
</div>
<div class="col row">
<q-checkbox v-model="form.cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
</div>
</div>
<div class="sets-item row">
<div class="sets-label label"></div>
<div class="col-left column justify-center text-right">
Добавлять пустые
</div>
<div class="q-px-sm" />
<NumInput v-model="form.addEmptyParagraphs" class="col" :min="0" :max="2" />
</div>
<div class="sets-item row">
<div class="sets-label label">
Изображения
</div>
<div class="col row">
<q-checkbox v-model="form.showImages" size="xs" label="Показывать" />
<q-checkbox v-model="form.showInlineImagesInCenter" class="q-ml-sm" :disable="!form.showImages" size="xs" label="Инлайн в центр" @update:modelValue="needReload">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Выносить все изображения в центр экрана
</q-tooltip>
</q-checkbox>
</div>
</div>
<div class="sets-item row">
<div class="sets-label label"></div>
<div class="col row">
<q-checkbox v-model="form.imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!form.showImages || form.dualPageMode" />
</div>
</div>
<div class="sets-item row">
<div class="sets-label label"></div>
<div class="col-left column justify-center text-right">
Высота не более
</div>
<div class="q-px-sm" />
<NumInput v-model="form.imageHeightLines" class="col" :min="1" :max="100" :disable="!form.showImages">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Определяет высоту изображения количеством строк.<br>
В случае превышения высоты, изображение будет<br>
уменьшено с сохранением пропорций так, чтобы<br>
помещаться в указанное количество строк.
</q-tooltip>
</NumInput>
</div>
</div>
</template>
<script>
//-----------------------------------------------------------------------------
import vueComponent from '../../../../vueComponent.js';
import NumInput from '../../../../share/NumInput.vue';
const componentOptions = {
components: {
NumInput,
},
watch: {
form: {
handler() {
this.formChanged();//no await
},
deep: true,
},
},
};
class Text {
_options = componentOptions;
_props = {
form: Object,
};
statusBarColorFiltered = '';
created() {
this.formChanged();//no await
}
mounted() {
}
async formChanged() {
this.isFormChanged = true;
try {
//
} finally {
await this.$nextTick();
this.isFormChanged = false;
}
}
needReload() {
this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
}
}
export default vueComponent(Text);
//-----------------------------------------------------------------------------
</script>
<style scoped>
.label {
width: 110px;
}
.col-left {
width: 145px;
}
</style>

14
client/components/Reader/SettingsPage/ViewTab/ViewTab.vue
View File

@@ -22,14 +22,8 @@
<Mode v-if="selectedTab == 'mode'" :form="form" /> <Mode v-if="selectedTab == 'mode'" :form="form" />
<Color v-if="selectedTab == 'color'" :form="form" /> <Color v-if="selectedTab == 'color'" :form="form" />
<Font v-if="selectedTab == 'font'" :form="form" /> <Font v-if="selectedTab == 'font'" :form="form" />
<Text v-if="selectedTab == 'text'" :form="form" />
<!--div v-if="selectedViewTab == 'text'"> <Status v-if="selectedTab == 'status'" :form="form" />
@@include('./ViewTab/Text.inc');
</div-->
<!--div v-if="selectedViewTab == 'status'">
@@include('./ViewTab/Status.inc');
</div-->
</div> </div>
</div> </div>
</template> </template>
@@ -41,12 +35,16 @@ import vueComponent from '../../../vueComponent.js';
import Mode from './Mode/Mode.vue'; import Mode from './Mode/Mode.vue';
import Color from './Color/Color.vue'; import Color from './Color/Color.vue';
import Font from './Font/Font.vue'; import Font from './Font/Font.vue';
import Text from './Text/Text.vue';
import Status from './Status/Status.vue';
const componentOptions = { const componentOptions = {
components: { components: {
Mode, Mode,
Color, Color,
Font, Font,
Text,
Status,
}, },
}; };
class ViewTab { class ViewTab {