Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 19:17:13 +02:00
Code Issues Packages Projects Releases Activity

Merge branch 'main' of https://github.com/TriliumNext/Trilium into feat/ui-improvements

Browse Source
This commit is contained in:
Adorian Doran
2025-11-08 21:25:39 +02:00
parent 2f74b40095 3463cb83a0
commit d8d80ed936
21 changed files with 353 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html generated vendored
View File

@@ -4,7 +4,6 @@
<figcaption>Screenshot of the note contextual menu indicating the “Export as PDF”
option.</figcaption>
</figure>
<h2>Printing</h2>
<p>This feature allows printing of notes. It works on both the desktop client,
but also on the web.</p>
@@ -60,9 +59,9 @@ class="admonition note">
orientation, size. However, there are a few&nbsp;<a class="reference-link"
href="#root/_help_zEY4DaJG4YT5">Attributes</a>&nbsp;to adjust some of the settings:</p>
<ul>
<li>To print in landscape mode instead of portrait (useful for big diagrams
<li data-list-item-id="e059818dc4b086a895efa23fdde670cb0">To print in landscape mode instead of portrait (useful for big diagrams
or slides), add <code>#printLandscape</code>.</li>
<li>By default, the resulting PDF will be in Letter format. It is possible
<li data-list-item-id="ebb801d5830e9662602ce85e96e351ee5">By default, the resulting PDF will be in Letter format. It is possible
to adjust it to another page size via the <code>#printPageSize</code> attribute,
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</li>
</ul>
@@ -76,9 +75,9 @@ class="admonition note">
href="#root/_help_4TIF1oA4VQRO">Options</a>&nbsp;and assigning a key combination
for:</p>
<ul>
<li><em>Print Active Note</em>
<li class="ck-list-marker-italic" data-list-item-id="ed834da40ebe17dd104c66956579e8db8"><em>Print Active Note</em>
</li>
<li><em>Export Active Note as PDF</em>
<li class="ck-list-marker-italic" data-list-item-id="e12469c162de60af8653a92238f286176"><em>Export Active Note as PDF</em>
</li>
</ul>
<h2>Constraints &amp; limitations</h2>
@@ -86,27 +85,58 @@ class="admonition note">
supported when printing, in which case the <em>Print</em> and <em>Export as PDF</em> options
will be disabled.</p>
<ul>
<li>For&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes:
<li data-list-item-id="ecbc8f07fc543357dbe65e874d2812923">For&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes:
<ul>
<li>Line numbers are not printed.</li>
<li>Syntax highlighting is enabled, however a default theme (Visual Studio)
<li data-list-item-id="e5a65e990187f7457b1ef3b90b3efca65">Line numbers are not printed.</li>
<li data-list-item-id="ed32da7175b6215d5c1461029b85310b6">Syntax highlighting is enabled, however a default theme (Visual Studio)
is enforced.</li>
</ul>
</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>:
<li data-list-item-id="e2336e670a5137a961dbaa520180f1ca3">For&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>:
<ul>
<li>Only&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>&nbsp;is
<li data-list-item-id="e2dfe21a479e4e4574d70e3c818d3580c">Only&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation</a>&nbsp;is
currently supported.</li>
<li>We plan to add support for all the collection types at some point.</li>
<li data-list-item-id="eb710e8646deac11a960fc762ff059ffc">We plan to add support for all the collection types at some point.</li>
</ul>
</li>
<li>Using&nbsp;<a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;for
<li data-list-item-id="e92e4035db060328f92b290f201746687">Using&nbsp;<a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;for
printing is not longer supported, due to a more stable but isolated mechanism.
<ul>
<li>We plan to introduce a new mechanism specifically for a print CSS.</li>
<li data-list-item-id="e8ceb3650a468052a8728a40f05ba8ba9">We plan to introduce a new mechanism specifically for a print CSS.</li>
</ul>
</li>
</ul>
<h2>Customizing the print CSS</h2>
<p>As an advanced use case, it's possible to customize the CSS used for printing
such as adjusting the fonts, sizes or margins. Note that&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>&nbsp;will
not work for printing.</p>
<p>To do so:</p>
<ul>
<li data-list-item-id="e9888834b45670c7ab11c0f229e38e32f">Create a CSS <a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">code note</a>.</li>
<li
data-list-item-id="ea9e3983ea0c81ecc73c6cd73bcb3e400">On the note being printed, apply the <code>~printCss</code> relation to
point to the newly created CSS code note.</li>
<li data-list-item-id="ed4fdf9dd70c9770c03637eb4fb011654">To apply the CSS to multiple notes, consider using <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_bwZpz2ajCEwO">inheritable attributes</a> or&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_KC1HB96bqqHX">Templates</a>.</li>
</ul>
<p>For example, to change the font of the document from the one defined by
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">body {
--main-font-family: serif !important;
--detail-font-family: var(--main-font-family) !important;
}</code></pre>
<p>To remark:</p>
<ul>
<li data-list-item-id="e0fcaa62313f3f428f8243c0631a578b3">Multiple CSS notes can be add by using multiple <code>~printCss</code> relations.</li>
<li
data-list-item-id="e0388e16113a44b8200aed433f680b795">If the note pointing to the <code>printCss</code> doesn't have the right
note type or mime type, it will be ignored.</li>
<li data-list-item-id="ec4c3f5dcee6428c4a5e409f1461c2433">If migrating from a previous version where&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>,
there's no need for <code>@media print {</code>  since the style-sheet is
used only for printing.</li>
</ul>
<h2>Under the hood</h2>
<p>Both printing and exporting as PDF use the same mechanism: a note is rendered
individually in a separate webpage that is then sent to the browser or

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

@@ -1,61 +1,61 @@
<p>It is possible to provide a CSS file to be used regardless of the theme
set by the user.</p>
<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;&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 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;&nbsp;&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>
<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
the page first.</p>
<h2>Sample use cases</h2>
<h3>Customizing the printing stylesheet</h3>
<p>When printing a document or exporting as PDF, it is possible to adjust
the style by creating a CSS note that uses the <code>@media</code> selector.</p>
<p>For example, to change the font of the document from the one defined by
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print {
body {
--main-font-family: serif !important;
--detail-font-family: var(--main-font-family) !important;
}
}</code></pre>
<aside class="admonition tip">
<p>Since v0.99.2, it's no longer possible to use <code>#appCss</code> to customize
the printing CSS, since the printing is now done in an isolated environment.</p>
<p>However, it's still possible to customize the CSS via <code>~printCss</code>;
see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_NRnIZmSMc5sj">Printing &amp; Exporting as PDF</a>&nbsp;for
more information.</p>
</aside>
<h3>Per-workspace styles</h3>
<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>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
<li data-list-item-id="e591e9a3631fa3729bc62dbfc7c30cf73">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>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
<li
data-list-item-id="eb0073ce6acba5e4f91cc4bfc2acbdd2a">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/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
color: #ff0000;
@@ -71,8 +71,8 @@
width="641" height="630">
</figure>
<ol>
<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
<li data-list-item-id="e3297614b2f73893bb02f38ab1c3a4307">Insert an image in any note and take the URL of the image.</li>
<li data-list-item-id="eaedddcc05035bff463d91c83484faac2">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;
@@ -92,5 +92,5 @@
<p>Some parts of the application can't be styled directly via custom CSS
because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
<ul>
<li>The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
<li data-list-item-id="ed33bb330d4e5c6d1219334b51edcc1b7">The slides in a&nbsp;<a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation</a>.</li>
</ul>

25
apps/server/src/services/notes.ts
View File

@@ -97,6 +97,23 @@ function copyChildAttributes(parentNote: BNote, childNote: BNote) {
}
}
function copyAttachments(origNote: BNote, newNote: BNote) {
for (const attachment of origNote.getAttachments()) {
if (attachment.role === "image") {
// Handled separately, see `checkImageAttachments`.
continue;
}
const newAttachment = new BAttachment({
...attachment,
attachmentId: undefined,
ownerId: newNote.noteId
});
newAttachment.save();
}
}
function getNewNoteTitle(parentNote: BNote) {
let title = t("notes.new-note");
@@ -222,14 +239,14 @@ function createNewNote(params: NoteParams): {
}
}
asyncPostProcessContent(note, params.content);
if (params.templateNoteId) {
if (!becca.getNote(params.templateNoteId)) {
const templateNote = becca.getNote(params.templateNoteId);
if (!templateNote) {
throw new Error(`Template note '${params.templateNoteId}' does not exist.`);
}
note.addRelation("template", params.templateNoteId);
copyAttachments(templateNote, note);
// no special handling for ~inherit since it doesn't matter if it's assigned with the note creation or later
}
@@ -1018,6 +1035,8 @@ function duplicateSubtreeInner(origNote: BNote, origBranch: BBranch | null | und
}
}
asyncPostProcessContent(newNote, content);
return newNote;
}

18
apps/server/src/services/window.ts
View File

@@ -337,14 +337,15 @@ async function registerGlobalShortcuts() {
const result = globalShortcut.register(
translatedShortcut,
cls.wrap(() => {
if (!mainWindow) {
const targetWindow = getLastFocusedWindow() || mainWindow;
if (!targetWindow || targetWindow.isDestroyed()) {
return;
}
// window may be hidden / not in focus
mainWindow.focus();
showAndFocusWindow(targetWindow);
mainWindow.webContents.send("globalShortcut", action.actionName);
targetWindow.webContents.send("globalShortcut", action.actionName);
})
);
@@ -358,6 +359,17 @@ async function registerGlobalShortcuts() {
}
}
function showAndFocusWindow(window: BrowserWindow) {
if (!window) return;
if (window.isMinimized()) {
window.restore();
}
window.show();
window.focus();
}
function getMainWindow() {
return mainWindow;
}