PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix room sub list header collapse/jump interactions on bottom-most sublist

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-13 17:17:05 +01:00
parent ea15725164
commit fd8f43e245
1 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/views/rooms/RoomSublist2.tsx
View file

@ -321,25 +321,29 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
} }
}; };
private onHeaderClick = (ev: React.MouseEvent<HTMLDivElement>) => { private onHeaderClick = () => {
let target = ev.target as HTMLDivElement; const possibleSticky = this.headerButton.current.parentElement;
if (!target.classList.contains('mx_RoomSublist2_headerText')) {
// If we don't have the headerText class, the user clicked the span in the headerText.
target = target.parentElement as HTMLDivElement;
}
const possibleSticky = target.parentElement;
const sublist = possibleSticky.parentElement.parentElement; const sublist = possibleSticky.parentElement.parentElement;
const list = sublist.parentElement.parentElement; const list = sublist.parentElement.parentElement;
// the scrollTop is capped at the height of the header in LeftPanel2 // the scrollTop is capped at the height of the header in LeftPanel2, the top header is always sticky
const isAtTop = list.scrollTop <= HEADER_HEIGHT; const isAtTop = list.scrollTop <= HEADER_HEIGHT;
const isSticky = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_sticky'); const isAtBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight;
if (isSticky && !isAtTop) { const isStickyTop = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_stickyTop');
const isStickyBottom = possibleSticky.classList.contains('mx_RoomSublist2_headerContainer_stickyBottom');
if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) {
// is sticky - jump to list // is sticky - jump to list
sublist.scrollIntoView({behavior: 'smooth'}); sublist.scrollIntoView({behavior: 'smooth'});
} else { } else {
// on screen - toggle collapse // on screen - toggle collapse
const isExpanded = this.state.isExpanded;
this.toggleCollapsed(); this.toggleCollapsed();
// if the bottom list is collapsed then scroll it in so it doesn't expand off screen
if (!isExpanded && isStickyBottom) {
setImmediate(() => {
sublist.scrollIntoView({behavior: 'smooth'});
});
}
} }
}; };