Переход на quasar

client/components/App.vue

@@ -257,6 +257,11 @@ body, html, #app {
     border: 2px solid yellow;
 }
 
+.icon-rotate {
+    vertical-align: middle;
+    animation: rotating 2s linear infinite;
+}
+
 @font-face {
   font-family: 'ReaderDefault';
   src: url('fonts/reader-default.woff') format('woff'),

client/components/Reader/TextPage/TextPage.vue

@@ -38,8 +38,9 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
-import {sleep} from '../../../share/utils';
 
+import * as notify from '../../share/notify';
+import {sleep} from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
 import rstore from '../../../store/modules/reader';
@@ -281,16 +282,11 @@ class TextPage extends Vue {
     async loadFonts() {
         this.fontsLoading = true;
 
-        let inst = null;
+        let close = null;
         (async() => {
             await sleep(500);
             if (this.fontsLoading)
-                inst = this.$notify({
+                close = notify.info(this, 'Загрузка шрифта &nbsp;<i class="material-icons-outlined icon-rotate" style="font-size: 150%">grade</i>');
-                  title: '',
-                  dangerouslyUseHTMLString: true,
-                  message: 'Загрузка шрифта &nbsp;<i class="el-icon-loading"></i>',
-                  duration: 0
-                });
         })();
 
         if (!this.fontsLoaded)
@@ -305,15 +301,12 @@ class TextPage extends Vue {
         try {
             await this.checkLoadedFonts();
         } catch (e) {
-            this.$notify.error({
+            notify.error(this, 'Некоторые шрифты не удалось загрузить', 'Ошибка загрузки');
-                title: 'Ошибка загрузки',
-                message: 'Некоторые шрифты не удалось загрузить'
-            });
         }
 
         this.fontsLoading = false;
-        if (inst)
+        if (close)
-            inst.close();
+            close();
     }
 
     getSettings() {

client/components/share/notify.js

@@ -1,6 +1,6 @@
 export function success(vue, message, caption) {
-    caption = (caption ? `<div style="font-size: 130%; color: black"><b>${caption}</b></div><br>` : '');
+    caption = (caption ? `<div style="font-size: 120%; color: black"><b>${caption}</b></div><br>` : '');
-    vue.$q.notify({
+    return vue.$q.notify({
         position: 'top-right',
         color: 'positive',
         textColor: 'white',
@@ -17,8 +17,8 @@ export function success(vue, message, caption) {
 }
 
 export function error(vue, message, caption) {
-    caption = (caption ? `<div style="font-size: 130%; color: yellow"><b>${caption}</b></div><br>` : '');
+    caption = (caption ? `<div style="font-size: 120%; color: yellow"><b>${caption}</b></div><br>` : '');
-    vue.$q.notify({
+    return vue.$q.notify({
         position: 'top-right',
         color: 'negative',
         textColor: 'white',
@@ -33,3 +33,21 @@ export function error(vue, message, caption) {
             </div>`
     });
 }
+
+export function info(vue, message, caption) {
+    caption = (caption ? `<div style="font-size: 120%; color: black"><b>${caption}</b></div><br>` : '');
+    return vue.$q.notify({
+        position: 'top-right',
+        color: 'info',
+        textColor: 'white',
+        icon: 'o_notifications',
+        actions: [{icon: 'o_close', color: 'black'}],
+        html: true,
+
+        message: 
+            `<div style="max-width: 350px;">
+                ${caption}
+                <div style="color: black; overflow-wrap: break-word; word-wrap: break-word;">${message}</div>
+            </div>`
+    });
+}