OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

WIP minimize

pull/21833/head
Jason Robinson 2021-01-14 11:53:20 +02:00
parent 3da5049dc7
commit d4a58bdb2a
6 changed files with 108 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
res/css/views/dialogs/_HostSignupDialog.scss
View File

@ -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 {
height: 90%;
.mx_HostSignupDialog_info {
text-align: center;
.mx_HostSignupDialog_info {
text-align: center;
.mx_HostSignupDialog_content {
margin-top: 64px;
margin-bottom: 45px;
}
.mx_HostSignupDialog_content {
margin-top: 64px;
margin-bottom: 45px;
}
}
iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
iframe {
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
}
.mx_HostSignupBaseDialog_minimized {
display: none;
}
.mx_HostSignupDialog_persisted {
.mx_HostSignup_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;
}

21
src/components/structures/HostSignupAction.tsx
View File

@ -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 modalRef: IHandle<void[]>;
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();
private openDialog = async () => {
await OwnProfileStore.instance.setHostSignupActive(true);
}
public render(): React.ReactNode {

2
src/components/structures/LoggedInView.tsx
View File

@ -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>
);
}

63
src/components/views/dialogs/HostSignupDialog.tsx
View File

@ -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 {
requestClose(): void;
}
interface IProps {}
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
className="mx_HostSignupBaseDialog"
onFinished={this.onFinished}
title=""
hasCancel={true}
>
<div className="mx_HostSignupDialog_container">
<div className={this.state.minimized ? "" : "mx_Dialog_wrapper"}>
<div className={
this.state.minimized ? "mx_HostSignupDialog_minimized" : "mx_HostSignupDialog mx_Dialog"
}>
{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>
);

36
src/components/views/host_signup/HostSignupContainer.tsx Normal file
View File

@ -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

11
src/stores/OwnProfileStore.ts
View File

@ -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.
*/