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:
parent
9211da20f4
commit
9f011b955b
19 changed files with 407 additions and 123 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue