Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use semantic headings in user settings Preferences #10794

Merged
merged 9 commits into from
May 17, 2023
Merged

Use semantic headings in user settings Preferences #10794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
603e2f8
allow testids in settings sections
May 4, 2023
dd55605
use semantic headings in LabsUserSettingsTab
May 4, 2023
7e1065d
use semantic headings in usersettingspreferences
May 4, 2023
2fdf04c
rethemendex
May 4, 2023
e0f0dcf
put back margin var
May 7, 2023
60ce8cc
Merge branch 'develop' into kerry/24922/user-settings-headings-labs
May 7, 2023
0c1b648
Merge branch 'kerry/24922/user-settings-headings-labs' into kerry/249…
May 7, 2023
6daea0c
Merge branch 'develop' into kerry/24922/user-settings-headings-prefer…
May 16, 2023
2db07dd
Merge branch 'develop' into kerry/24922/user-settings-headings-prefer…
May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions cypress/e2e/settings/preferences-user-settings-tab.spec.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

192 changes: 91 additions & 101 deletions src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View file
Open in desktop
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