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();