Merge branch 'main' of https://github.com/lashwi/TaskWeaver into tool…

…tips
lashwi · Dec 1, 2023 · e6e8dcf · e6e8dcf
2 parents 4ef2747 + 8607e9a
commit e6e8dcf
Show file tree

Hide file tree

Showing 5 changed files with 290 additions and 182 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
@@ -75,7 +75,8 @@ export default function Board() {
         height: 100,
         posX: 300,
         posY: 100,
-        color: "#f7d9c4"
+        color: "#f7d9c4",
+        textColor: "#b35b5b"
       },
       {
         id: 5,
@@ -92,7 +93,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: [
@@ -139,7 +164,7 @@ export default function Board() {
   });
   const [taskToolState, setTaskToolState] = useState<TaskToolState>({color: "#faedcb"});
   const [arrowToolState, setArrowToolState] = useState<ArrowToolState>({
-    color: "#0000ff",
+    color: "#7f00f7",
     _firstId: -1
   });
 
@@ -151,7 +176,6 @@ export default function Board() {
         break;
       case Tool.Move:
         console.log('Selected move tool');
-        resetPointerToolState();
         break;
       case Tool.Task:
         console.log('Selected task tool');
@@ -314,6 +338,7 @@ export default function Board() {
               key={idx}
               start={arrow.from.toString()}
               end={arrow.to.toString()}
+              color={arrow.color}
             />
           ))}
         </Xwrapper>
@@ -322,13 +347,19 @@ export default function Board() {
         <Navbar
           title={board.title}
           handleTitleChange={(title) => setBoard({ ...board, title })}
+          handleNewBoard={() => {
+            setArrows([]);
+            setTasks([]);
+          }}
         />
         <div className="relative h-full">
-          <div className="absolute flex grow-0 top-64">
-            <Toolbar
-              selectedTool={selectedTool}
-              setSelectedTool={handleSetTool}
-            />
+          <div className="h-full flex">
+            <span className="my-auto pt-2 pb-32">
+              <Toolbar
+                selectedTool={selectedTool}
+                setSelectedTool={handleSetTool}
+              />
+            </span>
           </div>
           <div className="absolute flex grow-0 top-64">
             <ToolDetails
@@ -337,7 +368,7 @@ export default function Board() {
               setArrowColor={handleSetArrowToolColor}
             />
           </div>
-          <div className="absolute top-8 right-0 bottom-4">
+          <div className="absolute w-full top-8 bottom-4">
             {pointerToolState._selected_task ? (
               <TaskDetailsPane
                 task={pointerToolState._selected_task}

diff --git a/client/src/components/Navbar/index.tsx b/client/src/components/Navbar/index.tsx
@@ -1,35 +1,80 @@
+"use client"
+import { useState } from 'react';
 import {
   ArrowRedo24Filled,
   ArrowUndo24Filled,
   Folder24Regular,
+  HandLeftFilled,
   Person24Filled
 } from '@fluentui/react-icons';
 import { Tooltip } from 'react-tooltip';
 
 interface Props {
   title: string;
   handleTitleChange: (title: string) => void;
+  handleNewBoard: () => void;
 };
 
 export default function Navbar(props: Props) {
-  const { title, handleTitleChange } = props;
+  const { title, handleTitleChange, handleNewBoard } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
+
   return (
     <nav className="flex flex-row gap-2 pointer-events-none [&>*]:pointer-events-auto">
       <div className="flex panel-surface-050 items-center p-1">
-        <button
-          className="p-1 rounded-lg hover:bg-surface-100"
-          data-tooltip-id="tooltip-navbar"
-          data-tooltip-content="Boards"
-        >
-          <Folder24Regular />
-        </button>
+        <div className="relative">
+          <button
+            className="p-1 rounded-lg hover:bg-surface-100"
+            data-tooltip-id="tooltip-navbar"
+            data-tooltip-content="Boards"
+            onClick={openDropdown}
+          >
+            <Folder24Regular />
+          </button>
+
+          {isOpen && (
+            <div className="origin-top-left absolute left-0 p-1 mt-2 w-44 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+              <ul role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+                <li>
+                  <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={closeDropdown}>
+                    Save Board
+                  </a>
+                </li>
+                <li>
+                  <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={closeDropdown}>
+                    Open Board
+                  </a>
+                </li>
+                <li>
+                  <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
+                    onClick={() => {
+                      closeDropdown(); 
+                      handleNewBoard();
+                    }}>
+                    New Board
+                  </a>
+                </li>
+              </ul>
+            </div>
+          )}
+        </div>
       </div>
       <div className="flex panel-surface-050 items-center p-1">
         <input
           type="text"
           className="outline-none bg-transparent h-6 focus:border-b-2 border-surface-150 mx-2 w-full min-w-[10ch] sm:w-[30ch] md:w-[40ch]"
           defaultValue={title}
           placeholder="Untitled board"
+          spellCheck={false}
           onChange={(e) => handleTitleChange(e.target.value)}
         />
       </div>
@@ -68,7 +113,7 @@ export default function Navbar(props: Props) {
         id="tooltip-navbar"
         className="!rounded-xl"
         opacity={1}
-        place="bottom"
+        place="right"
       />
     </nav>
   );

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