WIP minimize

res/css/views/dialogs/_HostSignupDialog.scss

@@ -15,40 +15,40 @@ limitations under the License.
 */
 
 .mx_HostSignupDialog {
-    z-index: unset;
-}
-
-.mx_HostSignupBaseDialog {
     max-height: 600px;
     width: 580px;
-    position: inherit;
 
-    .mx_HostSignupDialog_container {
+    .mx_HostSignupDialog_info {
-        height: 90%;
+        text-align: center;
 
-        .mx_HostSignupDialog_info {
+        .mx_HostSignupDialog_content {
-            text-align: center;
+            margin-top: 64px;
-
+            margin-bottom: 45px;
-            .mx_HostSignupDialog_content {
-                margin-top: 64px;
-                margin-bottom: 45px;
-            }
         }
+    }
 
-        iframe {
+    iframe {
-            width: 100%;
+        width: 100%;
-            height: 100%;
+        height: 100%;
-            border: none;
+        border: none;
-            background-color: #fff;
+        background-color: #fff;
-        }
     }
 }
 
-.mx_HostSignupBaseDialog_minimized {
+.mx_HostSignup_persisted {
-    display: none;
-}
-
-.mx_HostSignupDialog_persisted {
     width: 580px;
     height: 600px;
+    top: 0;
+    left: 0;
+    position: fixed;
+}
+
+.mx_HostSignupDialog_minimized {
+    position: fixed;
+    bottom: 100px;
+    right: 100px;
+    width: 200px;
+    height: 120px;
+    overflow: hidden;
+    z-index: 6000;
 }

src/components/structures/HostSignupAction.tsx

@@ -15,35 +15,20 @@ limitations under the License.
 */
 
 import * as React from "react";
-import HostSignupDialog from "../views/dialogs/HostSignupDialog";
-import Modal, {IHandle} from "../../Modal";
 import {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../views/context_menus/IconizedContextMenu";
 import { _t } from "../../languageHandler";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
 
 interface IProps {}
 
 interface IState {}
 
 export default class HostSignupAction extends React.PureComponent<IProps, IState> {
-    private closingAllowed = false;
+    private openDialog = async () => {
-    private modalRef: IHandle<void[]>;
+        await OwnProfileStore.instance.setHostSignupActive(true);
-
-    private openDialog = () => {
-        this.modalRef = Modal.createTrackedDialog(
-            'Host Signup Open', '', HostSignupDialog, {
-                requestClose: this.requestClose,
-            }, "mx_HostSignupDialog", false, true, {
-                onBeforeClose: async () => this.closingAllowed,
-            },
-        );
-    }
-
-    private requestClose = () => {
-        this.closingAllowed = true;
-        this.modalRef.close();
     }
 
     public render(): React.ReactNode {

src/components/structures/LoggedInView.tsx

@@ -54,6 +54,7 @@ import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPa
 import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
+import HostSignupContainer from '../views/host_signup/HostSignupContainer';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -632,6 +633,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 </div>
                 <CallContainer />
                 <NonUrgentToastContainer />
+                <HostSignupContainer />
             </MatrixClientContext.Provider>
         );
     }

src/components/views/dialogs/HostSignupDialog.tsx

@@ -15,21 +15,16 @@ limitations under the License.
 */
 
 import * as React from "react";
-import BaseDialog from '../../views/dialogs/BaseDialog';
-import GenericToast from "../toasts/GenericToast";
 import Modal from "../../../Modal";
 import PersistedElement from "../elements/PersistedElement";
 import QuestionDialog from './QuestionDialog';
 import SdkConfig from "../../../SdkConfig";
-import ToastStore from "../../../stores/ToastStore";
 import {_t} from "../../../languageHandler";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import {IPostmessage, IPostmessageResponseData, PostmessageAction} from "./HostSignupDialogTypes";
 
-interface IProps {
+interface IProps {}
-    requestClose(): void;
-}
 
 interface IState {
     completed: boolean;
@@ -63,6 +58,9 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             case PostmessageAction.HostSignupAccountDetailsRequest:
                 await this.sendAccountDetails();
                 break;
+            case PostmessageAction.Maximize:
+                this.maximizeDialog();
+                break;
             case PostmessageAction.Minimize:
                 this.minimizeDialog();
                 break;
@@ -86,28 +84,23 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
     }
 
     private minimizeDialog = () => {
-        ToastStore.sharedInstance().addOrReplaceToast({
-            priority: 0,
-            key: 'host_signup_dialog',
-            title: "Building your home",
-            icon: "verification",
-            props: {
-                description: "",
-                onAccept: this.maximizeDialog,
-                acceptLabel: "Return",
-            },
-            component: GenericToast,
-        });
         this.setState({
             minimized: true,
         });
-        this.props.requestClose();
+    }
+
+    private closeDialog = async () => {
+        window.removeEventListener("message", this.messageHandler);
+        // Ensure we destroy the host signup persisted element
+        PersistedElement.destroyElement("host_signup");
+        // Finally clear the flag in
+        return OwnProfileStore.instance.setHostSignupActive(false);
     }
 
     private onFinished = (result: boolean) => {
         if (result || this.state.completed) {
             // We're done, close
-            this.props.requestClose();
+            return this.closeDialog();
         } else {
             Modal.createDialog(
                 QuestionDialog,
@@ -119,7 +112,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                     button: _t("Abort"),
                     onFinished: result => {
                         if (result) {
-                            this.props.requestClose();
+                            return this.closeDialog();
                         }
                     },
                 },
@@ -160,20 +153,20 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
     }
 
     public componentWillUnmount() {
-        window.removeEventListener("message", this.messageHandler);
+        if (OwnProfileStore.instance.isHostSignupActive) {
+            // Run the close dialog actions if we're still active, otherwise good to go
+            return this.closeDialog();
+        }
     }
 
     public render(): React.ReactNode {
         return (
-            <div className="mx_HostSignupDialog_persisted">
+            <div className="mx_HostSignup_persisted">
                 <PersistedElement key="host_signup" persistKey="host_signup">
-                    <BaseDialog
+                    <div className={this.state.minimized ? "" : "mx_Dialog_wrapper"}>
-                        className="mx_HostSignupBaseDialog"
+                        <div className={
-                        onFinished={this.onFinished}
+                            this.state.minimized ? "mx_HostSignupDialog_minimized" : "mx_HostSignupDialog mx_Dialog"
-                        title=""
+                        }>
-                        hasCancel={true}
-                    >
-                        <div className="mx_HostSignupDialog_container">
                             {this.state.loadIframe &&
                                 <iframe
                                     src={this.hostSignupSetupUrl}
@@ -183,6 +176,9 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                             }
                             {!this.state.loadIframe &&
                                 <div className="mx_HostSignupDialog_info">
+                                    {this.state.minimized &&
+                                        <button onClick={this.maximizeDialog}>Maximize</button>
+                                    }
                                     <img
                                         alt="image of planet"
                                         src={require("../../../../res/img/host_signup.png")}
@@ -197,7 +193,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                         </p>
                                     </div>
                                     <div>
-                                        <button onClick={this.props.requestClose}>Maybe later</button>
+                                        <button onClick={this.closeDialog}>Maybe later</button>
                                         <button onClick={this.loadIframe} className="mx_Dialog_primary">
                                             Lets get started
                                         </button>
@@ -211,7 +207,10 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                 </div>
                             }
                         </div>
-                    </BaseDialog>
+                        {!this.state.minimized &&
+                            <div className="mx_Dialog_background" />
+                        }
+                    </div>
                 </PersistedElement>
             </div>
         );

src/components/views/host_signup/HostSignupContainer.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useState} from 'react';
+import HostSignupDialog from "../dialogs/HostSignupDialog";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {UPDATE_EVENT} from "../../../stores/AsyncStore";
+
+const HostSignupContainer = () => {
+    const [isActive, setIsActive] = useState(OwnProfileStore.instance.isHostSignupActive);
+    useEventEmitter(OwnProfileStore.instance, UPDATE_EVENT, () => {
+        setIsActive(OwnProfileStore.instance.isHostSignupActive);
+    });
+
+    return <div className="mx_HostSignupContainer">
+        {isActive &&
+            <HostSignupDialog />
+        }
+    </div>;
+};
+
+export default HostSignupContainer

src/stores/OwnProfileStore.ts

@@ -26,6 +26,7 @@ import { _t } from "../languageHandler";
 interface IState {
     displayName?: string;
     avatarUrl?: string;
+    hostSignupActive?: boolean;
 }
 
 export class OwnProfileStore extends AsyncStoreWithClient<IState> {
@@ -41,6 +42,16 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         return OwnProfileStore.internalInstance;
     }
 
+    public get isHostSignupActive(): boolean {
+        return this.state.hostSignupActive;
+    }
+
+    public async setHostSignupActive(status: boolean) {
+        await this.updateState({
+            hostSignupActive: status,
+        });
+    }
+
     /**
      * Gets the display name for the user, or null if not present.
      */