Skip to content

Commit

Permalink
Don't unnecessarily persist the host signup dialog
Browse files Browse the repository at this point in the history 
matrix-org#8747 made it more evident that the host signup dialog was relying on some quirks in how PersistedElement sizes and positions things that it probably shouldn't have been relying on. As far as I can tell, this dialog doesn't *need* to be a PersistedElement at all since it's mounted manually as part of LoggedInView, and so it doesn't look like there's any way for it to unexpectedly disappear on the user.

According to Travis this is supposed to be a bespoke widget in a proper dialog, but this is intended as a more short-term fix.
  • Loading branch information
@robintown
robintown committed Jul 11, 2022
1 parent 7f07443 commit 1d816cf
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 76 deletions.
11 changes: 0 additions & 11 deletions res/css/views/dialogs/_HostSignupDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,17 +105,6 @@ limitations under the License.
right: 25px;
}

.mx_HostSignup_persisted {
width: 90vw;
max-width: 580px;
height: 80vh;
max-height: 600px;
top: 0;
left: 0;
position: fixed;
display: none;
}

.mx_HostSignupDialog_minimized {
position: fixed;
bottom: 80px;
Expand Down
121 changes: 56 additions & 65 deletions src/components/views/dialogs/HostSignupDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { logger } from "matrix-js-sdk/src/logger";

import AccessibleButton from "../elements/AccessibleButton";
import Modal from "../../../Modal";
import PersistedElement from "../elements/PersistedElement";
import QuestionDialog from './QuestionDialog';
import SdkConfig from "../../../SdkConfig";
import { _t } from "../../../languageHandler";
Expand All @@ -35,8 +34,6 @@ import {
import { IConfigOptions } from "../../../IConfigOptions";
import { SnakedObject } from "../../../utils/SnakedObject";

const HOST_SIGNUP_KEY = "host_signup";

interface IProps {}

interface IState {
Expand Down Expand Up @@ -111,8 +108,6 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState

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 HostSignupStore.instance.setHostSignupActive(false);
};
Expand Down Expand Up @@ -235,69 +230,65 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState

public render(): React.ReactNode {
return (
<div className="mx_HostSignup_persisted">
<PersistedElement key={HOST_SIGNUP_KEY} persistKey={HOST_SIGNUP_KEY}>
<div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
<div
className={classNames("mx_Dialog",
<div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
<div
className={classNames("mx_Dialog",
{
"mx_HostSignupDialog_minimized": this.state.minimized,
"mx_HostSignupDialog": !this.state.minimized,
},
)}
>
{ this.state.minimized &&
<div className="mx_Dialog_header mx_Dialog_headerWithButton">
<div className="mx_Dialog_title">
{ _t("%(hostSignupBrand)s Setup", {
hostSignupBrand: this.config.get("brand"),
}) }
</div>
<AccessibleButton
className="mx_HostSignup_maximize_button"
onClick={this.maximizeDialog}
aria-label={_t("Maximise dialog")}
title={_t("Maximise dialog")}
/>
</div>
}
{ !this.state.minimized &&
<div className="mx_Dialog_header mx_Dialog_headerWithCancel">
<AccessibleButton
onClick={this.minimizeDialog}
className="mx_HostSignup_minimize_button"
aria-label={_t("Minimise dialog")}
title={_t("Minimise dialog")}
/>
<AccessibleButton
onClick={this.onCloseClick}
className="mx_Dialog_cancelButton"
aria-label={_t("Close dialog")}
title={_t("Close dialog")}
/>
</div>
}
{ this.state.error &&
<div>
{ this.state.error }
</div>
}
{ !this.state.error &&
<iframe
title={_t(
"Upgrade to %(hostSignupBrand)s",
{
"mx_HostSignupDialog_minimized": this.state.minimized,
"mx_HostSignupDialog": !this.state.minimized,
hostSignupBrand: this.config.get("brand"),
},
)}
>
{ this.state.minimized &&
<div className="mx_Dialog_header mx_Dialog_headerWithButton">
<div className="mx_Dialog_title">
{ _t("%(hostSignupBrand)s Setup", {
hostSignupBrand: this.config.get("brand"),
}) }
</div>
<AccessibleButton
className="mx_HostSignup_maximize_button"
onClick={this.maximizeDialog}
aria-label={_t("Maximise dialog")}
title={_t("Maximise dialog")}
/>
</div>
}
{ !this.state.minimized &&
<div className="mx_Dialog_header mx_Dialog_headerWithCancel">
<AccessibleButton
onClick={this.minimizeDialog}
className="mx_HostSignup_minimize_button"
aria-label={_t("Minimise dialog")}
title={_t("Minimise dialog")}
/>
<AccessibleButton
onClick={this.onCloseClick}
className="mx_Dialog_cancelButton"
aria-label={_t("Close dialog")}
title={_t("Close dialog")}
/>
</div>
}
{ this.state.error &&
<div>
{ this.state.error }
</div>
}
{ !this.state.error &&
<iframe
title={_t(
"Upgrade to %(hostSignupBrand)s",
{
hostSignupBrand: this.config.get("brand"),
},
)}
src={this.config.get("url")}
ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
/>
}
</div>
</div>
</PersistedElement>
src={this.config.get("url")}
ref={this.iframeRef}
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
/>
}
</div>
</div>
);
}
Expand Down

0 comments on commit 1d816cf

Please sign in to comment.