From 681ed22edbe6ead81f7177c956322c8645f77398 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Dec 2020 21:38:22 +0800
Subject: ...

---
 FrontEnd/src/app/views/home/BoardWithUser.tsx | 10 ++++++++
 FrontEnd/src/app/views/home/TimelineBoard.tsx | 33 +++++++++++++++++++--------
 FrontEnd/src/app/views/home/home.sass         |  8 ++++++-
 3 files changed, 40 insertions(+), 11 deletions(-)

(limited to 'FrontEnd/src/app/views/home')

diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 469eb388..ab87a58f 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -17,6 +17,16 @@ const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
         <TimelineBoard
           title={t("home.highlightTimeline")}
           load={() => getHttpHighlightClient().list()}
+          editHandler={
+            user.hasHighlightTimelineAdministrationPermission
+              ? {
+                  onDelete: () => {
+                    // TODO: Implement this.
+                    return Promise.resolve();
+                  },
+                }
+              : undefined
+          }
         />
       </Col>
       <Col xs="12" md="6" className="my-3 my-md-0">
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 87ed98e1..0195f1b5 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -30,13 +30,21 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
 
   const content = (
     <>
-      {isPersonal ? (
-        <UserTimelineLogo className="icon" />
-      ) : (
-        <TimelineLogo className="icon" />
-      )}
-      {title}
-      <small className="ml-2 text-secondary">{name}</small>
+      <div>
+        {isPersonal ? (
+          <UserTimelineLogo className="icon" />
+        ) : (
+          <TimelineLogo className="icon" />
+        )}
+        {title}
+        <small className="ml-2 text-secondary">{name}</small>
+      </div>
+      {actions != null ? (
+        <div>
+          <i className="bi-trash icon-button text-danger" />
+          <i className="bi-grip-vertical icon-button text-danger" />
+        </div>
+      ) : null}
     </>
   );
 
@@ -49,7 +57,7 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
   );
 };
 
-interface TimelineBoardUIProps {
+export interface TimelineBoardUIProps {
   title?: string;
   timelines: TimelineInfo[] | "offline" | "loading";
   onReload: () => void;
@@ -68,8 +76,8 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
 
   return (
     <div className={clsx("timeline-board", className)}>
-      <div>
-        {title != null && <h3 className="text-center">{title}</h3>}
+      <div className="timeline-board-header">
+        {title != null && <h3>{title}</h3>}
         {
           editable &&
             (editing ? (
@@ -132,12 +140,16 @@ export interface TimelineBoardProps {
   title?: string;
   className?: string;
   load: () => Promise<TimelineInfo[]>;
+  editHandler?: {
+    onDelete: (timeline: string) => Promise<void>;
+  };
 }
 
 const TimelineBoard: React.FC<TimelineBoardProps> = ({
   className,
   title,
   load,
+  editHandler,
 }) => {
   const [timelines, setTimelines] = React.useState<
     TimelineInfo[] | "offline" | "loading"
@@ -170,6 +182,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = ({
       onReload={() => {
         setTimelines("loading");
       }}
+      editHandler={editHandler}
     />
   );
 };
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 0c01019b..e15441bc 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -3,13 +3,19 @@
   @extend .d-flex
   @extend .flex-column
   @extend .py-3
+  @extend .px-3
   min-height: 200px
 
+.timeline-board-header
+  display: flex
+  justify-content: space-between
+
 .timeline-board-item
   font-size: 1.1em
-  @extend .px-3
   @extend .py-2
   transition: background 0.3s
+  display: flex
+  justify-content: space-between
   .icon
     height: 1.3em
     color: black
-- 
cgit v1.2.3