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

Move the active tab in user settings to the dialog title (#12481)

Browse source 
* Convert tabbedview to functional component

The 'Tab' is still a class, so now it's a functional component that
has a supporting class, which is maybe a bit... jarring, but I think
is actually perfectly logical.

* put comment back

* Fix bad tab ID behaviour

* Make TabbedView a controlled component

This does mean the logic of keeping what tab is active is now in each
container component, but for a functional component, this is a single
line. It makes TabbedView simpler and the container components always
know exactly what tab is being displayed rather than having to effectively
keep the state separately themselves if they wanted it.

Based on https://github.com/matrix-org/matrix-react-sdk/pull/12478

* Move the active tab in user settings to the dialog title

Separated by a colon, as per the new design.

* Update snapshots

* Update a playwright test

* Fix more tests / snapshots

* Attempt to test all the cases of titleForTabID

* More tests
This commit is contained in:
David Baker 2024-05-07 10:32:24 +01:00 • committed by GitHub
parent f8e040a890
commit 18ef97161a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 186 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/dialogs/BaseDialog.tsx
View file

@ -53,7 +53,7 @@ interface IProps {
"top"?: React.ReactNode;
// Title for the dialog.
"title"?: JSX.Element | string;
"title"?: React.ReactNode;
// Specific aria label to use, if not provided will set aria-labelledBy to mx_Dialog_title
"aria-label"?: string;

2
src/components/views/dialogs/InviteDialog.tsx
View file

@ -1536,7 +1536,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
);
dialogContent = (
<React.Fragment>
<TabbedView
<TabbedView<TabId>
tabs={tabs}
activeTabId={this.state.currentTabId}
tabLocation={TabLocation.TOP}

34
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -45,6 +45,38 @@ interface IProps {
onFinished(): void;
}
function titleForTabID(tabId: UserTab): React.ReactNode {
const subs = {
strong: (sub: string) => <strong>{sub}</strong>,
};
switch (tabId) {
case UserTab.General:
return _t("settings|general|dialog_title", undefined, subs);
case UserTab.SessionManager:
return _t("settings|sessions|dialog_title", undefined, subs);
case UserTab.Appearance:
return _t("settings|appearance|dialog_title", undefined, subs);
case UserTab.Notifications:
return _t("settings|notifications|dialog_title", undefined, subs);
case UserTab.Preferences:
return _t("settings|preferences|dialog_title", undefined, subs);
case UserTab.Keyboard:
return _t("settings|keyboard|dialog_title", undefined, subs);
case UserTab.Sidebar:
return _t("settings|sidebar|dialog_title", undefined, subs);
case UserTab.Voice:
return _t("settings|voip|dialog_title", undefined, subs);
case UserTab.Security:
return _t("settings|security|dialog_title", undefined, subs);
case UserTab.Labs:
return _t("settings|labs|dialog_title", undefined, subs);
case UserTab.Mjolnir:
return _t("settings|labs_mjolnir|dialog_title", undefined, subs);
case UserTab.Help:
return _t("setting|help_about|dialog_title", undefined, subs);
}
}
export default function UserSettingsDialog(props: IProps): JSX.Element {
const voipEnabled = useSettingValue<boolean>(UIFeature.Voip);
const mjolnirEnabled = useSettingValue<boolean>("feature_mjolnir");
@ -184,7 +216,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
className="mx_UserSettingsDialog"
hasCancel={true}
onFinished={props.onFinished}
title={_t("common|settings")}
title={titleForTabID(activeTabId)}
>
<div className="mx_SettingsDialog_content">
<TabbedView

2
src/components/views/settings/notifications/NotificationSettings2.tsx
View file

@ -123,7 +123,7 @@ export default function NotificationSettings2(): JSX.Element {
)}
</SettingsBanner>
)}
<SettingsSection heading={_t("notifications|enable_prompt_toast_title")}>
<SettingsSection>
<div className="mx_SettingsSubsection_content mx_NotificationSettings2_flags">
<LabelledToggleSwitch
label={_t("settings|notifications|enable_notifications_account")}

25
src/components/views/settings/shared/SettingsSection.tsx
View file

@ -20,10 +20,25 @@ import React, { HTMLAttributes } from "react";
import Heading from "../../typography/Heading";
export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
heading: string | React.ReactNode;
heading?: string | React.ReactNode;
children?: React.ReactNode;
}
function renderHeading(heading: string | React.ReactNode | undefined): React.ReactNode | undefined {
switch (typeof heading) {
case "string":
return (
<Heading as="h2" size="3">
{heading}
</Heading>
);
case "undefined":
return undefined;
default:
return heading;
}
}
/**
* A section of settings content
* A SettingsTab may contain one or more SettingsSections
@ -43,13 +58,7 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
*/
export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
<div {...rest} className={classnames("mx_SettingsSection", className)}>
{typeof heading === "string" ? (
<Heading as="h2" size="3">
{heading}
</Heading>
) : (
<>{heading}</>
)}
{renderHeading(heading)}
<div className="mx_SettingsSection_subSections">{children}</div>
</div>
);

7
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -32,7 +32,7 @@ import ThemeChoicePanel from "../../ThemeChoicePanel";
import ImageSizePanel from "../../ImageSizePanel";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
import SettingsSubsection from "../../shared/SettingsSubsection";
import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
interface IProps {}
@ -152,12 +152,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
}
public render(): React.ReactNode {
const brand = SdkConfig.get().brand;
return (
<SettingsTab data-testid="mx_AppearanceUserSettingsTab">
<SettingsSection heading={_t("settings|appearance|heading")}>
<SettingsSubsectionText>{_t("settings|appearance|subheading", { brand })}</SettingsSubsectionText>
<SettingsSection>
<ThemeChoicePanel />
<LayoutSwitcher
userId={this.state.userId}

2
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -560,7 +560,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
return (
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<SettingsSection heading={_t("common|general")}>
<SettingsSection>
<ProfileSettings />
{this.renderAccountSection()}
{this.renderLanguageSection()}

2
src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
View file

@ -264,7 +264,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
return (
<SettingsTab>
<SettingsSection heading={_t("setting|help_about|title")}>
<SettingsSection>
{bugReportingSection}
<SettingsSubsection heading={_t("common|faq")} description={faqText} />
<SettingsSubsection heading={_t("setting|help_about|versions")}>

2
src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx
View file

@ -73,7 +73,7 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
const KeyboardUserSettingsTab: React.FC = () => {
return (
<SettingsTab>
<SettingsSection heading={_t("settings|keyboard|title")}>
<SettingsSection>
{visibleCategories.map(([categoryName, category]) => {
return (
<KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />

2
src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx
View file

@ -254,7 +254,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
return (
<SettingsTab>
<SettingsSection heading={_t("labs_mjolnir|title")}>
<SettingsSection>
<SettingsSubsectionText>
<strong className="warning">{_t("labs_mjolnir|advanced_warning")}</strong>
<p>{_t("labs_mjolnir|explainer_1", { brand }, { code: (s) => <code>{s}</code> })}</p>

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

@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { _t } from "../../../../../languageHandler";
import { Features } from "../../../../../settings/Settings";
import SettingsStore from "../../../../../settings/SettingsStore";
import Notifications from "../../Notifications";
@ -33,7 +32,7 @@ export default class NotificationUserSettingsTab extends React.Component {
{newNotificationSettingsEnabled ? (
<NotificationSettings2 />
) : (
<SettingsSection heading={_t("notifications|enable_prompt_toast_title")}>
<SettingsSection>
<Notifications />
</SettingsSection>
)}

2
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View file

@ -145,7 +145,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
return (
<SettingsTab data-testid="mx_PreferencesUserSettingsTab">
<SettingsSection heading={_t("common|preferences")}>
<SettingsSection>
{roomListSettings.length > 0 && (
<SettingsSubsection heading={_t("settings|preferences|room_list_heading")}>
{this.renderGroup(roomListSettings)}

2
src/components/views/settings/tabs/user/SessionManagerTab.tsx
View file

@ -284,7 +284,7 @@ const SessionManagerTab: React.FC = () => {
return (
<SettingsTab>
<SettingsSection heading={_t("settings|sessions|title")}>
<SettingsSection>
<LoginWithQRSection
onShowQr={onShowQrClicked}
versions={clientVersions}

2
src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
View file

@ -80,7 +80,7 @@ const SidebarUserSettingsTab: React.FC = () => {
return (
<SettingsTab>
<SettingsSection heading={_t("settings|sidebar|title")}>
<SettingsSection>
<SettingsSubsection
heading={_t("settings|sidebar|metaspaces_subsection")}
description={_t("settings|sidebar|spaces_explainer")}

2
src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
View file

@ -180,7 +180,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
return (
<SettingsTab>
<SettingsSection heading={_t("settings|voip|title")}>
<SettingsSection>
{requestButton}
<SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
{speakerDropdown}