mirror of https://github.com/vector-im/riot-web
WIP minimize
parent
e6605441aa
commit
3da5049dc7
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
<img
|
||||||
the Element app. In a few minutes, you'll be able to see how powerful our
|
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
|
||||||
|
power of the Element app. In a few minutes, you'll be able to
|
||||||
|
see how powerful our
|
||||||
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue