From e7c50b50edfd9c92f3b32924e549762700582fa5 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 25 Feb 2020 17:37:41 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20quasar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/SettingsPage/SettingsPage.vue      |   5 +-
 client/components/share/StdDialog.vue         | 104 ++++++++++++++++++
 client/quasar.js                              |   5 +-
 3 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 client/components/share/StdDialog.vue

diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue
index ecf7d28b..918e2633 100644
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/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) => {
diff --git a/client/components/share/StdDialog.vue b/client/components/share/StdDialog.vue
new file mode 100644
index 00000000..8bbeca98
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/client/quasar.js b/client/quasar.js
index d074f3e6..5cd0c07f 100644
--- a/client/quasar.js
+++ b/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';