From 5248e3ff3f1fd03a519476a7f9ebd3792faa1e43 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 4 Apr 2021 23:50:25 +0800
Subject: ...

---
 .../src/app/views/timeline-common/Timeline.tsx     | 38 +++++++++-------------
 .../views/timeline-common/TimelinePageTemplate.tsx |  1 -
 .../timeline-common/TimelinePagedPostListView.tsx  | 21 +++++++-----
 .../views/timeline-common/TimelinePostListView.tsx | 17 ++++++----
 .../app/views/timeline-common/TimelinePostView.tsx |  5 +--
 .../app/views/timeline-common/timeline-common.sass | 17 ++++++++++
 6 files changed, 58 insertions(+), 41 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index f7f7dcfc..60fbc45c 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -13,7 +13,6 @@ import TimelineTop from "./TimelineTop";
 export interface TimelineProps {
   className?: string;
   style?: React.CSSProperties;
-  top?: string | number;
   timelineName: string;
   reloadKey: number;
   onReload: () => void;
@@ -21,15 +20,7 @@ export interface TimelineProps {
 }
 
 const Timeline: React.FC<TimelineProps> = (props) => {
-  const {
-    timelineName,
-    className,
-    style,
-    top,
-    reloadKey,
-    onReload,
-    onLoad,
-  } = props;
+  const { timelineName, className, style, reloadKey, onReload, onLoad } = props;
 
   const [state, setState] = React.useState<
     "loading" | "loaded" | "offline" | "notexist" | "forbid" | "error"
@@ -81,14 +72,16 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   switch (state) {
     case "loading":
       return (
-        <TimelineTop
-          className="timeline-top-loading-enter"
-          height={100}
-          lineProps={{
-            center: "loading",
-            startSegmentLength: 56,
-          }}
-        />
+        <>
+          <TimelineTop
+            className="timeline-top-loading-enter"
+            height={100}
+            lineProps={{
+              center: "loading",
+              startSegmentLength: 56,
+            }}
+          />
+        </>
       );
     case "offline":
       return (
@@ -116,11 +109,10 @@ const Timeline: React.FC<TimelineProps> = (props) => {
       );
     default:
       return (
-        <TimelinePagedPostListView
-          posts={posts}
-          top={top}
-          onReload={onReload}
-        />
+        <>
+          <TimelineTop height={40} />
+          <TimelinePagedPostListView posts={posts} onReload={onReload} />
+        </>
       );
   }
 };
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 1c8873f9..5cde014b 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -149,7 +149,6 @@ const TimelinePageTemplate: React.FC<TimelinePageTemplateProps> = (props) => {
           }}
         >
           <Timeline
-            top={40}
             timelineName={timeline.name}
             reloadKey={timelineReloadKey}
             onReload={reloadTimeline}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
index e0534695..8efdb034 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePagedPostListView.tsx
@@ -2,12 +2,13 @@ import React from "react";
 
 import { HttpTimelinePostInfo } from "@/http/timeline";
 
-import TimelinePostListView from "./TimelinePostListView";
+import TimelinePostListView, {
+  TimelinePostListViewProps,
+} from "./TimelinePostListView";
 
 export interface TimelinePagedPostListViewProps {
   className?: string;
   style?: React.CSSProperties;
-  top?: string | number;
   posts: HttpTimelinePostInfo[];
   onReload: () => void;
 }
@@ -15,16 +16,21 @@ export interface TimelinePagedPostListViewProps {
 const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
   props
 ) => {
-  const { className, style, top, posts, onReload } = props;
+  const { className, style, posts, onReload } = props;
 
   const [lastViewCount, setLastViewCount] = React.useState<number>(10);
 
   const viewingPosts = React.useMemo(() => {
-    if (lastViewCount >= posts.length) {
-      return posts;
-    } else {
-      return posts.slice(-lastViewCount, -1);
+    const p: TimelinePostListViewProps["posts"] =
+      lastViewCount >= posts.length
+        ? posts.slice()
+        : posts.slice(-lastViewCount);
+
+    for (let i = 0; i < p.length; i++) {
+      p[p.length - i - 1].enterDelay = (i % 10) * 0.4;
     }
+
+    return p;
   }, [posts, lastViewCount]);
 
   React.useEffect(() => {
@@ -43,7 +49,6 @@ const TimelinePagedPostListView: React.FC<TimelinePagedPostListViewProps> = (
     <TimelinePostListView
       className={className}
       style={style}
-      top={top}
       posts={viewingPosts}
       onReload={onReload}
     />
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
index fe12b806..4cffe593 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
@@ -5,7 +5,6 @@ import { HttpTimelinePostInfo } from "@/http/timeline";
 
 import TimelinePostView from "./TimelinePostView";
 import TimelineDateLabel from "./TimelineDateLabel";
-import TimelineTop from "./TimelineTop";
 
 function dateEqual(left: Date, right: Date): boolean {
   return (
@@ -18,20 +17,22 @@ function dateEqual(left: Date, right: Date): boolean {
 export interface TimelinePostListViewProps {
   className?: string;
   style?: React.CSSProperties;
-  top?: string | number;
-  posts: HttpTimelinePostInfo[];
+  posts: (HttpTimelinePostInfo & { enterDelay?: number })[];
   onReload: () => void;
 }
 
 const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
-  const { className, style, top, posts, onReload } = props;
+  const { className, style, posts, onReload } = props;
 
   const groupedPosts = React.useMemo<
-    { date: Date; posts: (HttpTimelinePostInfo & { index: number })[] }[]
+    {
+      date: Date;
+      posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[];
+    }[]
   >(() => {
     const result: {
       date: Date;
-      posts: (HttpTimelinePostInfo & { index: number })[];
+      posts: (HttpTimelinePostInfo & { index: number; enterDelay?: number })[];
     }[] = [];
     let index = 0;
     for (const post of posts) {
@@ -53,7 +54,6 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
 
   return (
     <div style={style} className={clsx("timeline", className)}>
-      {top && <TimelineTop height={top} />}
       {groupedPosts.map((group) => {
         return (
           <Fragment key={group.date.toDateString()}>
@@ -65,6 +65,9 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
                   post={post}
                   current={posts.length - 1 === post.index}
                   onDeleted={onReload}
+                  cardStyle={{
+                    animationDelay: `${post.enterDelay ?? 0}s`,
+                  }}
                 />
               );
             })}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index 3d075f0e..4cafdaa0 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -16,11 +16,12 @@ export interface TimelinePostViewProps {
   current?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  cardStyle?: React.CSSProperties;
   onDeleted?: () => void;
 }
 
 const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
-  const { post, className, style, onDeleted } = props;
+  const { post, className, style, cardStyle, onDeleted } = props;
   const current = props.current === true;
 
   const [
@@ -36,7 +37,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
       style={style}
     >
       <TimelineLine center="node" current={current} />
-      <div className="timeline-item-card">
+      <div className="timeline-item-card" style={cardStyle}>
         {post.editable ? (
           <i
             className="bi-chevron-down text-info icon-button float-right"
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index e634e77e..683a4282 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -5,6 +5,7 @@
   position: relative
   width: 100%
   overflow-wrap: break-word
+  animation: 1s timeline-enter
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
@@ -37,12 +38,26 @@ $timeline-line-color-current: #36c2e6
   to
     transform: rotate(1turn)
 
+@keyframes timeline-enter
+  from
+    transform: translate(0, -100vh)
+
+  to
+
 @keyframes timeline-top-loading-enter
   from
     transform: translate(0, -100%)
 
   to
 
+@keyframes timeline-post-enter
+  from
+    transform: translate(0, -100%)
+    opacity: 0
+
+  to
+    opacity: 1
+
 .timeline-top-loading-enter
   animation: 1s timeline-top-loading-enter
 
@@ -138,6 +153,8 @@ $timeline-line-color-current: #36c2e6
   position: relative
   padding: 0.3em 0.5em 1em 4em
   transition: background 0.5s, padding-left 0.5s
+  animation: 0.4s forwards timeline-post-enter
+  opacity: 0
 
   @include media-breakpoint-down(sm)
     padding-left: 3em
-- 
cgit v1.2.3