Update top vs. bottom sticky styles separately

If a sublist changes from sticky top to sticky bottom in a single run of the
logic (without passing through the default state), we were leaving the previous
top position set. This handles them independently to resolve this.

Fixes https://github.com/vector-im/riot-web/issues/14390
Maybe helps with https://github.com/vector-im/riot-web/issues/14443
For vector-im/riot-web#13635
pull/21833/head
J. Ryan Stinnett 2020-07-13 21:24:43 +01:00
parent edb19786ec
commit 4b5faf8148
1 changed files with 14 additions and 10 deletions

View File

@ -187,10 +187,23 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (header.style.top !== newTop) { if (header.style.top !== newTop) {
header.style.top = newTop; header.style.top = newTop;
} }
} else if (style.stickyBottom) { } else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
}
if (header.style.top) {
header.style.removeProperty('top');
}
}
if (style.stickyBottom) {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) { if (!header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom"); header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
} }
} else {
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
}
} }
if (style.stickyTop || style.stickyBottom) { if (style.stickyTop || style.stickyBottom) {
@ -209,21 +222,12 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) { if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist2_headerContainer_sticky"); header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
} }
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyTop")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyTop");
}
if (header.classList.contains("mx_RoomSublist2_headerContainer_stickyBottom")) {
header.classList.remove("mx_RoomSublist2_headerContainer_stickyBottom");
}
if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) { if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky"); headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
} }
if (header.style.width) { if (header.style.width) {
header.style.removeProperty('width'); header.style.removeProperty('width');
} }
if (header.style.top) {
header.style.removeProperty('top');
}
} }
} }