From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001
From: stephanchrst <stephanchrst@gmail.com>
Date: Tue, 10 May 2022 21:51:50 +0700
Subject: initial commit 2

---
 addons/mail/static/src/components/dialog/dialog.js | 119 +++++++++++++++++++++
 .../mail/static/src/components/dialog/dialog.scss  |  23 ++++
 .../mail/static/src/components/dialog/dialog.xml   |  22 ++++
 3 files changed, 164 insertions(+)
 create mode 100644 addons/mail/static/src/components/dialog/dialog.js
 create mode 100644 addons/mail/static/src/components/dialog/dialog.scss
 create mode 100644 addons/mail/static/src/components/dialog/dialog.xml

(limited to 'addons/mail/static/src/components/dialog')

diff --git a/addons/mail/static/src/components/dialog/dialog.js b/addons/mail/static/src/components/dialog/dialog.js
new file mode 100644
index 00000000..65902c9c
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.js
@@ -0,0 +1,119 @@
+odoo.define('mail/static/src/components/dialog/dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const patchMixin = require('web.patchMixin');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class Dialog extends Component {
+
+    /**
+     * @param {...any} args
+     */
+    constructor(...args) {
+        super(...args);
+        /**
+         * Reference to the component used inside this dialog.
+         */
+        this._componentRef = useRef('component');
+        this._onClickGlobal = this._onClickGlobal.bind(this);
+        this._onKeydownDocument = this._onKeydownDocument.bind(this);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const dialog = this.env.models['mail.dialog'].get(props.dialogLocalId);
+            return {
+                dialog: dialog ? dialog.__state : undefined,
+            };
+        });
+        this._constructor();
+    }
+
+    /**
+     * Allows patching constructor.
+     */
+    _constructor() {}
+
+    mounted() {
+        document.addEventListener('click', this._onClickGlobal, true);
+        document.addEventListener('keydown', this._onKeydownDocument);
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickGlobal, true);
+        document.removeEventListener('keydown', this._onKeydownDocument);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.dialog}
+     */
+    get dialog() {
+        return this.env.models['mail.dialog'].get(this.props.dialogLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on this dialog.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        ev.stopPropagation();
+    }
+
+    /**
+     * Closes the dialog when clicking outside.
+     * Does not work with attachment viewer because it takes the whole space.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickGlobal(ev) {
+        if (this._componentRef.el && this._componentRef.el.contains(ev.target)) {
+            return;
+        }
+        // TODO: this should be child logic (will crash if child doesn't have isCloseable!!)
+        // task-2092965
+        if (
+            this._componentRef.comp &&
+            this._componentRef.comp.isCloseable &&
+            !this._componentRef.comp.isCloseable()
+        ) {
+            return;
+        }
+        this.dialog.delete();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownDocument(ev) {
+        if (ev.key === 'Escape') {
+            this.dialog.delete();
+        }
+    }
+
+}
+
+Object.assign(Dialog, {
+    props: {
+        dialogLocalId: String,
+    },
+    template: 'mail.Dialog',
+});
+
+return patchMixin(Dialog);
+
+});
diff --git a/addons/mail/static/src/components/dialog/dialog.scss b/addons/mail/static/src/components/dialog/dialog.scss
new file mode 100644
index 00000000..fa17dac0
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.scss
@@ -0,0 +1,23 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Dialog {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $zindex-modal;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Dialog {
+    background-color: rgba(0, 0, 0, 0.7);
+}
diff --git a/addons/mail/static/src/components/dialog/dialog.xml b/addons/mail/static/src/components/dialog/dialog.xml
new file mode 100644
index 00000000..3c953dec
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Dialog" owl="1">
+        <div class="o_Dialog">
+            <t t-if="dialog">
+                <t t-if="dialog.record">
+                    <t
+                        t-component="{{ dialog.record['constructor'].name }}"
+                        class="o_Dialog_component"
+                        t-props="{ localId: dialog.record.localId }"
+                        t-ref="component"
+                    />
+                </t>
+                <t t-else="">
+                    <span>Only dialog linked to a record is currently supported!</span>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
-- 
cgit v1.2.3