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

web/rightpanel: show user ID on hover in member list

Browse source
This commit is contained in:
Tulir Asokan 2024-12-09 00:29:15 +02:00
parent e9f146ebc7
commit 08f1f1b446
2 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/ui/rightpanel/MemberList.tsx
View file

@ -37,7 +37,8 @@ const MemberRow = ({ evt, onClick }: MemberRowProps) => {
alt="" alt=""
loading="lazy" loading="lazy"
/> />
<span className="displayname">{getDisplayname(userID, content)}</span> <div className="displayname">{getDisplayname(userID, content)}</div>
<div className="user-id">{userID}</div>
</div> </div>
} }

44
web/src/ui/rightpanel/RightPanel.css
View file

@ -210,23 +210,59 @@ div.right-panel-content.members {
overflow: auto; overflow: auto;
> div.member { > div.member {
display: flex; display: grid;
align-items: center; column-gap: .5rem;
gap: .5rem;
cursor: var(--clickable-cursor); cursor: var(--clickable-cursor);
content-visibility: auto; content-visibility: auto;
contain-intrinsic-height: 3rem; contain-intrinsic-height: 3rem;
height: 3rem; height: 3rem;
padding: .25rem; padding: .25rem;
align-items: center;
> span.displayname { grid-template:
"avatar displayname" 3rem
/ 2.5rem 1fr;
&:hover {
grid-template:
"avatar displayname" auto
"avatar userid" auto
/ 2.5rem 1fr;
> div.user-id {
display: block;
align-self: start;
}
> div.displayname {
align-self: end;
}
}
> div.displayname, > div.user-id {
overflow: hidden; overflow: hidden;
text-wrap: nowrap; text-wrap: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
user-select: none; user-select: none;
} }
> div.displayname {
grid-area: displayname;
}
> img.avatar {
grid-area: avatar;
}
> div.user-id {
grid-area: userid;
font-family: var(--monospace-font-stack);
font-size: .75rem;
opacity: .7;
display: none;
}
&:hover, &:focus { &:hover, &:focus {
background-color: var(--light-hover-color); background-color: var(--light-hover-color);
} }