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

Simplify nodes on ThirdPartyMemberInfo (#10889)

Browse source 
* Remove mx_MemberInfo_profileField

* Merge mx_MemberInfo_profile with mx_MemberInfo_container

* Remove redundant div elements

* Update a Jest snapshot
This commit is contained in:
Suguru Hirahara 2023-05-24 08:28:15 +00:00 committed by GitHub
parent 7248878e7d
commit 0c30f0c838
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
res/css/views/rooms/_MemberInfo.pcss
View file

@ -76,6 +76,12 @@ limitations under the License.
.mx_MemberInfo_container { .mx_MemberInfo_container {
margin: 0 16px 16px 16px; margin: 0 16px 16px 16px;
&.mx_MemberInfo_container--profile {
margin-bottom: 16px;
font-size: $font-15px;
position: relative;
}
} }
.mx_MemberInfo_avatar { .mx_MemberInfo_avatar {
@ -95,23 +101,11 @@ limitations under the License.
} }
} }
.mx_MemberInfo_profile {
margin-bottom: 16px;
}
.mx_MemberInfo_profileField {
font-size: $font-15px;
position: relative;
}
.mx_MemberInfo_buttons {
margin-bottom: 16px;
}
.mx_MemberInfo_field { .mx_MemberInfo_field {
cursor: pointer; cursor: pointer;
font-size: $font-15px; font-size: $font-15px;
color: $primary-content; color: $primary-content;
margin-left: 8px; margin-left: 8px;
margin-bottom: 16px;
line-height: $font-23px; line-height: $font-23px;
} }

8
src/components/views/rooms/ThirdPartyMemberInfo.tsx
View file

@ -127,12 +127,10 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
adminTools = ( adminTools = (
<div className="mx_MemberInfo_container"> <div className="mx_MemberInfo_container">
<h3>{_t("Admin Tools")}</h3> <h3>{_t("Admin Tools")}</h3>
<div className="mx_MemberInfo_buttons">
<AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}> <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}>
{_t("Revoke invite")} {_t("Revoke invite")}
</AccessibleButton> </AccessibleButton>
</div> </div>
</div>
); );
} }
@ -154,13 +152,9 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
<AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel} title={_t("Close")} /> <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel} title={_t("Close")} />
<h2>{this.state.displayName}</h2> <h2>{this.state.displayName}</h2>
</div> </div>
<div className="mx_MemberInfo_container"> <div className="mx_MemberInfo_container mx_MemberInfo_container--profile">
<div className="mx_MemberInfo_profile">
<div className="mx_MemberInfo_profileField">
{_t("Invited by %(sender)s", { sender: this.state.senderName })} {_t("Invited by %(sender)s", { sender: this.state.senderName })}
</div> </div>
</div>
</div>
{adminTools} {adminTools}
</div> </div>
); );

20
test/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
View file

@ -20,20 +20,12 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
</h2> </h2>
</div> </div>
<div <div
class="mx_MemberInfo_container" class="mx_MemberInfo_container mx_MemberInfo_container--profile"
>
<div
class="mx_MemberInfo_profile"
>
<div
class="mx_MemberInfo_profileField"
> >
Invited by Alice DisplayName Invited by Alice DisplayName
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
`; `;
exports[`<ThirdPartyMemberInfo /> should render invite when room in not available 1`] = ` exports[`<ThirdPartyMemberInfo /> should render invite when room in not available 1`] = `
@ -56,18 +48,10 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
</h2> </h2>
</div> </div>
<div <div
class="mx_MemberInfo_container" class="mx_MemberInfo_container mx_MemberInfo_container--profile"
>
<div
class="mx_MemberInfo_profile"
>
<div
class="mx_MemberInfo_profileField"
> >
Invited by Alice DisplayName Invited by Alice DisplayName
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
`; `;