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 11:28:59 +07:00
parent 47e9dc03ba
commit fe04b8dea8
2 changed files with 43 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,10 +8,9 @@
<el-tabs type="border-card" tab-position="left" style="height: 100%;" v-model="selectedTab">
<el-tab-pane label="Вид">
<el-form :model="form" size="mini" label-width="100px">
<el-form-item>
<b>Цвет</b>
</el-form-item>
<el-form :model="form" size="small" label-width="100px">
<div class="partHeader">Цвет</div>
<el-form-item label="Текст">
<el-color-picker v-model="textColor" color-format="hex" :predefine="predefineTextColors"></el-color-picker>
<span class="color-picked"><b>{{ textColor }}</b></span>
@@ -24,21 +23,32 @@
</el-form>
<el-form :model="form" size="mini" label-width="100px">
<el-form-item>
<b>Шрифт</b>
<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-option label="По-умолчанию" value="ReaderDefault"></el-option>
<el-option label="BPG Arial" value="GEO_1"></el-option>
<el-option value="Avrile"></el-option>
<el-option value="Arimo"></el-option>
<el-option value="Roboto"></el-option>
<el-option value="OpenSans"></el-option>
<el-option value="Rubik"></el-option>
</el-select>
</el-col>
</el-form-item>
</el-form>
<el-form :model="form" size="mini" label-width="100px">
<el-form-item>
<b>Текст</b>
</el-form-item>
<div class="partHeader">Текст</div>
</el-form>
<el-form :model="form" size="mini" label-width="100px">
<el-form-item>
<b>Строка статуса</b>
</el-form-item>
<div class="partHeader">Строка статуса</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="Листание">
@@ -183,6 +193,7 @@ class SettingsPage extends Vue {
.el-form {
border-top: 2px solid #bbbbbb;
margin-bottom: 15px;
}
.el-form-item {
@@ -194,6 +205,11 @@ class SettingsPage extends Vue {
.color-picked {
margin-left: 10px;
position: relative;
top: -9px;
top: -11px;
}
.partHeader {
font-weight: bold;
margin-bottom: 5px;
}
</style>

16
client/element.js
View File

@@ -35,6 +35,9 @@ import './theme/tab-pane.css';
import ElTooltip from 'element-ui/lib/tooltip';
import './theme/tooltip.css';
import ElCol from 'element-ui/lib/col';
import './theme/col.css';
import ElContainer from 'element-ui/lib/container';
import './theme/container.css';
@@ -50,6 +53,15 @@ import './theme/main.css';
import ElInput from 'element-ui/lib/input';
import './theme/input.css';
import ElInputNumber from 'element-ui/lib/input-number';
import './theme/input-number.css';
import ElSelect from 'element-ui/lib/select';
import './theme/select.css';
import ElOption from 'element-ui/lib/option';
import './theme/option.css';
import ElTable from 'element-ui/lib/table';
import './theme/table.css';
@@ -82,8 +94,8 @@ import './theme/message-box.css';
const components = {
ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
ElContainer, ElAside, ElMain, ElHeader,
ElInput, ElTable, ElTableColumn,
ElCol, ElContainer, ElAside, ElMain, ElHeader,
ElInput, ElInputNumber, ElSelect, ElOption, ElTable, ElTableColumn,
ElProgress, ElSlider, ElForm, ElFormItem,
ElColorPicker,
};