Add color changing

lashwi · Dec 1, 2023 · 8923e2d · 8923e2d
1 parent 51e2c28
commit 8923e2d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 5 deletions.
diff --git a/client/src/@types/index.d.ts b/client/src/@types/index.d.ts
@@ -15,14 +15,15 @@ interface Task {
   posY: number;
   // posZ: number;
   color: string;
+  textColor?: string;
   description?: string;
   status?: string;
   priority?: string;
   deadline?: string;
+  timeNeeded?: string;
   assignees?: User[];
   arrowsOut?: Arrow[];
   arrowsIn?: Arrow[];
-  timeNeeded?: string;
 }
 interface Arrow {
   id: number;

diff --git a/client/src/components/Board/index.tsx b/client/src/components/Board/index.tsx
@@ -74,7 +74,8 @@ export default function Board() {
         height: 100,
         posX: 300,
         posY: 100,
-        color: "#f7d9c4"
+        color: "#f7d9c4",
+        textColor: "#b35b5b"
       },
       {
         id: 5,
@@ -91,7 +92,31 @@ export default function Board() {
         id: 1,
         from: 1,
         to: 2,
-        color: "#0000ff"
+        color: "#7f00f7"
+      },
+      {
+        id: 2,
+        from: 1,
+        to: 3,
+        color: "#7f00f7"
+      },
+      {
+        id: 3,
+        from: 4,
+        to: 5,
+        color: "#7f00f7"
+      },
+      {
+        id: 4,
+        from: 3,
+        to: 5,
+        color: "#7f00f7"
+      },
+      {
+        id: 5,
+        from: 2,
+        to: 5,
+        color: "#7f00f7"
       }
     ],
     users: [
@@ -137,7 +162,7 @@ export default function Board() {
     _selected_task: null
   });
   const [arrowToolState, setArrowToolState] = useState<ArrowToolState>({
-    color: "#0000ff",
+    color: "#7f00f7",
     _firstId: -1
   });
 
@@ -303,6 +328,7 @@ export default function Board() {
               key={idx}
               start={arrow.from.toString()}
               end={arrow.to.toString()}
+              color={arrow.color}
             />
           ))}
         </Xwrapper>

diff --git a/client/src/components/Task/index.tsx b/client/src/components/Task/index.tsx
@@ -68,11 +68,14 @@ export default function Task(props: Props) {
           width: `${task.width}px`,
           height: `${task.height}px`,
           background: task.color,
+          color: task.textColor,
         }}
         ref={target_ref}
         onClick={() => handleTaskClick(task.id)}
       >
-        <p>{useDeferredValue(task.title)}</p>
+        <p>
+          {useDeferredValue(task.title)}
+        </p>
       </div>
       {isMoveable ? (
         <Moveable

diff --git a/client/src/components/TaskDetailsPane/index.tsx b/client/src/components/TaskDetailsPane/index.tsx
@@ -216,6 +216,9 @@ export default function TaskDetailsPane(props: Props) {
                 placeholder="Untitled task"
                 rows={1}
                 spellCheck={false}
+                autoFocus={true}
+                // Move cursor to end of text
+                onFocus={(e) => {e.target.value = ''; e.target.value = task.title;}}
                 onChange={(e) => setTitle(e.target.value)}
               />
             </span>
@@ -294,6 +297,30 @@ export default function TaskDetailsPane(props: Props) {
                   onChange={(e) => setTimeNeeded(e.target.value)}
                 />
               </span>
+              <span className="flex flex-col">
+                <span>Task Color</span>
+                <input
+                  type="color"
+                  className="border-2 border-surface-150 w-full rounded-md bg-transparent"
+                  defaultValue={task.color}
+                  onChange={(e) => handleTaskUpdate({
+                    ...task,
+                    color: e.target.value
+                  })}
+                />
+              </span>
+              <span className="flex flex-col">
+                <span>Text Color</span>
+                <input
+                  type="color"
+                  className="border-2 border-surface-150 w-full rounded-md bg-transparent"
+                  defaultValue={task.textColor}
+                  onChange={(e) => handleTaskUpdate({
+                    ...task,
+                    textColor: e.target.value
+                  })}
+                />
+              </span>
             </div>
             <span className="flex flex-col">
               <span>