PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Don't unnecessarily persist the host signup dialog (#9043)

Browse source 
https://github.com/matrix-org/matrix-react-sdk/pull/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.
This commit is contained in:
Robin 2022-07-11 16:50:13 -04:00 committed by GitHub
parent b6a50ee5a5
commit 17699dfcd0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/dialogs/_HostSignupDialog.scss
View file

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

121
src/components/views/dialogs/HostSignupDialog.tsx
View file

@ -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";
@ -35,8 +34,6 @@ import {
import { IConfigOptions } from "../../../IConfigOptions";
import { SnakedObject } from "../../../utils/SnakedObject";
const HOST_SIGNUP_KEY = "host_signup";
interface IProps {}
interface IState {
@ -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);
};
@ -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>
);
}