Invite dialog: display MXID on its own line (#11756)

* Invite dialog: display MXID on its own line

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>

* Refactor to satisfy i18n linter

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>

---------

Signed-off-by: Andrew Ferrazzutti <andrewf@element.io>
dbkr/sss
Andrew Ferrazzutti 2024-08-01 10:17:49 -04:00 committed by GitHub
parent a38a5161ef
commit 127051892d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 47 additions and 35 deletions

View File

@ -163,6 +163,10 @@ a.mx_RoomPreviewBar_inviter {
cursor: pointer;
}
.mx_RoomPreviewBar_inviter_mxid {
color: var(--cpd-color-text-secondary);
}
.mx_RoomPreviewBar_icon {
margin-right: 8px;
vertical-align: text-top;

View File

@ -506,33 +506,39 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
break;
}
case MessageCase.Invite: {
const isDM = this.isDMInvite();
const avatar = <RoomAvatar room={this.props.room} oobData={this.props.oobData} />;
const inviteMember = this.getInviteMember();
let inviterElement: JSX.Element;
if (inviteMember) {
inviterElement = (
<span>
<span className="mx_RoomPreviewBar_inviter">{inviteMember.rawDisplayName}</span> (
{inviteMember.userId})
</span>
);
} else {
inviterElement = <span className="mx_RoomPreviewBar_inviter">{this.props.inviterName}</span>;
}
const userName = (
<span className="mx_RoomPreviewBar_inviter">
{inviteMember?.rawDisplayName ?? this.props.inviterName}
</span>
);
const inviterElement = (
<>
{isDM
? _t("room|dm_invite_subtitle", {}, { userName })
: _t("room|invite_subtitle", {}, { userName })}
{inviteMember && (
<>
<br />
<span className="mx_RoomPreviewBar_inviter_mxid">{inviteMember.userId}</span>
</>
)}
</>
);
const isDM = this.isDMInvite();
if (isDM) {
title = _t("room|dm_invite_title", {
user: inviteMember?.name ?? this.props.inviterName,
});
subTitle = [avatar, _t("room|dm_invite_subtitle", {}, { userName: () => inviterElement })];
primaryActionLabel = _t("room|dm_invite_action");
} else {
title = _t("room|invite_title", { roomName });
subTitle = [avatar, _t("room|invite_subtitle", {}, { userName: () => inviterElement })];
primaryActionLabel = _t("action|accept");
}
subTitle = [avatar, inviterElement];
const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
const member = this.props.room?.currentState.getMember(myUserId);

View File

@ -1991,7 +1991,7 @@
"invite_reject_ignore": "Reject & Ignore user",
"invite_sent_to_email": "This invite was sent to %(email)s",
"invite_sent_to_email_room": "This invite to %(roomName)s was sent to %(email)s",
"invite_subtitle": "<userName/> invited you",
"invite_subtitle": "Invited by <userName/>",
"invite_this_room": "Invite to this room",
"invite_title": "Do you want to join %(roomName)s?",
"inviter_unknown": "Unknown",

View File

@ -264,12 +264,12 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
</p>
<p>
<span>
Invited by
<span
class="mx_RoomPreviewBar_inviter"
>
@inviter:test.com
</span>
invited you
</span>
</p>
</div>
@ -322,18 +322,19 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
</p>
<p>
<span>
<span>
<span
class="mx_RoomPreviewBar_inviter"
>
@inviter:test.com name
</span>
(
@inviter:test.com
)
<span
class="mx_RoomPreviewBar_inviter"
>
@inviter:test.com name
</span>
wants to chat
</span>
<br />
<span
class="mx_RoomPreviewBar_inviter_mxid"
>
@inviter:test.com
</span>
</p>
</div>
`;
@ -387,17 +388,18 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
</p>
<p>
<span>
<span>
<span
class="mx_RoomPreviewBar_inviter"
>
@inviter:test.com name
</span>
(
@inviter:test.com
)
Invited by
<span
class="mx_RoomPreviewBar_inviter"
>
@inviter:test.com name
</span>
invited you
</span>
<br />
<span
class="mx_RoomPreviewBar_inviter_mxid"
>
@inviter:test.com
</span>
</p>
</div>