Skip to content

Commit

Permalink
Use semantic headings in user settings Preferences (#10794)
Browse files Browse the repository at this point in the history 
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
  • Loading branch information
Kerry committed May 17, 2023
1 parent 4cc6ab1 commit 38ae8e9
Show file tree
Hide file tree
Showing 5 changed files with 1,212 additions and 1,143 deletions.
19 changes: 8 additions & 11 deletions cypress/e2e/settings/preferences-user-settings-tab.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
it("should be rendered properly", () => {
cy.openUserSettings("Preferences");

cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => {
cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible");
cy.contains("Preferences").should("be.visible");
});

cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement(
"User settings tab - Preferences",
{
// Emulate TabbedView's actual min and max widths
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
widths: [580, 796],
},
);
cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
// Emulate TabbedView's actual min and max widths
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
widths: [580, 796],
});
});
});
1 change: 0 additions & 1 deletion res/css/_components.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,6 @@
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";
Expand Down
25 changes: 0 additions & 25 deletions res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
View file

This file was deleted.

192 changes: 91 additions & 101 deletions src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
Expand Down Expand Up @@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa
import { Action } from "../../../../../dispatcher/actions";
import SdkConfig from "../../../../../SdkConfig";
import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";

interface IProps {
closeSettingsFn(success: boolean): void;
Expand Down Expand Up @@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
.filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));

return (
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="preferences">
{_t("Preferences")}
</div>

{roomListSettings.length > 0 && (
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
{this.renderGroup(roomListSettings)}
</div>
)}

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Spaces")}</span>
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span>
<div className="mx_SettingsFlag">
{_t(
<SettingsTab data-testid="mx_PreferencesUserSettingsTab">
<SettingsSection heading={_t("Preferences")}>
{roomListSettings.length > 0 && (
<SettingsSubsection heading={_t("Room list")}>
{this.renderGroup(roomListSettings)}
</SettingsSubsection>
)}

<SettingsSubsection heading={_t("Spaces")}>
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
</SettingsSubsection>

<SettingsSubsection
heading={_t("Keyboard shortcuts")}
description={_t(
"To view all keyboard shortcuts, <a>click here</a>.",
{},
{
Expand All @@ -174,85 +171,78 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
),
},
)}
</div>
{this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span>
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Presence")}</span>
<span className="mx_SettingsTab_subsectionText">
{_t("Share your activity and status with others.")}
</span>
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span>
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span>
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Room directory")}</span>
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
</div>

<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("General")}</span>
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}

<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag
name="Electron.enableHardwareAcceleration"
level={SettingLevel.PLATFORM}
hideIfCannotSet
label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
appName: SdkConfig.get().brand,
})}
/>
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />

<Field
label={_t("Autocomplete delay (ms)")}
type="number"
value={this.state.autocompleteDelay}
onChange={this.onAutocompleteDelayChange}
/>
<Field
label={_t("Read Marker lifetime (ms)")}
type="number"
value={this.state.readMarkerInViewThresholdMs}
onChange={this.onReadMarkerInViewThresholdMs}
/>
<Field
label={_t("Read Marker off-screen lifetime (ms)")}
type="number"
value={this.state.readMarkerOutOfViewThresholdMs}
onChange={this.onReadMarkerOutOfViewThresholdMs}
/>
</div>
</div>
>
{this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Displaying time")}>
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection
heading={_t("Presence")}
description={_t("Share your activity and status with others.")}
>
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Composer")}>
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Code blocks")}>
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Images, GIFs and videos")}>
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Timeline")}>
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("Room directory")}>
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
</SettingsSubsection>

<SettingsSubsection heading={_t("General")} stretchContent>
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}

<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag
name="Electron.enableHardwareAcceleration"
level={SettingLevel.PLATFORM}
hideIfCannotSet
label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
appName: SdkConfig.get().brand,
})}
/>
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />

<Field
label={_t("Autocomplete delay (ms)")}
type="number"
value={this.state.autocompleteDelay}
onChange={this.onAutocompleteDelayChange}
/>
<Field
label={_t("Read Marker lifetime (ms)")}
type="number"
value={this.state.readMarkerInViewThresholdMs}
onChange={this.onReadMarkerInViewThresholdMs}
/>
<Field
label={_t("Read Marker off-screen lifetime (ms)")}
type="number"
value={this.state.readMarkerOutOfViewThresholdMs}
onChange={this.onReadMarkerOutOfViewThresholdMs}
/>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}
Loading

0 comments on commit 38ae8e9

Please sign in to comment.