From 0b5e2e6768c1b9fb5c4a68e6452bcc33ebd90688 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Wed, 9 Mar 2022 12:47:13 -0600
Subject: [PATCH] Simplify positioning of timeline warnings

---
 stylesheets/_modules.scss                     |  2 +
 .../components/TimelineFloatingHeader.scss    |  2 +-
 stylesheets/components/TimelineWarnings.scss  |  7 +--
 ts/components/conversation/Timeline.tsx       | 53 +++++--------------
 .../conversation/TimelineFloatingHeader.tsx   |  5 +-
 .../conversation/TimelineWarnings.tsx         | 18 ++-----
 6 files changed, 23 insertions(+), 64 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index aa50644267b1..e22d647c948a 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5452,6 +5452,7 @@ button.module-image__border-overlay:focus {
 
 .module-timeline {
   display: flex;
+  flex-direction: column;
   height: 100%;
   overflow: hidden;
 }
@@ -5466,6 +5467,7 @@ button.module-image__border-overlay:focus {
   overflow-y: overlay;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .module-timeline__messages {
diff --git a/stylesheets/components/TimelineFloatingHeader.scss b/stylesheets/components/TimelineFloatingHeader.scss
index a43d57dc3b5b..89ee71d92e0b 100644
--- a/stylesheets/components/TimelineFloatingHeader.scss
+++ b/stylesheets/components/TimelineFloatingHeader.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
   left: 0;
   pointer-events: none;
-  position: absolute;
+  position: sticky;
   top: 10px;
   transition: opacity 0.25s ease-out;
   width: 100%;
diff --git a/stylesheets/components/TimelineWarnings.scss b/stylesheets/components/TimelineWarnings.scss
index 5b1b2db71880..617a7b1165c3 100644
--- a/stylesheets/components/TimelineWarnings.scss
+++ b/stylesheets/components/TimelineWarnings.scss
@@ -2,12 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .module-TimelineWarnings {
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: $z-index-above-above-base;
-
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index 592f7c195b9b..7c5f2537f960 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -171,7 +171,6 @@ export type PropsType = PropsDataType &
 type StateType = {
   hasDismissedDirectContactSpoofingWarning: boolean;
   hasRecentlyScrolled: boolean;
-  lastMeasuredWarningHeight: number;
   newestFullyVisibleMessageId?: string;
   oldestPartiallyVisibleMessageId?: string;
   widthBreakpoint: WidthBreakpoint;
@@ -274,8 +273,7 @@ export class Timeline extends React.Component<
     hasRecentlyScrolled: true,
     hasDismissedDirectContactSpoofingWarning: false,
 
-    // These may be swiftly overridden.
-    lastMeasuredWarningHeight: 0,
+    // This may be swiftly overridden.
     widthBreakpoint: WidthBreakpoint.Wide,
   };
 
@@ -766,7 +764,6 @@ export class Timeline extends React.Component<
     } = this.props;
     const {
       hasRecentlyScrolled,
-      lastMeasuredWarningHeight,
       newestFullyVisibleMessageId,
       oldestPartiallyVisibleMessageId,
       widthBreakpoint,
@@ -820,11 +817,6 @@ export class Timeline extends React.Component<
         <TimelineFloatingHeader
           i18n={i18n}
           isLoading={isLoadingMessages}
-          style={
-            lastMeasuredWarningHeight
-              ? { marginTop: lastMeasuredWarningHeight }
-              : undefined
-          }
           timestamp={oldestPartiallyVisibleMessageTimestamp}
           visible={
             (hasRecentlyScrolled || isLoadingMessages) &&
@@ -956,27 +948,14 @@ export class Timeline extends React.Component<
       }
 
       timelineWarning = (
-        <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>
+        <TimelineWarnings>
+          <TimelineWarning i18n={i18n} onClose={onClose}>
+            <TimelineWarning.IconContainer>
+              <TimelineWarning.GenericIcon />
+            </TimelineWarning.IconContainer>
+            <TimelineWarning.Text>{text}</TimelineWarning.Text>
+          </TimelineWarning>
+        </TimelineWarnings>
       );
     }
 
@@ -1059,13 +1038,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',
@@ -1073,14 +1052,8 @@ export class Timeline extends React.Component<
                   )}
                   ref={this.messagesRef}
                 >
-                  {haveOldest && (
-                    <>
-                      {Timeline.getWarning(this.props, this.state) && (
-                        <div style={{ height: lastMeasuredWarningHeight }} />
-                      )}
-                      {renderHeroRow(id, unblurAvatar, updateSharedGroups)}
-                    </>
-                  )}
+                  {haveOldest &&
+                    renderHeroRow(id, unblurAvatar, updateSharedGroups)}
 
                   {messageNodes}
 
diff --git a/ts/components/conversation/TimelineFloatingHeader.tsx b/ts/components/conversation/TimelineFloatingHeader.tsx
index 8aee0e2a1116..dcdb4c3ae874 100644
--- a/ts/components/conversation/TimelineFloatingHeader.tsx
+++ b/ts/components/conversation/TimelineFloatingHeader.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import classNames from 'classnames';
-import type { CSSProperties, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { LocalizerType } from '../../types/Util';
 import { TimelineDateHeader } from './TimelineDateHeader';
@@ -11,13 +11,11 @@ import { Spinner } from '../Spinner';
 export const TimelineFloatingHeader = ({
   i18n,
   isLoading,
-  style,
   timestamp,
   visible,
 }: Readonly<{
   i18n: LocalizerType;
   isLoading: boolean;
-  style?: CSSProperties;
   timestamp: number;
   visible: boolean;
 }>): ReactElement => {
@@ -35,7 +33,6 @@ export const TimelineFloatingHeader = ({
           visible && hasRendered ? 'visible' : 'hidden'
         }`
       )}
-      style={style}
     >
       <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
       <div
diff --git a/ts/components/conversation/TimelineWarnings.tsx b/ts/components/conversation/TimelineWarnings.tsx
index 96fb90ccb8b6..b6e0f7d69a33 100644
--- a/ts/components/conversation/TimelineWarnings.tsx
+++ b/ts/components/conversation/TimelineWarnings.tsx
@@ -1,19 +1,11 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { ReactNode } from 'react';
-import React, { forwardRef } from 'react';
+import type { FunctionComponent } from 'react';
+import React from 'react';
 
 const CLASS_NAME = 'module-TimelineWarnings';
 
-type PropsType = {
-  children: ReactNode;
-};
-
-export const TimelineWarnings = forwardRef<HTMLDivElement, PropsType>(
-  ({ children }, ref) => (
-    <div className={CLASS_NAME} ref={ref}>
-      {children}
-    </div>
-  )
+export const TimelineWarnings: FunctionComponent = ({ children }) => (
+  <div className={CLASS_NAME}>{children}</div>
 );