From b1638e1ffcd507cd4237b95deafeb98fa3a25b69 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 6 Oct 2025 18:01:25 +0300 Subject: [PATCH] docs(collections/board): keyboard shortcuts --- .../src/widgets/collections/board/column.tsx | 8 ++ .../src/widgets/collections/board/index.css | 3 +- .../Note Types/Collections/Board View.html | 65 +++++++++------- .../Custom app-wide CSS.html | 78 +++++++++---------- .../Note Types/Collections/Board View.md | 9 +++ 5 files changed, 95 insertions(+), 68 deletions(-) diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx index 6d704bbe7..6b437cdbd 100644 --- a/apps/client/src/widgets/collections/board/column.tsx +++ b/apps/client/src/widgets/collections/board/column.tsx @@ -50,6 +50,12 @@ export default function Column({ openColumnContextMenu(api, e, column); }, [ api, column ]); + const handleTitleKeyDown = useCallback((e: KeyboardEvent) => { + if (e.key === "F2") { + setColumnNameToEdit?.(column); + } + }, [ column ]); + /** Allow using mouse wheel to scroll inside card, while also maintaining column horizontal scrolling. */ const handleScroll = useCallback((event: JSX.TargetedWheelEvent) => { const el = event.currentTarget; @@ -93,6 +99,8 @@ export default function Column({ onDragStart={handleColumnDragStart} onDragEnd={handleColumnDragEnd} onContextMenu={handleContextMenu} + onKeyDown={handleTitleKeyDown} + tabIndex={300} > {!isEditing ? ( <> diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css index 42eefd858..f018ec61c 100644 --- a/apps/client/src/widgets/collections/board/index.css +++ b/apps/client/src/widgets/collections/board/index.css @@ -121,8 +121,7 @@ font-size: var(--card-font-size); } -.board-view-container .board-note:focus, -.board-view-container .board-new-item:focus { +.board-view-container :focus { outline: 3px solid var(--input-focus-outline-color); outline-offset: 0; } diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Board View.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Board View.html index 2602f6604..67a727656 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Board View.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Board View.html @@ -15,61 +15,74 @@ in a hierarchy.

Interaction with columns

Interaction with notes

+

Keyboard interaction

+

The board view has mild support for keyboard-based navigation:

+

Configuration

Grouping by another attribute

By default, the label used to group the notes is #status. @@ -83,5 +96,5 @@ class="admonition note">

Interaction

Limitations

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html index 0bcbfcd64..195bfd275 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html @@ -1,38 +1,37 @@

It is possible to provide a CSS file to be used regardless of the theme set by the user.

-
- - - - - - - - - - - - - - - - - - - - - -
  
- - Start by creating a new note and changing the note type to CSS
- - In the ribbon, press the “Owned Attributes” section and type #appCss.
- - Type the desired CSS.  -
-
Generally it's a good idea to append !important for the styles - that are being changed, in order to prevent other
-
+ + + + + + + + + + + + + + + + + + + + + +
+ + Start by creating a new note and changing the note type to CSS
+ + In the ribbon, press the “Owned Attributes” section and type #appCss.
+ + Type the desired CSS.  +
+
Generally it's a good idea to append !important for the styles + that are being changed, in order to prevent other
+

Seeing the changes

Adding a new app CSS note or modifying an existing one does not immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh @@ -49,17 +48,16 @@ } }

Per-workspace styles

-

When using Workspaces, +

When using Workspaces, it can be helpful to create a visual distinction between notes in different workspaces.

To do so:

    -
  1. In the note with #workspace, add an inheritable attribute #cssClass(inheritable) with +
  2. In the note with #workspace, add an inheritable attribute #cssClass(inheritable) with a value that uniquely identifies the workspace (say my-workspace).
    3. -
  3. Anywhere in the note structure, create a CSS note with #appCss.
    4. +
  4. Anywhere in the note structure, create a CSS note with #appCss.
-

Change the color of the icons in the Note Tree

.fancytree-node.my-workspace.fancytree-custom-icon {
+
Change the color of the icons in the Note Tree
.fancytree-node.my-workspace.fancytree-custom-icon {
     color: #ff0000;
 }

 
Change the color of the note title and the icon

@@ -73,8 +71,8 @@
   width="641" height="630">
 
 
    
-  
  1. Insert an image in any note and take the URL of the image.
    2. 
-  
  2. Use the following CSS, adjusting the background-image and width and height to
+  
  3. Insert an image in any note and take the URL of the image.
    4. 
+  
  4. Use the following CSS, adjusting the background-image and width and height to
     the desired values.
    5. 
 
.note-split.my-workspace .scrolling-container:after {
     position: fixed;
diff --git a/docs/User Guide/User Guide/Note Types/Collections/Board View.md b/docs/User Guide/User Guide/Note Types/Collections/Board View.md
index 4b8bcbdbc..c2630e67d 100644
--- a/docs/User Guide/User Guide/Note Types/Collections/Board View.md	
+++ b/docs/User Guide/User Guide/Note Types/Collections/Board View.md	
@@ -39,6 +39,15 @@ Notes are displayed recursively, so even the child notes of the child notes will
     *   Delete the current note.
 *   If there are many notes within the column, move the mouse over the column and use the mouse wheel to scroll.
 
+## Keyboard interaction
+
+The board view has mild support for keyboard-based navigation:
+
+*   Use Tab and Shift+Tab to navigate between column titles, notes and the “New item” button for each of the columns, in sequential order.
+*   To rename a column or a note, press F2 while it is focused.
+*   To open a specific note or create a new item, press Enter while it is focused.
+*   To dismiss a rename of a note or a column, press Escape.
+
 ## Configuration
 
 ### Grouping by another attribute