From 75751abc60d9b75438c1a55d00053e5f10e40008 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 8 Jul 2020 14:49:04 +0200 Subject: [PATCH 1/4] add wrapper we can then add padding to when sticking headers --- res/css/structures/_LeftPanel2.scss | 8 ++++++++ src/components/structures/LeftPanel2.tsx | 20 +++++++++++--------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index a73658d916..57f690346b 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -121,6 +121,14 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations } } + .mx_LeftPanel2_roomListWrapper { + display: flex; + flex-grow: 1; + overflow: hidden; + min-height: 0; + + } + .mx_LeftPanel2_actualRoomListContainer { flex-grow: 1; // fill the available space overflow-y: auto; diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 7fac6cbff1..037c3bd4ff 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -325,15 +325,17 @@ export default class LeftPanel2 extends React.Component { From 0d94cfa97ad7971d43332709e5023d7d4a6cc894 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 8 Jul 2020 14:49:38 +0200 Subject: [PATCH 2/4] put sticky headers in padding of wrapper this way they don't need a background, as the list is already clipped --- res/css/structures/_LeftPanel2.scss | 7 ++++++ src/components/structures/LeftPanel2.tsx | 29 ++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index 57f690346b..eaa22a3efa 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -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 { diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx index 037c3bd4ff..51dc4c0c4c 100644 --- a/src/components/structures/LeftPanel2.tsx +++ b/src/components/structures/LeftPanel2.tsx @@ -153,11 +153,16 @@ export default class LeftPanel2 extends React.Component { 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 { 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 From a8085f4e3bcd3e0967f3e68b5f2b63db322abac4 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 8 Jul 2020 14:50:08 +0200 Subject: [PATCH 3/4] remove background on sticky headers --- res/css/views/rooms/_RoomSublist2.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index d08bc09031..194e615099 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -54,9 +54,6 @@ limitations under the License. max-width: 100%; z-index: 2; // Prioritize headers in the visible list over sticky ones - // Set the same background color as the room list for sticky headers - background-color: $roomlist2-bg-color; - // Create a flexbox to make ordering easy display: flex; align-items: center; From a361ac3f83b42a4e3cea2608aa4ea91b8760cc99 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 8 Jul 2020 15:11:47 +0200 Subject: [PATCH 4/4] 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 { const bottom = rlRect.bottom; const top = rlRect.top; const sublists = list.querySelectorAll(".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 { const header = sublist.querySelector(".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 { // 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 { 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 {