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

Update space panel expand mechanism (#7230)

Browse source
This commit is contained in:
Michael Telatynski 2021-12-07 09:32:00 +00:00 • committed by GitHub
parent e2ed00db85
commit 275e9c1d02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 107 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,12 +36,9 @@ $activeBorderColor: $primary-content;
flex-direction: column;
.mx_SpacePanel_toggleCollapse {
margin: 0 auto;
position: relative;
min-width: 32px;
min-height: 32px;
line-height: 32px;
color: $secondary-content;
height: 32px;
width: 32px;
&::before {
content: "";
@ -50,23 +47,45 @@ $activeBorderColor: $primary-content;
height: 32px;
left: 0;
mask-position: center;
mask-size: contain;
mask-size: 24px;
mask-repeat: no-repeat;
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
transform: rotate(270deg);
}
&:not(.expanded) {
position: absolute;
left: 68px;
top: 12px;
border-radius: 0 8px 8px 0;
background-color: $primary-content;
opacity: 0;
&::before {
background-color: $background;
}
}
&.expanded {
padding-left: 48px;
padding-right: 8px;
margin-left: $gutterSize;
margin-left: auto;
margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke
border-radius: 8px;
&::before {
transform: scaleX(-1);
transform: rotate(90deg);
}
&:hover {
background-color: $panel-actions;
}
}
}
&:hover .mx_SpacePanel_toggleCollapse {
opacity: 100%;
}
ul {
margin: 0;
list-style: none;

7
res/css/structures/_UserMenu.scss
View file

@ -19,6 +19,11 @@ limitations under the License.
display: flex;
align-items: center;
.mx_AccessibleButton {
display: flex;
align-items: center;
}
.mx_UserMenu_userAvatar {
position: relative;
}
@ -30,7 +35,7 @@ limitations under the License.
margin-left: 10px;
}
&.mx_UserMenu_cutout .mx_BaseAvatar {
.mx_UserMenu_cutout .mx_BaseAvatar {
mask-image: url('$(res)/img/element-icons/roomlist/dnd-avatar-mask.svg');
mask-position: center;
mask-size: contain;