improve modal window rendering params handlers

packages/app/src/cores/windows/windows.core.jsx

@@ -171,17 +171,14 @@ export default class WindowManager extends Core {
 		}
 
 		// remove the element from the DOM
-		this.console.debug(`Removing element from DOM for window ${id}`)
 		win.node.unmount()
 		this.root.removeChild(element)
 
 		// remove the window from the list
-		this.console.debug(`Removing window from list for window ${id}`)
 		this.windows = this.windows.filter((node) => {
 			return node.id !== id
 		})
 
-		this.console.debug(`Window ${id} closed`)
 		return true
 	}
 }

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

@@ -93,19 +93,23 @@ export default () => {
 		app.cores.window_mng.render(
 			id,
 			<Modal
-				onClose={() => {
-					app.cores.window_mng.close(id)
-				}}
-				framed={framed}
 				className={className}
+				framed={framed}
 				confirmOnOutsideClick={confirmOnOutsideClick}
 				confirmOnClickTitle={confirmOnClickTitle}
 				confirmOnClickContent={confirmOnClickContent}
+				onClose={() => {
+					app.cores.window_mng.close(id)
+				}}
 			>
 				{React.isValidElement(render)
 					? React.cloneElement(render, props)
 					: React.createElement(render, props)}
 			</Modal>,
+			{
+				useFrame: false,
+				closeOnClickOutside: false,
+			},
 		)
 	}
 

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

@@ -7,104 +7,106 @@ import { Icons } from "@components/Icons"
 import "./index.less"
 
 class Modal extends React.Component {
-    state = {
-        visible: false,
-    }
+	state = {
+		visible: false,
+	}
 
-    contentRef = React.createRef()
+	contentRef = React.createRef()
 
-    escTimeout = null
+	escTimeout = null
 
-    componentDidMount() {
-        setTimeout(() => {
-            this.setState({
-                visible: true,
-            })
-        }, 10)
+	componentDidMount() {
+		setTimeout(() => {
+			this.setState({
+				visible: true,
+			})
+		}, 10)
 
-        document.addEventListener("keydown", this.handleEsc, false)
-    }
+		document.addEventListener("keydown", this.handleEsc, false)
+	}
 
-    componentWillUnmount() {
-        document.removeEventListener("keydown", this.handleEsc, false)
-    }
+	componentWillUnmount() {
+		document.removeEventListener("keydown", this.handleEsc, false)
+	}
 
-    close = () => {
-        this.setState({
-            visible: false,
-        })
+	close = () => {
+		this.setState({
+			visible: false,
+		})
 
-        setTimeout(() => {
-            if (typeof this.props.onClose === "function") {
-                this.props.onClose()
-            }
-        }, 250)
-    }
+		setTimeout(() => {
+			if (typeof this.props.onClose === "function") {
+				this.props.onClose()
+			}
+		}, 250)
+	}
 
-    handleEsc = (e) => {
-        if (e.key === "Escape") {
-            if (this.escTimeout !== null) {
-                clearTimeout(this.escTimeout)
-                return this.close()
-            }
+	handleEsc = (e) => {
+		if (e.key === "Escape") {
+			if (this.escTimeout !== null) {
+				clearTimeout(this.escTimeout)
+				return this.close()
+			}
 
-            this.escTimeout = setTimeout(() => {
-                this.escTimeout = null
-            }, 250)
-        }
-    }
+			this.escTimeout = setTimeout(() => {
+				this.escTimeout = null
+			}, 250)
+		}
+	}
 
-    handleClickOutside = (e) => {
-        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()
-                }
-            })
-        }
+	handleClickOutside = (e) => {
+		console.log(e)
+		// check if event click is outside of content of the modal
+		if (this.contentRef.current.contains(e.target)) {
+			return false
+		}
 
-        return 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()
+				},
+			})
+		}
 
-    render() {
-        return <div
-            className={classnames(
-                "app_modal_wrapper",
-                {
-                    ["active"]: this.state.visible,
-                    ["framed"]: this.props.framed,
-                }
-            )}
-        >
-            <div
-                id="mask_trigger"
-                onTouchEnd={this.handleClickOutside}
-                onMouseDown={this.handleClickOutside}
-            />
-            <div
-                className="app_modal_content"
-                ref={this.contentRef}
-                style={this.props.frameContentStyle}
-            >
-                {
-                    this.props.includeCloseButton && <div
-                        className="app_modal_close"
-                        onClick={this.close}
-                    >
-                        <Icons.MdClose />
-                    </div>
-                }
+		return this.close()
+	}
 
-                {
-                    React.cloneElement(this.props.children, {
-                        close: this.close
-                    })
-                }
-            </div>
-        </div>
-    }
+	render() {
+		return (
+			<div
+				className={classnames("app_modal_wrapper", {
+					["active"]: this.state.visible,
+					["framed"]: this.props.framed,
+				})}
+			>
+				<div
+					id="mask_trigger"
+					onTouchEnd={this.handleClickOutside}
+					onMouseDown={this.handleClickOutside}
+				/>
+				<div
+					className="app_modal_content"
+					ref={this.contentRef}
+					style={this.props.frameContentStyle}
+				>
+					{this.props.includeCloseButton && (
+						<div className="app_modal_close" onClick={this.close}>
+							<Icons.MdClose />
+						</div>
+					)}
+
+					{React.cloneElement(this.props.children, {
+						close: this.close,
+					})}
+				</div>
+			</div>
+		)
+	}
 }
 
 export default Modal

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

@@ -23,6 +23,8 @@
 	#mask_trigger {
 		position: fixed;
 
+		z-index: 450;
+
 		top: 0;
 		left: 0;
 
@@ -60,6 +62,8 @@
 	.app_modal_content {
 		position: relative;
 
+		z-index: 500;
+
 		box-sizing: border-box;
 
 		display: flex;
@@ -109,13 +113,6 @@
 			-webkit-box-shadow: @card-shadow;
 			-moz-box-shadow: @card-shadow;
 		}
-
-		.searcher {
-			box-sizing: border-box;
-
-			width: 48vw;
-			height: 80vh;
-		}
 	}
 }
 

packages/app/src/statics/methods.jsx

@@ -1,6 +1,10 @@
 import { Lightbox } from "react-modal-image"
-import { NotificationsCenter, PostCreator, Searcher } from "@components"
+
+import NotificationsCenter from "@components/NotificationsCenter"
+import PostCreator from "@components/PostCreator"
+import Searcher from "@components/Searcher"
 import AppsMenu from "@components/AppsMenu"
+
 import config from "@config"
 import deleteInternalStorage from "@utils/deleteInternalStorage"