OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix ScrollPanel data-scrollbar not responding to window resizing (#7841)

pull/21833/head
Michael Telatynski 2022-02-18 13:03:16 +00:00 committed by GitHub
parent 6fccd6b183
commit 29c1c8d1e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/structures/AutoHideScrollbar.tsx
View File

@ -47,10 +47,6 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
} }
} }
public getScrollTop(): number {
return this.containerRef.current.scrollTop;
}
public render() { public render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props; const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;

19
src/components/structures/ScrollPanel.tsx
View File

@ -23,6 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
import { getKeyBindingsManager } from "../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../KeyBindingsManager";
import ResizeNotifier from "../../utils/ResizeNotifier"; import ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";
const DEBUG_SCROLL = false; const DEBUG_SCROLL = false;
@ -214,6 +215,8 @@ export default class ScrollPanel extends React.Component<IProps> {
componentDidMount() { componentDidMount() {
this.checkScroll(); this.checkScroll();
UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize);
} }
componentDidUpdate() { componentDidUpdate() {
@ -236,6 +239,8 @@ export default class ScrollPanel extends React.Component<IProps> {
if (this.props.resizeNotifier) { if (this.props.resizeNotifier) {
this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize); this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
} }
UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize);
} }
private onScroll = ev => { private onScroll = ev => {
@ -730,6 +735,17 @@ export default class ScrollPanel extends React.Component<IProps> {
} }
} }
private onUiResize = () => {
this.setDataScrollbar();
};
private setDataScrollbar(contentHeight = this.getMessagesHeight()) {
const sn = this.getScrollNode();
const minHeight = sn.clientHeight;
const displayScrollbar = contentHeight > minHeight;
sn.dataset.scrollbar = displayScrollbar.toString();
}
// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content? // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
private async updateHeight(): Promise<void> { private async updateHeight(): Promise<void> {
// wait until user has stopped scrolling // wait until user has stopped scrolling
@ -751,8 +767,7 @@ export default class ScrollPanel extends React.Component<IProps> {
const minHeight = sn.clientHeight; const minHeight = sn.clientHeight;
const height = Math.max(minHeight, contentHeight); const height = Math.max(minHeight, contentHeight);
this.pages = Math.ceil(height / PAGE_SIZE); this.pages = Math.ceil(height / PAGE_SIZE);
const displayScrollbar = contentHeight > minHeight; this.setDataScrollbar(contentHeight);
sn.dataset.scrollbar = displayScrollbar.toString();
this.bottomGrowth = 0; this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`; const newHeight = `${this.getListHeight()}px`;