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

Clarify style rule structure of ProfileSettings to avoid unexpected regressions (#8884)

Browse source
This commit is contained in:
Suguru Hirahara 2022-06-25 17:23:33 +00:00 committed by GitHub
parent 2242a36851
commit 33d680b134
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
res/css/views/settings/_ProfileSettings.scss
View file

@ -14,49 +14,49 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ProfileSettings_controls_topic {
& > textarea {
font-family: inherit;
resize: vertical;
}
}
.mx_ProfileSettings_profile {
display: flex;
}
.mx_ProfileSettings_controls {
flex-grow: 1;
margin-right: 54px;
}
.mx_ProfileSettings_controls .mx_Field #profileTopic {
height: 4em;
}
.mx_ProfileSettings_controls .mx_Field:first-child {
margin-top: 0;
}
.mx_ProfileSettings_userId {
margin-right: $spacing-20;
}
.mx_ProfileSettings_avatarUpload {
display: none;
}
.mx_ProfileSettings_profileForm {
.mx_ProfileSettings {
@mixin mx_Settings_fullWidthField;
border-bottom: 1px solid $quinary-content;
}
.mx_ProfileSettings_buttons {
margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
margin-bottom: 28px;
.mx_ProfileSettings_avatarUpload {
display: none;
}
> .mx_AccessibleButton_kind_link {
font-size: $font-14px;
margin-right: 10px;
.mx_ProfileSettings_profile {
display: flex;
.mx_ProfileSettings_profile_controls {
flex-grow: 1;
margin-inline-end: 54px;
.mx_Field:first-child {
margin-top: 0;
}
.mx_ProfileSettings_profile_controls_topic {
& > textarea {
font-family: inherit;
resize: vertical;
}
&.mx_ProfileSettings_profile_controls_topic--room {
height: 4em;
}
}
.mx_ProfileSettings_profile_controls_userId {
margin-inline-end: $spacing-20;
}
}
}
.mx_ProfileSettings_buttons {
margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
margin-bottom: $spacing-28;
> .mx_AccessibleButton_kind_link {
font-size: $font-14px;
margin-inline-end: 10px; // TODO: Use a spacing variable
}
}
}

12
src/components/views/room_settings/RoomProfileSettings.tsx
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import React, { createRef } from 'react';
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@ -249,7 +250,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
onSubmit={this.saveProfile}
autoComplete="off"
noValidate={true}
className="mx_ProfileSettings_profileForm"
className="mx_ProfileSettings"
>
<input
type="file"
@ -260,7 +261,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
accept="image/*"
/>
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_controls">
<div className="mx_ProfileSettings_profile_controls">
<Field
label={_t("Room Name")}
type="text"
@ -270,8 +271,11 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
disabled={!this.state.canSetName}
/>
<Field
className="mx_ProfileSettings_controls_topic"
id="profileTopic"
className={classNames(
"mx_ProfileSettings_profile_controls_topic",
"mx_ProfileSettings_profile_controls_topic--room",
)}
id="profileTopic" // See: NewRoomIntro.tsx
label={_t("Room Topic")}
disabled={!this.state.canSetTopic}
type="text"

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

@ -183,7 +183,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
onSubmit={this.saveProfile}
autoComplete="off"
noValidate={true}
className="mx_ProfileSettings_profileForm"
className="mx_ProfileSettings"
>
<input
type="file"
@ -194,7 +194,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
accept="image/*"
/>
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_controls">
<div className="mx_ProfileSettings_profile_controls">
<span className="mx_SettingsTab_subheading">{ _t("Profile") }</span>
<Field
label={_t("Display Name")}
@ -204,7 +204,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
onChange={this.onDisplayNameChanged}
/>
<p>
{ userIdentifier && <span className="mx_ProfileSettings_userId">
{ userIdentifier && <span className="mx_ProfileSettings_profile_controls_userId">
{ userIdentifier }
</span> }
{ hostingSignup }