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

Add filtering and exploring to the new room list

Browse source 
This is per the designs. Animation doesn't feel required here.

Like the rest of this series, this rewrites a component to be more purpose-built to help match the designs and to solve the smallest possible problem.
This commit is contained in:
Travis Ralston 2020-06-08 20:33:21 -06:00
parent ae1d14d29f
commit 5114c37b82
12 changed files with 287 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

39
res/css/structures/_LeftPanel2.scss
View file

@ -88,7 +88,44 @@ $roomListMinimizedWidth: 50px;
}
.mx_LeftPanel2_filterContainer {
// TODO: Improve CSS for filtering and its input
margin-left: 12px;
margin-right: 12px;
// Create a flexbox to organize the inputs
display: flex;
align-items: center;
.mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
// Cheaty way to return the occupied space to the filter input
margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon
visibility: hidden;
}
.mx_LeftPanel2_exploreButton {
width: 28px;
height: 28px;
border-radius: 20px;
background-color: #fff; // TODO: Variable and theme
position: relative;
margin-left: 8px;
&::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 16px;
height: 16px;
mask-image: url('$(res)/img/feather-customised/compass.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
}
.mx_LeftPanel2_actualRoomListContainer {