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
2019-01-28 12:36:50 +07:00
parent c1f7aee77e
commit fbb0fa91b6
3 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
<el-tabs type="border-card" tab-position="left" style="height: 100%;" v-model="selectedTab">
<el-tab-pane label="Вид">
<el-form :model="form" size="small" label-width="100px">
<el-form :model="form" size="small" label-width="120px">
<div class="partHeader">Цвет</div>
<el-form-item label="Текст">
@@ -22,15 +22,12 @@
</el-form-item>
</el-form>
<el-form :model="form" size="mini" label-width="100px">
<el-form :model="form" size="mini" label-width="120px">
<div class="partHeader">Шрифт</div>
<el-form-item label="Размер/наз.">
<el-col :span="11">
<el-input-number v-model="fontSize" :min="5" :max="100"></el-input-number>
</el-col>
<el-col :span="11">
<el-select v-model="fontName" placeholder="Шрифт">
<el-form-item label="Локальный/веб">
<el-col :span="10">
<el-select v-model="fontName" placeholder="Шрифт" :disabled="webFontName != ''">
<el-option label="По-умолчанию" value="ReaderDefault"></el-option>
<el-option label="BPG Arial" value="GEO_1"></el-option>
<el-option value="Avrile"></el-option>
@@ -40,6 +37,32 @@
<el-option value="Rubik"></el-option>
</el-select>
</el-col>
<el-col :span="1">
&nbsp;
</el-col>
<el-col :span="10">
<el-select v-model="webFontName">
<el-option label="Нет" value=""></el-option>
<el-option v-for="item in webFonts"
:key="item.name"
:value="item.name">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="Размер">
<el-col :span="10">
<el-input-number v-model="fontSize" :min="5" :max="100"></el-input-number>
</el-col>
</el-form-item>
<el-form-item label="Стиль">
<el-col :span="11">
<el-checkbox v-model="fontBold">Жирный</el-checkbox>
</el-col>
<el-col :span="11">
<el-checkbox v-model="fontItalic">Курсив</el-checkbox>
</el-col>
</el-form-item>
</el-form>
@@ -69,6 +92,7 @@ import Vue from 'vue';
import Component from 'vue-class-component';
import Window from '../../share/Window.vue';
import reader from '../../../store/modules/reader';
const propsData = {
textColor: '#000000',
@@ -77,8 +101,7 @@ const propsData = {
fontWeight: '',// 'bold'
fontSize: 20,// px
fontName: 'ReaderDefault',
fontCssUrl: '',
fontVertShift: 0,
webFontName: '',
lineInterval: 3,// px, межстрочный интервал
textAlignJustify: true,// выравнивание по ширине
@@ -109,11 +132,21 @@ export default @Component({
form: function(newValue) {
this.commit('reader/setSettings', newValue);
},
fontBold: function(newValue) {
this.fontWeight = (newValue ? 'bold' : '');
},
fontItalic: function(newValue) {
this.fontStyle = (newValue ? 'italic' : '');
},
},
})
class SettingsPage extends Vue {
selectedTab = null;
form = {};
fontBold = false;
fontItalic = false;
webFonts = [];
created() {
this.commit = this.$store.commit;
@@ -126,6 +159,9 @@ class SettingsPage extends Vue {
this.form = Object.assign({}, this.form, {[prop]: newValue})
});
}
this.fontBold = (this.fontWeight == 'bold');
this.fontItalic = (this.fontStyle == 'italic');
this.webFonts = reader.webFonts;
}
get settings() {
@@ -193,13 +229,13 @@ class SettingsPage extends Vue {
.el-form {
border-top: 2px solid #bbbbbb;
margin-bottom: 15px;
margin-bottom: 5px;
}
.el-form-item {
padding: 0;
margin: 0;
position: relative;
margin-bottom: 5px;
}
.color-picked {

12
client/components/Reader/TextPage/TextPage.vue
View File

@@ -32,7 +32,7 @@ import {sleep} from '../../../share/utils';
import bookManager from '../share/bookManager';
import DrawHelper from './DrawHelper';
import reader from '../../../store/modules/reader';
const minLayoutWidth = 100;
export default @Component({
@@ -236,8 +236,14 @@ class TextPage extends Vue {
this.fontWeight = settings.fontWeight;// 'bold'
this.fontSize = settings.fontSize;// px
this.fontName = settings.fontName;
this.fontCssUrl = settings.fontCssUrl;
this.fontVertShift = settings.fontVertShift;
const wf = settings.webFontName;
const i = _.findIndex(reader.webFonts, ['name', wf]);
if (wf && i >= 0) {
this.fontName = wf;
this.fontCssUrl = reader.webFonts[i].css;
this.fontVertShift = reader.webFonts[i].fontVertShift;
}
this.lineInterval = settings.lineInterval;// px, межстрочный интервал
this.textAlignJustify = settings.textAlignJustify;// выравнивание по ширине