Enlarge progress handle and update color on hover

This is particularly useful when the progress is zero or 100% and then displayed at the same position than the start/end date handle. Signed-off-by: Laurent Fasani <[email protected]>
ObeoNetwork · Jun 21, 2024 · 21f3138 · 21f3138
1 parent 13e537e
commit 21f3138
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/task-item/bar/bar-relation-handle.module.css b/src/components/task-item/bar/bar-relation-handle.module.css
@@ -8,3 +8,7 @@
   cursor: pointer;
   opacity: 0;
 }
+
+.barRelationHandle:hover {
+  fill: #a2a2a2;
+}
diff --git a/src/components/task-item/bar/bar.module.css b/src/components/task-item/bar/bar.module.css
@@ -15,6 +15,10 @@
   visibility: hidden;
 }
 
+.barHandle:hover {
+  fill: #a2a2a2;
+}
+
 .barBackground {
   user-select: none;
   stroke-width: 0;

diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts
@@ -46,13 +46,14 @@ export const getProgressPoint = (
   taskY: number,
   taskHeight: number
 ) => {
+  console.log("getProgressPoint");
   const point = [
-    progressX - 5,
+    progressX - 7,
     taskY + taskHeight,
-    progressX + 5,
+    progressX + 7,
     taskY + taskHeight,
     progressX,
-    taskY + taskHeight - 8.66,
+    taskY + taskHeight - 11,
   ];
   return point.join(",");
 };