From 7ec5cf66cef88bc7d3b8720070f40cceb452aec4 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 10 Jun 2020 15:21:32 +0800
Subject: feat(front): Fix #75 .

---
 Timeline/ClientApp/src/home/TimelineBoard.tsx      |  2 +-
 Timeline/ClientApp/src/home/home.sass              |  6 +-
 Timeline/ClientApp/src/timeline/Timeline.tsx       | 68 +++++++++++-----------
 Timeline/ClientApp/src/timeline/TimelineItem.tsx   |  9 ++-
 .../src/timeline/TimelinePageTemplateUI.tsx        |  4 +-
 Timeline/ClientApp/src/timeline/timeline.sass      | 15 +++++
 6 files changed, 61 insertions(+), 43 deletions(-)

(limited to 'Timeline/ClientApp/src')

diff --git a/Timeline/ClientApp/src/home/TimelineBoard.tsx b/Timeline/ClientApp/src/home/TimelineBoard.tsx
index 38a5fcf8..2e017bf7 100644
--- a/Timeline/ClientApp/src/home/TimelineBoard.tsx
+++ b/Timeline/ClientApp/src/home/TimelineBoard.tsx
@@ -35,7 +35,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = props => {
               ? `/users/${timeline.owner.username}`
               : `/timelines/${name}`;
             return (
-              <div key={name} className="timeline-item">
+              <div key={name} className="timeline-board-item">
                 {isPersonal ? (
                   <UserTimelineLogo className="icon" />
                 ) : (
diff --git a/Timeline/ClientApp/src/home/home.sass b/Timeline/ClientApp/src/home/home.sass
index 9f9937ac..28a2e5f3 100644
--- a/Timeline/ClientApp/src/home/home.sass
+++ b/Timeline/ClientApp/src/home/home.sass
@@ -1,8 +1,4 @@
-.timeline-item-icon
-  width: 1em
-  height: 1em
-
-.timeline-item
+.timeline-board-item
   font-size: 1.1em
   @extend .my-2
   .icon
diff --git a/Timeline/ClientApp/src/timeline/Timeline.tsx b/Timeline/ClientApp/src/timeline/Timeline.tsx
index f6ff8949..1ec3795f 100644
--- a/Timeline/ClientApp/src/timeline/Timeline.tsx
+++ b/Timeline/ClientApp/src/timeline/Timeline.tsx
@@ -56,41 +56,43 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div className={clsx('pr-2', props.className)}>
-      <Container fluid className="d-flex flex-column">
-        {(() => {
-          const length = posts.length;
-          return posts.map((post, i) => {
-            const av: number | undefined =
-              user != null && user.username === post.author.username
-                ? avatarVersion
-                : undefined;
+    <Container
+      fluid
+      className={clsx('d-flex flex-column position-relative', props.className)}
+    >
+      <div className="timeline-enter-animation-mask" />
+      {(() => {
+        const length = posts.length;
+        return posts.map((post, i) => {
+          const av: number | undefined =
+            user != null && user.username === post.author.username
+              ? avatarVersion
+              : undefined;
 
-            const toggleMore = onToggleDelete[i];
+          const toggleMore = onToggleDelete[i];
 
-            return (
-              <TimelineItem
-                post={post}
-                key={post.id}
-                current={length - 1 === i}
-                more={
-                  toggleMore
-                    ? {
-                        isOpen: indexShowDeleteButton === i,
-                        toggle: toggleMore,
-                        onDelete: onItemDelete[i],
-                      }
-                    : undefined
-                }
-                onClick={onItemClick}
-                avatarVersion={av}
-                onResize={onResize}
-              />
-            );
-          });
-        })()}
-      </Container>
-    </div>
+          return (
+            <TimelineItem
+              post={post}
+              key={post.id}
+              current={length - 1 === i}
+              more={
+                toggleMore
+                  ? {
+                      isOpen: indexShowDeleteButton === i,
+                      toggle: toggleMore,
+                      onDelete: onItemDelete[i],
+                    }
+                  : undefined
+              }
+              onClick={onItemClick}
+              avatarVersion={av}
+              onResize={onResize}
+            />
+          );
+        });
+      })()}
+    </Container>
   );
 };
 
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 215c7b12..9e08acc7 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -56,6 +56,8 @@ export interface TimelineItemProps {
   onClick?: () => void;
   avatarVersion?: number;
   onResize?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 const TimelineItem: React.FC<TimelineItemProps> = (props) => {
@@ -78,8 +80,13 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
 
   return (
     <Row
-      className={clsx('position-relative flex-nowrap', current && 'current')}
+      className={clsx(
+        'position-relative flex-nowrap',
+        current && 'current',
+        props.className
+      )}
       onClick={props.onClick}
+      style={props.style}
     >
       <Col className="timeline-line-area">
         <div className="timeline-line-segment start"></div>
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index a4bad6aa..a246c0ce 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -107,9 +107,7 @@ export default function TimelinePageTemplateUI<
   const cardCollapseLocalStorageKey =
     timeline != null ? genCardCollapseLocalStorageKey(timeline.name) : null;
 
-  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(
-    false
-  );
+  const [infoCardCollapse, setInfoCardCollapse] = React.useState<boolean>(true);
   React.useEffect(() => {
     if (cardCollapseLocalStorageKey != null) {
       const savedCollapse =
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass
index 511cc838..dad5251c 100644
--- a/Timeline/ClientApp/src/timeline/timeline.sass
+++ b/Timeline/ClientApp/src/timeline/timeline.sass
@@ -1,5 +1,20 @@
 @use 'sass:color'
 
+@keyframes timeline-enter-animation-mask-animation
+  from
+    height: calc(100% + 300px)
+  to
+    height: 0
+
+.timeline-enter-animation-mask
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  background: linear-gradient(to top, transparent 0, 200px, white 300px)
+  z-index: 100
+  animation: timeline-enter-animation-mask-animation 5s
+
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
 $timeline-line-color: $primary
-- 
cgit v1.2.3