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

Avoid bounding box usage in sticky headers & improve reliability

Browse source 
We now use offsets and scroll information to determine where the headers should be stuck to, still supporting the transparent background.

Some scroll jumps were originally introduced as part of the change in numbering, so they have been fixed here. By proxy, some additional scroll jump/instability should be fixed as well.

This has a lingering problem of still causing a huge number of no-op UI updates though, which will be dealt with in a future commit.
This commit is contained in:
Travis Ralston 2020-07-08 14:36:55 -06:00
parent 6e20850567
commit f9aca7c05e
3 changed files with 39 additions and 42 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
}