Переход на quasar

client/components/App.vue

@@ -52,6 +52,7 @@
         </q-page-container>
     </q-layout-->
     <div class="fit row">
+        <Notify ref="notify"/>
         <StdDialog ref="stdDialog"/>
         <keep-alive>
             <router-view class="col"></router-view>
@@ -63,11 +64,13 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
+import Notify from './share/Notify.vue';
 import StdDialog from './share/StdDialog.vue';
 import * as utils from '../share/utils';
 
 export default @Component({
     components: {
+        Notify,
         StdDialog,
     },
     watch: {
@@ -140,7 +143,9 @@ class App extends Vue {
     }
 
     mounted() {
+        this.$root.notify = this.$refs.notify;
         this.$root.stdDialog = this.$refs.stdDialog;
+
         this.dispatch('config/loadConfig');
         this.$watch('apiError', function(newError) {
             if (newError) {

client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -45,7 +45,6 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 
 import {copyTextToClipboard} from '../../../../share/utils';
-import * as notify from '../../../share/notify';
 
 export default @Component({
 })
@@ -61,9 +60,9 @@ class CommonHelpPage extends Vue {
         const result = await copyTextToClipboard(text);
         const msg = (result ? mes : 'Копирование не удалось');
         if (result)
-            notify.success(this, msg);
+            this.$root.notify.success(msg);
         else
-            notify.error(this, msg);
+            this.$root.notify.error(msg);
     }
 }
 //-----------------------------------------------------------------------------

client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue

@@ -56,7 +56,6 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {copyTextToClipboard} from '../../../../share/utils';
-import * as notify from '../../../share/notify';
 
 export default @Component({
 })
@@ -77,9 +76,9 @@ class DonateHelpPage extends Vue {
     async copyAddress(address, prefix) {
         const result = await copyTextToClipboard(address);
         if (result)
-            notify.success(this, `${prefix} ${address} успешно скопирован в буфер обмена`);
+            this.$root.notify.success(`${prefix} ${address} успешно скопирован в буфер обмена`);
         else
-            notify.error(this, 'Копирование не удалось');
+            this.$root.notify.error('Копирование не удалось');
     }
 }
 //-----------------------------------------------------------------------------

client/components/Reader/Reader.vue

@@ -432,9 +432,9 @@ class Reader extends Vue {
     async copyLink(link) {
         const result = await utils.copyTextToClipboard(link);
         if (result)
-            this.$notify.success({message: `Ссылка ${link} успешно скопирована в буфер обмена`});
+            this.$root.notify.success(`Ссылка ${link} успешно скопирована в буфер обмена`);
         else
-            this.$notify.error({message: 'Копирование не удалось'});
+            this.$root.notify.error('Копирование не удалось');
     }
 
     openVersionHistory() {

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -78,7 +78,6 @@ import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
-import * as notify from '../../share/notify';
 
 const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
@@ -332,11 +331,11 @@ class SettingsPage extends Vue {
     }
 
     needReload() {
-        notify.warning(this, 'Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
+        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
     }
 
     needTextReload() {
-        notify.warning(this, 'Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект');
+        this.$root.notify.warning('Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект');
     }
 
     close() {
@@ -443,9 +442,9 @@ class SettingsPage extends Vue {
         const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
         const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
         if (result)
-            notify.success(this, msg);
+            this.$root.notify.success(msg);
         else
-            notify.error(this, msg);
+            this.$root.notify.error(msg);
     }
 
     async showServerStorageKey() {

client/components/Reader/TextPage/TextPage.vue

@@ -39,7 +39,6 @@ import Component from 'vue-class-component';
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
 
-import * as notify from '../../share/notify';
 import {sleep} from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
@@ -287,7 +286,7 @@ class TextPage extends Vue {
         (async() => {
             await sleep(500);
             if (this.fontsLoading)
-                close = notify.info(this, 'Загрузка шрифта &nbsp;<i class="la la-snowflake icon-rotate" style="font-size: 150%"></i>');
+                close = this.$root.notify.info('Загрузка шрифта &nbsp;<i class="la la-snowflake icon-rotate" style="font-size: 150%"></i>');
         })();
 
         if (!this.fontsLoaded)
@@ -302,7 +301,7 @@ class TextPage extends Vue {
         try {
             await this.checkLoadedFonts();
         } catch (e) {
-            notify.error(this, 'Некоторые шрифты не удалось загрузить', 'Ошибка загрузки');
+            this.$root.notify.error('Некоторые шрифты не удалось загрузить', 'Ошибка загрузки');
         }
 
         this.fontsLoading = false;

client/components/share/Notify.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="hidden"></div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+export default @Component({
+})
+class Notify extends Vue {
+    notify(opts) {
+        let {
+            caption = null,
+            captionColor = 'black',
+            color = 'positive',
+            icon = '',
+            iconColor = 'white',
+            message = '',
+            messageColor = 'black',
+        } = opts;
+
+        caption = (caption ? `<div style="font-size: 120%; color: ${captionColor}"><b>${caption}</b></div><br>` : '');
+        return this.$q.notify({
+            position: 'top-right',
+            color,
+            textColor: iconColor,
+            icon,
+            actions: [{icon: 'la la-times notify-button-icon', color: 'black'}],
+            html: true,
+
+            message: 
+                `<div style="max-width: 350px;">
+                    ${caption}
+                    <div style="color: ${messageColor}; overflow-wrap: break-word; word-wrap: break-word;">${message}</div>
+                </div>`
+        });
+    }
+
+    success(message, caption) {
+        this.notify({color: 'positive', icon: 'la la-check-circle', message, caption});
+    }
+
+    warning(message, caption) {
+        this.notify({color: 'warning', icon: 'la la-exclamation-circle', message, caption});
+    }
+
+    error(message, caption) {
+        this.notify({color: 'negative', icon: 'la la-exclamation-circle', messageColor: 'yellow', message, caption});
+    }
+
+    info(message, caption) {
+        this.notify({color: 'info', icon: 'la la-bell', message, caption});
+    }
+}
+//-----------------------------------------------------------------------------
+</script>

client/components/share/notify.js

@@ -1,43 +0,0 @@
-export function notify(vue, opts) {
-    let {
-        caption = null,
-        captionColor = 'black',
-        color = 'positive',
-        icon = '',
-        iconColor = 'white',
-        message = '',
-        messageColor = 'black',
-    } = opts;
-
-    caption = (caption ? `<div style="font-size: 120%; color: ${captionColor}"><b>${caption}</b></div><br>` : '');
-    return vue.$q.notify({
-        position: 'top-right',
-        color,
-        textColor: iconColor,
-        icon,
-        actions: [{icon: 'la la-times notify-button-icon', color: 'black'}],
-        html: true,
-
-        message: 
-            `<div style="max-width: 350px;">
-                ${caption}
-                <div style="color: ${messageColor}; overflow-wrap: break-word; word-wrap: break-word;">${message}</div>
-            </div>`
-    });
-}
-
-export function success(vue, message, caption) {
-    notify(vue, {color: 'positive', icon: 'la la-check-circle', message, caption});
-}
-
-export function warning(vue, message, caption) {
-    notify(vue, {color: 'warning', icon: 'la la-exclamation-circle', message, caption});
-}
-
-export function error(vue, message, caption) {
-    notify(vue, {color: 'negative', icon: 'la la-exclamation-circle', messageColor: 'yellow', message, caption});
-}
-
-export function info(vue, message, caption) {
-    notify(vue, {color: 'info', icon: 'la la-bell', message, caption});
-}