mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Improve scroll behavior of left pane

Browse source 
Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2024-11-06 14:16:11 -06:00 committed by GitHub
parent d9c5ffc8c1
commit 471dc78aa9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
ts/components/LeftPane.tsx
View file

@ -536,26 +536,6 @@ export function LeftPane({
[showConversation] [showConversation]
); );
const previousSelectedConversationId = usePrevious(
selectedConversationId,
selectedConversationId
);
const isScrollable = helper.isScrollable();
let rowIndexToScrollTo: undefined | number;
let scrollBehavior: ScrollBehavior;
if (isScrollable) {
rowIndexToScrollTo =
previousSelectedConversationId === selectedConversationId
? undefined
: helper.getRowIndexToScrollTo(selectedConversationId);
scrollBehavior = ScrollBehavior.Default;
} else {
rowIndexToScrollTo = 0;
scrollBehavior = ScrollBehavior.Hard;
}
// We ensure that the listKey differs between some modes (e.g. inbox/archived), ensuring // We ensure that the listKey differs between some modes (e.g. inbox/archived), ensuring
// that AutoSizer properly detects the new size of its slot in the flexbox. The // that AutoSizer properly detects the new size of its slot in the flexbox. The
// archive explainer text at the top of the archive view causes problems otherwise. // archive explainer text at the top of the archive view causes problems otherwise.
@ -565,6 +545,8 @@ export function LeftPane({
const measureRef = useRef<HTMLDivElement>(null); const measureRef = useRef<HTMLDivElement>(null);
const measureSize = useSizeObserver(measureRef); const measureSize = useSizeObserver(measureRef);
const previousMeasureSize = usePrevious(null, measureSize);
const widthBreakpoint = getNavSidebarWidthBreakpoint( const widthBreakpoint = getNavSidebarWidthBreakpoint(
measureSize?.width ?? preferredWidthFromStorage measureSize?.width ?? preferredWidthFromStorage
); );
@ -574,6 +556,47 @@ export function LeftPane({
containerWidthBreakpoint: widthBreakpoint, containerWidthBreakpoint: widthBreakpoint,
}; };
// Control scroll position
const previousSelectedConversationId = usePrevious(
selectedConversationId,
selectedConversationId
);
const isScrollable = helper.isScrollable();
let rowIndexToScrollTo: undefined | number;
let scrollBehavior: ScrollBehavior;
const hasChangedModes =
previousModeSpecificProps?.mode !== modeSpecificProps.mode;
const hasSwitchedToInbox =
hasChangedModes && modeSpecificProps.mode === LeftPaneMode.Inbox;
const hasChangedConversations =
previousSelectedConversationId !== selectedConversationId;
const hasJustMounted = previousMeasureSize == null;
if (isScrollable) {
const rowIndexForSelectedConversation = helper.getRowIndexToScrollTo(
selectedConversationId
);
if (hasSwitchedToInbox) {
rowIndexToScrollTo = rowIndexForSelectedConversation;
} else if (
modeSpecificProps.mode === LeftPaneMode.Inbox &&
(hasChangedConversations || hasJustMounted)
) {
rowIndexToScrollTo = rowIndexForSelectedConversation;
} else if (hasChangedModes) {
rowIndexToScrollTo = 0;
}
scrollBehavior = ScrollBehavior.Default;
} else {
rowIndexToScrollTo = 0;
scrollBehavior = ScrollBehavior.Hard;
}
// Yellow dialogs // Yellow dialogs
let maybeYellowDialog: JSX.Element | undefined; let maybeYellowDialog: JSX.Element | undefined;