mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 04:48:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Rebuild space panel layout to resolve weirdness with selections and nesting

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

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

@ -16,9 +16,8 @@ limitations under the License.
$topLevelHeight: 32px; $topLevelHeight: 32px;
$nestedHeight: 24px; $nestedHeight: 24px;
$gutterSize: 17px; $gutterSize: 16px;
$activeStripeSize: 4px; $activeBorderTransparentGap: 1px;
$activeBorderTransparentGap: 2px;
$activeBackgroundColor: $roomtile-selected-bg-color; $activeBackgroundColor: $roomtile-selected-bg-color;
$activeBorderColor: $secondary-fg-color; $activeBorderColor: $secondary-fg-color;
@ -102,14 +101,11 @@ $activeBorderColor: $secondary-fg-color;
&.mx_SpaceButton_active { &.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper { &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: $activeBackgroundColor; background-color: $activeBackgroundColor;
border-radius: 8px;
} }
&.mx_SpaceButton_narrow { &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
.mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder { padding: $activeBorderTransparentGap;
border: 2px $activeBorderColor solid; border: 3px $activeBorderColor solid;
border-radius: 11px;
}
} }
} }
@ -117,6 +113,8 @@ $activeBorderColor: $secondary-fg-color;
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
border-radius: 12px;
padding: 4px;
} }
.mx_SpaceButton_name { .mx_SpaceButton_name {
@ -133,8 +131,8 @@ $activeBorderColor: $secondary-fg-color;
} }
.mx_SpaceButton_toggleCollapse { .mx_SpaceButton_toggleCollapse {
width: calc($gutterSize - $activeStripeSize); width: $gutterSize;
margin-left: 1px; margin-right: -4px;
height: 20px; height: 20px;
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
@ -172,11 +170,6 @@ $activeBorderColor: $secondary-fg-color;
} }
} }
.mx_SpaceButton_avatarPlaceholder {
border: $activeBorderTransparentGap transparent solid;
padding: $activeBorderTransparentGap;
}
&.mx_SpaceButton_new .mx_SpaceButton_icon { &.mx_SpaceButton_new .mx_SpaceButton_icon {
background-color: $accent-color; background-color: $accent-color;
transition: all .1s ease-in-out; // TODO transition transition: all .1s ease-in-out; // TODO transition
@ -196,22 +189,9 @@ $activeBorderColor: $secondary-fg-color;
} }
} }
.mx_BaseAvatar {
/* moving the border-radius to this element from _image
element so we can add a border to it without the initials being displaced */
overflow: hidden;
border: 2px transparent solid;
padding: $activeBorderTransparentGap;
.mx_BaseAvatar_initial {
top: $activeBorderTransparentGap;
left: $activeBorderTransparentGap;
}
.mx_BaseAvatar_image { .mx_BaseAvatar_image {
border-radius: 8px; border-radius: 8px;
} }
}
.mx_SpaceButton_menuButton { .mx_SpaceButton_menuButton {
width: 20px; width: 20px;