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;
margin-top: auto;
margin-bottom: auto;
display: none;
visibility: hidden;
position: relative;
&::before {
@ -246,67 +246,45 @@ $activeBorderColor: $secondary-content;
}
}
.mx_SpaceButton_avatarWrapper {
position: relative;
}
.mx_SpacePanel_badgeContainer {
// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
position: absolute;
right: -3px;
top: -3px;
.mx_NotificationBadge {
margin: 0 2px; // centering
background-clip: padding-box;
}
.mx_NotificationBadge_dot {
// 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 {
.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;
}
}
.mx_SpaceButton_narrow .mx_SpaceButton_menuButton {
display: none;
}
&:not(.collapsed) {
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_invite) {
// Hide the badge container on hover because it'll be a menu button
.mx_SpacePanel_badgeContainer {
display: none;
}
.mx_SpaceButton_menuButton {
display: block;
}
}
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
visibility: visible;
}
}