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

---
 FrontEnd/src/app/index.sass                   | 11 +++++++++--
 FrontEnd/src/app/views/home/TimelineBoard.tsx | 25 +++++++++++++++++++++----
 FrontEnd/src/app/views/home/home.sass         |  5 ++++-
 3 files changed, 34 insertions(+), 7 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 1a833174..f1ccf50b 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -35,10 +35,17 @@ small
     width: 40px
 
 .icon-button
-  font-size: 1.4em
+  font-size: 1.4rem
   cursor: pointer
   &.large
-    font-size: 1.6em
+    font-size: 1.6rem
+
+.flat-button
+  cursor: pointer
+  padding: 0.2em 0.5em
+  border-radius: 0.2em
+  &:hover
+    background-color: $gray-200
 
 .cursor-pointer
   cursor: pointer
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 0195f1b5..a83095d4 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -14,7 +14,7 @@ interface TimelineBoardItemProps {
   // If not null, will disable navigation on click.
   actions?: {
     onDelete: () => void;
-    onMove: (e: React.MouseEvent) => void;
+    onMove: (e: React.PointerEvent) => void;
   };
 }
 
@@ -41,8 +41,8 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
       </div>
       {actions != null ? (
         <div>
-          <i className="bi-trash icon-button text-danger" />
-          <i className="bi-grip-vertical icon-button text-danger" />
+          <i className="bi-trash icon-button text-danger px-2" />
+          <i className="bi-grip-vertical icon-button text-gray px-2" />
         </div>
       ) : null}
     </>
@@ -82,6 +82,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
           editable &&
             (editing ? (
               <div
+                className="flat-button text-primary"
                 onClick={() => {
                   setEditing(false);
                 }}
@@ -90,6 +91,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
               </div>
             ) : (
               <div
+                className="flat-button text-primary"
                 onClick={() => {
                   setEditing(true);
                 }}
@@ -127,7 +129,22 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
         } else {
           return timelines.map((timeline) => {
             return (
-              <TimelineBoardItem key={timeline.name} timeline={timeline} />
+              <TimelineBoardItem
+                key={timeline.name}
+                timeline={timeline}
+                actions={
+                  editHandler != null && editing
+                    ? {
+                        onDelete: () => {
+                          //TODO: Implement this.
+                        },
+                        onMove: () => {
+                          //TODO: Implement this.
+                        },
+                      }
+                    : undefined
+                }
+              />
             );
           });
         }
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index e15441bc..7694b50c 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -3,18 +3,21 @@
   @extend .d-flex
   @extend .flex-column
   @extend .py-3
-  @extend .px-3
   min-height: 200px
 
 .timeline-board-header
+  @extend .px-3
   display: flex
+  align-items: center
   justify-content: space-between
 
 .timeline-board-item
   font-size: 1.1em
+  @extend .px-3
   @extend .py-2
   transition: background 0.3s
   display: flex
+  align-items: center
   justify-content: space-between
   .icon
     height: 1.3em
-- 
cgit v1.2.3