Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve top of pagination scroll panel gap #8030

Closed
wants to merge 3 commits into from
Closed

Improve top of pagination scroll panel gap #8030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a54a66f
Remove data-scrollbar handling, it never quite did the right thing
t3chguy Mar 10, 2022
1a9c40e
Remove pagination forced overscroll space
t3chguy Mar 11, 2022
316c91c
Merge branch 'develop' into t3chguy/fix/20896
t3chguy Mar 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions res/css/structures/_RoomView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,6 @@ limitations under the License.
overflow-y: auto;
flex: 1 1 0;
overflow-anchor: none;

&[data-scrollbar=false] {
overflow-y: hidden;
}
}

.mx_RoomView_messagePanelSearchSpinner {
Expand Down
39 changes: 6 additions & 33 deletions src/components/structures/ScrollPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";

const DEBUG_SCROLL = false;

Expand All @@ -33,11 +32,6 @@ const UNPAGINATION_PADDING = 6000;
// The number of milliseconds to debounce calls to onUnfillRequest, to prevent
// many scroll events causing many unfilling requests.
const UNFILL_REQUEST_DEBOUNCE_MS = 200;
// _updateHeight makes the height a ceiled multiple of this so we
// don't have to update the height too often. It also allows the user
// to scroll past the pagination spinner a bit so they don't feel blocked so
// much while the content loads.
const PAGE_SIZE = 400;

let debuglog;
if (DEBUG_SCROLL) {
Expand Down Expand Up @@ -199,24 +193,20 @@ export default class ScrollPanel extends React.Component<IProps> {
private preventShrinkingState: IPreventShrinkingState;
private unfillDebouncer: number;
private bottomGrowth: number;
private pages: number;
private height: number;
private heightUpdateInProgress: boolean;
private divScroll: HTMLDivElement;

constructor(props, context) {
super(props, context);

if (this.props.resizeNotifier) {
this.props.resizeNotifier.on("middlePanelResizedNoisy", this.onResize);
}
this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);

this.resetScrollState();
}

componentDidMount() {
this.checkScroll();

UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize);
}

componentDidUpdate() {
Expand All @@ -236,11 +226,7 @@ export default class ScrollPanel extends React.Component<IProps> {
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;

if (this.props.resizeNotifier) {
this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
}

UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize);
this.props.resizeNotifier?.removeListener("middlePanelResizedNoisy", this.onResize);
}

private onScroll = ev => {
Expand Down Expand Up @@ -552,7 +538,7 @@ export default class ScrollPanel extends React.Component<IProps> {
stuckAtBottom: this.props.startAtBottom,
};
this.bottomGrowth = 0;
this.pages = 0;
this.height = 0;
this.scrollTimeout = new Timer(100);
this.heightUpdateInProgress = false;
};
Expand Down Expand Up @@ -735,17 +721,6 @@ 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?
private async updateHeight(): Promise<void> {
// wait until user has stopped scrolling
Expand All @@ -765,9 +740,7 @@ export default class ScrollPanel extends React.Component<IProps> {
const itemlist = this.itemlist.current;
const contentHeight = this.getMessagesHeight();
const minHeight = sn.clientHeight;
const height = Math.max(minHeight, contentHeight);
this.pages = Math.ceil(height / PAGE_SIZE);
this.setDataScrollbar(contentHeight);
this.height = Math.max(minHeight, contentHeight);
this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`;

Expand Down Expand Up @@ -836,7 +809,7 @@ export default class ScrollPanel extends React.Component<IProps> {
}

private getListHeight(): number {
return this.bottomGrowth + (this.pages * PAGE_SIZE);
return this.bottomGrowth + this.height;
}

private getMessagesHeight(): number {
Expand Down