mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 10:45:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Rebuild alignment of the menu buttons and notification badges

Browse source
This commit is contained in:
Michael Telatynski 2021-03-15 11:59:46 +00:00
parent 6210614ce7
commit f9eace1729
1 changed files with 46 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -62,21 +62,26 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_AutoHideScrollbar { .mx_AutoHideScrollbar {
padding: 16px 12px 16px 0; padding: 16px 0;
} }
.mx_SpaceButton_toggleCollapse { .mx_SpaceButton_toggleCollapse {
cursor: pointer; cursor: pointer;
} }
.mx_SpaceItem.collapsed { .mx_SpaceTreeLevel {
.mx_SpaceButton { display: flex;
.mx_NotificationBadge { flex-direction: column;
right: -4px; max-width: 250px;
top: -4px; flex-grow: 1;
} }
}
.mx_SpaceItem {
display: inline-flex;
flex-flow: wrap;
}
.mx_SpaceItem.collapsed {
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse { & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -88,15 +93,16 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton { .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: $gutterSize; margin-left: $gutterSize;
min-width: 40px;
} }
.mx_SpaceButton { .mx_SpaceButton {
border-radius: 8px; border-radius: 8px;
position: relative;
margin-bottom: 2px; margin-bottom: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px; padding: 4px 4px 4px 0;
width: 100%;
&.mx_SpaceButton_active { &.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
@ -110,6 +116,7 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_SpaceButton_selectionWrapper { .mx_SpaceButton_selectionWrapper {
position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
@ -117,12 +124,23 @@ $activeBorderColor: $secondary-fg-color;
padding: 4px; padding: 4px;
} }
&:not(.mx_SpaceButton_narrow) {
.mx_SpaceButton_selectionWrapper {
width: 100%;
padding-right: 16px;
overflow: hidden;
}
}
&.mx_SpaceButton_narrow {
margin-right: 10px;
}
.mx_SpaceButton_name { .mx_SpaceButton_name {
flex: 1; flex: 1;
margin-left: 8px; margin-left: 8px;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
max-width: 150px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
padding-right: 8px; padding-right: 8px;
@ -199,8 +217,9 @@ $activeBorderColor: $secondary-fg-color;
height: 20px; height: 20px;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
position: relative;
display: none; display: none;
position: absolute;
right: 4px;
&::before { &::before {
top: 2px; top: 2px;
@ -219,9 +238,8 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
position: absolute;
height: 16px; height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// Create a flexbox to make aligning dot badges easier // Create a flexbox to make aligning dot badges easier
display: flex; display: flex;
@ -241,14 +259,25 @@ $activeBorderColor: $secondary-fg-color;
&.collapsed { &.collapsed {
.mx_SpaceButton { .mx_SpaceButton {
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
position: absolute; right: -3px;
right: 0px; top: -3px;
top: 2px; }
&.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: -6px;
top: -6px;
} }
} }
} }
&:not(.collapsed) { &:not(.collapsed) {
.mx_SpacePanel_badgeContainer {
position: absolute;
right: 4px;
}
.mx_SpaceButton:hover, .mx_SpaceButton:hover,
.mx_SpaceButton:focus-within, .mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen { .mx_SpaceButton_hasMenuOpen {