gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat(collections/board): basic keyboard interaction

Browse Source
This commit is contained in:
Elian Doran 2025-10-06 17:48:08 +03:00
parent ba91fbbe6b
commit d845343e97
No known key found for this signature in database
3 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/widgets/collections/board/card.tsx
View File

@ -63,6 +63,14 @@ export default function Card({
setBranchIdToEdit?.(branch.branchId); setBranchIdToEdit?.(branch.branchId);
}, [ setBranchIdToEdit, branch ]); }, [ setBranchIdToEdit, branch ]);
const handleKeyUp = useCallback((e: KeyboardEvent) => {
if (e.key === "Enter") {
api.openNote(note.noteId);
} else if (e.key === "F2") {
setBranchIdToEdit?.(branch.branchId);
}
}, [ setBranchIdToEdit, note ]);
useEffect(() => { useEffect(() => {
editorRef.current?.focus(); editorRef.current?.focus();
}, [ isEditing ]); }, [ isEditing ]);
@ -83,9 +91,11 @@ export default function Card({
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
onContextMenu={handleContextMenu} onContextMenu={handleContextMenu}
onClick={!isEditing ? handleOpen : undefined} onClick={!isEditing ? handleOpen : undefined}
onKeyUp={handleKeyUp}
style={{ style={{
display: !isVisible ? "none" : undefined display: !isVisible ? "none" : undefined
}} }}
tabIndex={300}
> >
{!isEditing ? ( {!isEditing ? (
<> <>

7
apps/client/src/widgets/collections/board/column.tsx
View File

@ -146,11 +146,18 @@ export default function Column({
function AddNewItem({ column, api }: { column: string, api: BoardApi }) { function AddNewItem({ column, api }: { column: string, api: BoardApi }) {
const [ isCreatingNewItem, setIsCreatingNewItem ] = useState(false); const [ isCreatingNewItem, setIsCreatingNewItem ] = useState(false);
const addItemCallback = useCallback(() => setIsCreatingNewItem(true), []); const addItemCallback = useCallback(() => setIsCreatingNewItem(true), []);
const handleKeyDown = useCallback((e: KeyboardEvent) => {
if (!isCreatingNewItem && e.key === "Enter") {
setIsCreatingNewItem(true);
}
}, []);
return ( return (
<div <div
className={`board-new-item ${isCreatingNewItem ? "editing" : ""}`} className={`board-new-item ${isCreatingNewItem ? "editing" : ""}`}
onClick={addItemCallback} onClick={addItemCallback}
onKeyDown={handleKeyDown}
tabIndex={300}
> >
{!isCreatingNewItem ? ( {!isCreatingNewItem ? (
<> <>

6
apps/client/src/widgets/collections/board/index.css
View File

@ -121,6 +121,12 @@
font-size: var(--card-font-size); font-size: var(--card-font-size);
} }
.board-view-container .board-note:focus,
.board-view-container .board-new-item:focus {
outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0;
}
.board-view-container .board-note { .board-view-container .board-note {
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
} }