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

Commit d065706

Browse files
Kerrygithub-actions[bot]
Kerry
authored and
github-actions[bot]
committed
Use semantic headings in user settings Preferences (#10794)
* allow testids in settings sections * use semantic headings in LabsUserSettingsTab * use semantic headings in usersettingspreferences * rethemendex * put back margin var (cherry picked from commit 38ae8e9)
1 parent 23f14cc commit d065706

File tree

5 files changed

+1212
-1143
lines changed

5 files changed

+1212
-1143
lines changed

‎cypress/e2e/settings/preferences-user-settings-tab.spec.ts

+8-11
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
3535
it("should be rendered properly", () => {
3636
cy.openUserSettings("Preferences");
3737

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

43-
cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement(
44-
"User settings tab - Preferences",
45-
{
46-
// Emulate TabbedView's actual min and max widths
47-
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
48-
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
49-
widths: [580, 796],
50-
},
51-
);
43+
cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
44+
// Emulate TabbedView's actual min and max widths
45+
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
46+
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
47+
widths: [580, 796],
48+
});
5249
});
5350
});

‎res/css/_components.pcss

-1
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,6 @@
346346
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
347347
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
348348
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
349-
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
350349
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
351350
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
352351
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";

‎res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss

-25
This file was deleted.

‎src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

+91-101
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
2+
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
33
Copyright 2019 Michael Telatynski <[email protected]>
44
55
Licensed under the Apache License, Version 2.0 (the "License");
@@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa
3030
import { Action } from "../../../../../dispatcher/actions";
3131
import SdkConfig from "../../../../../SdkConfig";
3232
import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
33+
import SettingsSubsection from "../../shared/SettingsSubsection";
34+
import SettingsTab from "../SettingsTab";
35+
import { SettingsSection } from "../../shared/SettingsSection";
3336

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

145148
return (
146-
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
147-
<div className="mx_SettingsTab_heading" data-testid="preferences">
148-
{_t("Preferences")}
149-
</div>
150-
151-
{roomListSettings.length > 0 && (
152-
<div className="mx_SettingsTab_section">
153-
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
154-
{this.renderGroup(roomListSettings)}
155-
</div>
156-
)}
157-
158-
<div className="mx_SettingsTab_section">
159-
<span className="mx_SettingsTab_subheading">{_t("Spaces")}</span>
160-
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
161-
</div>
162-
163-
<div className="mx_SettingsTab_section">
164-
<span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span>
165-
<div className="mx_SettingsFlag">
166-
{_t(
149+
<SettingsTab data-testid="mx_PreferencesUserSettingsTab">
150+
<SettingsSection heading={_t("Preferences")}>
151+
{roomListSettings.length > 0 && (
152+
<SettingsSubsection heading={_t("Room list")}>
153+
{this.renderGroup(roomListSettings)}
154+
</SettingsSubsection>
155+
)}
156+
157+
<SettingsSubsection heading={_t("Spaces")}>
158+
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
159+
</SettingsSubsection>
160+
161+
<SettingsSubsection
162+
heading={_t("Keyboard shortcuts")}
163+
description={_t(
167164
"To view all keyboard shortcuts, <a>click here</a>.",
168165
{},
169166
{
@@ -174,85 +171,78 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
174171
),
175172
},
176173
)}
177-
</div>
178-
{this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
179-
</div>
180-
181-
<div className="mx_SettingsTab_section">
182-
<span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span>
183-
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
184-
</div>
185-
186-
<div className="mx_SettingsTab_section">
187-
<span className="mx_SettingsTab_subheading">{_t("Presence")}</span>
188-
<span className="mx_SettingsTab_subsectionText">
189-
{_t("Share your activity and status with others.")}
190-
</span>
191-
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
192-
</div>
193-
194-
<div className="mx_SettingsTab_section">
195-
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
196-
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
197-
</div>
198-
199-
<div className="mx_SettingsTab_section">
200-
<span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span>
201-
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
202-
</div>
203-
204-
<div className="mx_SettingsTab_section">
205-
<span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span>
206-
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
207-
</div>
208-
209-
<div className="mx_SettingsTab_section">
210-
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
211-
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
212-
</div>
213-
214-
<div className="mx_SettingsTab_section">
215-
<span className="mx_SettingsTab_subheading">{_t("Room directory")}</span>
216-
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
217-
</div>
218-
219-
<div className="mx_SettingsTab_section">
220-
<span className="mx_SettingsTab_subheading">{_t("General")}</span>
221-
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
222-
223-
<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
224-
<SettingsFlag
225-
name="Electron.enableHardwareAcceleration"
226-
level={SettingLevel.PLATFORM}
227-
hideIfCannotSet
228-
label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
229-
appName: SdkConfig.get().brand,
230-
})}
231-
/>
232-
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
233-
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
234-
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />
235-
236-
<Field
237-
label={_t("Autocomplete delay (ms)")}
238-
type="number"
239-
value={this.state.autocompleteDelay}
240-
onChange={this.onAutocompleteDelayChange}
241-
/>
242-
<Field
243-
label={_t("Read Marker lifetime (ms)")}
244-
type="number"
245-
value={this.state.readMarkerInViewThresholdMs}
246-
onChange={this.onReadMarkerInViewThresholdMs}
247-
/>
248-
<Field
249-
label={_t("Read Marker off-screen lifetime (ms)")}
250-
type="number"
251-
value={this.state.readMarkerOutOfViewThresholdMs}
252-
onChange={this.onReadMarkerOutOfViewThresholdMs}
253-
/>
254-
</div>
255-
</div>
174+
>
175+
{this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
176+
</SettingsSubsection>
177+
178+
<SettingsSubsection heading={_t("Displaying time")}>
179+
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
180+
</SettingsSubsection>
181+
182+
<SettingsSubsection
183+
heading={_t("Presence")}
184+
description={_t("Share your activity and status with others.")}
185+
>
186+
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
187+
</SettingsSubsection>
188+
189+
<SettingsSubsection heading={_t("Composer")}>
190+
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
191+
</SettingsSubsection>
192+
193+
<SettingsSubsection heading={_t("Code blocks")}>
194+
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
195+
</SettingsSubsection>
196+
197+
<SettingsSubsection heading={_t("Images, GIFs and videos")}>
198+
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
199+
</SettingsSubsection>
200+
201+
<SettingsSubsection heading={_t("Timeline")}>
202+
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
203+
</SettingsSubsection>
204+
205+
<SettingsSubsection heading={_t("Room directory")}>
206+
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
207+
</SettingsSubsection>
208+
209+
<SettingsSubsection heading={_t("General")} stretchContent>
210+
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
211+
212+
<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
213+
<SettingsFlag
214+
name="Electron.enableHardwareAcceleration"
215+
level={SettingLevel.PLATFORM}
216+
hideIfCannotSet
217+
label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
218+
appName: SdkConfig.get().brand,
219+
})}
220+
/>
221+
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
222+
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
223+
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />
224+
225+
<Field
226+
label={_t("Autocomplete delay (ms)")}
227+
type="number"
228+
value={this.state.autocompleteDelay}
229+
onChange={this.onAutocompleteDelayChange}
230+
/>
231+
<Field
232+
label={_t("Read Marker lifetime (ms)")}
233+
type="number"
234+
value={this.state.readMarkerInViewThresholdMs}
235+
onChange={this.onReadMarkerInViewThresholdMs}
236+
/>
237+
<Field
238+
label={_t("Read Marker off-screen lifetime (ms)")}
239+
type="number"
240+
value={this.state.readMarkerOutOfViewThresholdMs}
241+
onChange={this.onReadMarkerOutOfViewThresholdMs}
242+
/>
243+
</SettingsSubsection>
244+
</SettingsSection>
245+
</SettingsTab>
256246
);
257247
}
258248
}

0 commit comments

Comments
 (0)