gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 14:49:01 +02:00
Code Issues Actions 119 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);
}, [ 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<HTMLDivElement>) => {
const el = event.currentTarget;
@ -93,6 +99,8 @@ export default function Column({
onDragStart={handleColumnDragStart}
onDragEnd={handleColumnDragEnd}
onContextMenu={handleContextMenu}
onKeyDown={handleTitleKeyDown}
tabIndex={300}
>
{!isEditing ? (
<>

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

@ -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;
}

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>
<h2>Interaction with columns</h2>
<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>
<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>
</ul>
</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>
<li>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="ef0f57de87814bf725cf846cecca01899">To delete a column, right click on its title and select <em>Delete column</em>.</li>
<li
data-list-item-id="e00cb99d9b34dbf63523f053a57f28fe8">To rename a column, click on the note title.
<ul>
<li>Press Enter to confirm.</li>
<li>Upon renaming a column, the corresponding status attribute of all its
<li data-list-item-id="ea86b1d902db4bbab1fe85bcf669c595c">Press Enter to confirm.</li>
<li data-list-item-id="e6d1bc52b0a8b3d554fd4be0f1f009b04">Upon renaming a column, the corresponding status attribute of all its
notes will be changed in bulk.</li>
</ul>
</li>
<li>If there are many columns, use the mouse wheel to scroll.</li>
</li>
<li data-list-item-id="ea1dd557786a534468e61f445aaea665f">If there are many columns, use the mouse wheel to scroll.</li>
</ul>
<h2>Interaction with notes</h2>
<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>
<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
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>
</ul>
</li>
<li>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="e0558241e1901ee6a5b765644c115f95c">To open the note, simply click on it.</li>
<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>
<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>
<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.
<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>
<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>
</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:
<ul>
<li>Open the note in a new tab/split/window or quick edit.</li>
<li>Move the note to any column.</li>
<li>Insert a new note above/below the current one.</li>
<li>Archive/unarchive the current note.</li>
<li>Delete the current note.</li>
<li data-list-item-id="e5516bb20b5c4534580854c6422107b1d">Open the note in a new tab/split/window or quick edit.</li>
<li data-list-item-id="e8419784dbd01baae6c1e1e8875baa84a">Move the note to any column.</li>
<li data-list-item-id="e6ab7181ef973bbd96e3bbbfed5e302d1">Insert a new note above/below the current one.</li>
<li data-list-item-id="e8aae7a4c6ddb5f191d6dcd914f0c3b78">Archive/unarchive the current note.</li>
<li data-list-item-id="e0bf5bc2c60b27a7fd0078001816d8ca4">Delete the current note.</li>
</ul>
</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>
</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>
<h3>Grouping by another attribute</h3>
<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>Limitations</h2>
<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>

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
set by the user.</p>
<figure class="table">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Custom app-wide CSS_image.png">
</td>
<td>Start by creating a new note and changing the note type to CSS</td>
</tr>
<tr>
<td>
<img src="2_Custom app-wide CSS_image.png">
</td>
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
</tr>
<tr>
<td>
<img src="3_Custom app-wide CSS_image.png">
</td>
<td>Type the desired CSS.&nbsp;
<br>
<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>
</tr>
</tbody>
</table>
</figure>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="Custom app-wide CSS_image.png">
</td>
<td>Start by creating a new note and changing the note type to CSS</td>
</tr>
<tr>
<td>
<img src="2_Custom app-wide CSS_image.png">
</td>
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
</tr>
<tr>
<td>
<img src="3_Custom app-wide CSS_image.png">
</td>
<td>Type the desired CSS.&nbsp;
<br>
<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>
</tr>
</tbody>
</table>
<h2>Seeing the changes</h2>
<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
@ -49,17 +48,16 @@
}
}</code></pre>
<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
workspaces.</p>
<p>To do so:</p>
<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>
<li
data-list-item-id="e690ba825e168c5ec987f98c15f9b7a99">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
<li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
</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;
}</code></pre>
<h4>Change the color of the note title and the icon</h4>
@ -73,8 +71,8 @@
width="641" height="630">
</figure>
<ol>
<li data-list-item-id="e9796dcbe19c3b9d39839533989b9e104">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>Insert an image in any note and take the URL of the image.</li>
<li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
the desired values.</li>
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
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.
* 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
### Grouping by another attribute