From 79b6d65436bded4f9d630334041aca7399272458 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Sun, 6 Aug 2023 03:24:36 +0200 Subject: [PATCH] CSS fixes and single column mode --- .../app/board/[board]/BoardColumn.module.css | 21 ------ .../src/app/board/[board]/BoardColumn.tsx | 17 ----- .../src/app/board/[board]/BoardHeader.tsx | 19 +++++- .../[board]/BoardMainTaskGroups.module.css | 66 ++++++++++++++++--- .../app/board/[board]/BoardMainTaskGroups.tsx | 24 ++++++- .../app/board/[board]/TaskDisplay.module.css | 2 +- todoblue/src/app/board/[board]/useBoard.tsx | 8 ++- 7 files changed, 104 insertions(+), 53 deletions(-) delete mode 100644 todoblue/src/app/board/[board]/BoardColumn.module.css delete mode 100644 todoblue/src/app/board/[board]/BoardColumn.tsx diff --git a/todoblue/src/app/board/[board]/BoardColumn.module.css b/todoblue/src/app/board/[board]/BoardColumn.module.css deleted file mode 100644 index 6c91363..0000000 --- a/todoblue/src/app/board/[board]/BoardColumn.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.boardColumn { - display: flex; - flex-direction: column; - gap: 8px; -} - -.boardColumnContents > * { - flex-shrink: 0; -} - -.boardColumnContents { - display: flex; - flex-direction: column; - gap: 8px; - padding-left: 4px; - padding-right: 4px; - padding-bottom: 8px; - - overflow-x: hidden; - overflow-y: scroll; -} diff --git a/todoblue/src/app/board/[board]/BoardColumn.tsx b/todoblue/src/app/board/[board]/BoardColumn.tsx deleted file mode 100644 index 3e9c70e..0000000 --- a/todoblue/src/app/board/[board]/BoardColumn.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {TaskDisplay} from "@/app/board/[board]/TaskDisplay" -import {TaskGroup} from "@/app/board/[board]/useBoardTaskArranger" -import style from "./BoardColumn.module.css" - - -export function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) { - return ( -
-

- {taskGroup.name} -

-
- {taskGroup.tasks.map(task => )} -
-
- ) -} diff --git a/todoblue/src/app/board/[board]/BoardHeader.tsx b/todoblue/src/app/board/[board]/BoardHeader.tsx index 22045bb..9c33ea1 100644 --- a/todoblue/src/app/board/[board]/BoardHeader.tsx +++ b/todoblue/src/app/board/[board]/BoardHeader.tsx @@ -2,7 +2,7 @@ import {useRouter} from "next/navigation" import {ReactNode, useCallback} from "react" import style from "./BoardHeader.module.css" import {useManagedBoard} from "@/app/board/[board]/BoardManager" -import {faArrowDownWideShort, faHouse, faPencil, faTableColumns} from "@fortawesome/free-solid-svg-icons" +import {faArrowDownWideShort, faHouse, faPencil, faObjectGroup, faTableColumns} from "@fortawesome/free-solid-svg-icons" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import cn from "classnames" @@ -20,6 +20,7 @@ export function BoardHeader({className}: {className?: string}) { + @@ -114,6 +115,20 @@ function RightButtonsArea({children}: {children: ReactNode}) { ) } +function ToggleSingleColumnButton() { + const {webSocketState, isSingleColumn, setSingleColumn} = useManagedBoard() + + if(webSocketState != WebSocket.OPEN) { + return null; + } + + return ( + + ) +} + function CycleGroupButton() { const {webSocketState, nextGrouper} = useManagedBoard() @@ -123,7 +138,7 @@ function CycleGroupButton() { return ( ) } diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css index d01b718..fd03ea6 100644 --- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css +++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.module.css @@ -1,19 +1,69 @@ .boardMainTaskGroups { display: flex; - justify-content: flex-start; - flex-wrap: nowrap; + overflow-x: hidden; + + --todoblue-column-min-width: 240px; + --todoblue-column-max-width: 480px; +} + +.boardMainTaskGroupsSingleColumn { + flex-direction: column; + + justify-content: flex-start; + align-items: stretch; + + overflow-y: scroll; +} + +.boardMainTaskGroupsMultiColumn { + flex-direction: row; + + justify-content: flex-start; + align-items: flex-start; - overflow-x: scroll; overflow-y: hidden; } -.boardMainTaskGroups > div { - flex-basis: 240px; +.boardMainTaskGroupsMultiColumn .boardColumnContents { + overflow-y: scroll; +} + +.boardColumn { flex-shrink: 0; flex-grow: 1; - margin-right: auto; - margin-left: auto; + display: flex; + flex-direction: column; + justify-content: stretch; + gap: 8px; - max-width: 480px; + margin-left: auto; + margin-right: auto; +} + +.boardMainTaskGroupsSingleColumn .boardColumn { + width: var(--todoblue-column-max-width); +} + +.boardMainTaskGroupsMultiColumn .boardColumn { + width: 248px; + max-width: var(--todoblue-column-max-width); + height: 100%; +} + +.boardColumnContents { + display: flex; + flex-direction: column; + gap: 8px; + padding-left: 4px; + padding-right: 4px; + padding-bottom: 8px; +} + +.boardMainTaskGroupsMultiColumn .boardColumnContents { + overflow-y: scroll; +} + +.boardColumnContents > * { + flex-shrink: 0; } diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx index 974b43c..86875eb 100644 --- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx +++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx @@ -1,15 +1,33 @@ -import {BoardColumn} from "@/app/board/[board]/BoardColumn" import {useManagedBoard} from "@/app/board/[board]/BoardManager" +import {TaskDisplay} from "@/app/board/[board]/TaskDisplay" +import {TaskGroup} from "@/app/board/[board]/useBoardTaskArranger" import cn from "classnames" import style from "./BoardMainTaskGroups.module.css" export function BoardMainTaskGroups({className}: {className?: string}) { - const {taskGroups} = useManagedBoard() + const {taskGroups, isSingleColumn} = useManagedBoard() return ( -
+
{taskGroups.map((tg) => )}
) } + +function BoardColumn({taskGroup}: {taskGroup: TaskGroup}) { + return ( +
+

+ {taskGroup.name} +

+
+ {taskGroup.tasks.map(task => )} +
+
+ ) +} diff --git a/todoblue/src/app/board/[board]/TaskDisplay.module.css b/todoblue/src/app/board/[board]/TaskDisplay.module.css index cd16657..7b59b68 100644 --- a/todoblue/src/app/board/[board]/TaskDisplay.module.css +++ b/todoblue/src/app/board/[board]/TaskDisplay.module.css @@ -2,7 +2,7 @@ display: grid; align-items: center; min-width: 240px; - min-height: 44px; + min-height: 46px; cursor: pointer; } diff --git a/todoblue/src/app/board/[board]/useBoard.tsx b/todoblue/src/app/board/[board]/useBoard.tsx index 9d2bfa5..a16a173 100644 --- a/todoblue/src/app/board/[board]/useBoard.tsx +++ b/todoblue/src/app/board/[board]/useBoard.tsx @@ -8,7 +8,7 @@ import {useBoardWs} from "@/app/board/[board]/useBoardWs" import {TaskGroup, useBoardTaskArranger} from "@/app/board/[board]/useBoardTaskArranger" import {useBoardTitleEditor} from "@/app/board/[board]/useBoardTitleEditor" import {useCycleState} from "@/app/useCycleState" -import {Dispatch, SetStateAction} from "react" +import {Dispatch, SetStateAction, useState} from "react" export interface UseBoardReturns { title: string, @@ -32,6 +32,8 @@ export interface UseBoardReturns { setEditedTaskText: (text: string) => void, editedTask: Task, setEditedTask: (task: Task) => void, + isSingleColumn: boolean, + setSingleColumn: Dispatch>, } export function useBoard(name: string): UseBoardReturns { @@ -45,6 +47,8 @@ export function useBoard(name: string): UseBoardReturns { const {editedTaskText, setEditedTaskText, editedTask, setEditedTask} = useBoardTaskEditor() + const [isSingleColumn, setSingleColumn] = useState(false) + return { title, tasksById, @@ -67,5 +71,7 @@ export function useBoard(name: string): UseBoardReturns { setEditedTaskText, editedTask, setEditedTask, + isSingleColumn, + setSingleColumn, } }