From 4b5faf814896445eec68de013c1fcb89a0b268a4 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 13 Jul 2020 21:24:43 +0100 Subject: [PATCH] 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 --- src/components/structures/LeftPanel2.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 3c8994b1c0..58cf665430 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -187,10 +187,23 @@ export default class LeftPanel2 extends React.Component { if (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")) { 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) { @@ -209,21 +222,12 @@ export default class LeftPanel2 extends React.Component { if (header.classList.contains("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")) { headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky"); } if (header.style.width) { header.style.removeProperty('width'); } - if (header.style.top) { - header.style.removeProperty('top'); - } } }