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

Merge pull request #4931 from matrix-org/travis/room-list/sticky-headers

Browse source 
Improve performance and stability in sticky headers for new room list
This commit is contained in:
Travis Ralston 2020-07-09 08:00:56 -06:00 • committed by GitHub
commit bd8e1f7198
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 107 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -122,16 +122,19 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
}
.mx_LeftPanel2_roomListWrapper {
// Create a flexbox to ensure the containing items cause appropriate overflow.
display: flex;
flex-grow: 1;
overflow: hidden;
min-height: 0;
margin-top: 12px; // so we're not up against the search/filter
&.stickyBottom {
&.mx_LeftPanel2_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
&.stickyTop {
&.mx_LeftPanel2_roomListWrapper_stickyTop {
padding-top: 32px;
}
}

12
res/css/views/rooms/_RoomSublist2.scss
View file

@ -24,10 +24,6 @@ limitations under the License.
margin-left: 8px;
width: 100%;
&:first-child {
margin-top: 12px; // so we're not up against the search/filter
}
.mx_RoomSublist2_headerContainer {
// Create a flexbox to make alignment easy
display: flex;
@ -49,10 +45,15 @@ limitations under the License.
padding-bottom: 8px;
height: 24px;
// Hide the header container if the contained element is stickied.
// We don't use display:none as that causes the header to go away too.
&.mx_RoomSublist2_headerContainer_hasSticky {
height: 0;
}
.mx_RoomSublist2_stickable {
flex: 1;
max-width: 100%;
z-index: 2; // Prioritize headers in the visible list over sticky ones
// Create a flexbox to make ordering easy
display: flex;
@ -64,7 +65,6 @@ limitations under the License.
// when sticky scrolls instead of collapses the list.
&.mx_RoomSublist2_headerContainer_sticky {
position: fixed;
z-index: 1; // over top of other elements, but still under the ones in the visible list
height: 32px; // to match the header container
// width set by JS
}