From 3c61626370c8361d9b57b133efcb16a13e4826e2 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 15:16:43 +0200 Subject: [PATCH 01/12] fix(launch_bar/calendar): tooltip showing over the calendar dropdown --- apps/client/src/stylesheets/style.css | 19 ++++++++++++++----- .../widgets/buttons/right_dropdown_button.ts | 15 ++++++++------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index b0a963595..24d74a98d 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -706,11 +706,6 @@ table.promoted-attributes-in-tooltip th { z-index: 32767 !important; } -.tooltip-trigger { - background: transparent; - pointer-events: none; -} - .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--main-border-color) !important; } @@ -1379,6 +1374,20 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { flex-shrink: 0; } +.right-dropdown-widget .right-dropdown-button { + position: relative; +} + +.tooltip-trigger { + background: transparent; + pointer-events: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + #launcher-pane.horizontal .right-dropdown-widget { width: 53px; } diff --git a/apps/client/src/widgets/buttons/right_dropdown_button.ts b/apps/client/src/widgets/buttons/right_dropdown_button.ts index 4b3505bc9..45915c254 100644 --- a/apps/client/src/widgets/buttons/right_dropdown_button.ts +++ b/apps/client/src/widgets/buttons/right_dropdown_button.ts @@ -7,9 +7,9 @@ const TPL = /*html*/`
- -
+ class="bx right-dropdown-button launcher-button"> +
+
@@ -52,9 +52,8 @@ export default class RightDropdownButtonWidget extends BasicWidget { } }); - this.$widget.attr("title", this.title); - this.tooltip = Tooltip.getOrCreateInstance(this.$widget[0], { - trigger: "hover", + this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title); + this.tooltip = new Tooltip(this.$tooltip[0], { placement: handleRightToLeftPlacement(this.settings.titlePlacement), fallbackPlacements: [ handleRightToLeftPlacement(this.settings.titlePlacement) ] }); @@ -62,7 +61,9 @@ export default class RightDropdownButtonWidget extends BasicWidget { this.$widget .find(".right-dropdown-button") .addClass(this.iconClass) - .on("click", () => this.tooltip.hide()); + .on("click", () => this.tooltip.hide()) + .on("mouseenter", () => this.tooltip.show()) + .on("mouseleave", () => this.tooltip.hide()); this.$widget.on("show.bs.dropdown", async () => { await this.dropdownShown(); From cd2a085d005130bf3d9ae54fa38ba1487bce11d5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 15:30:17 +0200 Subject: [PATCH 02/12] fix(type_widgets/notemap): bottom part not visible --- apps/client/src/widgets/type_widgets/NoteMap.css | 10 ++++++++++ apps/client/src/widgets/type_widgets/NoteMap.tsx | 1 + 2 files changed, 11 insertions(+) create mode 100644 apps/client/src/widgets/type_widgets/NoteMap.css diff --git a/apps/client/src/widgets/type_widgets/NoteMap.css b/apps/client/src/widgets/type_widgets/NoteMap.css new file mode 100644 index 000000000..0afa0f4d2 --- /dev/null +++ b/apps/client/src/widgets/type_widgets/NoteMap.css @@ -0,0 +1,10 @@ +.note-detail-note-map { + &>div { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + } +} \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/NoteMap.tsx b/apps/client/src/widgets/type_widgets/NoteMap.tsx index 7a308151c..aca9f68d1 100644 --- a/apps/client/src/widgets/type_widgets/NoteMap.tsx +++ b/apps/client/src/widgets/type_widgets/NoteMap.tsx @@ -1,6 +1,7 @@ import { TypeWidgetProps } from "./type_widget"; import NoteMapEl from "../note_map/NoteMap"; import { useRef } from "preact/hooks"; +import "./NoteMap.css"; export default function NoteMap({ note }: TypeWidgetProps) { const containerRef = useRef(null); From fe10c9f8c8e09218ef046f459ea42bff68026247 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 15:34:43 +0200 Subject: [PATCH 03/12] fix(text): strikethrough icon appears disabled --- apps/client/src/stylesheets/style.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 24d74a98d..dc95206cb 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1001,9 +1001,17 @@ div[data-notify="container"] { font-family: var(--monospace-font-family); } -svg.ck-icon .note-icon { - color: var(--main-text-color); - font-size: 20px; +svg.ck-icon { + &.ck-icon_inherit-color { + * { + fill: currentColor; + } + } + + &.note-icon { + color: var(--main-text-color); + font-size: 20px; + } } .ck-content { From 5af7425cae2cd1700f44cc438e8b80fd0c651b51 Mon Sep 17 00:00:00 2001 From: noobhjy Date: Sat, 29 Nov 2025 10:00:15 +0100 Subject: [PATCH 04/12] Translated using Weblate (Chinese (Simplified Han script)) Currently translated at 100.0% (1637 of 1637 strings) Translation: Trilium Notes/Client Translate-URL: https://hosted.weblate.org/projects/trilium/client/zh_Hans/ --- apps/client/src/translations/cn/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json index e1f086e85..6c82a00af 100644 --- a/apps/client/src/translations/cn/translation.json +++ b/apps/client/src/translations/cn/translation.json @@ -1662,7 +1662,7 @@ }, "editable-text": { "auto-detect-language": "自动检测", - "keeps-crashing": "编辑组件时崩溃。请尝试重启 Trilium。如果问题仍然存在，请考虑提交错误报告。" + "keeps-crashing": "编辑组件时持续崩溃。请尝试重启 Trilium。如果问题仍然存在，请考虑提交错误报告。" }, "highlighting": { "title": "代码块", From d3f3ff4eab21942455fe9fe7808e2109b4d0edea Mon Sep 17 00:00:00 2001 From: pythaac Date: Sat, 29 Nov 2025 14:01:05 +0100 Subject: [PATCH 05/12] Translated using Weblate (Korean) Currently translated at 43.4% (66 of 152 strings) Translation: Trilium Notes/Website Translate-URL: https://hosted.weblate.org/projects/trilium/website/ko/ --- apps/website/src/translations/ko/translation.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/apps/website/src/translations/ko/translation.json b/apps/website/src/translations/ko/translation.json index f399f0f4d..75fa485e7 100644 --- a/apps/website/src/translations/ko/translation.json +++ b/apps/website/src/translations/ko/translation.json @@ -85,5 +85,8 @@ "title_arm64": "ARM 기반 리눅스", "description_x64": "대부분의 리눅스 배포판에서 x86_64 아키텍처와 호환됩니다.", "description_arm64": "ARM 기반 리눅스 배포판에서 aarch64 아키텍처와 호환됩니다." + }, + "note_types": { + "text_title": "텍스트 노트" } } From c1f663a200f8acc57905960f2144c7ac1c303697 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 16:43:50 +0200 Subject: [PATCH 06/12] style(mobile): no bottom border radius on modals --- apps/client/src/stylesheets/style.css | 4 ++++ apps/client/src/widgets/dialogs/PopupEditor.css | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index dc95206cb..55551f7fb 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -212,6 +212,10 @@ input::placeholder, background-color: var(--modal-backdrop-color) !important; } +body.mobile .modal .modal-content { + border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0; +} + .component { contain: size; } diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css index c545a13eb..5d8691c19 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.css +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -5,11 +5,11 @@ body.popup-editor-open .ck-clipboard-drop-target-line { z-index: 1000; } body.desktop .modal.popup-editor-dialog .modal-dialog { max-width: 75vw; -} - -.modal.popup-editor-dialog .modal-dialog { border-bottom-left-radius: var(--bs-modal-border-radius); border-bottom-right-radius: var(--bs-modal-border-radius); +} + +body.desktop .modal.popup-editor-dialog .modal-dialog { overflow: hidden; } From e8bae61afc5790eeb5fa6319933e51e79a27b9ea Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 16:46:40 +0200 Subject: [PATCH 07/12] style(mobile): center modals on tablet view --- apps/client/src/stylesheets/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 55551f7fb..eb8bdfc7b 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -212,6 +212,12 @@ input::placeholder, background-color: var(--modal-backdrop-color) !important; } +body.mobile .modal .modal-dialog { + left: 50%; + transform: translateX(-50%); + width: 100%; +} + body.mobile .modal .modal-content { border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0; } From 470ca3b6dc5b95bd4f371a568a3abc046f687470 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 16:49:46 +0200 Subject: [PATCH 08/12] style(mobile): improve quick edit max width --- apps/client/src/widgets/dialogs/PopupEditor.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css index 5d8691c19..13276e33d 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.css +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -13,6 +13,10 @@ body.desktop .modal.popup-editor-dialog .modal-dialog { overflow: hidden; } +body.mobile .modal.popup-editor-dialog .modal-dialog { + max-width: 90vw; +} + .modal.popup-editor-dialog .modal-header .modal-title { font-size: 1.1em; } From a68cd7526b91bcebe85ca313754f285578640f2d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 16:55:12 +0200 Subject: [PATCH 09/12] style(mobile): improve quick edit max height --- apps/client/src/widgets/dialogs/PopupEditor.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css index 13276e33d..14b6c3043 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.css +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -15,6 +15,8 @@ body.desktop .modal.popup-editor-dialog .modal-dialog { body.mobile .modal.popup-editor-dialog .modal-dialog { max-width: 90vw; + max-height: 90vh; + height: 100%; } .modal.popup-editor-dialog .modal-header .modal-title { From 7d8af0f252a7cb032dd76fb9e8ca35abe43f1d7b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 16:57:11 +0200 Subject: [PATCH 10/12] refactor(client): use var for modal max height --- apps/client/src/stylesheets/style.css | 7 ++++--- apps/client/src/widgets/dialogs/PopupEditor.css | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index eb8bdfc7b..b19016422 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -25,7 +25,8 @@ --bs-body-font-weight: var(--main-font-weight) !important; --bs-body-color: var(--main-text-color) !important; --bs-body-bg: var(--main-background-color) !important; - --ck-mention-list-max-height: 500px; + --ck-mention-list-max-height: 500px; + --tn-modal-max-height: 90vh; } body#trilium-app.motion-disabled *, @@ -1329,7 +1330,7 @@ body.mobile #context-menu-container.mobile-bottom-menu { inset-inline-end: 0 !important; bottom: 0 !important; top: unset !important; - max-height: 90vh; + max-height: var(--tn-modal-max-height); overflow: auto !important; user-select: none; -webkit-user-select: none; @@ -1589,7 +1590,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { inset-inline-end: 0 !important; transform: unset !important; overflow-y: auto; - max-height: calc(90vh - var(--dropdown-bottom)); + max-height: calc(var(--tn-modal-max-height) - var(--dropdown-bottom)); } #mobile-sidebar-container { diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css index 14b6c3043..f72cf2274 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.css +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -15,7 +15,7 @@ body.desktop .modal.popup-editor-dialog .modal-dialog { body.mobile .modal.popup-editor-dialog .modal-dialog { max-width: 90vw; - max-height: 90vh; + max-height: var(--tn-modal-max-height); height: 100%; } From 81a9e06b231a3e307b6fc75877386f73145b1ce1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 17:00:43 +0200 Subject: [PATCH 11/12] feat(quick_edit): basic reactivity to color changes --- apps/client/src/widgets/dialogs/PopupEditor.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx index a6c641d8d..143ac20b0 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.tsx +++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx @@ -1,7 +1,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import Modal from "../react/Modal"; import "./PopupEditor.css"; -import { useNoteContext, useTriliumEvent } from "../react/hooks"; +import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks"; import NoteTitleWidget from "../note_title"; import NoteIcon from "../note_icon"; import NoteContext from "../../components/note_context"; @@ -90,13 +90,14 @@ export function DialogWrapper({ children }: { children: ComponentChildren }) { const { note } = useNoteContext(); const wrapperRef = useRef(null); const [ hasTint, setHasTint ] = useState(false); + const [ color ] = useNoteLabel(note, "color"); // Apply the tinted-dialog class only if the custom color CSS class specifies a hue useEffect(() => { if (!wrapperRef.current) return; const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue"); setHasTint(!!customHue); - }, [ note ]); + }, [ note, color ]); return (
From 453349be26d86d738b29f6353d77ef7a2edce02a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 29 Nov 2025 17:19:37 +0200 Subject: [PATCH 12/12] feat(quick_edit): seamless transition between color changes --- apps/client/src/services/css_class_manager.ts | 2 +- apps/client/src/stylesheets/theme-next-dark.css | 2 +- apps/client/src/stylesheets/theme-next-light.css | 2 +- apps/client/src/widgets/dialogs/PopupEditor.tsx | 12 ++---------- 4 files changed, 5 insertions(+), 13 deletions(-) diff --git a/apps/client/src/services/css_class_manager.ts b/apps/client/src/services/css_class_manager.ts index b28b24b23..4c0c0f360 100644 --- a/apps/client/src/services/css_class_manager.ts +++ b/apps/client/src/services/css_class_manager.ts @@ -38,7 +38,7 @@ function createClassForColor(colorString: string | null) { registeredClasses.add(className); } - return className; + return `color ${className}`; } function parseColor(color: string) { diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 51db2bc27..117eeb8b7 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -300,7 +300,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before { border-color: var(--muted-text-color) !important; } -.tinted-quick-edit-dialog { +.quick-edit-dialog-wrapper.color { --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%); --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%); diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 66e3538c6..a3fc26e93 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -276,7 +276,7 @@ --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1); } -.tinted-quick-edit-dialog { +.quick-edit-dialog-wrapper.color { --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx index 143ac20b0..1a065c05f 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.tsx +++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx @@ -89,18 +89,10 @@ export default function PopupEditor() { export function DialogWrapper({ children }: { children: ComponentChildren }) { const { note } = useNoteContext(); const wrapperRef = useRef(null); - const [ hasTint, setHasTint ] = useState(false); - const [ color ] = useNoteLabel(note, "color"); - - // Apply the tinted-dialog class only if the custom color CSS class specifies a hue - useEffect(() => { - if (!wrapperRef.current) return; - const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue"); - setHasTint(!!customHue); - }, [ note, color ]); + useNoteLabel(note, "color"); // to update color class return ( -
+
{children}
)