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

@@ -55,13 +55,21 @@ class Modal extends React.Component {
 	}
 
 	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
+		}
+
 		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?",
+				content:
+					this.props.confirmOnClickContent ??
+					"Are you sure you want to close this window?",
 				onOk: () => {
 					this.close()
-                }
+				},
 			})
 		}
 
@@ -69,14 +77,12 @@ class Modal extends React.Component {
 	}
 
 	render() {
-        return <div
+		return (
-            className={classnames(
+			<div
-                "app_modal_wrapper",
+				className={classnames("app_modal_wrapper", {
-                {
 					["active"]: this.state.visible,
 					["framed"]: this.props.framed,
-                }
+				})}
-            )}
 			>
 				<div
 					id="mask_trigger"
@@ -88,22 +94,18 @@ class Modal extends React.Component {
 					ref={this.contentRef}
 					style={this.props.frameContentStyle}
 				>
-                {
+					{this.props.includeCloseButton && (
-                    this.props.includeCloseButton && <div
+						<div className="app_modal_close" onClick={this.close}>
-                        className="app_modal_close"
-                        onClick={this.close}
-                    >
 							<Icons.MdClose />
 						</div>
-                }
+					)}
 
-                {
+					{React.cloneElement(this.props.children, {
-                    React.cloneElement(this.props.children, {
+						close: this.close,
-                        close: this.close
+					})}
-                    })
-                }
 				</div>
 			</div>
+		)
 	}
 }
 

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"