Tweaks to left pane snapping logic

This commit is contained in:
Evan Hahn 2021-10-14 16:19:50 -05:00 committed by GitHub
parent 29e6ba8f10
commit 0faeda28f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 8 deletions

View File

@ -40,6 +40,8 @@ import * as OS from '../OS';
import { LocalizerType, ScrollBehavior } from '../types/Util';
import { usePrevious } from '../hooks/usePrevious';
import { missingCaseError } from '../util/missingCaseError';
import { strictAssert } from '../util/assert';
import { isSorted } from '../util/isSorted';
import { getConversationListWidthBreakpoint, WidthBreakpoint } from './_util';
import { ConversationList } from './ConversationList';
@ -52,9 +54,13 @@ import {
} from '../types/Avatar';
const MIN_WIDTH = 109;
const MIN_SNAP_WIDTH = 280;
const MIN_FULL_WIDTH = 320;
const SNAP_WIDTH = 200;
const MIN_FULL_WIDTH = 280;
const MAX_WIDTH = 380;
strictAssert(
isSorted([MIN_WIDTH, SNAP_WIDTH, MIN_FULL_WIDTH, MAX_WIDTH]),
'Expected widths to be in the right order'
);
export enum LeftPaneMode {
Inbox,
@ -387,10 +393,10 @@ export const LeftPane: React.FC<PropsType> = ({
let width: number;
if (requiresFullWidth) {
width = Math.max(event.clientX, MIN_FULL_WIDTH);
} else if (event.clientX < MIN_SNAP_WIDTH) {
} else if (event.clientX < SNAP_WIDTH) {
width = MIN_WIDTH;
} else {
width = Math.max(event.clientX, MIN_WIDTH);
width = clamp(event.clientX, MIN_FULL_WIDTH, MAX_WIDTH);
}
setPreferredWidth(Math.min(width, MAX_WIDTH));
@ -484,12 +490,10 @@ export const LeftPane: React.FC<PropsType> = ({
);
let width: number;
if (requiresFullWidth) {
if (requiresFullWidth || preferredWidth >= SNAP_WIDTH) {
width = Math.max(preferredWidth, MIN_FULL_WIDTH);
} else if (preferredWidth < MIN_SNAP_WIDTH) {
width = MIN_WIDTH;
} else {
width = preferredWidth;
width = MIN_WIDTH;
}
const isScrollable = helper.isScrollable();

View File

@ -0,0 +1,26 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import { assert } from 'chai';
import { isSorted } from '../../util/isSorted';
describe('isSorted', () => {
it('returns true for empty lists', () => {
assert.isTrue(isSorted([]));
});
it('returns true for one-element lists', () => {
assert.isTrue(isSorted([5]));
});
it('returns true for sorted lists', () => {
assert.isTrue(isSorted([1, 2]));
assert.isTrue(isSorted([1, 2, 2, 3]));
});
it('returns false for out-of-order lists', () => {
assert.isFalse(isSorted([2, 1]));
assert.isFalse(isSorted([1, 2, 2, 3, 0]));
});
});

13
ts/util/isSorted.ts Normal file
View File

@ -0,0 +1,13 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
export function isSorted(list: Iterable<number>): boolean {
let previousItem: undefined | number;
for (const item of list) {
if (previousItem !== undefined && item < previousItem) {
return false;
}
previousItem = item;
}
return true;
}