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

Use semantic headings in user settings - profile (#10973)

Browse source 
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot
This commit is contained in:
Kerry 2023-05-29 13:36:09 +12:00 committed by GitHub
parent 520659242b
commit b35fb4fed2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/settings/general-user-settings-tab.spec.ts
View file

@ -53,7 +53,7 @@ describe("General user settings tab", () => {
cy.findByTestId("mx_GeneralUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("general").should("have.text", "General").should("be.visible");
cy.findByText("General").should("be.visible");
cy.get(".mx_ProfileSettings_profile")
.scrollIntoView()

5
res/css/views/settings/_ProfileSettings.pcss
View file

@ -15,7 +15,6 @@ limitations under the License.
*/
.mx_ProfileSettings {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
border-bottom: 1px solid $quinary-content;
.mx_ProfileSettings_avatarUpload {
@ -29,8 +28,8 @@ limitations under the License.
flex-grow: 1;
margin-inline-end: 54px;
.mx_Field:first-child {
margin-top: 0;
.mx_Field {
margin-top: $spacing-8;
}
.mx_ProfileSettings_profile_controls_topic {

3
src/components/views/settings/ProfileSettings.tsx
View file

@ -29,6 +29,7 @@ import AvatarSetting from "./AvatarSetting";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import PosthogTrackers from "../../../PosthogTrackers";
import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
interface IState {
originalDisplayName: string;
@ -183,7 +184,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
/>
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_profile_controls">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<SettingsSubsectionHeading heading={_t("Profile")} />
<Field
label={_t("Display Name")}
type="text"

2
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -136,7 +136,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
);
}
return (
<SettingsSubsection heading={<></>}>
<SettingsSubsection>
{toggle}
{advanced}
</SettingsSubsection>

15
src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file

@ -320,14 +320,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
});
};
private renderProfileSection(): JSX.Element {
return (
<div className="mx_SettingsTab_section">
<ProfileSettings />
</div>
);
}
private renderAccountSection(): JSX.Element {
let threepidSection: ReactNode = null;
@ -558,13 +550,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
return (
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="general">
{_t("General")}
</div>
{this.renderProfileSection()}
<SettingsSection heading={_t("General")}>
<ProfileSettings />
{this.renderAccountSection()}
{this.renderLanguageSection()}
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
</SettingsSection>
{discoverySection}
{this.renderIntegrationManagerSection()}
{accountManagementSection}

2
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file

@ -345,7 +345,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsection_content"
class="mx_SettingsSubsection_content mx_SettingsSubsection_noHeading"
>
<div
aria-expanded="false"