diff --git a/packages/app/src/App.jsx b/packages/app/src/App.jsx index a416d93c..51175353 100755 --- a/packages/app/src/App.jsx +++ b/packages/app/src/App.jsx @@ -76,13 +76,12 @@ import { NotFound, RenderError, Crash, - Navigation, Login, UserRegister, Searcher, NotificationsCenter, PostViewer, - PostCreatorModal, + PostCreator, } from "components" import { DOMWindow } from "components/RenderWindow" @@ -222,7 +221,7 @@ class ComtyApp extends React.Component { }) } - return window.app.ModalController.open((props) => ) + return app.layout.modal.open("searcher", () => ) }, openFullImageViewer: (src) => { const win = new DOMWindow({ @@ -239,22 +238,10 @@ class ComtyApp extends React.Component { />) }, openPostViewer: (post) => { - const win = new DOMWindow({ - id: "postViewer", - className: "postViewer", - }) - - win.render() + app.layout.modal.open("post_viewer", () => ) }, openPostCreator: () => { - const win = new DOMWindow({ - id: "postCreator", - className: "postCreator", - }) - - win.render( win.destroy()} - />) + app.layout.modal.open("post_creator", () => ) } }, navigation: { diff --git a/packages/app/src/components/PostCreatorModal/index.jsx b/packages/app/src/components/PostCreatorModal/index.jsx deleted file mode 100755 index d0d0a9fb..00000000 --- a/packages/app/src/components/PostCreatorModal/index.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from "react" -import classnames from "classnames" - -import PostCreator from "components/PostCreator" - -import "./index.less" - -export default (props) => { - const [visible, setVisible] = React.useState(false) - - let escTimeout = null - - const close = () => { - setVisible(false) - - setTimeout(() => { - if (typeof props.onClose === "function") { - props.onClose() - } - }, 150) - } - - const handleEsc = (e) => { - if (e.key === "Escape") { - if (escTimeout !== null) { - clearTimeout(escTimeout) - return close() - } - - escTimeout = setTimeout(() => { - escTimeout = null - }, 250) - } - } - - const handleClickOutside = (e) => { - if (e.target === e.currentTarget) { - close() - } - } - - React.useEffect(() => { - setTimeout(() => { - setVisible(true) - }, 10) - - document.addEventListener("keydown", handleEsc, false) - - return () => { - document.removeEventListener("keydown", handleEsc, false) - } - }, []) - - return
- -
-} \ No newline at end of file diff --git a/packages/app/src/components/PostCreatorModal/index.less b/packages/app/src/components/PostCreatorModal/index.less deleted file mode 100755 index 61c5e0d0..00000000 --- a/packages/app/src/components/PostCreatorModal/index.less +++ /dev/null @@ -1,45 +0,0 @@ -@import "theme/vars.less"; - -@modal_background_blur: 10px; - -.post_creator_modal { - position: absolute; - 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; - - &.active { - background-color: rgba(var(--bg_color_6), 0.5); - - backdrop-filter: blur(@modal_background_blur); - -webkit-backdrop-filter: blur(@modal_background_blur); - - .postCreator { - opacity: 1; - transform: translateY(0); - } - } - - .postCreator { - transition: all 150ms ease-in-out; - - opacity: 0; - transform: translateY(100px); - } - - .postCreator { - box-shadow: @card-shadow; - -webkit-box-shadow: @card-shadow; - -moz-box-shadow: @card-shadow; - } -} \ No newline at end of file diff --git a/packages/app/src/components/UserSelector/index.jsx b/packages/app/src/components/UserSelector/index.jsx index 1de361ed..5ef86a0e 100644 --- a/packages/app/src/components/UserSelector/index.jsx +++ b/packages/app/src/components/UserSelector/index.jsx @@ -227,5 +227,5 @@ const UserSelector = (props) => { } export const openModal = (props) => { - return app.ModalController.open(() => ) + return app.layout.modal.open("user_selector", () => ) } \ No newline at end of file diff --git a/packages/app/src/components/UserSelector/index.less b/packages/app/src/components/UserSelector/index.less index bdb36465..910a2c11 100644 --- a/packages/app/src/components/UserSelector/index.less +++ b/packages/app/src/components/UserSelector/index.less @@ -4,6 +4,12 @@ gap: 20px; + padding: 20px; + + background-color: var(--background-color-accent); + + border-radius: 12px; + .user-selector_actions { display: flex; flex-direction: row; diff --git a/packages/app/src/components/WidgetsBrowser/index.jsx b/packages/app/src/components/WidgetsBrowser/index.jsx index 340c5f3c..a6af440c 100644 --- a/packages/app/src/components/WidgetsBrowser/index.jsx +++ b/packages/app/src/components/WidgetsBrowser/index.jsx @@ -96,5 +96,5 @@ export const WidgetBrowser = (props) => { } export const openModal = () => { - app.ModalController.open(() => ) + app.layout.modal.open("widgets_browser", () => ) } diff --git a/packages/app/src/components/WidgetsBrowser/index.less b/packages/app/src/components/WidgetsBrowser/index.less index 67241b67..7689f9dc 100644 --- a/packages/app/src/components/WidgetsBrowser/index.less +++ b/packages/app/src/components/WidgetsBrowser/index.less @@ -1,5 +1,12 @@ .widgets_browser { display: flex; flex-direction: column; + gap: 20px; + + padding: 30px; + + background-color: var(--background-color-accent); + + border-radius: 12px; } \ No newline at end of file diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js index ae0dd642..76c5dd3a 100755 --- a/packages/app/src/components/index.js +++ b/packages/app/src/components/index.js @@ -40,7 +40,6 @@ export { default as PostsList } from "./PostsList" export { default as PostCard } from "./PostCard" export { default as PostViewer } from "./PostViewer" export { default as PostCreator } from "./PostCreator" -export { default as PostCreatorModal } from "./PostCreatorModal" // COMMENTS export { default as CommentsCard } from "./CommentsCard" diff --git a/packages/app/src/layouts/components/modals/index.jsx b/packages/app/src/layouts/components/modals/index.jsx new file mode 100644 index 00000000..59849311 --- /dev/null +++ b/packages/app/src/layouts/components/modals/index.jsx @@ -0,0 +1,123 @@ +import React from "react" +import classnames from "classnames" +import useLayoutInterface from "hooks/useLayoutInterface" +import { DOMWindow } from "components/RenderWindow" + +import "./index.less" + +class Modal extends React.Component { + state = { + visible: false, + } + + escTimeout = null + + componentDidMount() { + setTimeout(() => { + this.setState({ + visible: true, + }) + }, 10) + + document.addEventListener("keydown", this.handleEsc, false) + } + + componentWillUnmount() { + document.removeEventListener("keydown", this.handleEsc, false) + } + + close = () => { + this.setState({ + visible: false, + }) + + 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() + } + + this.escTimeout = setTimeout(() => { + this.escTimeout = null + }, 250) + } + } + + handleClickOutside = (e) => { + if (e.target === e.currentTarget) { + this.close() + } + } + + render() { + return
+
+ { + React.cloneElement(this.props.children, { + close: this.close + }) + } +
+
+ } +} + +export default () => { + const modalRef = React.useRef() + + function openModal( + id, + render, + { + className, + props, + } = {} + ) { + const win = new DOMWindow({ + id: id, + className: className, + }) + + win.render( { + win.destroy() + }} + > + { + React.createElement(render, props) + } + ) + } + + function closeModal() { + modalRef.current.close() + } + + useLayoutInterface("modal", { + open: openModal, + close: closeModal, + }) + + return null +} \ No newline at end of file diff --git a/packages/app/src/layouts/components/modals/index.less b/packages/app/src/layouts/components/modals/index.less new file mode 100644 index 00000000..e69de29b diff --git a/packages/app/src/layouts/default/index.jsx b/packages/app/src/layouts/default/index.jsx index fe992ce4..c15c892e 100755 --- a/packages/app/src/layouts/default/index.jsx +++ b/packages/app/src/layouts/default/index.jsx @@ -2,13 +2,16 @@ import React from "react" import classnames from "classnames" import { Layout } from "antd" -import { Sidebar, Drawer, Sidedrawer, Modal, BottomBar, TopBar, ToolsBar } from "components/Layout" +import { Sidebar, Drawer, Sidedrawer, BottomBar, TopBar, ToolsBar } from "components/Layout" import BackgroundDecorator from "components/BackgroundDecorator" import { createWithDom as FloatingStack } from "../components/floatingStack" +import InitializeModalsController from "../components/modals" const DesktopLayout = (props) => { + InitializeModalsController() + React.useEffect(() => { const floatingStack = FloatingStack() @@ -21,7 +24,6 @@ const DesktopLayout = (props) => { - @@ -47,8 +49,6 @@ const DesktopLayout = (props) => { const MobileLayout = (props) => { return - -