improve modal

packages/app/src/layouts/components/modals/index.jsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Modal as AntdModal } from "antd"
 import classnames from "classnames"
 import useLayoutInterface from "hooks/useLayoutInterface"
 import { DOMWindow } from "components/RenderWindow"
@@ -10,6 +11,8 @@ class Modal extends React.Component {
         visible: false,
     }
 
+    contentRef = React.createRef()
+
     escTimeout = null
 
     componentDidMount() {
@@ -52,8 +55,18 @@ class Modal extends React.Component {
     }
 
     handleClickOutside = (e) => {
-        if (e.target === e.currentTarget) {
+        if (this.contentRef.current && !this.contentRef.current.contains(e.target)) {
-            this.close()
+            if (this.props.confirmOnOutsideClick) {
+                return AntdModal.confirm({
+                    title: this.props.confirmOnClickTitle ?? "Are you sure?",
+                    content: this.props.confirmOnClickContent ?? "Are you sure you want to close this window?",
+                    onOk: () => {
+                        this.close()
+                    }
+                })
+            }
+
+            return this.close()
         }
     }
 
@@ -62,7 +75,8 @@ class Modal extends React.Component {
             className={classnames(
                 "app_modal_wrapper",
                 {
-                    ["active"]: this.state.visible
+                    ["active"]: this.state.visible,
+                    ["framed"]: this.props.framed,
                 }
             )}
             onTouchEnd={this.handleClickOutside}
@@ -70,6 +84,7 @@ class Modal extends React.Component {
         >
             <div
                 className="app_modal_content"
+                ref={this.contentRef}
                 onTouchEnd={this.handleClickOutside}
                 onMouseDown={this.handleClickOutside}
             >
@@ -90,6 +105,12 @@ export default () => {
         id,
         render,
         {
+            framed = true,
+
+            confirmOnOutsideClick = false,
+            confirmOnClickTitle,
+            confirmOnClickContent,
+
             className,
             props,
         } = {}
@@ -105,6 +126,10 @@ export default () => {
             onClose={() => {
                 win.destroy()
             }}
+            framed={framed}
+            confirmOnOutsideClick={confirmOnOutsideClick}
+            confirmOnClickTitle={confirmOnClickTitle}
+            confirmOnClickContent={confirmOnClickContent}
         >
             {
                 React.createElement(render, props)

packages/app/src/layouts/components/modals/index.less

@@ -0,0 +1,79 @@
+@import "theme/vars.less";
+
+.app_modal_wrapper {
+    box-sizing: border-box;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+
+    transition: all 150ms ease-in-out;
+
+    &.framed {
+        .app_modal_content {
+            display: flex;
+            flex-direction: column;
+
+            padding: 30px;
+
+            background-color: var(--background-color-accent);
+
+            border-radius: 12px;
+        }
+    }
+
+    &.active {
+        background-color: rgba(var(--bg_color_6), 0.5);
+
+        backdrop-filter: blur(@modal_background_blur);
+        -webkit-backdrop-filter: blur(@modal_background_blur);
+
+        .app_modal_content {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .app_modal_content {
+        box-sizing: border-box;
+
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+
+        opacity: 0;
+        transform: translateY(100px);
+
+        height: fit-content;
+        width: 40vw;
+
+        max-width: 600px;
+
+        transition: all 150ms ease-in-out;
+
+        // fixments
+        .postCreator {
+            box-shadow: @card-shadow;
+            -webkit-box-shadow: @card-shadow;
+            -moz-box-shadow: @card-shadow;
+        }
+
+        .searcher {
+            box-sizing: border-box;
+
+            width: 48vw;
+            height: 80vh;
+        }
+    }
+}