imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 // Wait until spinners disappear
cy.get(".mx_GeneralUserSettingsTab_accountSection .mx_Spinner").should("not.exist"); cy.get(".mx_GeneralUserSettingsTab_section--account .mx_Spinner").should("not.exist");
cy.get(".mx_GeneralUserSettingsTab_discovery .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 // Assert that input areas for changing a password exists
cy.get("form.mx_GeneralUserSettingsTab_changePassword") cy.get("form.mx_GeneralUserSettingsTab_section--account_changePassword")
.scrollIntoView() .scrollIntoView()
.within(() => { .within(() => {
cy.findByLabelText("Current password").should("be.visible"); cy.findByLabelText("Current password").should("be.visible");
@ -120,7 +120,7 @@ describe("General user settings tab", () => {
}); });
// Check language and region setting dropdown // Check language and region setting dropdown
cy.get(".mx_GeneralUserSettingsTab_languageInput") cy.get(".mx_GeneralUserSettingsTab_section_languageInput")
.scrollIntoView() .scrollIntoView()
.within(() => { .within(() => {
// Check the default value // 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. limitations under the License.
*/ */
.mx_GeneralUserSettingsTab_discovery_existing_verification { .mx_GeneralUserSettingsTab_section--discovery_existing_verification {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

52
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. limitations under the License.
*/ */
.mx_GeneralUserSettingsTab_changePassword .mx_Field { .mx_GeneralUserSettingsTab_section--account_changePassword {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); .mx_Field {
} margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
.mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child { &:first-child {
margin-top: 0; margin-top: 0;
}
}
} }
/* TODO: Make this selector less painful */ /* TODO: Make this selector less painful */
.mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1), .mx_GeneralUserSettingsTab_section--account .mx_SettingsTab_subheading:nth-child(n + 1),
.mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2), .mx_GeneralUserSettingsTab_section--discovery .mx_SettingsTab_subheading:nth-child(n + 2),
.mx_SetIdServer .mx_SettingsTab_subheading { .mx_SetIdServer .mx_SettingsTab_subheading {
margin-top: 24px; margin-top: 24px;
} }
.mx_GeneralUserSettingsTab_accountSection .mx_Spinner, .mx_GeneralUserSettingsTab_section--account,
.mx_GeneralUserSettingsTab_discovery .mx_Spinner { .mx_GeneralUserSettingsTab_section--discovery {
/* Move the spinner to the left side of the container (default center) */ .mx_Spinner {
justify-content: left; /* Move the spinner to the left side of the container (default center) */
justify-content: flex-start;
}
} }
.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses, .mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers, .mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
.mx_GeneralUserSettingsTab_discovery .mx_GeneralUserSettingsTab_discovery_existing, .mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
.mx_GeneralUserSettingsTab_languageInput { .mx_GeneralUserSettingsTab_section_languageInput {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
} }
.mx_GeneralUserSettingsTab_discovery_existing { .mx_GeneralUserSettingsTab_section--discovery_existing {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
} }
.mx_GeneralUserSettingsTab_discovery_existing_address, .mx_GeneralUserSettingsTab_section--discovery_existing_address,
.mx_GeneralUserSettingsTab_discovery_existing_promptText { .mx_GeneralUserSettingsTab_section--discovery_existing_promptText {
flex: 1; flex: 1;
margin-right: 10px; margin-right: 10px;
} }
.mx_GeneralUserSettingsTab_discovery_existing_button { .mx_GeneralUserSettingsTab_section--discovery_existing_button {
margin-left: 5px; margin-left: 5px;
} }
.mx_GeneralUserSettingsTab_warningIcon { .mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
vertical-align: middle;
}
.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch {
float: right; 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 { public render(): React.ReactNode {
if (this.state.verifyRemove) { if (this.state.verifyRemove) {
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText"> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(email)s?", { email: this.props.email.address })} {_t("Remove %(email)s?", { email: this.props.email.address })}
</span> </span>
<AccessibleButton <AccessibleButton
onClick={this.onActuallyRemove} onClick={this.onActuallyRemove}
kind="danger_sm" kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
> >
{_t("Remove")} {_t("Remove")}
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
onClick={this.onDontRemove} onClick={this.onDontRemove}
kind="link_sm" kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
> >
{_t("Cancel")} {_t("Cancel")}
</AccessibleButton> </AccessibleButton>
@ -117,8 +117,10 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
} }
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{this.props.email.address}</span> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
{this.props.email.address}
</span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm"> <AccessibleButton onClick={this.onRemove} kind="danger_sm">
{_t("Remove")} {_t("Remove")}
</AccessibleButton> </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 { public render(): React.ReactNode {
if (this.state.verifyRemove) { if (this.state.verifyRemove) {
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_promptText"> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_promptText">
{_t("Remove %(phone)s?", { phone: this.props.msisdn.address })} {_t("Remove %(phone)s?", { phone: this.props.msisdn.address })}
</span> </span>
<AccessibleButton <AccessibleButton
onClick={this.onActuallyRemove} onClick={this.onActuallyRemove}
kind="danger_sm" kind="danger_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
> >
{_t("Remove")} {_t("Remove")}
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
onClick={this.onDontRemove} onClick={this.onDontRemove}
kind="link_sm" kind="link_sm"
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
> >
{_t("Cancel")} {_t("Cancel")}
</AccessibleButton> </AccessibleButton>
@ -112,8 +112,8 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
} }
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address"> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">
+{this.props.msisdn.address} +{this.props.msisdn.address}
</span> </span>
<AccessibleButton onClick={this.onRemove} kind="danger_sm"> <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> <span>
{_t("Verify the link in your inbox")} {_t("Verify the link in your inbox")}
<AccessibleButton <AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm" kind="primary_sm"
onClick={this.onContinueClick} onClick={this.onContinueClick}
disabled={this.state.continueDisabled} disabled={this.state.continueDisabled}
@ -229,7 +229,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else if (bound) { } else if (bound) {
status = ( status = (
<AccessibleButton <AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm" kind="danger_sm"
onClick={this.onRevokeClick} onClick={this.onRevokeClick}
> >
@ -239,7 +239,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} else { } else {
status = ( status = (
<AccessibleButton <AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm" kind="primary_sm"
onClick={this.onShareClick} onClick={this.onShareClick}
> >
@ -249,8 +249,8 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
} }
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">{address}</span> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">{address}</span>
{status} {status}
</div> </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; let status;
if (verifying) { if (verifying) {
status = ( status = (
<span className="mx_GeneralUserSettingsTab_discovery_existing_verification"> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_verification">
<span> <span>
{_t("Please enter verification code sent via text.")} {_t("Please enter verification code sent via text.")}
<br /> <br />
@ -243,7 +243,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else if (bound) { } else if (bound) {
status = ( status = (
<AccessibleButton <AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="danger_sm" kind="danger_sm"
onClick={this.onRevokeClick} onClick={this.onRevokeClick}
> >
@ -253,7 +253,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} else { } else {
status = ( status = (
<AccessibleButton <AccessibleButton
className="mx_GeneralUserSettingsTab_discovery_existing_button" className="mx_GeneralUserSettingsTab_section--discovery_existing_button"
kind="primary_sm" kind="primary_sm"
onClick={this.onShareClick} onClick={this.onShareClick}
> >
@ -263,8 +263,8 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
} }
return ( return (
<div className="mx_GeneralUserSettingsTab_discovery_existing"> <div className="mx_GeneralUserSettingsTab_section--discovery_existing">
<span className="mx_GeneralUserSettingsTab_discovery_existing_address">+{address}</span> <span className="mx_GeneralUserSettingsTab_section--discovery_existing_address">+{address}</span>
{status} {status}
</div> </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 { private renderAccountSection(): JSX.Element {
let passwordChangeForm: ReactNode = ( let passwordChangeForm: ReactNode = (
<ChangePassword <ChangePassword
className="mx_GeneralUserSettingsTab_changePassword" className="mx_GeneralUserSettingsTab_section--account_changePassword"
rowClassName="" rowClassName=""
buttonKind="primary" buttonKind="primary"
onError={this.onPasswordChangeError} onError={this.onPasswordChangeError}
@ -401,7 +401,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
); );
} }
return ( 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> <span className="mx_SettingsTab_subheading">{_t("Account")}</span>
{externalAccountManagement} {externalAccountManagement}
<p className="mx_SettingsTab_subsectionText">{passwordChangeText}</p> <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"> <div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Language and region")}</span> <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
<LanguageDropdown <LanguageDropdown
className="mx_GeneralUserSettingsTab_languageInput" className="mx_GeneralUserSettingsTab_section_languageInput"
onOptionChange={this.onLanguageChange} onOptionChange={this.onLanguageChange}
value={this.state.language} value={this.state.language}
/> />
@ -427,7 +427,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
private renderSpellCheckSection(): JSX.Element { private renderSpellCheckSection(): JSX.Element {
return ( return (
<div className="mx_SettingsTab_section mx_SettingsTab_section_spellcheck"> <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
<span className="mx_SettingsTab_subheading"> <span className="mx_SettingsTab_subheading">
{_t("Spell check")} {_t("Spell check")}
<ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} /> <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 msisdns = this.state.loading3pids ? <Spinner /> : <DiscoveryPhoneNumbers msisdns={this.state.msisdns} />;
const threepidSection = this.state.haveIdServer ? ( const threepidSection = this.state.haveIdServer ? (
<div className="mx_GeneralUserSettingsTab_discovery"> <>
<span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span> <span className="mx_SettingsTab_subheading">{_t("Email addresses")}</span>
{emails} {emails}
<span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span> <span className="mx_SettingsTab_subheading">{_t("Phone numbers")}</span>
{msisdns} {msisdns}
</div> </>
) : null; ) : null;
return ( return (
<div className="mx_SettingsTab_section"> <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--discovery">
{threepidSection} {threepidSection}
{/* has its own heading as it includes the current identity server */} {/* has its own heading as it includes the current identity server */}
<SetIdServer missingTerms={false} /> <SetIdServer missingTerms={false} />
@ -521,7 +521,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
const discoWarning = this.state.requiredPolicyInfo.hasTerms ? ( const discoWarning = this.state.requiredPolicyInfo.hasTerms ? (
<img <img
className="mx_GeneralUserSettingsTab_warningIcon" className="mx_GeneralUserSettingsTab_heading_warningIcon"
src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default} src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
width="18" width="18"
height="18" height="18"