Переход на quasar

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -14,7 +14,7 @@
         <div class="col-auto column justify-start items-center no-wrap overflow-hidden">
             <q-input ref="input" class="full-width q-px-xs" style="max-width: 700px" outlined dense bg-color="white" v-model="bookUrl" placeholder="URL книги">
                 <template v-slot:append>
-                    <q-btn round dense flat icon="done" @click="submitUrl"/>
+                    <q-btn round dense flat icon="o_done" @click="submitUrl"/>
                 </template>
             </q-input>
 

client/components/Reader/Reader.vue

@@ -2,12 +2,13 @@
     <q-page class="column no-wrap">
         <div class="header" v-show="toolBarActive">
             <div ref="buttons" class="row justify-between">
-                <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
-                    <el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
-                </el-tooltip>
+                <q-btn class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')">
+                    <q-icon name="o_arrow_back" size="30px"/>
+                    <q-tooltip :delay="1000" anchor="bottom right" content-style="font-size: 80%">Загрузить книгу</q-tooltip>
+                </q-btn>
 
                 <div>
-                    <el-tooltip v-show="showToolButton['undoAction']" content="Действие назад" :open-delay="1000" effect="light">
+                    <!--el-tooltip v-show="showToolButton['undoAction']" content="Действие назад" :open-delay="1000" effect="light">
                         <el-button ref="undoAction" class="tool-button" :class="buttonActiveClass('undoAction')" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
                     </el-tooltip>
                     <el-tooltip v-show="showToolButton['redoAction']" content="Действие вперед" :open-delay="1000" effect="light">
@@ -40,12 +41,17 @@
                     </el-tooltip>
                     <el-tooltip v-show="showToolButton['recentBooks']" content="Открыть недавние" :open-delay="1000" effect="light">
                         <el-button ref="recentBooks" class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')"><i class="el-icon-document"></i></el-button>
-                    </el-tooltip>
+                    </el-tooltip-->
                 </div>
 
-                <el-tooltip content="Настроить" :open-delay="1000" effect="light">
+                <q-btn class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')">
+                    <q-icon name="o_settings" size="30px"/>
+                    <q-tooltip :delay="1000" anchor="bottom left" content-style="font-size: 80%">Настроить</q-tooltip>
+                </q-btn>
+
+                <!--el-tooltip content="Настроить" :open-delay="1000" effect="light">
                     <el-button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>            
-                </el-tooltip>
+                </el-tooltip-->
             </div>
         </div>
 
@@ -732,7 +738,7 @@ class Reader extends Vue {
     buttonClick(button) {
         const activeClass = this.buttonActiveClass(button);
 
-        this.$refs[button].$el.blur();
+        //this.$refs[button].$el.blur();
 
         if (activeClass['tool-button-disabled'])
             return;
@@ -1159,7 +1165,7 @@ class Reader extends Vue {
 }
 
 .tool-button {
-    margin: 0 2px 0 2px;
+    margin: 0px 2px 0 2px;
     padding: 0;
     color: #3E843E;
     background-color: #E6EDF4;
@@ -1202,10 +1208,6 @@ class Reader extends Vue {
     background-color: gray;
 }
 
-i {
-    font-size: 200%;
-}
-
 .space {
     width: 10px;
     display: inline-block;

client/quasar.js

@@ -21,8 +21,8 @@ import {QSlider} from 'quasar/src/components/slider';
 //import {QTab} from 'quasar/src/components/tab';
 import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
 import {QSeparator} from 'quasar/src/components/separator';
-
 import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
+import {QTooltip} from 'quasar/src/components/tooltip';
       
 const components = {
     QLayout, QPageContainer, QPage, QDrawer,
@@ -38,6 +38,8 @@ const components = {
     QTabPanel,
     QSeparator,
     QList, QItem, QItemSection, QItemLabel,
+    QTooltip,
+
 };
 
 //directives 
@@ -56,7 +58,8 @@ const plugins = {
 Vue.use(Quasar, { config, components, directives, plugins });
 
 //icons
-import '@quasar/extras/material-icons/material-icons.css';
+//import '@quasar/extras/material-icons/material-icons.css';
+import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
 //import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
 //import fontawesomeV5 from 'quasar/icon-set/fontawesome-v5.js'
 //Quasar.iconSet.set(fontawesomeV5);