From 3be5b4f90d2da78ee88edf5b0f6693bd9e28ce2a Mon Sep 17 00:00:00 2001
From: Laurent Fasani <laurent.fasani@obeo.fr>
Date: Mon, 19 Feb 2024 17:33:18 +0100
Subject: [PATCH] Allow to parameterize color for task drag

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
---
 .../task-list/task-list-table-row.module.css  |  8 ----
 .../task-list/task-list-table-row.tsx         | 45 ++++++++++++-------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/task-list/task-list-table-row.module.css b/src/components/task-list/task-list-table-row.module.css
index 65af7b71..4f5e7d51 100644
--- a/src/components/task-list/task-list-table-row.module.css
+++ b/src/components/task-list/task-list-table-row.module.css
@@ -4,10 +4,6 @@
   text-overflow: ellipsis;
 }
 
-.lighten {
-  background-color: #7474ff;
-}
-
 .cut {
   opacity: 0.3;
 }
@@ -35,8 +31,6 @@
 }
 
 .dropAfterLighten {
-  color: #7474ff;;
-  background-color:#7474ff;
   border-radius: 6px;
 }
 
@@ -60,8 +54,6 @@
 }
 
 .dropBeforeLighten {
-  color: #7474ff;
-  background-color: #7474ff;
   border-radius: 6px;
 }
 
diff --git a/src/components/task-list/task-list-table-row.tsx b/src/components/task-list/task-list-table-row.tsx
index ac848239..6cd655d1 100644
--- a/src/components/task-list/task-list-table-row.tsx
+++ b/src/components/task-list/task-list-table-row.tsx
@@ -270,23 +270,26 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> = ({
   const dropPreviewOffset =
     distances.nestedTaskNameOffset * depth + distances.expandIconWidth;
 
+  let backgroundColor = isSelected
+    ? colors.selectedTaskBackgroundColor
+    : isEven && !dropInsideProps.isLighten
+    ? colors.evenTaskBackgroundColor
+    : undefined;
+  if (
+    dropInsideProps.isLighten &&
+    !dropAfterProps.isLighten &&
+    !dropBeforeProps.isLighten
+  ) {
+    backgroundColor = colors.taskDragColor;
+  }
+
   return (
     <div
-      className={`${styles.taskListTableRow} ${
-        dropInsideProps.isLighten &&
-        !dropAfterProps.isLighten &&
-        !dropBeforeProps.isLighten
-          ? styles.lighten
-          : ""
-      } ${isCut ? styles.isCut : ""}`}
+      className={`${styles.taskListTableRow} ${isCut ? styles.isCut : ""}`}
       onMouseDown={onRootMouseDown}
       style={{
         height: fullRowHeight,
-        backgroundColor: isSelected
-          ? colors.selectedTaskBackgroundColor
-          : isEven && !dropInsideProps.isLighten
-          ? colors.evenTaskBackgroundColor
-          : undefined,
+        backgroundColor: backgroundColor,
         ...style,
       }}
       onContextMenu={onContextMenu}
@@ -311,14 +314,26 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> = ({
         className={`${styles.dropBefore} ${
           dropBeforeProps.isLighten ? styles.dropBeforeLighten : ""
         }`}
-        style={{ left: dropPreviewOffset }}
+        style={{
+          left: dropPreviewOffset,
+          backgroundColor: dropBeforeProps.isLighten
+            ? colors.taskDragColor
+            : undefined,
+          color: dropBeforeProps.isLighten ? colors.taskDragColor : undefined,
+        }}
         ref={dropBefore}
       />
       <div
         className={`${styles.dropAfter} ${
-          dropAfterProps.isLighten ? styles.dropAfterLighten : ""
+          dropAfterProps.isLighten ? styles.dropBeforeLighten : ""
         }`}
-        style={{ left: dropPreviewOffset }}
+        style={{
+          left: dropPreviewOffset,
+          backgroundColor: dropAfterProps.isLighten
+            ? colors.taskDragColor
+            : undefined,
+          color: dropAfterProps.isLighten ? colors.taskDragColor : undefined,
+        }}
         ref={dropAfter}
       />
     </div>