mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Conform the style rules of GeneralUserSettingsTab.tsx to the style guide (#10595)

Browse source 
* Nesting: `mx_GeneralUserSettingsTab_changePassword`

* Nesting: `mx_Spinner`

* Conform the style rules to the naming policy

For elements inside "mx_GeneralUserSettingsTab_accountSection" and "mx_GeneralUserSettingsTab_discovery"

* Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming policy
This commit is contained in:
Suguru Hirahara 2023-05-12 10:33:01 +00:00 committed by GitHub
parent e6421fded5
commit cb779fe872
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,12 +83,12 @@ describe("General user settings tab", () => {
});
// Wait until spinners disappear
cy.get(".mx_GeneralUserSettingsTab_accountSection .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_discovery .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_section--account .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_section--discovery .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_accountSection").within(() => {
cy.get(".mx_GeneralUserSettingsTab_section--account").within(() => {
// Assert that input areas for changing a password exists
cy.get("form.mx_GeneralUserSettingsTab_changePassword")
cy.get("form.mx_GeneralUserSettingsTab_section--account_changePassword")
.scrollIntoView()
.within(() => {
cy.findByLabelText("Current password").should("be.visible");
@ -120,7 +120,7 @@ describe("General user settings tab", () => {
});
// Check language and region setting dropdown
cy.get(".mx_GeneralUserSettingsTab_languageInput")
cy.get(".mx_GeneralUserSettingsTab_section_languageInput")
.scrollIntoView()
.within(() => {
// Check the default value

2
res/css/views/settings/_PhoneNumbers.pcss
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GeneralUserSettingsTab_discovery_existing_verification {
.mx_GeneralUserSettingsTab_section--discovery_existing_verification {
display: inline-flex;
align-items: center;

46
res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
View file

@ -14,54 +14,58 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_GeneralUserSettingsTab_changePassword .mx_Field {
.mx_GeneralUserSettingsTab_section--account_changePassword {
.mx_Field {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
&:first-child {
margin-top: 0;
}
}
}
/* TODO: Make this selector less painful */
.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2),
.mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
.mx_SetIdServer .mx_SettingsTab_subheading {
margin-top: 24px;
}
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
.mx_GeneralUserSettingsTab_section--account,
.mx_GeneralUserSettingsTab_section--discovery {
.mx_Spinner {
/* Move the spinner to the left side of the container (default center) */
justify-content: left;
justify-content: flex-start;
}
}
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_GeneralUserSettingsTab_discovery_existing,
.mx_GeneralUserSettingsTab_languageInput {
.mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
.mx_GeneralUserSettingsTab_section_languageInput {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_GeneralUserSettingsTab_discovery_existing {
.mx_GeneralUserSettingsTab_section--discovery_existing {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.mx_GeneralUserSettingsTab_discovery_existing_address,
.mx_GeneralUserSettingsTab_discovery_existing_promptText {
.mx_GeneralUserSettingsTab_section--discovery_existing_address,
.mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
flex: 1;
margin-right: 10px;
}
.mx_GeneralUserSettingsTab_discovery_existing_button {
.mx_GeneralUserSettingsTab_section--discovery_existing_button {
margin-left: 5px;
}
.mx_GeneralUserSettingsTab_warningIcon {
vertical-align: middle;
}
.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch {
.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
float: right;
}
.mx_GeneralUserSettingsTab_heading_warningIcon {
vertical-align: middle;
}

14
src/components/views/settings/account/EmailAddresses.tsx
View file

@ -94,21 +94,21 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(email)s?", { email: this.props.email.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Cancel")}
</AccessibleButton>
@ -117,8 +117,10 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
}
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{this.props.email.address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
{this.props.email.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm">
{_t("Remove")}
</AccessibleButton>

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

@ -89,21 +89,21 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
public render(): React.ReactNode {
if (this.state.verifyRemove) {
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
</span>
<AccessibleButton
onClick={this.onActuallyRemove}
kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Remove")}
</AccessibleButton>
<AccessibleButton
onClick={this.onDontRemove}
kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
>
{_t("Cancel")}
</AccessibleButton>
@ -112,8 +112,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
}
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+{this.props.msisdn.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm">

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

@ -217,7 +217,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
<span>
{_t("Verify the link in your inbox")}
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onContinueClick}
disabled={this.state.continueDisabled}
@ -229,7 +229,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
>
@ -239,7 +239,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
>
@ -249,8 +249,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
}
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
{status}
</div>
);

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

@ -222,7 +222,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
let status;
if (verifying) {
status = (
<span className="mx_GeneralUserSettingsTab_discovery_existing_verification">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
<span>
{_t("Please enter verification code sent via text.")}
<br />
@ -243,7 +243,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else if (bound) {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm"
onClick={this.onRevokeClick}
>
@ -253,7 +253,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else {
status = (
<AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button"
className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm"
onClick={this.onShareClick}
>
@ -263,8 +263,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
}
return (
<div className="mx_GeneralUserSettingsTab_discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span>
<div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
{status}
</div>
);

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

@ -324,7 +324,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderAccountSection(): JSX.Element {
let passwordChangeForm: ReactNode = (
<ChangePassword
className="mx_GeneralUserSettingsTab_changePassword"
className="mx_GeneralUserSettingsTab_section--account_changePassword"
rowClassName=""
buttonKind="primary"
onError={this.onPasswordChangeError}
@ -401,7 +401,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
);
}
return (
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_accountSection">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--account">
<span className="mx_SettingsTab_subheading">{_t("Account")}</span>
{externalAccountManagement}
<p className="mx_SettingsTab_subsectionText">{passwordChangeText}</p>
@ -417,7 +417,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
<LanguageDropdown
className="mx_GeneralUserSettingsTab_languageInput"
className="mx_GeneralUserSettingsTab_section_languageInput"
onOptionChange={this.onLanguageChange}
value={this.state.language}
/>
@ -427,7 +427,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderSpellCheckSection(): JSX.Element {
return (
<div className="mx_SettingsTab_section mx_SettingsTab_section_spellcheck">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
<span className="mx_SettingsTab_subheading">
{_t("Spell check")}
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
@ -471,17 +471,17 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const msisdns = this.state.loading3pids ? <Spinner /> : <DiscoveryPhoneNumbers msisdns={this.state.msisdns} />;
const threepidSection = this.state.haveIdServer ? (
<div className="mx_GeneralUserSettingsTab_discovery">
<>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
{emails}
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
{msisdns}
</div>
</>
) : null;
return (
<div className="mx_SettingsTab_section">
<div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--discovery">
{threepidSection}
{/* has its own heading as it includes the current identity server */}
<SetIdServer missingTerms={false} />
@ -521,7 +521,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
<img
className="mx_GeneralUserSettingsTab_warningIcon"
className="mx_GeneralUserSettingsTab_heading_warningIcon"
src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
width="18"
height="18"