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=""
loading="lazy"
/>
<span className="displayname">{getDisplayname(userID, content)}</span>
<div className="displayname">{getDisplayname(userID, content)}</div>
<div className="user-id">{userID}</div>
</div>
}

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

@ -210,23 +210,59 @@ div.right-panel-content.members {
overflow: auto;
> div.member {
display: flex;
align-items: center;
gap: .5rem;
display: grid;
column-gap: .5rem;
cursor: var(--clickable-cursor);
content-visibility: auto;
contain-intrinsic-height: 3rem;
height: 3rem;
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;
text-wrap: nowrap;
text-overflow: ellipsis;
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 {
background-color: var(--light-hover-color);
}