n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: fix line wrap in member events

Browse source
This commit is contained in:
Tulir Asokan 2024-11-18 20:25:39 +02:00
parent fa012554a7
commit 52feba5e6e
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/src/ui/timeline/content/MemberBody.tsx
View file

@ -29,17 +29,25 @@ function useChangeDescription(
onClick={use(LightboxContext)!}
alt=""
/>
const targetElem = <>{content.avatar_url && targetAvatar} {content.displayname ?? target}</>
const targetElem = <>
{content.avatar_url && targetAvatar}
<span className="name">{content.displayname ?? target}</span>
</>
if (content.membership === prevContent?.membership) {
if (content.displayname !== prevContent.displayname) {
if (content.avatar_url !== prevContent.avatar_url) {
return "changed their displayname and avatar"
return <>changed their displayname and avatar</>
} else if (!content.displayname) {
return "removed their displayname"
return <>removed their displayname</>
} else if (!prevContent.displayname) {
return `set their displayname to ${content.displayname}`
return <>set their displayname to <span className="name">{content.displayname}</span></>
}
return `changed their displayname from ${prevContent.displayname} to ${content.displayname}`
return <>
changed their displayname from
<span className="name">{prevContent.displayname}</span>
to
<span className="name">{content.displayname}</span>
</>
} else if (content.avatar_url !== prevContent.avatar_url) {
if (!content.avatar_url) {
return "removed their avatar"
@ -87,7 +95,7 @@ const MemberBody = ({ event, sender }: EventContentProps) => {
const content = event.content as MemberEventContent
const prevContent = event.unsigned.prev_content as MemberEventContent | undefined
return <div className="member-body">
<span className="sender-name">{sender?.content.displayname ?? event.sender}</span>
<span className="name sender-name">{sender?.content.displayname ?? event.sender}</span>
<span className="change-description">
{useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)}
</span>

14
web/src/ui/timeline/content/index.css
View file

@ -27,6 +27,20 @@ div.member-body {
display: flex;
align-items: center;
gap: .25rem;
span.name {
unicode-bidi: isolate;
max-width: 40ch;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> span.change-description {
display: flex;
align-items: center;
gap: .25rem;
}
}
div.message-text {