PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

put sticky headers in padding of wrapper

Browse source 
this way they don't need a background, as the list is already clipped
This commit is contained in:
Bruno Windels 2020-07-08 14:49:38 +02:00
parent 75751abc60
commit 0d94cfa97a
2 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -127,6 +127,13 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
overflow: hidden;
min-height: 0;
&.stickyBottom {
padding-bottom: 32px;
}
&.stickyTop {
padding-top: 32px;
}
}
.mx_LeftPanel2_actualRoomListContainer {

29
src/components/structures/LeftPanel2.tsx
View file

@ -153,11 +153,16 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
header.style.width = `${headerStickyWidth}px`;
header.style.removeProperty("top");
gotBottom = true;
} else if ((slRect.top - (headerHeight / 3)) < top) {
} else if (((slRect.top - (headerHeight * 0.6) + headerHeight) < top) || sublist === sublists[0]) {
// the header should become sticky once it is 60% or less out of view at the top.
// We also add headerHeight because the sticky header is put above the scrollable area,
// into the padding of .mx_LeftPanel2_roomListWrapper,
// by subtracting headerHeight from the top below.
// We also always try to make the first sublist header sticky.
header.classList.add("mx_RoomSublist2_headerContainer_sticky");
header.classList.add("mx_RoomSublist2_headerContainer_stickyTop");
header.style.width = `${headerStickyWidth}px`;
header.style.top = `${rlRect.top}px`;
header.style.top = `${rlRect.top - headerHeight}px`;
if (lastTopHeader) {
lastTopHeader.style.display = "none";
}
@ -172,6 +177,26 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
header.style.removeProperty("top");
}
}
// add appropriate sticky classes to wrapper so it has
// the necessary top/bottom padding to put the sticky header in
const listWrapper = list.parentElement;
if (gotBottom) {
listWrapper.classList.add("stickyBottom");
} else {
listWrapper.classList.remove("stickyBottom");
}
if (lastTopHeader) {
listWrapper.classList.add("stickyTop");
} else {
listWrapper.classList.remove("stickyTop");
}
// ensure scroll doesn't go above the gap left by the header of
// the first sublist always being sticky if no other header is sticky
if (list.scrollTop < headerHeight) {
list.scrollTop = headerHeight;
}
}
// TODO: Improve header reliability: https://github.com/vector-im/riot-web/issues/14232