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

Fix timeline not scrolling to bottom reliably

Browse source
This commit is contained in:
Evan Hahn 2022-03-08 15:54:27 -06:00 • committed by GitHub
parent feef67da5a
commit 4b6b9cce01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

42
ts/components/conversation/Message.tsx
View file

@ -92,7 +92,19 @@ type Trigger = {
handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
};
const DEFAULT_METADATA_WIDTH = 20;
const GUESS_METADATA_WIDTH_TIMESTAMP_SIZE = 10;
const GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE = 18;
const GUESS_METADATA_WIDTH_OUTGOING_SIZE: Record<MessageStatusType, number> = {
delivered: 24,
error: 24,
paused: 18,
'partial-sent': 24,
read: 24,
sending: 18,
sent: 24,
viewed: 24,
};
const EXPIRATION_CHECK_MINIMUM = 2000;
const EXPIRED_DELAY = 600;
const GROUP_AVATAR_SIZE = AvatarSize.TWENTY_EIGHT;
@ -352,7 +364,7 @@ export class Message extends React.PureComponent<Props, State> {
super(props);
this.state = {
metadataWidth: DEFAULT_METADATA_WIDTH,
metadataWidth: this.guessMetadataWidth(),
expiring: false,
expired: false,
@ -552,6 +564,32 @@ export class Message extends React.PureComponent<Props, State> {
return MetadataPlacement.InlineWithText;
}
/**
* A lot of the time, we add an invisible inline spacer for messages. This spacer is the
* same size as the message metadata. Unfortunately, we don't know how wide it is until
* we render it.
*
* This will probably guess wrong, but it's valuable to get close to the real value
* because it can reduce layout jumpiness.
*/
private guessMetadataWidth(): number {
const { direction, expirationLength, expirationTimestamp, status } =
this.props;
let result = GUESS_METADATA_WIDTH_TIMESTAMP_SIZE;
const hasExpireTimer = Boolean(expirationLength && expirationTimestamp);
if (hasExpireTimer) {
result += GUESS_METADATA_WIDTH_EXPIRE_TIMER_SIZE;
}
if (direction === 'outgoing' && status) {
result += GUESS_METADATA_WIDTH_OUTGOING_SIZE[status];
}
return result;
}
public startSelectedTimer(): void {
const { clearSelectedMessage, interactionMode } = this.props;
const { isSelected } = this.state;