From a361ac3f83b42a4e3cea2608aa4ea91b8760cc99 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 8 Jul 2020 15:11:47 +0200
Subject: [PATCH] make collapsing/expanding the first header work again

---
 src/components/structures/LeftPanel2.tsx    | 16 ++++++++--------
 src/components/views/rooms/RoomSublist2.tsx |  7 ++++++-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx
index 51dc4c0c4c..6da70ed0ae 100644
--- a/src/components/structures/LeftPanel2.tsx
+++ b/src/components/structures/LeftPanel2.tsx
@@ -21,6 +21,7 @@ import classNames from "classnames";
 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
 import RoomList2 from "../views/rooms/RoomList2";
+import { HEADER_HEIGHT } from "../views/rooms/RoomSublist2";
 import { Action } from "../../dispatcher/actions";
 import UserMenu from "./UserMenu";
 import RoomSearch from "./RoomSearch";
@@ -135,7 +136,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         const bottom = rlRect.bottom;
         const top = rlRect.top;
         const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist2");
-        const headerHeight = 32; // Note: must match the CSS!
         const headerRightMargin = 24; // calculated from margins and widths to align with non-sticky tiles
 
         const headerStickyWidth = rlRect.width - headerRightMargin;
@@ -147,22 +147,22 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
             const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
 
-            if (slRect.top + headerHeight > bottom && !gotBottom) {
+            if (slRect.top + HEADER_HEIGHT > bottom && !gotBottom) {
                 header.classList.add("mx_RoomSublist2_headerContainer_sticky");
                 header.classList.add("mx_RoomSublist2_headerContainer_stickyBottom");
                 header.style.width = `${headerStickyWidth}px`;
                 header.style.removeProperty("top");
                 gotBottom = true;
-            } else if (((slRect.top - (headerHeight * 0.6) + headerHeight) < top) || sublist === sublists[0]) {
+            } else if (((slRect.top - (HEADER_HEIGHT * 0.6) + HEADER_HEIGHT) < 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,
+                // We also add HEADER_HEIGHT because the sticky header is put above the scrollable area,
                 // into the padding of .mx_LeftPanel2_roomListWrapper,
-                // by subtracting headerHeight from the top below.
+                // by subtracting HEADER_HEIGHT 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 - headerHeight}px`;
+                header.style.top = `${rlRect.top - HEADER_HEIGHT}px`;
                 if (lastTopHeader) {
                     lastTopHeader.style.display = "none";
                 }
@@ -194,8 +194,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
         // 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;
+        if (list.scrollTop < HEADER_HEIGHT) {
+            list.scrollTop = HEADER_HEIGHT;
         }
     }
 
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index eefd29f0b7..9a97aac320 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -55,6 +55,7 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 
 const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
 const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
+export const HEADER_HEIGHT = 32; // As defined by CSS
 
 const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
 
@@ -233,7 +234,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
         const possibleSticky = target.parentElement;
         const sublist = possibleSticky.parentElement.parentElement;
-        if (possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky')) {
+        const list = sublist.parentElement.parentElement;
+        // the scrollTop is capped at the height of the header in LeftPanel2
+        const isAtTop = list.scrollTop <= HEADER_HEIGHT;
+        const isSticky = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky');
+        if (isSticky && !isAtTop) {
             // is sticky - jump to list
             sublist.scrollIntoView({behavior: 'smooth'});
         } else {