diff --git a/apps/client/src/widgets/collections/board/api.ts b/apps/client/src/widgets/collections/board/api.ts index b696cb228..cc00b5495 100644 --- a/apps/client/src/widgets/collections/board/api.ts +++ b/apps/client/src/widgets/collections/board/api.ts @@ -20,7 +20,7 @@ export default class BoardApi { private setBranchIdToEdit: (branchId: string | undefined) => void ) {}; - async createNewItem(column: string) { + async createNewItem(column: string, title: string) { try { // Get the parent note path const parentNotePath = this.parentNote.noteId; @@ -28,12 +28,11 @@ export default class BoardApi { // Create a new note as a child of the parent note const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, { activate: false, - title: "New item" + title }); if (newNote && newBranch) { await this.changeColumn(newNote.noteId, column); - this.startEditing(newBranch?.branchId); } } catch (error) { console.error("Failed to create new item:", error); diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx index b1e6559ed..44aca3fd9 100644 --- a/apps/client/src/widgets/collections/board/column.tsx +++ b/apps/client/src/widgets/collections/board/column.tsx @@ -1,4 +1,4 @@ -import { useCallback, useContext, useEffect, useRef } from "preact/hooks"; +import { useCallback, useContext, useEffect, useRef, useState } from "preact/hooks"; import FBranch from "../../../entities/fbranch"; import FNote from "../../../entities/fnote"; import { BoardViewContext, TitleEditor } from "."; @@ -117,14 +117,37 @@ export default function Column({
)} -
api.createNewItem(column)}> - {" "} - {t("board_view.new-item")} -
+
) } +function AddNewItem({ column, api }: { column: string, api: BoardApi }) { + const [ isCreatingNewItem, setIsCreatingNewItem ] = useState(false); + const addItemCallback = useCallback(() => setIsCreatingNewItem(true), []); + + return ( +
+ {!isCreatingNewItem ? ( + <> + {" "} + {t("board_view.new-item")} + + ) : ( + api.createNewItem(column, title)} + dismiss={() => setIsCreatingNewItem(false)} + multiline isNewItem + /> + )} +
+ ); +} + function useDragging({ column, columnIndex, columnItems }: DragContext) { const { api, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, draggedCard, dropPosition, setDraggedCard } = useContext(BoardViewContext); diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css index 740412b2f..18f9bf76b 100644 --- a/apps/client/src/widgets/collections/board/index.css +++ b/apps/client/src/widgets/collections/board/index.css @@ -111,7 +111,8 @@ } -.board-view-container .board-note { +.board-view-container .board-note, +.board-view-container .board-new-item.editing { box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); margin: 0.65em 0; padding: var(--card-padding); @@ -120,7 +121,6 @@ position: relative; background-color: var(--main-background-color); border: 1px solid var(--main-border-color); - transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease; opacity: 1; line-height: var(--card-line-height); overflow-wrap: break-word; @@ -128,6 +128,10 @@ font-size: var(--card-font-size); } +.board-view-container .board-note { + transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease; +} + .board-view-container .board-note .icon { margin-right: 0.25em; display: inline; @@ -179,16 +183,17 @@ box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5); } -.board-view-container .board-note.editing { - box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35); +.board-view-container .board-note.editing, +.board-view-container .board-new-item.editing { + box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); border-color: var(--main-text-color); display: flex; align-items: center; padding: 0; } -.board-view-container .board-note.editing input, -.board-view-container .board-note.editing textarea { +.board-view-container .board-note.editing textarea, +.board-view-container .board-new-item textarea.form-control { background: transparent; border: none; outline: none; diff --git a/apps/client/src/widgets/collections/board/index.tsx b/apps/client/src/widgets/collections/board/index.tsx index 23c866265..df3fcf6cd 100644 --- a/apps/client/src/widgets/collections/board/index.tsx +++ b/apps/client/src/widgets/collections/board/index.tsx @@ -257,11 +257,12 @@ function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, ) } -export function TitleEditor({ currentValue, save, dismiss, multiline }: { +export function TitleEditor({ currentValue, save, dismiss, multiline, isNewItem }: { currentValue: string, save: (newValue: string) => void, dismiss: () => void, - multiline?: boolean + multiline?: boolean, + isNewItem?: boolean }) { const inputRef = useRef(null); @@ -280,7 +281,7 @@ export function TitleEditor({ currentValue, save, dismiss, multiline }: { onKeyDown={(e) => { if (e.key === "Enter") { const newValue = e.currentTarget.value; - if (newValue !== currentValue) { + if (newValue !== currentValue || isNewItem) { save(newValue); } dismiss();