Работа над SettingsPage

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -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>

client/element.js

@@ -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,
 };