OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #12857 from matrix-org/dbkr/email_phone_css_temporary_move 

Move General user settings styles to more specific places
dbkr/sss
David Baker 2024-08-02 13:29:12 +01:00 committed by GitHub
parent 67f5c08301 3c490fa105
commit accbe07439
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 75 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
playwright/e2e/settings/preferences-user-settings-tab.spec.ts
View File

@ -36,12 +36,12 @@ test.describe("Preferences user settings tab", () => {
test("should be able to change the app language", async ({ uut, user }) => {
// Check language and region setting dropdown
const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput");
const languageInput = uut.getByRole("button", { name: "Language Dropdown" });
await languageInput.scrollIntoViewIfNeeded();
// Check the default value
await expect(languageInput.getByText("English")).toBeVisible();
// Click the button to display the dropdown menu
await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
await languageInput.click();
// Assert that the default option is rendered and highlighted
languageInput.getByRole("option", { name: /Albanian/ });
await expect(languageInput.getByRole("option", { name: /Albanian/ })).toHaveClass(
@ -49,7 +49,7 @@ test.describe("Preferences user settings tab", () => {
);
await expect(languageInput.getByRole("option", { name: /Deutsch/ })).toBeVisible();
// Click again to close the dropdown
await languageInput.getByRole("button", { name: "Language Dropdown" }).click();
await languageInput.click();
// Assert that the default value is rendered again
await expect(languageInput.getByText("English")).toBeVisible();
});

3
res/css/_components.pcss
View File

@ -37,6 +37,7 @@
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
@import "./components/views/pips/_WidgetPip.pcss";
@import "./components/views/polls/_PollOption.pcss";
@import "./components/views/settings/_EmailAddressesPhoneNumbers.pcss";
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@ -356,10 +357,10 @@
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss";
@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/spaces/_SpaceBasicSettings.pcss";

26
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss → res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss
View File

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2024 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,28 +15,23 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GeneralUserSettingsTab_section--discovery_existing {
/*
* These used to live in General User Settings. These components are horribly duplicative
* but share the same styles. For now I'm putting them here so I can renamed the general
* tab sensibly and before I can refactor these components.
*/
.mx_EmailAddressesPhoneNumbers_discovery_existing {
display: flex;
align-items: center;
}
.mx_GeneralUserSettingsTab_section--discovery_existing_address,
.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
.mx_EmailAddressesPhoneNumbers_discovery_existing_address,
.mx_EmailAddressesPhoneNumbers_discovery_existing_promptText {
flex: 1;
margin-right: 10px;
}
.mx_GeneralUserSettingsTab_section--discovery_existing_button {
.mx_EmailAddressesPhoneNumbers_discovery_existing_button {
margin-left: 5px;
}
.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
margin-right: $spacing-8;
margin-bottom: 2px;
}
.mx_GeneralUserSettingsTab_section_hint {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
}

21
res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss Normal file
View File

@ -0,0 +1,21 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2024 The Matrix.org Foundation C.I.C.
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_section_hint {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
}

12
src/components/views/settings/account/EmailAddresses.tsx
View File

@ -97,21 +97,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
{_t("settings|general|remove_email_prompt", { email: this.props.email.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
>
{_t("action|remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
>
{_t("action|cancel")}
</AccessibleButton>
@ -120,8 +120,8 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
}
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
{this.props.email.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

12
src/components/views/settings/account/PhoneNumbers.tsx
View File

@ -93,21 +93,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_promptText">
{_t("settings|general|remove_msisdn_prompt", { phone: this.props.msisdn.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
>
{_t("action|remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
>
{_t("action|cancel")}
</AccessibleButton>
@ -116,8 +116,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
}
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">
+{this.props.msisdn.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm" disabled={this.props.disabled}>

10
src/components/views/settings/discovery/EmailAddresses.tsx
View File

@ -178,7 +178,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
<span>
{_t("settings|general|discovery_email_verification_instructions")}
<AccessibleButton
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
kind="primary_sm"
onClick={this.onContinueClick}
disabled={this.state.continueDisabled}
@ -190,7 +190,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
disabled={this.props.disabled}
@ -201,7 +201,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
disabled={this.props.disabled}
@ -212,8 +212,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
}
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">{address}</span>
{status}
</div>
);

10
src/components/views/settings/discovery/PhoneNumbers.tsx
View File

@ -179,7 +179,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
let status;
if (verifying) {
status = (
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_verification">
<span>
{_t("settings|general|msisdn_verification_instructions")}
<br />
@ -200,7 +200,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
disabled={this.props.disabled}
@ -211,7 +211,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
className="mx_EmailAddressesPhoneNumbers_discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
disabled={this.props.disabled}
@ -222,8 +222,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
}
return (
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
<div className="mx_EmailAddressesPhoneNumbers_discovery_existing">
<span className="mx_EmailAddressesPhoneNumbers_discovery_existing_address">+{address}</span>
{status}
</div>
);

8
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View File

@ -70,12 +70,8 @@ const LanguageSection: React.FC = () => {
return (
<div className="mx_SettingsSubsection_contentStretch">
{_t("settings|general|application_language")}
<LanguageDropdown
className="mx_GeneralUserSettingsTab_section_languageInput"
onOptionChange={onLanguageChange}
value={language}
/>
<div className="mx_GeneralUserSettingsTab_section_hint">
<LanguageDropdown onOptionChange={onLanguageChange} value={language} />
<div className="mx_PreferencesUserSettingsTab_section_hint">
{_t("settings|general|application_language_reload_hint")}
</div>
</div>

6
test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap
View File

@ -76,15 +76,15 @@ exports[`<EmailAddresses /> should render email addresses 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_GeneralUserSettingsTab_section--discovery_existing"
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
>
foo@bar.com
</span>
<div
class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
class="mx_AccessibleButton mx_EmailAddressesPhoneNumbers_discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
role="button"
tabindex="0"
>

12
test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap
View File

@ -19,15 +19,15 @@ exports[`<PhoneNumbers /> should allow binding msisdn 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_GeneralUserSettingsTab_section--discovery_existing"
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
>
+441111111111
</span>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_verification"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_verification"
>
<span>
Please enter verification code sent via text.
@ -141,16 +141,16 @@ exports[`<PhoneNumbers /> should render phone numbers 1`] = `
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_GeneralUserSettingsTab_section--discovery_existing"
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
>
+
441111111111
</span>
<div
class="mx_AccessibleButton mx_GeneralUserSettingsTab_section--discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
class="mx_AccessibleButton mx_EmailAddressesPhoneNumbers_discovery_existing_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_sm"
role="button"
tabindex="0"
>

8
test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap
View File

@ -18,10 +18,10 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_GeneralUserSettingsTab_section--discovery_existing"
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
>
test@test.io
</span>
@ -84,10 +84,10 @@ exports[`<GeneralUserSettingsTab /> 3pids should display 3pid email addresses an
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_GeneralUserSettingsTab_section--discovery_existing"
class="mx_EmailAddressesPhoneNumbers_discovery_existing"
>
<span
class="mx_GeneralUserSettingsTab_section--discovery_existing_address"
class="mx_EmailAddressesPhoneNumbers_discovery_existing_address"
>
+
123456789

2
test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View File

@ -46,7 +46,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
/>
</div>
<div
class="mx_GeneralUserSettingsTab_section_hint"
class="mx_PreferencesUserSettingsTab_section_hint"
>
The app will reload after selecting another language
</div>