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

Tweak sticky header hiding to avoid pop

Browse source 
When transitioning between sublists, there can be a visibly observable jump in
the positioning of list items when the header container is restored to normal
size outside of sticky mode.

To avoid this problem, this leaves all headers at normal size. This creates a
new issue of a permanent gap at the top of the list for the first header, but
this can be solved by always hiding (since it can only ever appear stuck to
top).

Fixes https://github.com/vector-im/riot-web/issues/14429
This commit is contained in:
J. Ryan Stinnett 2020-07-14 12:13:04 +01:00
parent f394190423
commit a09f773edd
2 changed files with 9 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -165,7 +165,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
// layout updates.
for (const header of targetStyles.keys()) {
const style = targetStyles.get(header);
const headerContainer = header.parentElement; // .mx_RoomSublist2_headerContainer
if (style.makeInvisible) {
// we will have already removed the 'display: none', so add it back.
@ -205,9 +204,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.add("mx_RoomSublist2_headerContainer_sticky");
}
if (!headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
headerContainer.classList.add("mx_RoomSublist2_headerContainer_hasSticky");
}
const newWidth = `${headerStickyWidth}px`;
if (header.style.width !== newWidth) {
@ -217,9 +213,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
}
if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
}
if (header.style.width) {
header.style.removeProperty('width');
}