diff --git a/todoblue/src/app/board/[board]/TaskDiv.module.css b/todoblue/src/app/board/[board]/TaskDiv.module.css index 0c8c79d..1595db8 100644 --- a/todoblue/src/app/board/[board]/TaskDiv.module.css +++ b/todoblue/src/app/board/[board]/TaskDiv.module.css @@ -1,23 +1,36 @@ .taskDiv { display: grid; + align-items: center; + min-width: unset; + width: 240px; + height: 44px; + + cursor: pointer; +} + +.taskDivFront { grid-template-areas: "icon description" ; grid-template-columns: auto 1fr; - align-items: center; - min-width: unset; +} + +.taskDivBack { + grid-template-areas: + "buttons" + ; + grid-template-columns: 1fr; } .taskIcon { grid-area: icon; justify-self: start; - - cursor: pointer; } .taskDescription { grid-area: description; justify-self: start; + width: 100%; } .taskDescriptionComplete { @@ -89,16 +102,7 @@ font-weight: 300; } -@keyframes inProgress { - 0% { - filter: brightness(100%); - } - - 100% { - filter: brightness(150%); - } -} - -.taskStatusInProgress { - animation: 1.7s inProgress ease-out infinite alternate-reverse; +.taskButtons { + grid-area: buttons; + justify-self: end; } diff --git a/todoblue/src/app/board/[board]/TaskDiv.tsx b/todoblue/src/app/board/[board]/TaskDiv.tsx index bf44cb9..2789087 100644 --- a/todoblue/src/app/board/[board]/TaskDiv.tsx +++ b/todoblue/src/app/board/[board]/TaskDiv.tsx @@ -1,15 +1,22 @@ import {TaskIconEl} from "@/app/board/[board]/TaskIconEl" import {Task, TaskWithId} from "@/app/board/[board]/Types" import {useBoardContext} from "@/app/board/[board]/useBoardContext" -import {useCallback} from "react" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import {useCallback, useState, MouseEvent} from "react" +import {faArrowTurnRight, faTrashCanArrowUp} from "@fortawesome/free-solid-svg-icons" import style from "./TaskDiv.module.css" import cn from "classnames" export function TaskDiv({task}: {task: TaskWithId}) { const {send} = useBoardContext() + const [isDisplayingActions, setDisplayingActions] = useState(false) - const toggleStatus = useCallback(() => { + const toggleStatus = useCallback((e: MouseEvent) => { + e.stopPropagation(); if(task.status === "Unfinished") { + send({"Task": [task.id, {...task, status: "InProgress"}]}) + } + if(task.status === "InProgress") { send({"Task": [task.id, {...task, status: "Complete"}]}) } else if(task.status === "Complete") { @@ -17,10 +24,34 @@ export function TaskDiv({task}: {task: TaskWithId}) { } }, [send, task]) + let contents; + if(isDisplayingActions) { + contents =
+ +
+ } + else { + contents = <> +
+ +
+
+ {task.text} +
+ + } + return ( -
-
- -
-
- {task.text} -
+ })} onClick={() => setDisplayingActions(!isDisplayingActions)}> + {contents}
) } diff --git a/todoblue/src/app/board/[board]/TaskIconEl.tsx b/todoblue/src/app/board/[board]/TaskIconEl.tsx index 1c9a453..3b6c075 100644 --- a/todoblue/src/app/board/[board]/TaskIconEl.tsx +++ b/todoblue/src/app/board/[board]/TaskIconEl.tsx @@ -1,4 +1,4 @@ -import {TaskIcon} from "@/app/board/[board]/Types" +import {TaskIcon, TaskStatus} from "@/app/board/[board]/Types" import {SizeProp} from "@fortawesome/fontawesome-svg-core" import { faUser as faUserSolid, @@ -99,8 +99,8 @@ export const ICONS = { } -export function TaskIconEl({icon, style, size}: {icon: TaskIcon, style: "solid" | "regular", size?: SizeProp}) { +export function TaskIconEl({icon, status, size}: {icon: TaskIcon, status: TaskStatus, size?: SizeProp}) { return ( - + ) } diff --git a/todoblue/src/app/board/[board]/useBoard.tsx b/todoblue/src/app/board/[board]/useBoard.tsx index 343dcb9..0cd4168 100644 --- a/todoblue/src/app/board/[board]/useBoard.tsx +++ b/todoblue/src/app/board/[board]/useBoard.tsx @@ -28,7 +28,7 @@ function sortGroupsByPriority(a: TaskGroup, b: TaskGroup) { function iconToTitle(a: string) { let icon = a as TaskIcon; return <> - +   {a} diff --git a/todoblue/src/app/board/[board]/useBoardState.ts b/todoblue/src/app/board/[board]/useBoardState.ts index 1bcac35..8bc2bbe 100644 --- a/todoblue/src/app/board/[board]/useBoardState.ts +++ b/todoblue/src/app/board/[board]/useBoardState.ts @@ -1,6 +1,6 @@ "use client"; -import {BoardAction, Task, TaskBoardAction, TitleBoardAction} from "@/app/board/[board]/types" +import {BoardAction, Task, TaskBoardAction, TitleBoardAction} from "@/app/board/[board]/Types" import {Reducer, useReducer} from "react"