Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 17699df

Browse files
robintownrobintown
authored
Don't unnecessarily persist the host signup dialog (#9043)
#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.
1 parent b6a50ee commit 17699df

File tree

2 files changed

+56
-76
lines changed

2 files changed

+56
-76
lines changed

‎res/css/views/dialogs/_HostSignupDialog.scss

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,6 @@ limitations under the License.
105105
right: 25px;
106106
}
107107

108-
.mx_HostSignup_persisted {
109-
width: 90vw;
110-
max-width: 580px;
111-
height: 80vh;
112-
max-height: 600px;
113-
top: 0;
114-
left: 0;
115-
position: fixed;
116-
display: none;
117-
}
118-
119108
.mx_HostSignupDialog_minimized {
120109
position: fixed;
121110
bottom: 80px;

‎src/components/views/dialogs/HostSignupDialog.tsx

Lines changed: 56 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { logger } from "matrix-js-sdk/src/logger";
2020

2121
import AccessibleButton from "../elements/AccessibleButton";
2222
import Modal from "../../../Modal";
23-
import PersistedElement from "../elements/PersistedElement";
2423
import QuestionDialog from './QuestionDialog';
2524
import SdkConfig from "../../../SdkConfig";
2625
import { _t } from "../../../languageHandler";
@@ -35,8 +34,6 @@ import {
3534
import { IConfigOptions } from "../../../IConfigOptions";
3635
import { SnakedObject } from "../../../utils/SnakedObject";
3736

38-
const HOST_SIGNUP_KEY = "host_signup";
39-
4037
interface IProps {}
4138

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

112109
private closeDialog = async () => {
113110
window.removeEventListener("message", this.messageHandler);
114-
// Ensure we destroy the host signup persisted element
115-
PersistedElement.destroyElement("host_signup");
116111
// Finally clear the flag in
117112
return HostSignupStore.instance.setHostSignupActive(false);
118113
};
@@ -235,69 +230,65 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
235230

236231
public render(): React.ReactNode {
237232
return (
238-
<div className="mx_HostSignup_persisted">
239-
<PersistedElement key={HOST_SIGNUP_KEY} persistKey={HOST_SIGNUP_KEY}>
240-
<div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
241-
<div
242-
className={classNames("mx_Dialog",
233+
<div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
234+
<div
235+
className={classNames("mx_Dialog",
236+
{
237+
"mx_HostSignupDialog_minimized": this.state.minimized,
238+
"mx_HostSignupDialog": !this.state.minimized,
239+
},
240+
)}
241+
>
242+
{ this.state.minimized &&
243+
<div className="mx_Dialog_header mx_Dialog_headerWithButton">
244+
<div className="mx_Dialog_title">
245+
{ _t("%(hostSignupBrand)s Setup", {
246+
hostSignupBrand: this.config.get("brand"),
247+
}) }
248+
</div>
249+
<AccessibleButton
250+
className="mx_HostSignup_maximize_button"
251+
onClick={this.maximizeDialog}
252+
aria-label={_t("Maximise dialog")}
253+
title={_t("Maximise dialog")}
254+
/>
255+
</div>
256+
}
257+
{ !this.state.minimized &&
258+
<div className="mx_Dialog_header mx_Dialog_headerWithCancel">
259+
<AccessibleButton
260+
onClick={this.minimizeDialog}
261+
className="mx_HostSignup_minimize_button"
262+
aria-label={_t("Minimise dialog")}
263+
title={_t("Minimise dialog")}
264+
/>
265+
<AccessibleButton
266+
onClick={this.onCloseClick}
267+
className="mx_Dialog_cancelButton"
268+
aria-label={_t("Close dialog")}
269+
title={_t("Close dialog")}
270+
/>
271+
</div>
272+
}
273+
{ this.state.error &&
274+
<div>
275+
{ this.state.error }
276+
</div>
277+
}
278+
{ !this.state.error &&
279+
<iframe
280+
title={_t(
281+
"Upgrade to %(hostSignupBrand)s",
243282
{
244-
"mx_HostSignupDialog_minimized": this.state.minimized,
245-
"mx_HostSignupDialog": !this.state.minimized,
283+
hostSignupBrand: this.config.get("brand"),
246284
},
247285
)}
248-
>
249-
{ this.state.minimized &&
250-
<div className="mx_Dialog_header mx_Dialog_headerWithButton">
251-
<div className="mx_Dialog_title">
252-
{ _t("%(hostSignupBrand)s Setup", {
253-
hostSignupBrand: this.config.get("brand"),
254-
}) }
255-
</div>
256-
<AccessibleButton
257-
className="mx_HostSignup_maximize_button"
258-
onClick={this.maximizeDialog}
259-
aria-label={_t("Maximise dialog")}
260-
title={_t("Maximise dialog")}
261-
/>
262-
</div>
263-
}
264-
{ !this.state.minimized &&
265-
<div className="mx_Dialog_header mx_Dialog_headerWithCancel">
266-
<AccessibleButton
267-
onClick={this.minimizeDialog}
268-
className="mx_HostSignup_minimize_button"
269-
aria-label={_t("Minimise dialog")}
270-
title={_t("Minimise dialog")}
271-
/>
272-
<AccessibleButton
273-
onClick={this.onCloseClick}
274-
className="mx_Dialog_cancelButton"
275-
aria-label={_t("Close dialog")}
276-
title={_t("Close dialog")}
277-
/>
278-
</div>
279-
}
280-
{ this.state.error &&
281-
<div>
282-
{ this.state.error }
283-
</div>
284-
}
285-
{ !this.state.error &&
286-
<iframe
287-
title={_t(
288-
"Upgrade to %(hostSignupBrand)s",
289-
{
290-
hostSignupBrand: this.config.get("brand"),
291-
},
292-
)}
293-
src={this.config.get("url")}
294-
ref={this.iframeRef}
295-
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
296-
/>
297-
}
298-
</div>
299-
</div>
300-
</PersistedElement>
286+
src={this.config.get("url")}
287+
ref={this.iframeRef}
288+
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
289+
/>
290+
}
291+
</div>
301292
</div>
302293
);
303294
}

0 commit comments

Comments
 (0)