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 member event line wrapping

Browse source
This commit is contained in:
Tulir Asokan 2024-12-11 00:41:20 +02:00
parent 0dda980b4a
commit f0cb397316
2 changed files with 14 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,8 +30,9 @@ function useChangeDescription(
alt=""
/>
const targetElem = <>
{content.avatar_url && targetAvatar}
<span className="name">{content.displayname ?? target}</span>
{content.avatar_url && targetAvatar} <span className="name">
{content.displayname ?? target}
</span>
</>
if (content.membership === prevContent?.membership) {
if (content.displayname !== prevContent.displayname) {
@ -43,10 +44,9 @@ function useChangeDescription(
return <>set their displayname to <span className="name">{content.displayname}</span></>
}
return <>
changed their displayname from
<span className="name">{prevContent.displayname}</span>
to
<span className="name">{content.displayname}</span>
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) {
@ -95,11 +95,12 @@ 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="name sender-name">{sender?.content.displayname ?? event.sender}</span>
<span className="change-description">
<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>
{content.reason ? <span className="reason">for {content.reason}</span> : null}
{content.reason ? <span className="reason"> for {content.reason}</span> : null}
</div>
}

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

@ -24,23 +24,13 @@ div.redacted-body, div.decryption-pending-body {
}
div.member-body {
display: flex;
align-items: center;
gap: .25rem;
span.name {
span.name, span.reason {
unicode-bidi: isolate;
max-width: 40ch;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> span.change-description {
display: flex;
align-items: center;
gap: .25rem;
text-wrap: nowrap;
img {
/* Hacky vertical align with text. Can't use flex because it breaks line wrapping */
margin-bottom: -.125rem;
}
}