Merge branch 'develop' into chore_eslint-fixes_src-routes
@ -1,10 +1,37 @@
|
|||||||
.git
|
# ignored Files
|
||||||
.idea
|
.dockerignore
|
||||||
|
.editorconfig
|
||||||
|
.git*
|
||||||
|
.prettier*
|
||||||
|
electron*
|
||||||
|
entitlements.plist
|
||||||
|
forge.config.cjs
|
||||||
|
nodemon.json
|
||||||
|
renovate.json
|
||||||
|
trilium.iml
|
||||||
|
Dockerfile
|
||||||
|
Dockerfile.*
|
||||||
|
npm-debug.log
|
||||||
|
/src/**/*.spec.ts
|
||||||
|
|
||||||
|
# ignored folders
|
||||||
|
/.cache
|
||||||
|
/.git
|
||||||
|
/.github
|
||||||
|
/.idea
|
||||||
|
/.vscode
|
||||||
/bin
|
/bin
|
||||||
|
/build
|
||||||
/dist
|
/dist
|
||||||
/docs
|
/docs
|
||||||
/npm-debug.log
|
/dump-db
|
||||||
node_modules
|
/e2e
|
||||||
|
/integration-tests
|
||||||
|
/spec
|
||||||
|
/test
|
||||||
|
/test-etapi
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
|
||||||
src/**/*.ts
|
# exceptions
|
||||||
!src/services/asset_path.ts
|
!/bin/copy-dist.ts
|
||||||
@ -1,3 +1,7 @@
|
|||||||
{
|
{
|
||||||
"recommendations": ["lokalise.i18n-ally", "editorconfig.editorconfig"]
|
"recommendations": [
|
||||||
|
"lokalise.i18n-ally",
|
||||||
|
"editorconfig.editorconfig",
|
||||||
|
"vitest.explorer"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +0,0 @@
|
|||||||
CREATE TABLE IF NOT EXISTS "tasks"
|
|
||||||
(
|
|
||||||
"taskId" TEXT NOT NULL PRIMARY KEY,
|
|
||||||
"parentNoteId" TEXT NOT NULL,
|
|
||||||
"title" TEXT NOT NULL DEFAULT "",
|
|
||||||
"dueDate" INTEGER,
|
|
||||||
"isDone" INTEGER NOT NULL DEFAULT 0,
|
|
||||||
"isDeleted" INTEGER NOT NULL DEFAULT 0,
|
|
||||||
"utcDateModified" TEXT NOT NULL
|
|
||||||
);
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import date_utils from "../../services/date_utils.js";
|
|
||||||
import AbstractBeccaEntity from "./abstract_becca_entity.js";
|
|
||||||
import type BOption from "./boption.js";
|
|
||||||
import type { TaskRow } from "./rows.js";
|
|
||||||
|
|
||||||
export default class BTask extends AbstractBeccaEntity<BOption> {
|
|
||||||
|
|
||||||
static get entityName() {
|
|
||||||
return "tasks";
|
|
||||||
}
|
|
||||||
|
|
||||||
static get primaryKeyName() {
|
|
||||||
return "taskId";
|
|
||||||
}
|
|
||||||
|
|
||||||
static get hashedProperties() {
|
|
||||||
return ["taskId", "parentNoteId", "title", "dueDate", "isDone", "isDeleted"];
|
|
||||||
}
|
|
||||||
|
|
||||||
taskId?: string;
|
|
||||||
parentNoteId!: string;
|
|
||||||
title!: string;
|
|
||||||
dueDate?: string;
|
|
||||||
isDone!: boolean;
|
|
||||||
private _isDeleted?: boolean;
|
|
||||||
|
|
||||||
constructor(row?: TaskRow) {
|
|
||||||
super();
|
|
||||||
|
|
||||||
if (!row) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.updateFromRow(row);
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
get isDeleted() {
|
|
||||||
return !!this._isDeleted;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateFromRow(row: TaskRow) {
|
|
||||||
this.taskId = row.taskId;
|
|
||||||
this.parentNoteId = row.parentNoteId;
|
|
||||||
this.title = row.title;
|
|
||||||
this.dueDate = row.dueDate;
|
|
||||||
this.isDone = !!row.isDone;
|
|
||||||
this._isDeleted = !!row.isDeleted;
|
|
||||||
this.utcDateModified = row.utcDateModified;
|
|
||||||
|
|
||||||
if (this.taskId) {
|
|
||||||
this.becca.tasks[this.taskId] = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
if (this.taskId) {
|
|
||||||
this.becca.tasks[this.taskId] = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected beforeSaving(opts?: {}): void {
|
|
||||||
super.beforeSaving();
|
|
||||||
|
|
||||||
this.utcDateModified = date_utils.utcNowDateTime();
|
|
||||||
|
|
||||||
if (this.taskId) {
|
|
||||||
this.becca.tasks[this.taskId] = this;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getPojo() {
|
|
||||||
return {
|
|
||||||
taskId: this.taskId,
|
|
||||||
parentNoteId: this.parentNoteId,
|
|
||||||
title: this.title,
|
|
||||||
dueDate: this.dueDate,
|
|
||||||
isDone: this.isDone,
|
|
||||||
isDeleted: this.isDeleted,
|
|
||||||
utcDateModified: this.utcDateModified
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 340 B After Width: | Height: | Size: 340 B |
|
After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 95 KiB |
@ -0,0 +1,56 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Right-to-left text notes</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Right-to-left text notes</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<p>Trilium now has basic support for right-to-left text, at note level.</p>
|
||||||
|
<figure
|
||||||
|
class="table">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:906/557;" src="3_Right-to-left text notes_i.png"
|
||||||
|
width="906" height="557">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:906/557;" src="2_Right-to-left text notes_i.png"
|
||||||
|
width="906" height="557">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p>Note that only the Text note type supports this.</p>
|
||||||
|
<p>The list of languages is configurable via the a new dedicated settings
|
||||||
|
page:</p>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:1248/635;" src="4_Right-to-left text notes_i.png"
|
||||||
|
width="1248" height="635">
|
||||||
|
</figure>
|
||||||
|
<p>To select the corresponding language of the text, go to “Basic Properties”
|
||||||
|
and select your desired language.</p>
|
||||||
|
<p>
|
||||||
|
<img src="1_Right-to-left text notes_i.png" width="635" height="492">
|
||||||
|
</p>
|
||||||
|
<p>Feel free to report any issues regarding right to left support.</p>
|
||||||
|
<p> </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 323 KiB After Width: | Height: | Size: 323 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 191 KiB After Width: | Height: | Size: 191 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 515 KiB After Width: | Height: | Size: 515 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 397 KiB After Width: | Height: | Size: 397 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
@ -1,19 +0,0 @@
|
|||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../style.css">
|
|
||||||
<base target="_parent">
|
|
||||||
<title data-trilium-title>Text</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="content">
|
|
||||||
<h1 data-trilium-h1>Text</h1>
|
|
||||||
|
|
||||||
<div class="ck-content"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Content language</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Content language</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<p>A language hint can be provided for text notes. This option informs the
|
||||||
|
browser or the desktop application about the language the note is written
|
||||||
|
in (for example this might help with spellchecking), and it also determines
|
||||||
|
whether the text is displayed from right-to-left for languages such as
|
||||||
|
Arabic, Hebrew, etc.</p>
|
||||||
|
<p>For more information about right-to-left support, see <a class="reference-link"
|
||||||
|
href="../../New%20Features/Right-to-left%20text%20notes.html">Right-to-left text notes</a>.</p>
|
||||||
|
<p>To set the language of the content, go to “Basic Properties” and look
|
||||||
|
for the “Language” field. By default there will be no content languages
|
||||||
|
set, they can be configured by going to settings or by selecting the “Configure
|
||||||
|
languages” item in the list.</p>
|
||||||
|
<p>
|
||||||
|
<img src="Content language_image.png" width="635" height="492">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
@ -1,94 +0,0 @@
|
|||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../style.css">
|
|
||||||
<base target="_parent">
|
|
||||||
<title data-trilium-title>Creating a custom theme</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="content">
|
|
||||||
<h1 data-trilium-h1>Creating a custom theme</h1>
|
|
||||||
|
|
||||||
<div class="ck-content">
|
|
||||||
<h2>Step 1. Find a place to place the themes</h2>
|
|
||||||
<p>Organization is an important aspect of managing a knowledge base. When
|
|
||||||
developing a new theme or importing an existing one it's a good idea to
|
|
||||||
keep them into one place.</p>
|
|
||||||
<p>As such, the first step is to create a new note to gather all the themes.</p>
|
|
||||||
<p>
|
|
||||||
<img src="5_Creating a custom theme_im.png" width="181" height="84">
|
|
||||||
</p>
|
|
||||||
<h2>Step 2. Create the theme</h2>
|
|
||||||
<figure class="table" style="width:100%;">
|
|
||||||
<table class="ck-table-resized">
|
|
||||||
<colgroup>
|
|
||||||
<col style="width:32.47%;">
|
|
||||||
<col style="width:67.53%;">
|
|
||||||
</colgroup>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<figure class="image">
|
|
||||||
<img style="aspect-ratio:651/220;" src="3_Creating a custom theme_im.png"
|
|
||||||
width="651" height="220">
|
|
||||||
</figure>
|
|
||||||
</td>
|
|
||||||
<td style="vertical-align:top;">Themes are code notes with a special attribute. Start by creating a new
|
|
||||||
code note.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<figure class="image">
|
|
||||||
<img style="aspect-ratio:302/349;" src="1_Creating a custom theme_im.png"
|
|
||||||
width="302" height="349">
|
|
||||||
</figure>
|
|
||||||
</td>
|
|
||||||
<td style="vertical-align:top;">Then change the note type to a CSS code.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<figure class="image">
|
|
||||||
<img style="aspect-ratio:316/133;" src="Creating a custom theme_im.png"
|
|
||||||
width="316" height="133">
|
|
||||||
</figure>
|
|
||||||
</td>
|
|
||||||
<td style="vertical-align:top;">In the <i>Owned Attributes</i> section define the <code>#appTheme</code> attribute
|
|
||||||
to point to any desired name. This is the name that will show up in the
|
|
||||||
appearance section in settings.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</figure>
|
|
||||||
<h2>Step 3. Define the theme's CSS</h2>
|
|
||||||
<p>As a very simple example we will change the background color of the launcher
|
|
||||||
pane to a shade of blue.</p>
|
|
||||||
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
|
|
||||||
--launcher-pane-background-color: #0d6efd;
|
|
||||||
}</code></pre>
|
|
||||||
<h2>Step 4. Activating the theme</h2>
|
|
||||||
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
|
|
||||||
settings. You should see the newly created theme:</p>
|
|
||||||
<p>
|
|
||||||
<img src="2_Creating a custom theme_im.png" width="631" height="481">
|
|
||||||
</p>
|
|
||||||
<p>Afterwards the application will refresh itself with the new theme:</p>
|
|
||||||
<p>
|
|
||||||
<img src="4_Creating a custom theme_im.png" width="653" height="554">
|
|
||||||
</p>
|
|
||||||
<p>Do note that the theme will be based off of the legacy theme. To override
|
|
||||||
that and base the theme on the new TriliumNext theme, see: <a class="reference-link"
|
|
||||||
href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
|
|
||||||
</p>
|
|
||||||
<h2>Step 5. Making changes</h2>
|
|
||||||
<p>Simply go back to the note and change according to needs. To apply the
|
|
||||||
changes to the current window, press Ctrl+Shift+R to refresh.</p>
|
|
||||||
<p>It's a good idea to keep two windows, one for editing and the other one
|
|
||||||
for previewing the changes.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 11 KiB |
@ -1,36 +0,0 @@
|
|||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../style.css">
|
|
||||||
<base target="_parent">
|
|
||||||
<title data-trilium-title>Customize the Next theme</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="content">
|
|
||||||
<h1 data-trilium-h1>Customize the Next theme</h1>
|
|
||||||
|
|
||||||
<div class="ck-content">
|
|
||||||
<p>By default, any custom theme will be based on the legacy light theme.
|
|
||||||
To use the TriliumNext theme instead, add the <code>#appThemeBase=next</code> attribute
|
|
||||||
onto the existing theme. The <code>appTheme</code> attribute must also be
|
|
||||||
present.</p>
|
|
||||||
<p>
|
|
||||||
<img src="Customize the Next theme_i.png" width="424" height="140">
|
|
||||||
</p>
|
|
||||||
<p>When <code>appThemeBase</code> is set to <code>next</code> it will use the
|
|
||||||
“TriliumNext (auto)” theme. Any other value is ignored and will use the
|
|
||||||
legacy white theme instead.</p>
|
|
||||||
<h2>Overrides</h2>
|
|
||||||
<p>Do note that the TriliumNext theme has a few more overrides than the legacy
|
|
||||||
theme, so you might need to suffix <code>!important</code> if the style changes
|
|
||||||
are not applied.</p><pre><code class="language-text-css">:root {
|
|
||||||
--launcher-pane-background-color: #0d6efd !important;
|
|
||||||
}</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 14 KiB |
@ -1,180 +0,0 @@
|
|||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="../../style.css">
|
|
||||||
<base target="_parent">
|
|
||||||
<title data-trilium-title>Reference</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="content">
|
|
||||||
<h1 data-trilium-h1>Reference</h1>
|
|
||||||
|
|
||||||
<div class="ck-content">
|
|
||||||
<h2>Detecting mobile vs. desktop</h2>
|
|
||||||
<p>The mobile layout is different than the one on the desktop. Use <code>body.mobile</code> and <code>body.desktop</code> to
|
|
||||||
differentiate between them.</p><pre><code class="language-text-css">body.mobile #root-widget {
|
|
||||||
/* Do something on mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.desktop #root-widget {
|
|
||||||
/* Do something on desktop */
|
|
||||||
}</code></pre>
|
|
||||||
<p>Do note that there is also a “tablet mode” in the mobile layout. For that
|
|
||||||
particular case media queries are required:</p><pre><code class="language-text-css">@media (max-width: 991px) {
|
|
||||||
|
|
||||||
#launcher-pane {
|
|
||||||
|
|
||||||
/* Do something on mobile layout */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
|
|
||||||
#launcher-pane {
|
|
||||||
|
|
||||||
/* Do something on mobile tablet + desktop layout */
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}</code></pre>
|
|
||||||
<h2>Detecting horizontal vs. vertical layout</h2>
|
|
||||||
<p>The user can select between vertical layout (the classical one, where
|
|
||||||
the launcher bar is on the left) and a horizontal layout (where the launcher
|
|
||||||
bar is on the top and tabs are full-width).</p>
|
|
||||||
<p>Different styles can be applied by using classes at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
|
|
||||||
/* Do something */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.layout-horizontal #center-pane {
|
|
||||||
/* Do something else */
|
|
||||||
}</code></pre>
|
|
||||||
<p>The two different layouts use different containers (but they are present
|
|
||||||
in the DOM regardless of the user's choice), for example <code>#horizontal-main-container</code> and <code>#vertical-main-container</code> can
|
|
||||||
be used to customize the background of the content section.</p>
|
|
||||||
<h2>Detecting platform (Windows, macOS) or Electron</h2>
|
|
||||||
<p>It is possible to add particular styles that only apply to a given platform
|
|
||||||
by using the classes in <code>body</code>:</p>
|
|
||||||
<figure class="table">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Windows</th>
|
|
||||||
<th>macOS</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><pre><code class="language-text-x-trilium-auto">body.platform-win32 {
|
|
||||||
background: red;
|
|
||||||
}</code></pre>
|
|
||||||
</td>
|
|
||||||
<td><pre><code class="language-text-x-trilium-auto">body.platform-darwin {
|
|
||||||
background: red;
|
|
||||||
}</code></pre>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</figure>
|
|
||||||
<p>It is also possible to only apply a style if running under Electron (desktop
|
|
||||||
application):</p><pre><code class="language-text-x-trilium-auto">body.electron {
|
|
||||||
background: blue;
|
|
||||||
}</code></pre>
|
|
||||||
<h3>Native title bar</h3>
|
|
||||||
<p>It's possible to detect if the user has selected the native title bar
|
|
||||||
or the custom title bar by querying against <code>body</code>:</p><pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
|
|
||||||
/* Do something */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.electron:not(.native-titlebar) {
|
|
||||||
/* Do something else */
|
|
||||||
}</code></pre>
|
|
||||||
<h3>Native window buttons</h3>
|
|
||||||
<p>When running under Electron with native title bar off, a feature was introduced
|
|
||||||
to use the platform-specific window buttons such as the semaphore on macOS.</p>
|
|
||||||
<p>See <a href="https://github.com/TriliumNext/Notes/pull/702">Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes</a> for
|
|
||||||
the original implementation of this feature, including screenshots.</p>
|
|
||||||
<h4>On Windows</h4>
|
|
||||||
<p>The colors of the native window button area can be adjusted using a RGB
|
|
||||||
hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
|
||||||
--native-titlebar-foreground: #ffffff;
|
|
||||||
--native-titlebar-background: #ff0000;
|
|
||||||
}</code></pre>
|
|
||||||
<p>It is also possible to use transparency at the cost of reduced hover colors
|
|
||||||
using a RGBA hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
|
||||||
--native-titlebar-background: #ff0000aa;
|
|
||||||
}</code></pre>
|
|
||||||
<p>Note that the value is read when the window is initialized and then it
|
|
||||||
is refreshed only when the user changes their light/dark mode preference.</p>
|
|
||||||
<h4>On macOS</h4>
|
|
||||||
<p>On macOS the semaphore window buttons are enabled by default when the
|
|
||||||
native title bar is disabled. The offset of the buttons can be adjusted
|
|
||||||
using:</p><pre><code class="language-text-css">body {
|
|
||||||
--native-titlebar-darwin-x-offset: 12;
|
|
||||||
--native-titlebar-darwin-y-offset: 14 !important;
|
|
||||||
}</code></pre>
|
|
||||||
<h3>Background/transparency effects on Windows (Mica)</h3>
|
|
||||||
<p>Windows 11 offers a special background/transparency effect called Mica,
|
|
||||||
which can be enabled by themes by setting the <code>--background-material</code> variable
|
|
||||||
at <code>body</code> level:</p><pre><code class="language-text-css">body.electron.platform-win32 {
|
|
||||||
--background-material: tabbed;
|
|
||||||
}</code></pre>
|
|
||||||
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
|
|
||||||
layout) or <code>mica</code> (ideal for the vertical layout).</p>
|
|
||||||
<p>Do note that the Mica effect is applied at <code>body</code> level and the
|
|
||||||
theme needs to make the entire hierarchy (semi-)transparent in order for
|
|
||||||
it to be visible. Use the TrilumNext theme as an inspiration.</p>
|
|
||||||
<h2>Note icons, tab workspace accent color</h2>
|
|
||||||
<p>Theme capabilities are small adjustments done through CSS variables that
|
|
||||||
can affect the layout or the visual aspect of the application.</p>
|
|
||||||
<p>In the tab bar, to display the icons of notes instead of the icon of the
|
|
||||||
workspace:</p><pre><code class="language-text-css">:root {
|
|
||||||
--tab-note-icons: true;
|
|
||||||
}</code></pre>
|
|
||||||
<p>When a workspace is hoisted for a given tab, it is possible to get the
|
|
||||||
background color of that workspace, for example to apply a small strip
|
|
||||||
on the tab instead of the whole background color:</p><pre><code class="language-text-css">.note-tab .note-tab-wrapper {
|
|
||||||
--tab-background-color: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note-tab .note-tab-wrapper::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 3px;
|
|
||||||
background-color: var(--workspace-tab-background-color);
|
|
||||||
}</code></pre>
|
|
||||||
<h2>Custom fonts</h2>
|
|
||||||
<p>Currently the only way to include a custom font is to use <a class="reference-link"
|
|
||||||
href="../Advanced%20topics/Custom%20resource%20providers.html">Custom resource providers</a>.
|
|
||||||
Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
|
|
||||||
then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
|
|
||||||
<h2>Dark and light themes</h2>
|
|
||||||
<p>A light theme needs to have the following CSS:</p><pre><code class="language-text-css">:root {
|
|
||||||
--theme-style: light;
|
|
||||||
}</code></pre>
|
|
||||||
<p>if the theme is dark, then <code>--theme-style</code> needs to be <code>dark</code>.</p>
|
|
||||||
<p>If the theme is auto (e.g. supports both light or dark based on <code>prefers-color-scheme</code>)
|
|
||||||
it must also declare (in addition to setting <code>--theme-style</code> to
|
|
||||||
either <code>light</code> or <code>dark</code>):</p><pre><code class="language-text-css">:root {
|
|
||||||
|
|
||||||
--theme-style-auto: true;
|
|
||||||
|
|
||||||
}</code></pre>
|
|
||||||
<p>This will affect the behavior of the Electron application by informing
|
|
||||||
the operating system of the color preference (e.g. background effects will
|
|
||||||
appear correct on Windows).</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import type { Froca } from "../services/froca-interface.js";
|
|
||||||
|
|
||||||
export interface FTaskRow {
|
|
||||||
taskId: string;
|
|
||||||
parentNoteId: string;
|
|
||||||
title: string;
|
|
||||||
dueDate?: string;
|
|
||||||
isDone?: boolean;
|
|
||||||
utcDateModified: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class FTask {
|
|
||||||
private froca: Froca;
|
|
||||||
taskId!: string;
|
|
||||||
parentNoteId!: string;
|
|
||||||
title!: string;
|
|
||||||
dueDate?: string;
|
|
||||||
isDone!: boolean;
|
|
||||||
utcDateModified!: string;
|
|
||||||
|
|
||||||
constructor(froca: Froca, row: FTaskRow) {
|
|
||||||
this.froca = froca;
|
|
||||||
this.update(row);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(row: FTaskRow) {
|
|
||||||
this.taskId = row.taskId;
|
|
||||||
this.parentNoteId = row.parentNoteId;
|
|
||||||
this.title = row.title;
|
|
||||||
this.dueDate = row.dueDate;
|
|
||||||
this.isDone = !!row.isDone;
|
|
||||||
this.utcDateModified = row.utcDateModified;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import { lint } from "./eslint.js";
|
||||||
|
import { trimIndentation } from "../../../../spec/support/utils.js";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
|
||||||
|
describe("Linter", () => {
|
||||||
|
it("reports some basic errors", async () => {
|
||||||
|
const result = await lint(trimIndentation`
|
||||||
|
for (const i = 0; i<10; i++) {
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
expect(result).toMatchObject([
|
||||||
|
{ message: "'i' is constant.", },
|
||||||
|
{ message: "Empty block statement." }
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("reports no error for correct script", async () => {
|
||||||
|
const result = await lint(trimIndentation`
|
||||||
|
const foo = "bar";
|
||||||
|
console.log(foo.toString());
|
||||||
|
for (const x of [ 1, 2, 3]) {
|
||||||
|
console.log(x?.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
api.showMessage("Hi");
|
||||||
|
`);
|
||||||
|
expect(result.length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("reports unused functions as warnings", async () => {
|
||||||
|
const result = await lint(trimIndentation`
|
||||||
|
function hello() { }
|
||||||
|
function world() { }
|
||||||
|
|
||||||
|
console.log("Hello world");
|
||||||
|
`);
|
||||||
|
expect(result).toMatchObject([
|
||||||
|
{
|
||||||
|
message: "'hello' is defined but never used.",
|
||||||
|
severity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
message: "'world' is defined but never used.",
|
||||||
|
severity: 1
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export async function lint(code: string) {
|
||||||
|
|
||||||
|
const Linter = (await import("eslint-linter-browserify")).Linter;
|
||||||
|
const js = (await import("@eslint/js"));
|
||||||
|
const globals = (await import("globals"));
|
||||||
|
|
||||||
|
return new Linter().verify(code, [
|
||||||
|
js.configs.recommended,
|
||||||
|
{
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2024
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
...globals.browser,
|
||||||
|
api: "readonly"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"no-unused-vars": [ "warn", { vars: "local", args: "after-used" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
}
|
||||||