From d8a2ca7d0ad9afdd01c654bea29b2a6c2b92ff2c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 19:57:49 +0800
Subject: ...

---
 .../timeline-common/TimelinePageTemplateUI.tsx     | 36 ++++++++--------------
 .../app/views/timeline-common/TimelinePostEdit.tsx |  6 +++-
 .../app/views/timeline-common/timeline-common.sass | 14 +--------
 3 files changed, 19 insertions(+), 37 deletions(-)

(limited to 'Timeline/ClientApp/src/app/views/timeline-common')

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 1e17c4a1..4296a5ce 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { fromEvent } from "rxjs";
 import Svg from "react-inlinesvg";
-import { Spinner } from "react-bootstrap";
+import { Spinner, Collapse } from "react-bootstrap";
 import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
 import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
@@ -78,7 +78,6 @@ export interface TimelineCardComponentProps<TManageItems> {
   onManage?: (item: TManageItems | "property") => void;
   onMember: () => void;
   className?: string;
-  onHeight?: (height: number) => void;
 }
 
 export interface TimelinePageTemplateUIProps<TManageItems> {
@@ -173,8 +172,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
     }
   }, [getResizeEvent, triggerResizeEvent, timeline, postListState]);
 
-  const [cardHeight, setCardHeight] = React.useState<number>(0);
-
   const genCardCollapseLocalStorageKey = (uniqueId: string): string =>
     `timeline.${uniqueId}.cardCollapse`;
 
@@ -219,10 +216,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
             })
           );
 
-          const topHeight: string = infoCardCollapse
-            ? "calc(68px + 1.5em)"
-            : `${cardHeight + 60}px`;
-
           const syncState: TimelinePostSyncState = postListState.syncing
             ? "syncing"
             : postListState.type === "synced"
@@ -231,10 +224,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
           timelineBody = (
             <div>
-              <TimelinePostSyncStateBadge
-                style={{ top: topHeight }}
-                state={syncState}
-              />
+              <TimelinePostSyncStateBadge state={syncState} />
               <Timeline
                 containerRef={timelineRef}
                 posts={posts}
@@ -249,6 +239,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
                 {timelineBody}
                 <div ref={bottomSpaceRef} className="flex-fix-length" />
                 <TimelinePostEdit
+                  className="fixed-bottom"
                   onPost={props.onPost}
                   onHeightChange={onPostEditHeightChange}
                   timelineUniqueId={timeline.uniqueId}
@@ -268,10 +259,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
       body = (
         <>
-          <div
-            className="info-card-container"
-            data-collapse={infoCardCollapse ? "true" : "false"}
-          >
+          <div className="info-card-container">
             <Svg
               src={
                 infoCardCollapse
@@ -288,14 +276,16 @@ export default function TimelinePageTemplateUI<TManageItems>(
               }}
               className="float-right m-1 info-card-collapse-button text-primary icon-button"
             />
-            <CardComponent
-              timeline={timeline}
-              onManage={props.onManage}
-              onMember={props.onMember}
-              onHeight={setCardHeight}
-              className="info-card-content"
-            />
+            <Collapse in={!infoCardCollapse}>
+              <CardComponent
+                timeline={timeline}
+                onManage={props.onManage}
+                onMember={props.onMember}
+                className="info-card-content"
+              />
+            </Collapse>
           </div>
+
           {timelineBody}
         </>
       );
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
index 42f83b52..dfa2f879 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import Svg from "react-inlinesvg";
 import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
@@ -183,7 +184,10 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
   }, []);
 
   return (
-    <div ref={containerRef} className="container-fluid fixed-bottom bg-light">
+    <div
+      ref={containerRef}
+      className={clsx("container-fluid bg-light", props.className)}
+    >
       <Row>
         <Col className="px-1 py-1">
           {kind === "text" ? (
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
index 1862de02..a7b9af7b 100644
--- a/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
+++ b/Timeline/ClientApp/src/app/views/timeline-common/timeline-common.sass
@@ -142,17 +142,5 @@ $timeline-line-color-current: #36c2e6
 
 .info-card-container
   position: sticky
+  top: 56px
   z-index: 1
-
-  .info-card-collapse-button
-    z-index: 1
-    position: relative
-
-  .info-card-content
-    width: 100%
-    transform-origin: right top
-    transition: transform 0.5s
-
-  &[data-collapse='true']
-    .info-card-content
-      transform: scale(0)
-- 
cgit v1.2.3