PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use semantic headings in user settings Preferences (#10794)

Browse source 
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
This commit is contained in:
Kerry 2023-05-17 13:16:49 +12:00 committed by GitHub
parent 4cc6ab1187
commit 38ae8e98e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 1200 additions and 1131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
cypress/e2e/settings/preferences-user-settings-tab.spec.ts
View file

@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => {
it("should be rendered properly", () => { it("should be rendered properly", () => {
cy.openUserSettings("Preferences"); cy.openUserSettings("Preferences");
cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => { cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => {
// Assert that the top heading is rendered // 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( cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", {
"User settings tab - Preferences", // Emulate TabbedView's actual min and max widths
{ // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width
// Emulate TabbedView's actual min and max widths // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right)
// 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width widths: [580, 796],
// 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right) });
widths: [580, 796],
},
);
}); });
}); });

1
res/css/_components.pcss
View file

@ -346,7 +346,6 @@
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.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/_SecurityUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";

25
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
View file

@ -1,25 +0,0 @@
/*
Copyright 2019 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_PreferencesUserSettingsTab {
.mx_Field {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_SettingsTab_section {
margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs);
}
}

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

@ -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> Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License"); 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 { Action } from "../../../../../dispatcher/actions";
import SdkConfig from "../../../../../SdkConfig"; import SdkConfig from "../../../../../SdkConfig";
import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage"; import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
import SettingsSubsection from "../../shared/SettingsSubsection";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
interface IProps { interface IProps {
closeSettingsFn(success: boolean): void; closeSettingsFn(success: boolean): void;
@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
.filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase)); .filter((it) => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
return ( return (
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab"> <SettingsTab data-testid="mx_PreferencesUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="preferences"> <SettingsSection heading={_t("Preferences")}>
{_t("Preferences")} {roomListSettings.length > 0 && (
</div> <SettingsSubsection heading={_t("Room list")}>
{this.renderGroup(roomListSettings)}
</SettingsSubsection>
)}
{roomListSettings.length > 0 && ( <SettingsSubsection heading={_t("Spaces")}>
<div className="mx_SettingsTab_section"> {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)}
<span className="mx_SettingsTab_subheading">{_t("Room list")}</span> </SettingsSubsection>
{this.renderGroup(roomListSettings)}
</div>
)}
<div className="mx_SettingsTab_section"> <SettingsSubsection
<span className="mx_SettingsTab_subheading">{_t("Spaces")}</span> heading={_t("Keyboard shortcuts")}
{this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} description={_t(
</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Keyboard shortcuts")}</span>
<div className="mx_SettingsFlag">
{_t(
"To view all keyboard shortcuts, <a>click here</a>.", "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)} {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)}
</div> </SettingsSubsection>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Displaying time")}>
<span className="mx_SettingsTab_subheading">{_t("Displaying time")}</span> {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection
<span className="mx_SettingsTab_subheading">{_t("Presence")}</span> heading={_t("Presence")}
<span className="mx_SettingsTab_subsectionText"> description={_t("Share your activity and status with others.")}
{_t("Share your activity and status with others.")} >
</span> {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Composer")}>
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span> {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Code blocks")}>
<span className="mx_SettingsTab_subheading">{_t("Code blocks")}</span> {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Images, GIFs and videos")}>
<span className="mx_SettingsTab_subheading">{_t("Images, GIFs and videos")}</span> {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Timeline")}>
<span className="mx_SettingsTab_subheading">{_t("Timeline")}</span> {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("Room directory")}>
<span className="mx_SettingsTab_subheading">{_t("Room directory")}</span> {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} </SettingsSubsection>
</div>
<div className="mx_SettingsTab_section"> <SettingsSubsection heading={_t("General")} stretchContent>
<span className="mx_SettingsTab_subheading">{_t("General")}</span> {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
{this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)}
<SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet /> <SettingsFlag name="Electron.showTrayIcon" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag <SettingsFlag
name="Electron.enableHardwareAcceleration" name="Electron.enableHardwareAcceleration"
level={SettingLevel.PLATFORM} level={SettingLevel.PLATFORM}
hideIfCannotSet hideIfCannotSet
label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", { label={_t("Enable hardware acceleration (restart %(appName)s to take effect)", {
appName: SdkConfig.get().brand, appName: SdkConfig.get().brand,
})} })}
/> />
<SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet /> <SettingsFlag name="Electron.alwaysShowMenuBar" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet /> <SettingsFlag name="Electron.autoLaunch" level={SettingLevel.PLATFORM} hideIfCannotSet />
<SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet /> <SettingsFlag name="Electron.warnBeforeExit" level={SettingLevel.PLATFORM} hideIfCannotSet />
<Field <Field
label={_t("Autocomplete delay (ms)")} label={_t("Autocomplete delay (ms)")}
type="number" type="number"
value={this.state.autocompleteDelay} value={this.state.autocompleteDelay}
onChange={this.onAutocompleteDelayChange} onChange={this.onAutocompleteDelayChange}
/> />
<Field <Field
label={_t("Read Marker lifetime (ms)")} label={_t("Read Marker lifetime (ms)")}
type="number" type="number"
value={this.state.readMarkerInViewThresholdMs} value={this.state.readMarkerInViewThresholdMs}
onChange={this.onReadMarkerInViewThresholdMs} onChange={this.onReadMarkerInViewThresholdMs}
/> />
<Field <Field
label={_t("Read Marker off-screen lifetime (ms)")} label={_t("Read Marker off-screen lifetime (ms)")}
type="number" type="number"
value={this.state.readMarkerOutOfViewThresholdMs} value={this.state.readMarkerOutOfViewThresholdMs}
onChange={this.onReadMarkerOutOfViewThresholdMs} onChange={this.onReadMarkerOutOfViewThresholdMs}
/> />
</div> </SettingsSubsection>
</div> </SettingsSection>
</SettingsTab>
); );
} }
} }

2118
test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View file

File diff suppressed because it is too large Load diff