Allow to parameterize color for task drag

Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · Feb 19, 2024 · 3be5b4f · 3be5b4f
1 parent 6b16fe2
commit 3be5b4f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 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
@@ -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
@@ -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>