WIP minimize

pull/21833/head
Jason Robinson 2021-01-12 17:08:42 +02:00
parent e6605441aa
commit 3da5049dc7
2 changed files with 56 additions and 41 deletions

View File

@ -14,9 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_HostSignupDialog {
z-index: unset;
}
.mx_HostSignupBaseDialog { .mx_HostSignupBaseDialog {
max-height: 600px; max-height: 600px;
width: 580px; width: 580px;
position: inherit;
.mx_HostSignupDialog_container { .mx_HostSignupDialog_container {
height: 90%; height: 90%;
@ -42,3 +47,8 @@ limitations under the License.
.mx_HostSignupBaseDialog_minimized { .mx_HostSignupBaseDialog_minimized {
display: none; display: none;
} }
.mx_HostSignupDialog_persisted {
width: 580px;
height: 600px;
}

View File

@ -18,6 +18,7 @@ import * as React from "react";
import BaseDialog from '../../views/dialogs/BaseDialog'; import BaseDialog from '../../views/dialogs/BaseDialog';
import GenericToast from "../toasts/GenericToast"; import GenericToast from "../toasts/GenericToast";
import Modal from "../../../Modal"; import Modal from "../../../Modal";
import PersistedElement from "../elements/PersistedElement";
import QuestionDialog from './QuestionDialog'; import QuestionDialog from './QuestionDialog';
import SdkConfig from "../../../SdkConfig"; import SdkConfig from "../../../SdkConfig";
import ToastStore from "../../../stores/ToastStore"; import ToastStore from "../../../stores/ToastStore";
@ -100,6 +101,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
this.setState({ this.setState({
minimized: true, minimized: true,
}); });
this.props.requestClose();
} }
private onFinished = (result: boolean) => { private onFinished = (result: boolean) => {
@ -163,51 +165,54 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<div className={this.state.minimized ? "mx_HostSignupBaseDialog_minimized" : ""}> <div className="mx_HostSignupDialog_persisted">
<BaseDialog <PersistedElement key="host_signup" persistKey="host_signup">
className="mx_HostSignupBaseDialog" <BaseDialog
onFinished={this.onFinished} className="mx_HostSignupBaseDialog"
title="" onFinished={this.onFinished}
hasCancel={true} title=""
> hasCancel={true}
<div className="mx_HostSignupDialog_container"> >
{this.state.loadIframe && <div className="mx_HostSignupDialog_container">
<iframe {this.state.loadIframe &&
src={this.hostSignupSetupUrl} <iframe
ref={this.iframeRef} src={this.hostSignupSetupUrl}
sandbox="allow-forms allow-scripts allow-same-origin" ref={this.iframeRef}
/> sandbox="allow-forms allow-scripts allow-same-origin"
}
{!this.state.loadIframe &&
<div className="mx_HostSignupDialog_info">
<img
alt="image of planet"
src={require("../../../../res/img/host_signup.png")}
/> />
<div className="mx_HostSignupDialog_content"> }
<h1>Unlock the power of Element</h1> {!this.state.loadIframe &&
<p> <div className="mx_HostSignupDialog_info">
Congratulations! You taken your first steps into unlocking the full power of&nbsp; <img
the Element app. In a few minutes, you'll be able to see how powerful our&nbsp; alt="image of planet"
Matrix services are and take control of your conversation data. src={require("../../../../res/img/host_signup.png")}
</p> />
<div className="mx_HostSignupDialog_content">
<h1>Unlock the power of Element</h1>
<p>
Congratulations! You taken your first steps into unlocking the full&nbsp;
power of the Element app. In a few minutes, you'll be able to&nbsp;
see how powerful our&nbsp;
Matrix services are and take control of your conversation data.
</p>
</div>
<div>
<button onClick={this.props.requestClose}>Maybe later</button>
<button onClick={this.loadIframe} className="mx_Dialog_primary">
Lets get started
</button>
<button onClick={this.minimizeDialog}>Minimize</button>
</div>
</div> </div>
}
{this.state.error &&
<div> <div>
<button onClick={this.props.requestClose}>Maybe later</button> {this.state.error}
<button onClick={this.loadIframe} className="mx_Dialog_primary">
Lets get started
</button>
<button onClick={this.minimizeDialog}>Minimize</button>
</div> </div>
</div> }
} </div>
{this.state.error && </BaseDialog>
<div> </PersistedElement>
{this.state.error}
</div>
}
</div>
</BaseDialog>
</div> </div>
); );
} }