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

Revert buggy timeline layout refactor

Browse source
This commit is contained in:
Evan Hahn 2022-03-09 16:44:57 -06:00 • committed by GitHub
parent 81e991af80
commit 3226156a45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

53
ts/components/conversation/Timeline.tsx
View file

@ -173,6 +173,7 @@ export type PropsType = PropsDataType &
type StateType = {
hasDismissedDirectContactSpoofingWarning: boolean;
hasRecentlyScrolled: boolean;
lastMeasuredWarningHeight: number;
newestBottomVisibleMessageId?: string;
oldestPartiallyVisibleMessageId?: string;
widthBreakpoint: WidthBreakpoint;
@ -276,7 +277,8 @@ export class Timeline extends React.Component<
hasRecentlyScrolled: true,
hasDismissedDirectContactSpoofingWarning: false,
// This may be swiftly overridden.
// These may be swiftly overridden.
lastMeasuredWarningHeight: 0,
widthBreakpoint: WidthBreakpoint.Wide,
};
@ -792,6 +794,7 @@ export class Timeline extends React.Component<
} = this.props;
const {
hasRecentlyScrolled,
lastMeasuredWarningHeight,
newestBottomVisibleMessageId,
oldestPartiallyVisibleMessageId,
widthBreakpoint,
@ -845,6 +848,11 @@ export class Timeline extends React.Component<
<TimelineFloatingHeader
i18n={i18n}
isLoading={isLoadingMessages}
style={
lastMeasuredWarningHeight
? { marginTop: lastMeasuredWarningHeight }
: undefined
}
timestamp={oldestPartiallyVisibleMessageTimestamp}
visible={
(hasRecentlyScrolled || isLoadingMessages) &&
@ -976,14 +984,27 @@ export class Timeline extends React.Component<
}
timelineWarning = (
<TimelineWarnings>
<TimelineWarning i18n={i18n} onClose={onClose}>
<TimelineWarning.IconContainer>
<TimelineWarning.GenericIcon />
</TimelineWarning.IconContainer>
<TimelineWarning.Text>{text}</TimelineWarning.Text>
</TimelineWarning>
</TimelineWarnings>
<Measure
bounds
onResize={({ bounds }) => {
if (!bounds) {
assert(false, 'We should be measuring the bounds');
return;
}
this.setState({ lastMeasuredWarningHeight: bounds.height });
}}
>
{({ measureRef }) => (
<TimelineWarnings ref={measureRef}>
<TimelineWarning i18n={i18n} onClose={onClose}>
<TimelineWarning.IconContainer>
<TimelineWarning.GenericIcon />
</TimelineWarning.IconContainer>
<TimelineWarning.Text>{text}</TimelineWarning.Text>
</TimelineWarning>
</TimelineWarnings>
)}
</Measure>
);
}
@ -1066,13 +1087,13 @@ export class Timeline extends React.Component<
>
{timelineWarning}
{floatingHeader}
<div
className="module-timeline__messages__container"
onScroll={this.onScroll}
ref={this.containerRef}
>
{floatingHeader}
<div
className={classNames(
'module-timeline__messages',
@ -1080,8 +1101,14 @@ export class Timeline extends React.Component<
)}
ref={this.messagesRef}
>
{haveOldest &&
renderHeroRow(id, unblurAvatar, updateSharedGroups)}
{haveOldest && (
<>
{Timeline.getWarning(this.props, this.state) && (
<div style={{ height: lastMeasuredWarningHeight }} />
)}
{renderHeroRow(id, unblurAvatar, updateSharedGroups)}
</>
)}
{messageNodes}