Переход на quasar

2020-02-26 14:16:17 +07:00
parent b0da806f7a
commit 0bef307d77
8 changed files with 75 additions and 59 deletions
--- a/client/components/App.vue
+++ b/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) {
--- a/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
+++ b/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);
    }
 }
 //-----------------------------------------------------------------------------
--- a/client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue
+++ b/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('Копирование не удалось');
    }
 }
 //-----------------------------------------------------------------------------
--- a/client/components/Reader/Reader.vue
+++ b/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() {
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/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() {
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/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;
--- a/client/components/share/Notify.vue
+++ b/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>
--- a/client/components/share/notify.js
+++ b/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});
-}