gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 22:58:52 +02:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

docs(collections/board): keyboard shortcuts

Browse Source
This commit is contained in:
Elian Doran 2025-10-06 18:01:25 +03:00
parent f2e60f52d2
commit b1638e1ffc
No known key found for this signature in database
5 changed files with 95 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,12 @@ export default function Column({
openColumnContextMenu(api, e, column); openColumnContextMenu(api, e, column);
}, [ api, 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. */ /** Allow using mouse wheel to scroll inside card, while also maintaining column horizontal scrolling. */
const handleScroll = useCallback((event: JSX.TargetedWheelEvent<HTMLDivElement>) => { const handleScroll = useCallback((event: JSX.TargetedWheelEvent<HTMLDivElement>) => {
const el = event.currentTarget; const el = event.currentTarget;
@ -93,6 +99,8 @@ export default function Column({
onDragStart={handleColumnDragStart} onDragStart={handleColumnDragStart}
onDragEnd={handleColumnDragEnd} onDragEnd={handleColumnDragEnd}
onContextMenu={handleContextMenu} onContextMenu={handleContextMenu}
onKeyDown={handleTitleKeyDown}
tabIndex={300}
> >
{!isEditing ? ( {!isEditing ? (
<> <>

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

@ -121,8 +121,7 @@
font-size: var(--card-font-size); font-size: var(--card-font-size);
} }
.board-view-container .board-note:focus, .board-view-container :focus {
.board-view-container .board-new-item:focus {
outline: 3px solid var(--input-focus-outline-color); outline: 3px solid var(--input-focus-outline-color);
outline-offset: 0; outline-offset: 0;
} }

65
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Collections/Board View.html generated vendored
View File

@ -15,61 +15,74 @@
in a hierarchy.</p> in a hierarchy.</p>
<h2>Interaction with columns</h2> <h2>Interaction with columns</h2>
<ul> <ul>
<li>Create a new column by pressing <em>Add Column</em> near the last column. <li data-list-item-id="e53cd56f64ad0a087af5c123894261ff1">Create a new column by pressing <em>Add Column</em> near the last column.
<ul> <ul>
<li>Once pressed, a text box will be displayed to set the name of the column. <li data-list-item-id="eaf5a55c795e0cfe57a2a05d6b9f89761">Once pressed, a text box will be displayed to set the name of the column.
Press <kbd>Enter</kbd> to confirm, or <kbd>Escape</kbd> to dismiss.</li> Press <kbd>Enter</kbd> to confirm, or <kbd>Escape</kbd> to dismiss.</li>
</ul> </ul>
</li> </li>
<li>To reorder a column, simply hold the mouse over the title and drag it <li data-list-item-id="e2d7f17b56a6a8027d26e5d30f16bd7f6">To reorder a column, simply hold the mouse over the title and drag it
to the desired position.</li> to the desired position.</li>
<li>To delete a column, right click on its title and select <em>Delete column</em>.</li> <li data-list-item-id="ef0f57de87814bf725cf846cecca01899">To delete a column, right click on its title and select <em>Delete column</em>.</li>
<li>To rename a column, click on the note title. <li
data-list-item-id="e00cb99d9b34dbf63523f053a57f28fe8">To rename a column, click on the note title.
<ul> <ul>
<li>Press Enter to confirm.</li> <li data-list-item-id="ea86b1d902db4bbab1fe85bcf669c595c">Press Enter to confirm.</li>
<li>Upon renaming a column, the corresponding status attribute of all its <li data-list-item-id="e6d1bc52b0a8b3d554fd4be0f1f009b04">Upon renaming a column, the corresponding status attribute of all its
notes will be changed in bulk.</li> notes will be changed in bulk.</li>
</ul> </ul>
</li> </li>
<li>If there are many columns, use the mouse wheel to scroll.</li> <li data-list-item-id="ea1dd557786a534468e61f445aaea665f">If there are many columns, use the mouse wheel to scroll.</li>
</ul> </ul>
<h2>Interaction with notes</h2> <h2>Interaction with notes</h2>
<ul> <ul>
<li>Create a new note in any column by pressing <em>New item</em> <li data-list-item-id="ec25f6e597c61e1f56422d72a91777cb8">Create a new note in any column by pressing <em>New item</em>
<ul> <ul>
<li>Enter the name of the note and press <kbd>Enter</kbd> or click away. To <li data-list-item-id="e3027de7ac16543b3a3be526c6700f22e">Enter the name of the note and press <kbd>Enter</kbd> or click away. To
dismiss the creation of a new note, simply press <kbd>Escape</kbd> or leave dismiss the creation of a new note, simply press <kbd>Escape</kbd> or leave
the name empty.</li> the name empty.</li>
<li>Once created, the new note will have an attribute (<code>status</code> label <li data-list-item-id="ef97c736e327952225517534711a8e329">Once created, the new note will have an attribute (<code>status</code> label
by default) set to the name of the column.</li> by default) set to the name of the column.</li>
</ul> </ul>
</li> </li>
<li>To open the note, simply click on it.</li> <li data-list-item-id="e0558241e1901ee6a5b765644c115f95c">To open the note, simply click on it.</li>
<li>To change the title of the note directly from the board, hover the mouse <li data-list-item-id="e1580878e9963e2039332f9c3ff40dc9d">To change the title of the note directly from the board, hover the mouse
over its card and press the edit button on the right.</li> over its card and press the edit button on the right.</li>
<li>To change the state of a note, simply drag a note from one column to the <li data-list-item-id="e817b2e5103fd08622477663a5a8b9683">To change the state of a note, simply drag a note from one column to the
other to change its state.</li> other to change its state.</li>
<li>The order of the notes in each column corresponds to their position in <li data-list-item-id="e5f86d7f2f545470451040860ca3e8890">The order of the notes in each column corresponds to their position in
the tree. the tree.
<ul> <ul>
<li>It's possible to reorder notes simply by dragging them to the desired <li data-list-item-id="e0b47ff4af56dc7cd21a118fbc9b1808a">It's possible to reorder notes simply by dragging them to the desired
position within the same columns.</li> position within the same columns.</li>
<li>It's also possible to drag notes across columns, at the desired position.</li> <li data-list-item-id="e9eb4fa22b9ed927a24aee3e94d5a1b5d">It's also possible to drag notes across columns, at the desired position.</li>
</ul> </ul>
</li> </li>
<li>For more options, right click on a note to display a context menu with <li data-list-item-id="e94ebbbe060ccfe7fbb1c67616e272b35">For more options, right click on a note to display a context menu with
the following options: the following options:
<ul> <ul>
<li>Open the note in a new tab/split/window or quick edit.</li> <li data-list-item-id="e5516bb20b5c4534580854c6422107b1d">Open the note in a new tab/split/window or quick edit.</li>
<li>Move the note to any column.</li> <li data-list-item-id="e8419784dbd01baae6c1e1e8875baa84a">Move the note to any column.</li>
<li>Insert a new note above/below the current one.</li> <li data-list-item-id="e6ab7181ef973bbd96e3bbbfed5e302d1">Insert a new note above/below the current one.</li>
<li>Archive/unarchive the current note.</li> <li data-list-item-id="e8aae7a4c6ddb5f191d6dcd914f0c3b78">Archive/unarchive the current note.</li>
<li>Delete the current note.</li> <li data-list-item-id="e0bf5bc2c60b27a7fd0078001816d8ca4">Delete the current note.</li>
</ul> </ul>
</li> </li>
<li>If there are many notes within the column, move the mouse over the column <li data-list-item-id="ec32b9f786e2c612fb63677c8c5089365">If there are many notes within the column, move the mouse over the column
and use the mouse wheel to scroll.</li> and use the mouse wheel to scroll.</li>
</ul> </ul>
<h2>Keyboard interaction</h2>
<p>The board view has mild support for keyboard-based navigation:</p>
<ul>
<li data-list-item-id="e0c992a7fdac57768851c53137a2cfa64">Use <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate between
column titles, notes and the “New item” button for each of the columns,
in sequential order.</li>
<li data-list-item-id="e4c143d1ec92d0fc5b75e850cf10f4377">To rename a column or a note, press <kbd>F2</kbd> while it is focused.</li>
<li
data-list-item-id="ee3008937bdfd14e06c308a5f0846addf">To open a specific note or create a new item, press <kbd>Enter</kbd> while
it is focused.</li>
<li data-list-item-id="e70ceff80dcd5422e2361c4fbcd805773">To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.</li>
</ul>
<h2>Configuration</h2> <h2>Configuration</h2>
<h3>Grouping by another attribute</h3> <h3>Grouping by another attribute</h3>
<p>By default, the label used to group the notes is <code>#status</code>. <p>By default, the label used to group the notes is <code>#status</code>.
@ -83,5 +96,5 @@ class="admonition note">
<h2>Interaction</h2> <h2>Interaction</h2>
<h2>Limitations</h2> <h2>Limitations</h2>
<ul> <ul>
<li>It is not possible yet to use group by a relation, only by label.</li> <li data-list-item-id="e61ec93de3282934fd37d302933d208b8">It is not possible yet to use group by a relation, only by label.</li>
</ul> </ul>

78
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html generated vendored
View File

@ -1,38 +1,37 @@
<p>It is possible to provide a CSS file to be used regardless of the theme <p>It is possible to provide a CSS file to be used regardless of the theme
set by the user.</p> set by the user.</p>
<figure class="table"> <table>
<table> <thead>
<thead> <tr>
<tr> <th></th>
<th>&nbsp;</th> <th></th>
<th>&nbsp;</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>
<td> <img src="Custom app-wide CSS_image.png">
<img src="Custom app-wide CSS_image.png"> </td>
</td> <td>Start by creating a new note and changing the note type to CSS</td>
<td>Start by creating a new note and changing the note type to CSS</td> </tr>
</tr> <tr>
<tr> <td>
<td> <img src="2_Custom app-wide CSS_image.png">
<img src="2_Custom app-wide CSS_image.png"> </td>
</td> <td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td> </tr>
</tr> <tr>
<tr> <td>
<td> <img src="3_Custom app-wide CSS_image.png">
<img src="3_Custom app-wide CSS_image.png"> </td>
</td> <td>Type the desired CSS.&nbsp;
<td>Type the desired CSS.&nbsp; <br>
<br> <br>Generally it's a good idea to append <code>!important</code> for the styles
<br>Generally it's a good idea to append <code>!important</code> for the styles that are being changed, in order to prevent other</td>
that are being changed, in order to prevent other</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</figure>
<h2>Seeing the changes</h2> <h2>Seeing the changes</h2>
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not <p>Adding a new <em>app CSS note</em> or modifying an existing one does not
immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
@ -49,17 +48,16 @@
} }
}</code></pre> }</code></pre>
<h3>Per-workspace styles</h3> <h3>Per-workspace styles</h3>
<p>When using&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_9sRHySam5fXb">Workspaces</a>, <p>When using&nbsp;<a class="reference-link" href="#root/_help_9sRHySam5fXb">Workspaces</a>,
it can be helpful to create a visual distinction between notes in different it can be helpful to create a visual distinction between notes in different
workspaces.</p> workspaces.</p>
<p>To do so:</p> <p>To do so:</p>
<ol> <ol>
<li data-list-item-id="ebe7118e85ce0b3102e4333aef27c637d">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with <li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li> a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
<li <li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
data-list-item-id="e690ba825e168c5ec987f98c15f9b7a99">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
</ol> </ol>
<h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon { <h4>Change the color of the icons in the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
color: #ff0000; color: #ff0000;
}</code></pre> }</code></pre>
<h4>Change the color of the note title and the icon</h4> <h4>Change the color of the note title and the icon</h4>
@ -73,8 +71,8 @@
width="641" height="630"> width="641" height="630">
</figure> </figure>
<ol> <ol>
<li data-list-item-id="e9796dcbe19c3b9d39839533989b9e104">Insert an image in any note and take the URL of the image.</li> <li>Insert an image in any note and take the URL of the image.</li>
<li data-list-item-id="e8da975b80585c42193516ee5d8d8a56c">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to <li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
the desired values.</li> the desired values.</li>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after { </ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
position: fixed; position: fixed;

9
docs/User Guide/User Guide/Note Types/Collections/Board View.md vendored
View File

@ -39,6 +39,15 @@ Notes are displayed recursively, so even the child notes of the child notes will
* Delete the current note. * 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. * 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 <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> 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 <kbd>F2</kbd> while it is focused.
* To open a specific note or create a new item, press <kbd>Enter</kbd> while it is focused.
* To dismiss a rename of a note or a column, press <kbd>Escape</kbd>.
## Configuration ## Configuration
### Grouping by another attribute ### Grouping by another attribute