Use semantic headings in user settings - discovery (#10838)

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone
This commit is contained in:
Kerry 2023-05-24 14:37:10 +12:00 committed by GitHub
parent 9211da20f4
commit 9f011b955b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 407 additions and 123 deletions

View file

@ -25,6 +25,8 @@ import { MatrixClientPeg } from "../../../../MatrixClientPeg";
import Modal from "../../../../Modal";
import AddThreepid, { Binding } from "../../../../AddThreepid";
import ErrorDialog, { extractErrorMessageFromError } from "../../dialogs/ErrorDialog";
import SettingsSubsection from "../shared/SettingsSubsection";
import InlineSpinner from "../../elements/InlineSpinner";
import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
/*
@ -258,23 +260,32 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
}
interface IProps {
emails: IThreepid[];
isLoading?: boolean;
}
export default class EmailAddresses extends React.Component<IProps> {
public render(): React.ReactNode {
let content;
if (this.props.emails.length > 0) {
if (this.props.isLoading) {
content = <InlineSpinner />;
} else if (this.props.emails.length > 0) {
content = this.props.emails.map((e) => {
return <EmailAddress email={e} key={e.address} />;
});
} else {
content = (
<span className="mx_SettingsTab_subsectionText">
{_t("Discovery options will appear once you have added an email above.")}
</span>
);
}
return <div className="mx_EmailAddresses">{content}</div>;
const hasEmails = !!this.props.emails.length;
return (
<SettingsSubsection
heading={_t("Email addresses")}
description={
(!hasEmails && _t("Discovery options will appear once you have added an email above.")) || undefined
}
stretchContent
>
{content}
</SettingsSubsection>
);
}
}