Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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)!} onClick={use(LightboxContext)!}
alt="" 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.membership === prevContent?.membership) {
if (content.displayname !== prevContent.displayname) { if (content.displayname !== prevContent.displayname) {
if (content.avatar_url !== prevContent.avatar_url) { if (content.avatar_url !== prevContent.avatar_url) {
return "changed their displayname and avatar" return <>changed their displayname and avatar</>
} else if (!content.displayname) { } else if (!content.displayname) {
return "removed their displayname" return <>removed their displayname</>
} else if (!prevContent.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) { } else if (content.avatar_url !== prevContent.avatar_url) {
if (!content.avatar_url) { if (!content.avatar_url) {
return "removed their avatar" return "removed their avatar"
@ -87,7 +95,7 @@ const MemberBody = ({ event, sender }: EventContentProps) => {
const content = event.content as MemberEventContent const content = event.content as MemberEventContent
const prevContent = event.unsigned.prev_content as MemberEventContent | undefined const prevContent = event.unsigned.prev_content as MemberEventContent | undefined
return <div className="member-body"> 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"> <span className="change-description">
{useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)} {useChangeDescription(event.sender, event.state_key as UserID, content, prevContent)}
</span> </span>

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

@ -27,6 +27,20 @@ div.member-body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: .25rem; 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 { div.message-text {