imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in user settings - Notifications (#10948)

Browse source 
* use semantic headings in user notif settings

* unset margin for subsection content when no heading

* remove debug
This commit is contained in:
Kerry 2023-05-24 11:36:09 +12:00 • committed by GitHub
parent f491f2f951
commit 9211da20f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/views/settings/Notifications.tsx
View file

@ -48,6 +48,8 @@ import {
updatePushRuleActions,
} from "../../../utils/pushRules/updatePushRuleActions";
import { Caption } from "../typography/Caption";
import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
import SettingsSubsection from "./shared/SettingsSubsection";
// TODO: this "view" component still has far too much application logic in it,
// which should be factored out to other files.
@ -649,16 +651,14 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
private renderTopSection(): JSX.Element {
const masterSwitch = (
<>
<LabelledToggleSwitch
data-testid="notif-master-switch"
value={!this.isInhibited}
label={_t("Enable notifications for this account")}
caption={_t("Turn off to disable notifications on all your devices and sessions")}
onChange={this.onMasterRuleChanged}
disabled={this.state.phase === Phase.Persisting}
/>
</>
<LabelledToggleSwitch
data-testid="notif-master-switch"
value={!this.isInhibited}
label={_t("Enable notifications for this account")}
caption={_t("Turn off to disable notifications on all your devices and sessions")}
onChange={this.onMasterRuleChanged}
disabled={this.state.phase === Phase.Persisting}
/>
);
// If all the rules are inhibited, don't show anything.
@ -680,7 +680,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
));
return (
<>
<SettingsSubsection>
{masterSwitch}
<LabelledToggleSwitch
@ -718,7 +718,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
)}
{emailSwitches}
</>
</SettingsSubsection>
);
}
@ -814,7 +814,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
</fieldset>
));
let sectionName: TranslatedString;
let sectionName: string;
switch (category) {
case RuleClass.VectorGlobal:
sectionName = _t("Global");
@ -830,11 +830,9 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
}
return (
<>
<div>
<div data-testid={`notif-section-${category}`} className="mx_UserNotifSettings_grid">
<span className="mx_UserNotifSettings_gridRowLabel mx_UserNotifSettings_gridRowHeading">
{sectionName}
</span>
<SettingsSubsectionHeading heading={sectionName} />
<span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Off]}</span>
<span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.On]}</span>
<span className="mx_UserNotifSettings_gridColumnLabel">{VectorStateToLabel[VectorState.Loud]}</span>
@ -842,7 +840,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
</div>
{clearNotifsButton}
{keywordComposer}
</>
</div>
);
}
@ -877,13 +875,13 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
}
return (
<div className="mx_UserNotifSettings">
<>
{this.renderTopSection()}
{this.renderCategory(RuleClass.VectorGlobal)}
{this.renderCategory(RuleClass.VectorMentions)}
{this.renderCategory(RuleClass.VectorOther)}
{this.renderTargets()}
</div>
</>
);
}
}

3
src/components/views/settings/shared/SettingsSubsection.tsx
View file

@ -20,7 +20,7 @@ import React, { HTMLAttributes } from "react";
import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading";
export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement> {
heading: string | React.ReactNode;
heading?: string | React.ReactNode;
description?: string | React.ReactNode;
children?: React.ReactNode;
// when true content will be justify-items: stretch, which will make items within the section stretch to full width.
@ -50,6 +50,7 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
<div
className={classNames("mx_SettingsSubsection_content", {
mx_SettingsSubsection_contentStretch: !!stretchContent,
mx_SettingsSubsection_noHeading: !heading && !description,
})}
>
{children}

11
src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx
View file

@ -18,16 +18,17 @@ import React from "react";
import { _t } from "../../../../../languageHandler";
import Notifications from "../../Notifications";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsTab from "../SettingsTab";
export default class NotificationUserSettingsTab extends React.Component {
public render(): React.ReactNode {
return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
<div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
<SettingsTab>
<SettingsSection heading={_t("Notifications")}>
<Notifications />
</div>
</div>
</SettingsSection>
</SettingsTab>
);
}
}