From b082a3ba08c9782c0834af77e6c3f0438534ad72 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 10:31:34 +0800
Subject: refactor: Refactor operation dialog.

---
 .../timeline-common/TimelinePropertyChangeDialog.tsx   | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index 223525f9..ee49586e 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -6,9 +6,7 @@ import {
   TimelineChangePropertyRequest,
 } from "@/services/timeline";
 
-import OperationDialog, {
-  OperationSelectInputInfoOption,
-} from "../common/OperationDialog";
+import OperationDialog from "../common/OperationDialog";
 
 export interface TimelinePropertyInfo {
   title: string;
@@ -45,12 +43,10 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
         {
           type: "select",
           label: "timeline.dialogChangeProperty.visibility",
-          options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(
-            (v) => ({
-              label: labelMap[v],
-              value: v,
-            })
-          ),
+          options: kTimelineVisibilities.map((v) => ({
+            label: labelMap[v],
+            value: v,
+          })),
           initValue: props.oldInfo.visibility,
         },
         {
@@ -64,13 +60,13 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
       onProcess={([newTitle, newVisibility, newDescription]) => {
         const req: TimelineChangePropertyRequest = {};
         if (newTitle !== props.oldInfo.title) {
-          req.title = newTitle as string;
+          req.title = newTitle;
         }
         if (newVisibility !== props.oldInfo.visibility) {
           req.visibility = newVisibility as TimelineVisibility;
         }
         if (newDescription !== props.oldInfo.description) {
-          req.description = newDescription as string;
+          req.description = newDescription;
         }
         return props.onProcess(req);
       }}
-- 
cgit v1.2.3


From f7fff0c89a18cf5ed70dd5993ca7413e4d94daa4 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 11:49:15 +0800
Subject: feat: Redesign timeline page.

---
 .../src/app/views/timeline-common/Timeline.tsx     |  2 +
 .../src/app/views/timeline-common/TimelineItem.tsx | 58 +++++++++++-----------
 .../timeline-common/TimelinePageTemplateUI.tsx     |  2 -
 .../views/timeline-common/timeline-background.svg  |  4 ++
 .../app/views/timeline-common/timeline-common.sass | 20 ++++++--
 5 files changed, 51 insertions(+), 35 deletions(-)
 create mode 100644 FrontEnd/src/app/views/timeline-common/timeline-background.svg

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

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index fd051d45..6bd1b96d 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { TimelinePostInfo } from "@/services/timeline";
 
 import TimelineItem from "./TimelineItem";
+import TimelineTop from "./TimelineTop";
 
 export interface TimelinePostInfoEx extends TimelinePostInfo {
   deletable: boolean;
@@ -52,6 +53,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
 
   return (
     <div ref={props.containerRef} className={clsx("timeline", props.className)}>
+      <TimelineTop height="56px" />
       {(() => {
         const length = posts.length;
         return posts.map((post, i) => {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
index 4db23371..5ccc5523 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
@@ -93,12 +93,12 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           {current && <div className="timeline-line-segment current-end" />}
         </div>
       </div>
-      <div className="timeline-content-area">
+      <div className="timeline-item-card">
         <div>
           <span className="mr-2">
-            <span className="text-primary white-space-no-wrap mr-2">
+            <small className="text-secondary white-space-no-wrap mr-2">
               {props.post.time.toLocaleString(i18n.languages)}
-            </span>
+            </small>
             <small className="text-dark">{props.post.author.nickname}</small>
           </span>
           {more != null ? (
@@ -138,33 +138,33 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             }
           })()}
         </div>
+        {more != null && more.isOpen ? (
+          <>
+            <div
+              className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
+              onClick={more.toggle}
+            >
+              <Svg
+                src={trashIcon}
+                className="text-danger icon-button large"
+                onClick={(e) => {
+                  toggleDeleteDialog();
+                  e.stopPropagation();
+                }}
+              />
+            </div>
+            {deleteDialog ? (
+              <TimelinePostDeleteConfirmDialog
+                toggle={() => {
+                  toggleDeleteDialog();
+                  more.toggle();
+                }}
+                onConfirm={more.onDelete}
+              />
+            ) : null}
+          </>
+        ) : null}
       </div>
-      {more != null && more.isOpen ? (
-        <>
-          <div
-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
-            onClick={more.toggle}
-          >
-            <Svg
-              src={trashIcon}
-              className="text-danger icon-button large"
-              onClick={(e) => {
-                toggleDeleteDialog();
-                e.stopPropagation();
-              }}
-            />
-          </div>
-          {deleteDialog ? (
-            <TimelinePostDeleteConfirmDialog
-              toggle={() => {
-                toggleDeleteDialog();
-                more.toggle();
-              }}
-              onConfirm={more.onDelete}
-            />
-          ) : null}
-        </>
-      ) : null}
     </div>
   );
 };
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 6c2c43c1..35c1a65d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -16,7 +16,6 @@ import Timeline, {
   TimelinePostInfoEx,
   TimelineDeleteCallback,
 } from "./Timeline";
-import TimelineTop from "./TimelineTop";
 import TimelinePostEdit, { TimelinePostSendCallback } from "./TimelinePostEdit";
 import { TimelineSyncStatus } from "./SyncStatusBadge";
 
@@ -226,7 +225,6 @@ export default function TimelinePageTemplateUI<TManageItems>(
             collapse={cardCollapse}
             toggleCollapse={toggleCardCollapse}
           />
-          <TimelineTop height="56px" />
           {timelineBody}
         </>
       );
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-background.svg b/FrontEnd/src/app/views/timeline-common/timeline-background.svg
new file mode 100644
index 00000000..b72c448b
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/timeline-background.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 100 80" xmlns="http://www.w3.org/2000/svg" stroke="rgba(255,196,0,0.6)">
+    <line x1="0" y1="0" x2="100" y2="40" stroke-width="5" />
+    <line x1="0" y1="80" x2="100" y2="40" stroke-width="5" />
+</svg>
\ No newline at end of file
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 4151bfcc..286f6867 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -4,8 +4,13 @@
   z-index: 0
   position: relative
 
+  background-image: url("views/timeline-common/timeline-background.svg")
+  background-size: 100% auto
+  background-repeat: no-repeat repeat
+
   &-item
-    display: flex
+    position: relative
+    padding: 0.5em
 
 $timeline-line-width: 7px
 $timeline-line-node-radius: 18px
@@ -30,12 +35,17 @@ $timeline-line-color-current: #36c2e6
 
 .timeline-line
   &-area-container
+    position: absolute
     display: flex
     justify-content: flex-end
     padding-right: 5px
+    z-index: 1
 
     flex: 0 0 auto
+
+    left: 0.5em
     width: 60px
+    height: 100%
 
   &-area
     display: flex
@@ -97,9 +107,11 @@ $timeline-line-color-current: #36c2e6
     &-node
       animation-name: timeline-line-node-current
 
-.timeline-content-area
-  padding: 10px 0
-  flex-grow: 1
+.timeline-item-card
+  @extend .cru-card
+  @extend .clearfix
+  position: relative
+  padding: 0.5em 2em 0.5em 60px
 
 .timeline-item-delete-button
   position: absolute
-- 
cgit v1.2.3


From cdee687e1d37ca794e878ec599a74a77dd6cdf78 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 12:01:50 +0800
Subject: feat: Enhance design.

---
 FrontEnd/src/app/views/timeline-common/Timeline.tsx       |  7 ++++++-
 .../app/views/timeline-common/TimelinePageTemplateUI.tsx  | 15 +++++++++------
 FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx      |  2 +-
 FrontEnd/src/app/views/user/UserInfoCard.tsx              |  5 +----
 4 files changed, 17 insertions(+), 12 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 6bd1b96d..9047919c 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -14,6 +14,7 @@ export type TimelineDeleteCallback = (index: number, id: number) => void;
 
 export interface TimelineProps {
   className?: string;
+  style?: React.CSSProperties;
   posts: TimelinePostInfoEx[];
   onDelete: TimelineDeleteCallback;
   onResize?: () => void;
@@ -52,7 +53,11 @@ const Timeline: React.FC<TimelineProps> = (props) => {
   }, [posts, onDelete]);
 
   return (
-    <div ref={props.containerRef} className={clsx("timeline", props.className)}>
+    <div
+      ref={props.containerRef}
+      style={props.style}
+      className={clsx("timeline", props.className)}
+    >
       <TimelineTop height="56px" />
       {(() => {
         const length = posts.length;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 35c1a65d..036577b1 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -47,13 +47,10 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
   const { t } = useTranslation();
 
-  const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null);
+  const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0);
 
   const onPostEditHeightChange = React.useCallback((height: number): void => {
-    const { current: bottomSpaceDiv } = bottomSpaceRef;
-    if (bottomSpaceDiv != null) {
-      bottomSpaceDiv.style.height = `${height}px`;
-    }
+    setBottomSpaceHeight(height);
     if (height === 0) {
       const alertHost = getAlertHost();
       if (alertHost != null) {
@@ -177,6 +174,9 @@ export default function TimelinePageTemplateUI<TManageItems>(
 
           timelineBody = (
             <Timeline
+              style={{
+                minHeight: `calc(100vh - 56px - ${bottomSpaceHeight}px)`,
+              }}
               containerRef={timelineRef}
               posts={posts}
               onDelete={props.onDelete}
@@ -187,7 +187,10 @@ export default function TimelinePageTemplateUI<TManageItems>(
             timelineBody = (
               <>
                 {timelineBody}
-                <div ref={bottomSpaceRef} className="flex-fix-length" />
+                <div
+                  style={{ height: bottomSpaceHeight }}
+                  className="flex-fix-length"
+                />
                 <TimelinePostEdit
                   className="fixed-bottom"
                   onPost={props.onPost}
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
index abc3d0c9..1070c6d7 100644
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
@@ -36,7 +36,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <h3 className="text-primary mx-3 d-inline-block align-middle">
+      <h3 className="text-primary d-inline-block align-middle">
         {timeline.title}
         <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx
index e4edd80d..4a0c9e87 100644
--- a/FrontEnd/src/app/views/user/UserInfoCard.tsx
+++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx
@@ -35,16 +35,13 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       collapse={collapse}
       toggleCollapse={toggleCollapse}
     >
-      <h3 className="text-primary mx-3 d-inline-block align-middle">
+      <h3 className="text-primary d-inline-block align-middle">
         {timeline.title}
         <small className="ml-3 text-secondary">{timeline.name}</small>
       </h3>
       <div className="align-middle">
         <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" />
         {timeline.owner.nickname}
-        <small className="ml-3 text-secondary">
-          @{timeline.owner.username}
-        </small>
       </div>
       <p className="mb-0">{timeline.description}</p>
       <small className="mt-1 d-block">
-- 
cgit v1.2.3


From 7beb47609b4cac257171785bbe7e661ec165075d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 12:10:43 +0800
Subject: feat: Add hover effect on timeline item.

---
 FrontEnd/src/app/index.sass                                 | 2 +-
 FrontEnd/src/app/views/timeline-common/timeline-common.sass | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

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

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 5a0d0cc2..abe663d1 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -52,8 +52,8 @@ textarea
   @extend .shadow
   @extend .border
   @extend .rounded
-  @extend .bg-light
   border-color: $gray-200
+  background: $light
 
 .full-viewport-center-child
   position: fixed
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index 286f6867..dd5452de 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -112,6 +112,10 @@ $timeline-line-color-current: #36c2e6
   @extend .clearfix
   position: relative
   padding: 0.5em 2em 0.5em 60px
+  transition: background 0.5s
+
+  &:hover
+    background: $gray-200
 
 .timeline-item-delete-button
   position: absolute
-- 
cgit v1.2.3


From fb67f270199fd2154f25f4a124ca2f07f8c31cec Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 12:23:41 +0800
Subject: feat: ...

---
 .../src/app/views/timeline-common/timeline-common.sass | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index dd5452de..f804834b 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -41,11 +41,10 @@ $timeline-line-color-current: #36c2e6
     padding-right: 5px
     z-index: 1
 
-    flex: 0 0 auto
-
+    top: 0em
+    bottom: 0em
     left: 0.5em
     width: 60px
-    height: 100%
 
   &-area
     display: flex
@@ -58,14 +57,14 @@ $timeline-line-color-current: #36c2e6
     background: $timeline-line-color
 
     &.start
-      height: 14px
+      height: 1.4em
       flex: 0 0 auto
 
     &.end
       flex: 1 1 auto
 
     &.current-end
-      height: 20px
+      height: 2em
       flex: 0 0 auto
       background: linear-gradient($timeline-line-color-current, transparent)
 
@@ -88,14 +87,16 @@ $timeline-line-color-current: #36c2e6
     animation-name: timeline-line-node-noncurrent
 
 .timeline-top
-  display: flex
-  justify-content: space-between
+  position: relative
+  text-align: right
 
   .timeline-line-segment
     flex: 1 1 auto
 
 .current
   .timeline-line
+    &-area-container
+      bottom: -2em
     &-segment
 
       &.start
@@ -137,9 +138,6 @@ $timeline-line-color-current: #36c2e6
   background: change-color($color: white, $alpha: 0.8)
   z-index: 100
 
-.timeline-page-top-space
-  transition: height 0.5s
-
 .timeline-sync-state-badge
   font-size: 0.8em
   padding: 3px 8px
-- 
cgit v1.2.3


From a20b15c1c79cd49ee4be7ac3fba80955704122d3 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 12:26:56 +0800
Subject: feat: ...

---
 FrontEnd/src/app/views/timeline-common/timeline-common.sass | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
index f804834b..8d9ee04d 100644
--- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass
+++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass
@@ -94,9 +94,10 @@ $timeline-line-color-current: #36c2e6
     flex: 1 1 auto
 
 .current
+  &.timeline-item
+    padding-bottom: 2.5em
+
   .timeline-line
-    &-area-container
-      bottom: -2em
     &-segment
 
       &.start
-- 
cgit v1.2.3