From dee1f495aec7cf29769080d5e4208abe32063d6f Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 6 May 2021 22:01:12 +0800
Subject: feat: Timeline color.

---
 .../TimelinePropertyChangeDialog.tsx               | 57 +++++++++++++---------
 1 file changed, 35 insertions(+), 22 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
index a5628a9a..c65e097d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -31,30 +31,39 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
   return (
     <OperationDialog
       title={"timeline.dialogChangeProperty.title"}
-      inputScheme={[
-        {
-          type: "text",
-          label: "timeline.dialogChangeProperty.titleField",
-          initValue: timeline.title,
-        },
-        {
-          type: "select",
-          label: "timeline.dialogChangeProperty.visibility",
-          options: kTimelineVisibilities.map((v) => ({
-            label: labelMap[v],
-            value: v,
-          })),
-          initValue: timeline.visibility,
-        },
-        {
-          type: "text",
-          label: "timeline.dialogChangeProperty.description",
-          initValue: timeline.description,
-        },
-      ]}
+      inputScheme={
+        [
+          {
+            type: "text",
+            label: "timeline.dialogChangeProperty.titleField",
+            initValue: timeline.title,
+          },
+          {
+            type: "select",
+            label: "timeline.dialogChangeProperty.visibility",
+            options: kTimelineVisibilities.map((v) => ({
+              label: labelMap[v],
+              value: v,
+            })),
+            initValue: timeline.visibility,
+          },
+          {
+            type: "text",
+            label: "timeline.dialogChangeProperty.description",
+            initValue: timeline.description,
+          },
+          {
+            type: "color",
+            label: "timeline.dialogChangeProperty.color",
+            initValue: timeline.color ?? null,
+            disableAlpha: true,
+            canBeNull: true,
+          },
+        ] as const
+      }
       open={props.open}
       close={props.close}
-      onProcess={([newTitle, newVisibility, newDescription]) => {
+      onProcess={([newTitle, newVisibility, newDescription, newColor]) => {
         const req: HttpTimelinePatchRequest = {};
         if (newTitle !== timeline.title) {
           req.title = newTitle;
@@ -65,6 +74,10 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps>
         if (newDescription !== timeline.description) {
           req.description = newDescription;
         }
+        const nc = newColor ?? "#007bff";
+        if (nc !== timeline.color) {
+          req.color = nc;
+        }
         return getHttpTimelineClient()
           .patchTimeline(timeline.name, req)
           .then(onChange);
-- 
cgit v1.2.3

