Переход на quasar

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -4,7 +4,7 @@
             Настройки
         </template>
 
-        <q-color v-show="false" ref="defPalette"/>
+        <StdDialog ref="stdDialog"/>
 
         <div class="col row">
             <div class="full-height">
@@ -78,6 +78,7 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
+import StdDialog from '../../share/StdDialog.vue';
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
 import * as notify from '../../share/notify';
@@ -88,6 +89,7 @@ export default @Component({
     components: {
         Window,
         NumInput,
+        StdDialog,
     },
     data: function() {
         return Object.assign({}, rstore.settingDefaults);
@@ -166,6 +168,7 @@ class SettingsPage extends Vue {
     }
 
     mounted() {
+        this.stdDialog = this.$refs.stdDialog;
         this.$watch(
             '$refs.tabs.scrollable',
             (newValue) => {

client/components/share/StdDialog.vue

@@ -0,0 +1,104 @@
+<template>
+    <q-dialog v-model="dialog" @hide="onHide">
+        <slot></slot>
+
+        <div v-show="alertType" 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>
+                    <div v-html="caption"></div>
+                </div>
+                <div class="close-icon column justify-center items-center">
+                    <q-btn flat round dense v-close-popup>
+                        <q-icon name="la la-times" size="18px"></q-icon>
+                    </q-btn>
+                </div>
+            </div>
+
+            <div class="col q-mx-md">
+                <div v-html="message"></div>
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn class="q-px-md" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
+            </div>
+        </div>
+    </q-dialog>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+//import * as utils from '../../share/utils';
+
+export default @Component({
+})
+class StdDialog extends Vue {
+    caption = '';
+    message = '';
+    dialog = false;
+    alertType = false;
+
+    created() {
+    }
+
+    init(message, caption) {
+        this.caption = caption;
+        this.message = message;
+
+        this.ok = false;        
+        this.alertType = false;
+    }
+
+    onHide() {
+        if (this.hideTrigger) {
+            this.hideTrigger();
+            this.hideTrigger = null;
+        }
+    }
+
+    okClick() {
+        this.ok = true;
+    }
+
+    alert(message, caption) {
+        return new Promise((resolve) => {
+            this.init(message, caption);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.alertType = true;
+            this.dialog = true;
+        });
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.header {
+    height: 50px;
+}
+
+.caption {
+    font-size: 110%;
+    overflow: hidden;
+}
+
+.close-icon {
+    width: 50px;
+}
+
+.buttons {
+    height: 60px;
+}
+
+</style>

client/quasar.js

@@ -29,6 +29,7 @@ import {QCheckbox} from 'quasar/src/components/checkbox';
 import {QSelect} from 'quasar/src/components/select';
 import {QColor} from 'quasar/src/components/color';
 import {QPopupProxy} from 'quasar/src/components/popup-proxy';
+import {QDialog} from 'quasar/src/components/dialog';
 
 const components = {
     //QLayout,
@@ -53,12 +54,14 @@ const components = {
     QSelect,
     QColor,
     QPopupProxy,
+    QDialog,
 };
 
 //directives 
 import Ripple from 'quasar/src/directives/Ripple';
+import ClosePopup from 'quasar/src/directives/ClosePopup';
 
-const directives = {Ripple};
+const directives = {Ripple, ClosePopup};
 
 //plugins
 import AppFullscreen from 'quasar/src/plugins/AppFullscreen';