Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43: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="" alt=""
/> />
const targetElem = <> const targetElem = <>
{content.avatar_url && targetAvatar} {content.avatar_url && targetAvatar} <span className="name">
<span className="name">{content.displayname ?? target}</span> {content.displayname ?? target}
</span>
</> </>
if (content.membership === prevContent?.membership) { if (content.membership === prevContent?.membership) {
if (content.displayname !== prevContent.displayname) { if (content.displayname !== prevContent.displayname) {
@ -43,10 +44,9 @@ function useChangeDescription(
return <>set their displayname to <span className="name">{content.displayname}</span></> return <>set their displayname to <span className="name">{content.displayname}</span></>
} }
return <> return <>
changed their displayname from changed their displayname from <span className="name">
<span className="name">{prevContent.displayname}</span> {prevContent.displayname}
to </span> to <span className="name">{content.displayname}</span>
<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) {
@ -95,11 +95,12 @@ 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="name sender-name">{sender?.content.displayname ?? event.sender}</span> <span className="name sender-name">
<span className="change-description"> {sender?.content.displayname ?? event.sender}
</span> <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>
{content.reason ? <span className="reason">for {content.reason}</span> : null} {content.reason ? <span className="reason"> for {content.reason}</span> : null}
</div> </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 { div.member-body {
display: flex; span.name, span.reason {
align-items: center;
gap: .25rem;
span.name {
unicode-bidi: isolate; unicode-bidi: isolate;
max-width: 40ch;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
> span.change-description { img {
display: flex; /* Hacky vertical align with text. Can't use flex because it breaks line wrapping */
align-items: center; margin-bottom: -.125rem;
gap: .25rem;
text-wrap: nowrap;
} }
} }