From 6de8eca7eab6697967255734562e469ea96fabe7 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 18 Feb 2020 12:46:18 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20quasar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/SettingsPage/SettingsPage.vue      |   2 +
 .../Reader/SettingsPage/include/ViewTab.inc   |  52 ++++-----
 client/components/share/NumInput.vue          | 101 ++++++++++++++++++
 3 files changed, 122 insertions(+), 33 deletions(-)
 create mode 100644 client/components/share/NumInput.vue

diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue
index d31d5957..031b7de9 100644
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/client/components/Reader/SettingsPage/SettingsPage.vue
@@ -81,6 +81,7 @@ import _ from 'lodash';
 
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
+import NumInput from '../../share/NumInput.vue';
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
 
@@ -89,6 +90,7 @@ const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 export default @Component({
     components: {
         Window,
+        NumInput,
     },
     data: function() {
         return Object.assign({}, rstore.settingDefaults);
diff --git a/client/components/Reader/SettingsPage/include/ViewTab.inc b/client/components/Reader/SettingsPage/include/ViewTab.inc
index ee150feb..bdd76052 100644
--- a/client/components/Reader/SettingsPage/include/ViewTab.inc
+++ b/client/components/Reader/SettingsPage/include/ViewTab.inc
@@ -80,44 +80,30 @@
         <q-select class="col" v-model="webFontName" :options="webFontsOptions"
             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>
+                однако есть шанс, что шрифт будет загружаться<br>
+                очень медленно или вовсе не загрузится
+            </q-tooltip>
+        </q-select>
     </div>
 </div>
 
+<div class="item row">
+    <div class="label-2">Размер</div>
+    <div class="col row">
+        <div class="col-left-2">
+            <NumInput v-model="fontSize" :min="5" :max="200"/>
+        </div>
 
-                <!--el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
-                    <div class="partHeader">Шрифт</div>
+        <div class="col q-pt-xs" style="text-align: right">
+            <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
+        </div>
+    </div>
+</div>
 
-                    <el-form-item label="Локальный/веб">
-                        <el-col :span="11">
-                            <el-select v-model="fontName" placeholder="Шрифт" :disabled="webFontName != ''">
-                                <el-option v-for="item in fonts"
-                                    :key="item.name"
-                                    :label="item.label"
-                                    :value="item.name">
-                                </el-option>
-                            </el-select>
-                        </el-col>
-                        <el-col :span="1">
-                            &nbsp;
-                        </el-col>
-                        <el-col :span="11">
-                            <el-tooltip :open-delay="500" effect="light" placement="top">
-                                <template slot="content">
-                                    Веб шрифты дают большое разнообразие,<br>
-                                    однако есть шанс, что шрифт будет загружаться<br>
-                                    очень медленно или вовсе не загрузится
-                                </template>
-                                <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-tooltip>
-                        </el-col>
-                    </el-form-item>
+<!--
                     <el-form-item label="Размер">
                         <el-col :span="17">
                             <el-input-number v-model="fontSize" :min="5" :max="200"></el-input-number>
diff --git a/client/components/share/NumInput.vue b/client/components/share/NumInput.vue
new file mode 100644
index 00000000..1f126e82
--- /dev/null
+++ b/client/components/share/NumInput.vue
@@ -0,0 +1,101 @@
+<template>
+    <q-input outlined dense
+        v-model="filteredValue"
+        input-style="text-align: center"
+        class="no-mp"
+        :class="(error ? 'error' : '')"
+    >
+        <template v-slot:prepend>
+            <q-icon name="la la-minus-circle" class="button" v-ripple @click="minus"/>
+        </template>
+        <template v-slot:append>
+            <q-icon name="la la-plus-circle" class="button" v-ripple @click="plus"/>
+        </template>
+    </q-input>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+const NumInputProps = Vue.extend({
+    props: {
+        value: Number,
+        min: { type: Number, default: -Number.MAX_VALUE },
+        max: { type: Number, default: Number.MAX_VALUE },
+        step: { type: Number, default: 1 },
+    }
+})
+
+export default @Component({
+    watch: {
+        filteredValue: function(newValue) {
+            if (this.validate(newValue)) {
+                this.error = false;
+                this.$emit('input', Number.parseFloat(newValue));
+            } else {
+                this.error = true;
+            }
+        },
+        value: function(newValue) {
+            this.filteredValue = newValue;
+        },
+    }
+})
+class NumInput extends NumInputProps {
+    filteredValue = 0;
+    error = false;
+
+    created() {
+        this.mask = '#'.repeat(this.max.toString().length);
+        this.filteredValue = this.value;
+    }
+
+    validate(value) {
+        let n = Number.parseFloat(value);
+        if (isNaN(n))
+            return false;
+        if (n < this.min)
+            return false;
+        if (n > this.max)
+            return false;
+        return true;
+    }
+
+    plus() {
+        const newValue = this.value + this.step;
+        if (this.validate(newValue))
+            this.filteredValue = newValue;
+    }
+
+    minus() {
+        const newValue = this.value - this.step;
+        if (this.validate(newValue))
+            this.filteredValue = newValue;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.no-mp {
+    margin: 0;
+    padding: 0;
+}
+
+.button {
+    font-size: 130%;
+    border-radius: 20px;
+    color: #616161;
+}
+
+.button:hover {
+    background-color: #efebe9;
+}
+
+.error {
+    background-color: #ffabab;
+    border-radius: 3px;
+}
+</style>
\ No newline at end of file