This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 831
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Kerry
authored
May 17, 2023
1 parent
4cc6ab1
commit 38ae8e9
Showing
5 changed files
with
1,212 additions
and
1,143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 0 additions & 25 deletions
25
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 <[email protected]> | ||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
|
|
@@ -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; | ||
|
|
@@ -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>.", | ||
| {}, | ||
| { | ||
|
|
@@ -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> | ||
| ); | ||
| } | ||
| } | ||
Oops, something went wrong.