From 729a32610ae0c0cd5138448efd0c6a10c72e5f2f Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Mon, 12 May 2025 14:09:35 +0800 Subject: [PATCH 1/8] fix(ui): Avoid the background invisible when selecting text with background color --- apps/client/src/stylesheets/style.css | 4 ++++ apps/client/src/stylesheets/theme-next-dark.css | 2 ++ apps/client/src/stylesheets/theme-next-light.css | 2 ++ 3 files changed, 8 insertions(+) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 544b6581b..16fb87aef 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1222,6 +1222,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { background-color: inherit; } +::selection { + background-color: var(--selection-background-color); +} + [data-bs-toggle="tooltip"]:not(.button-widget) span { padding-bottom: 0; border-bottom: 1px dotted; diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 98f379c6e..d8d472097 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -195,6 +195,8 @@ --scrollbar-background-color: transparent; --scrollbar-border-color: unset; /* Deprecated */ + --selection-background-color: #3399FF70; + --link-color: lightskyblue; --mermaid-theme: dark; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 7793d8ece..bdf3ae228 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -194,6 +194,8 @@ --scrollbar-background-color: transparent; --scrollbar-border-color: unset; /* Deprecated */ + --selection-background-color: #3399FF70; + --link-color: blue; --mermaid-theme: default; From 7e35a2dee584d5d9bb8d16477a4956b288bd65ee Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Mon, 12 May 2025 14:14:27 +0800 Subject: [PATCH 2/8] fix(ui): Fix the launcher shifting issue when collapsing the left pane --- apps/client/src/stylesheets/theme-next/shell.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 483d6910d..fc751f8dd 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -131,6 +131,7 @@ body.layout-horizontal > .horizontal { } #launcher-pane.vertical #launcher-container { + width: var(--launcher-pane-size); height: 100%; overflow-x: hidden; overflow-y: auto; From 755d0002c995e2e0f96087934e5a8217acfbd127 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Mon, 12 May 2025 14:56:04 +0800 Subject: [PATCH 3/8] fix(ui): Avoid over-long title blocking electron native title bar --- apps/client/src/stylesheets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 16fb87aef..96bf71fb2 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1782,7 +1782,7 @@ body.zen .title-row { height: unset !important; -webkit-app-region: drag; padding-left: env(titlebar-area-x); - padding-right: 2.5em; + padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em); } body.zen .floating-buttons { From ad6671b09a4aa2a001e4207936a7e4d2ec19385e Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Mon, 12 May 2025 22:30:29 +0800 Subject: [PATCH 4/8] fix(ui): Fix widget controls inside the footnote --- packages/ckeditor5-footnotes/theme/footnote.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-footnotes/theme/footnote.css b/packages/ckeditor5-footnotes/theme/footnote.css index 02b271619..29da50bae 100644 --- a/packages/ckeditor5-footnotes/theme/footnote.css +++ b/packages/ckeditor5-footnotes/theme/footnote.css @@ -44,10 +44,9 @@ flex-grow: 1; } -.ck .ck-widget.footnote-section .ck-widget__type-around__button_after { - display:none; /* hides the 'insert after' button from the ckeditor widget */ +.ck .ck-widget.footnote-section > .ck-reset_all.ck-widget__type-around > .ck-widget__type-around__button_after { + display: none; /* hides the 'insert after' button from the ckeditor widget, but displays the button inside the footnote content. */ } - .placeholder { padding: 2px 2px; outline-offset: -2px; From 6cb27279a08fb38ae47707f2638babb48762f683 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Tue, 13 May 2025 18:04:18 +0800 Subject: [PATCH 5/8] fix(ui): fix misaligned display in footnote tooltip --- apps/client/src/services/note_tooltip.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts index 19ac71801..55982e644 100644 --- a/apps/client/src/services/note_tooltip.ts +++ b/apps/client/src/services/note_tooltip.ts @@ -176,7 +176,25 @@ function renderFootnote($link: JQuery, url: string) { .closest(".footnote-item") // find the parent container of the footnote .find(".footnote-content"); // find the actual text content of the footnote - return $footnoteContent.html() || ""; + const isEditable = $link.closest(".ck-content").hasClass("note-detail-editable-text-editor"); + if (isEditable) { + /* Remove widget buttons for tables, formulas, and images in editable notes. */ + $footnoteContent.find('.ck-widget__selection-handle').remove(); + $footnoteContent.find('.ck-widget__type-around').remove(); + $footnoteContent.find('.ck-widget__resizer').remove(); + + /* Handling in-line math formulas */ + $footnoteContent.find('.ck-math-tex.ck-math-tex-inline.ck-widget').each(function () { + const $katex = $(this).find('.katex, .katex-display').first(); + if ($katex.length) { + $(this).replaceWith($('').append($('').append($katex.clone()))); + } + }); + } + + let footnoteContent = $footnoteContent.html(); + footnoteContent = `
${footnoteContent}
` + return footnoteContent || ""; } export default { From 2f582a4f9a88d822c37715a247c40b949debf476 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Tue, 13 May 2025 19:09:16 +0800 Subject: [PATCH 6/8] Inline formulas do not have a .katex-display class --- apps/client/src/services/note_tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts index 55982e644..80ec7caae 100644 --- a/apps/client/src/services/note_tooltip.ts +++ b/apps/client/src/services/note_tooltip.ts @@ -185,7 +185,7 @@ function renderFootnote($link: JQuery, url: string) { /* Handling in-line math formulas */ $footnoteContent.find('.ck-math-tex.ck-math-tex-inline.ck-widget').each(function () { - const $katex = $(this).find('.katex, .katex-display').first(); + const $katex = $(this).find('.katex').first(); if ($katex.length) { $(this).replaceWith($('').append($('').append($katex.clone()))); } From 5ce0383c03953e19735aaf13898f171a8514868f Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Tue, 13 May 2025 22:15:00 +0800 Subject: [PATCH 7/8] fix(tooltip): Sometimes tooltip flashes --- apps/client/src/services/note_tooltip.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts index 80ec7caae..722728733 100644 --- a/apps/client/src/services/note_tooltip.ts +++ b/apps/client/src/services/note_tooltip.ts @@ -8,6 +8,9 @@ import appContext from "../components/app_context.js"; import type FNote from "../entities/fnote.js"; import { t } from "./i18n.js"; +// Track all elements that open tooltips +let openTooltipElements: JQuery[] = []; + function setupGlobalTooltip() { $(document).on("mouseenter", "a", mouseEnterHandler); @@ -23,7 +26,11 @@ function setupGlobalTooltip() { } function dismissAllTooltips() { - $(".note-tooltip").remove(); + openTooltipElements.forEach($el => { + $el.tooltip("dispose"); + $el.removeAttr("aria-describedby"); + }); + openTooltipElements = []; } function setupElementTooltip($el: JQuery) { @@ -86,8 +93,8 @@ async function mouseEnterHandler(this: HTMLElement) { // we need to check if we're still hovering over the element // since the operation to get tooltip content was async, it is possible that // we now create tooltip which won't close because it won't receive mouseleave event - if ($(this).filter(":hover").length > 0) { - $(this).tooltip({ + if ($link.filter(":hover").length > 0) { + $link.tooltip({ container: "body", // https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988 // with bottom this flickering happens a bit less @@ -103,7 +110,9 @@ async function mouseEnterHandler(this: HTMLElement) { }); dismissAllTooltips(); - $(this).tooltip("show"); + $link.tooltip("show"); + + openTooltipElements.push($link); // Dismiss the tooltip immediately if a link was clicked inside the tooltip. $(`.${tooltipClass} a`).on("click", (e) => { @@ -115,7 +124,8 @@ async function mouseEnterHandler(this: HTMLElement) { // click on links within tooltip etc. without tooltip disappearing // - once the user moves the cursor away from both link and the tooltip, hide the tooltip const checkTooltip = () => { - if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) { + + if (!$link.filter(":hover").length && !$(`.${linkId}:hover`).length) { // cursor is neither over the link nor over the tooltip, user likely is not interested dismissAllTooltips(); } else { From 6d7abace97b7b5b43d3816d568e977e616b560f5 Mon Sep 17 00:00:00 2001 From: SiriusXT <1160925501@qq.com> Date: Wed, 14 May 2025 01:00:13 +0800 Subject: [PATCH 8/8] fix(tooltip): Sometimes tooltip flashes --- apps/client/src/services/note_tooltip.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts index 722728733..8ea7ac88f 100644 --- a/apps/client/src/services/note_tooltip.ts +++ b/apps/client/src/services/note_tooltip.ts @@ -10,6 +10,7 @@ import { t } from "./i18n.js"; // Track all elements that open tooltips let openTooltipElements: JQuery[] = []; +let dismissTimer: ReturnType; function setupGlobalTooltip() { $(document).on("mouseenter", "a", mouseEnterHandler); @@ -26,6 +27,7 @@ function setupGlobalTooltip() { } function dismissAllTooltips() { + clearTimeout(dismissTimer); openTooltipElements.forEach($el => { $el.tooltip("dispose"); $el.removeAttr("aria-describedby"); @@ -129,11 +131,11 @@ async function mouseEnterHandler(this: HTMLElement) { // cursor is neither over the link nor over the tooltip, user likely is not interested dismissAllTooltips(); } else { - setTimeout(checkTooltip, 1000); + dismissTimer = setTimeout(checkTooltip, 1000); } }; - setTimeout(checkTooltip, 1000); + dismissTimer = setTimeout(checkTooltip, 1000); } }