imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify Space Panel notification badge layout (#6977)

Browse source
This commit is contained in:
Michael Telatynski 2021-10-19 16:11:53 +01:00 • committed by GitHub
parent 694ec946e2
commit 974f45930c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

70
res/css/structures/_SpacePanel.scss
View file

@ -227,7 +227,7 @@ $activeBorderColor: $secondary-content;
height: 20px; height: 20px;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
display: none; visibility: hidden;
position: relative; position: relative;
&::before { &::before {
@ -246,67 +246,45 @@ $activeBorderColor: $secondary-content;
} }
} }
.mx_SpaceButton_avatarWrapper {
position: relative;
}
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
// Create a flexbox to make aligning dot badges easier // Create a flexbox to make aligning dot badges easier
display: flex; display: flex;
align-items: center; align-items: center;
position: absolute;
right: -3px;
top: -3px;
.mx_NotificationBadge { .mx_NotificationBadge {
margin: 0 2px; // centering margin: 0 2px; // centering
background-clip: padding-box;
} }
.mx_NotificationBadge_dot { .mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering // make the smaller dot occupy the same width for centering
margin: 0 7px; margin: 0 -1px 0 0;
border: 3px solid $groupFilterPanel-bg-color;
}
.mx_NotificationBadge_2char,
.mx_NotificationBadge_3char {
margin: -5px -5px 0 0;
border: 2px solid $groupFilterPanel-bg-color;
} }
} }
&.collapsed { .mx_SpaceButton_narrow .mx_SpaceButton_menuButton {
.mx_SpaceButton { display: none;
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 0;
top: 0;
.mx_NotificationBadge {
background-clip: padding-box;
}
.mx_NotificationBadge_dot {
margin: 0 -1px 0 0;
border: 3px solid $groupFilterPanel-bg-color;
}
.mx_NotificationBadge_2char,
.mx_NotificationBadge_3char {
margin: -5px -5px 0 0;
border: 2px solid $groupFilterPanel-bg-color;
}
}
&.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
// when we draw the selection border we move the relative bounds of our parent
// so update our position within the bounds of the parent to maintain position overall
right: -3px;
top: -3px;
}
}
} }
&:not(.collapsed) { .mx_SpaceButton:hover,
.mx_SpaceButton:hover, .mx_SpaceButton:focus-within,
.mx_SpaceButton:focus-within, .mx_SpaceButton_hasMenuOpen {
.mx_SpaceButton_hasMenuOpen { &:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
&:not(.mx_SpaceButton_invite) { visibility: visible;
// Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer {
display: none;
}
.mx_SpaceButton_menuButton {
display: block;
}
}
} }
} }

6
src/components/views/spaces/SpaceTreeLevel.tsx
View file

@ -125,9 +125,11 @@ export const SpaceButton: React.FC<IButtonProps> = ({
> >
{ children } { children }
<div className="mx_SpaceButton_selectionWrapper"> <div className="mx_SpaceButton_selectionWrapper">
{ avatar } <div className="mx_SpaceButton_avatarWrapper">
{ avatar }
{ notifBadge }
</div>
{ !isNarrow && <span className="mx_SpaceButton_name">{ label }</span> } { !isNarrow && <span className="mx_SpaceButton_name">{ label }</span> }
{ notifBadge }
{ ContextMenuComponent && <ContextMenuTooltipButton { ContextMenuComponent && <ContextMenuTooltipButton
className="mx_SpaceButton_menuButton" className="mx_SpaceButton_menuButton"