${t("attachment_erasure_timeout.attachment_auto_deletion_description")}
-`; - -const TPL2 = ` +${t("attachment_erasure_timeout.manual_erasing_description")}
@@ -31,7 +29,10 @@ export default class AttachmentErasureTimeoutOptions extends TimeSelector { } doRender() { - this.$widget = $(TPL).append(this.$widget).append(TPL2); + const $timeSelector = this.$widget; + this.$widget = $(TPL); + // inject TimeSelector widget template + this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector); this.$eraseUnusedAttachmentsNowButton = this.$widget.find(".erase-unused-attachments-now-button"); this.$eraseUnusedAttachmentsNowButton.on("click", () => { diff --git a/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts b/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts index d71a2c370..b15e56074 100644 --- a/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts +++ b/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.ts @@ -9,9 +9,7 @@ const TPL = ` `; @@ -30,7 +28,10 @@ export default class NoteErasureTimeoutOptions extends TimeSelector { } doRender() { - this.$widget = $(TPL).append(this.$widget).append(TPL2); + const $timeSelector = this.$widget; + // inject TimeSelector widget template + this.$widget = $(TPL); + this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector) this.$eraseDeletedNotesButton = this.$widget.find("#erase-deleted-notes-now-button"); From 5550885206272e0cceb8ea67b13a4717a06e8d21 Mon Sep 17 00:00:00 2001 From: Elian DoranThe mobile layout is different than the one on the desktop. Use body.mobile and body.desktop to
+ differentiate between them.
body.mobile #root-widget {
+ /* Do something on mobile */
+}
+
+body.desktop #root-widget {
+ /* Do something on desktop */
+}Do note that there is also a “tablet mode” in the mobile layout. For that + particular case media queries are required:
@media (max-width: 991px) {
+
+ #launcher-pane {
+
+ /* Do something on mobile layout */
+
+ }
+
+}
+
+
+
+@media (min-width: 992px) {
+
+ #launcher-pane {
+
+ /* Do something on mobile tablet + desktop layout */
+
+ }
+
+}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 @@ -85,14 +116,14 @@ body.electron:not(.native-titlebar) {
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:
body {
+ using:body {
--native-titlebar-darwin-x-offset: 12;
--native-titlebar-darwin-y-offset: 14 !important;
}
Background/transparency effects on Windows (Mica)
Windows 11 offers a special background/transparency effect called Mica,
which can be enabled by themes by setting the --background-material variable
- at body level:
body.electron.platform-win32 {
+ at body level:body.electron.platform-win32 {
--background-material: tabbed;
}
The value can be either tabbed (especially useful for the horizontal
@@ -104,12 +135,12 @@ body.electron:not(.native-titlebar) {
Theme capabilities are small adjustments done through CSS variables that
can affect the layout or the visual aspect of the application.
In the tab bar, to display the icons of notes instead of the icon of the
- workspace:
:root {
+ workspace::root {
--tab-note-icons: true;
}
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:
.note-tab .note-tab-wrapper {
+ on the tab instead of the whole background color:.note-tab .note-tab-wrapper {
--tab-background-color: initial !important;
}
@@ -127,6 +158,21 @@ body.electron:not(.native-titlebar) {
href="../Custom%20resource%20providers.html">Custom resource providers.
Basically import a font into Trilium and assign it #customResourceProvider=fonts/myfont.ttf and
then import the font in CSS via /custom/fonts/myfont.ttf.
+ Dark and light themes
+ A light theme needs to have the following CSS:
:root {
+ --theme-style: light;
+}
+ if the theme is dark, then --theme-style needs to be dark.
+ If the theme is auto (e.g. supports both light or dark based on prefers-color-scheme)
+ it must also declare (in addition to setting --theme-style to
+ either light or dark):
:root {
+
+ --theme-style-auto: true;
+
+}
+ 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).
-