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-12 16:57:30 +07:00
parent 8cbaf60755
commit 78b98e77c6
3 changed files with 109 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/components/Reader/SettingsPage/PageMoveTab.inc
View File

@@ -1,28 +0,0 @@
<!---------------------------------------------->
<div class="part-header">Анимация</div>
<div class="item row">
<div class="label-5">Тип</div>
<q-select class="col-left" v-model="pageChangeAnimation" :options="pageChangeAnimationOptions"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
/>
</div>
<div class="item row">
<div class="label-5">Скорость</div>
<NumInput class="col-left" v-model="pageChangeAnimationSpeed" :min="0" :max="100" :disable="pageChangeAnimation == ''"/>
</div>
<!---------------------------------------------->
<div class="part-header">Другое</div>
<div class="item row">
<div class="label-5">Страница</div>
<q-checkbox v-model="keepLastToFirst" size="xs" label="Переносить последнюю строку">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Переносить последнюю строку страницы<br>
в начало следующей при листании
</q-tooltip>
</q-checkbox>
</div>

96
client/components/Reader/SettingsPage/PageMoveTab/PageMoveTab.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div class="fit sets-tab-panel">
<!---------------------------------------------->
<div class="sets-part-header">
Анимация
</div>
<div class="sets-item row">
<div class="sets-label label">
Тип
</div>
<q-select
v-model="form.pageChangeAnimation" class="col-left" :options="pageChangeAnimationOptions"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
/>
</div>
<div class="sets-item row">
<div class="sets-label label">
Скорость
</div>
<NumInput v-model="form.pageChangeAnimationSpeed" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
</div>
<!---------------------------------------------->
<div class="sets-part-header">
Другое
</div>
<div class="sets-item row">
<div class="sets-label label">
Страница
</div>
<q-checkbox v-model="form.keepLastToFirst" 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>
</template>
<script>
//-----------------------------------------------------------------------------
import vueComponent from '../../../vueComponent.js';
import NumInput from '../../../share/NumInput.vue';
const componentOptions = {
components: {
NumInput,
},
};
class PageMoveTab {
_options = componentOptions;
_props = {
form: Object,
};
created() {
}
mounted() {
}
get pageChangeAnimationOptions() {
let result = [
{label: 'Нет', value: ''},
{label: 'Вверх-вниз', value: 'downShift'},
(!this.form.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
{label: 'Протаивание', value: 'thaw'},
{label: 'Мерцание', value: 'blink'},
{label: 'Вращение', value: 'rotate'},
(this.form.wallpaper == '' && !this.form.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
];
result = result.filter(v => v);
return result;
}
}
export default vueComponent(PageMoveTab);
//-----------------------------------------------------------------------------
</script>
<style scoped>
.label {
width: 110px;
}
.col-left {
width: 150px;
}
</style>

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

@@ -87,9 +87,7 @@
<!-- Управление ------------------------------------------------------------------>
<KeysTab v-if="selectedTab == 'keys'" :form="form" />
<!-- Листание -------------------------------------------------------------------->
<!--div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
@@include('./PageMoveTab.inc');
</div-->
<PageMoveTab v-if="selectedTab == 'pagemove'" :form="form" />
<!-- Конвертирование ------------------------------------------------------------->
<!--div v-if="selectedTab == 'convert'" class="fit tab-panel">
@@include('./ConvertTab.inc');
@@ -121,7 +119,6 @@ import _ from 'lodash';
import * as utils from '../../../share/utils';
import * as cryptoUtils from '../../../share/cryptoUtils';
import Window from '../../share/Window.vue';
import NumInput from '../../share/NumInput.vue';
import wallpaperStorage from '../share/wallpaperStorage';
import readerApi from '../../../api/reader';
@@ -132,26 +129,27 @@ import defPalette from './defPalette';
import ProfilesTab from './ProfilesTab/ProfilesTab.vue';
import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
import KeysTab from './KeysTab/KeysTab.vue';
import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
const componentOptions = {
components: {
Window,
NumInput,
//pages
ProfilesTab,
ToolBarTab,
KeysTab,
PageMoveTab,
},
watch: {
settings: function() {
this.settingsChanged();//no await
},
form: {
handler(newValue) {
handler() {
if (this.inited && !this.setsChanged) {
this.commit('reader/setSettings', _.cloneDeep(newValue));
this.debouncedCommitSettings();
}
},
deep: true,
@@ -181,6 +179,9 @@ const componentOptions = {
if (newValue != '' && this.pageChangeAnimation == 'flip')
this.pageChangeAnimation = '';
},
/*this.$watch('form.dualPageMode', (newValue) => {
console.log(newValue);
})*/
dualPageMode(newValue) {
if (newValue && this.pageChangeAnimation == 'flip' || this.pageChangeAnimation == 'rightShift')
this.pageChangeAnimation = '';
@@ -240,6 +241,10 @@ class SettingsPage {
this.commit = this.$store.commit;
this.reader = this.$store.state.reader;
this.debouncedCommitSettings = _.debounce(() => {
this.commit('reader/setSettings', _.cloneDeep(this.form));
}, 100);
this.settingsChanged();//no await
}
@@ -333,22 +338,6 @@ class SettingsPage {
return result;
}
get pageChangeAnimationOptions() {
let result = [
{label: 'Нет', value: ''},
{label: 'Вверх-вниз', value: 'downShift'},
(!this.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
{label: 'Протаивание', value: 'thaw'},
{label: 'Мерцание', value: 'blink'},
{label: 'Вращение', value: 'rotate'},
(this.wallpaper == '' && !this.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
];
result = result.filter(v => v);
return result;
}
get predefineTextColors() {
return defPalette.concat([
'#ffffff',
@@ -539,7 +528,7 @@ export default vueComponent(SettingsPage);
width: 75px;
}
.label-2, .label-5 {
.label-2 {
width: 110px;
}
@@ -556,9 +545,6 @@ export default vueComponent(SettingsPage);
padding: 0;
}
.col-left {
width: 150px;
}
</style>
<style>