Переход на quasar

client/components/Reader/Reader.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="column no-wrap">
+        <StdDialog ref="stdDialog"/>
         <div ref="header" class="header" v-show="toolBarActive">
             <div ref="buttons" class="row justify-between no-wrap">
                 <button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')" v-ripple>
@@ -158,6 +159,7 @@ import Component from 'vue-class-component';
 import _ from 'lodash';
 import {Buffer} from 'safe-buffer';
 
+import StdDialog from '../share/StdDialog.vue';
 import LoaderPage from './LoaderPage/LoaderPage.vue';
 import TextPage from './TextPage/TextPage.vue';
 import ProgressPage from './ProgressPage/ProgressPage.vue';
@@ -178,6 +180,7 @@ import {versionHistory} from './versionHistory';
 
 export default @Component({
     components: {
+        StdDialog,
         LoaderPage,
         TextPage,
         ProgressPage,
@@ -297,6 +300,7 @@ class Reader extends Vue {
     }
 
     mounted() {
+        this.stdDialog = this.$refs.stdDialog;
         this.updateHeaderMinWidth();
 
         (async() => {
@@ -1029,7 +1033,7 @@ class Reader extends Vue {
         } catch (e) {
             progress.hide(); this.progressActive = false;
             this.loaderActive = true;
-            this.$alert(e.message, 'Ошибка', {type: 'error'});
+            this.stdDialog.alert(e.message, 'Ошибка', {type: 'negative'});
         }
     }
 
@@ -1053,7 +1057,7 @@ class Reader extends Vue {
         } catch (e) {
             progress.hide(); this.progressActive = false;
             this.loaderActive = true;
-            this.$alert(e.message, 'Ошибка', {type: 'error'});
+            this.stdDialog.alert(e.message, 'Ошибка', {type: 'negative'});
         }
     }
 
@@ -1087,6 +1091,9 @@ class Reader extends Vue {
 
     keyHook(event) {
         if (this.$root.rootRoute() == '/reader') {
+            if (this.stdDialog.active)
+                return;
+
             let handled = false;
             if (!handled && this.helpActive)
                 handled = this.$refs.helpPage.keyHook(event);

client/components/share/StdDialog.vue

@@ -6,7 +6,7 @@
         <div v-show="type == 'alert'" class="column bg-white">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -29,7 +29,7 @@
         <div v-show="type == 'confirm'" class="column bg-white">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -53,7 +53,7 @@
         <div v-show="type == 'prompt'" class="column bg-white">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -98,6 +98,7 @@ class StdDialog extends Vue {
     type = '';
     inputValue = '';
     error = '';
+    iconColor = '';
 
     created() {
         if (this.$root.addKeyHook) {
@@ -105,7 +106,7 @@ class StdDialog extends Vue {
         }
     }
 
-    init(message, caption) {
+    init(message, caption, opts) {
         this.caption = caption;
         this.message = message;
 
@@ -114,6 +115,11 @@ class StdDialog extends Vue {
         this.inputValidator = null;
         this.inputValue = '';
         this.error = '';
+
+        this.iconColor = 'text-warning';
+        if (opts && opts.type) {
+            this.iconColor = `text-${opts.type}`;
+        }
     }
 
     onHide() {
@@ -156,9 +162,9 @@ class StdDialog extends Vue {
         this.$refs.dialog.hide();
     }
 
-    alert(message, caption) {
+    alert(message, caption, opts) {
         return new Promise((resolve) => {
-            this.init(message, caption);
+            this.init(message, caption, opts);
 
             this.hideTrigger = () => {
                 if (this.ok) {
@@ -173,9 +179,9 @@ class StdDialog extends Vue {
         });
     }
 
-    confirm(message, caption) {
+    confirm(message, caption, opts) {
         return new Promise((resolve) => {
-            this.init(message, caption);
+            this.init(message, caption, opts);
 
             this.hideTrigger = () => {
                 if (this.ok) {
@@ -193,7 +199,7 @@ class StdDialog extends Vue {
     prompt(message, caption, opts) {
         return new Promise((resolve) => {
             this.enableValidator = false;
-            this.init(message, caption);
+            this.init(message, caption, opts);
 
             this.hideTrigger = () => {
                 if (this.ok) {