Merge pull request #1913 from TriliumNext/css-tweaks

Some css fine tunes

Author: eliandoran

apps/client/src/services/note_tooltip.ts

@@ -8,6 +8,10 @@ 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<HTMLElement>[] = [];
+let dismissTimer: ReturnType<typeof setTimeout>;
+
 function setupGlobalTooltip() {
     $(document).on("mouseenter", "a", mouseEnterHandler);
 
@@ -23,7 +27,12 @@ function setupGlobalTooltip() {
 }
 
 function dismissAllTooltips() {
-    $(".note-tooltip").remove();
+    clearTimeout(dismissTimer);
+    openTooltipElements.forEach($el => {
+        $el.tooltip("dispose");
+        $el.removeAttr("aria-describedby");
+    });
+    openTooltipElements = [];
 }
 
 function setupElementTooltip($el: JQuery<HTMLElement>) {
@@ -86,8 +95,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 +112,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,15 +126,16 @@ 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 {
-                setTimeout(checkTooltip, 1000);
+                dismissTimer = setTimeout(checkTooltip, 1000);
             }
         };
 
-        setTimeout(checkTooltip, 1000);
+        dismissTimer = setTimeout(checkTooltip, 1000);
     }
 }
 
@@ -176,7 +188,25 @@ function renderFootnote($link: JQuery<HTMLElement>, 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').first();
+            if ($katex.length) {
+                $(this).replaceWith($('<span class="math-tex"></span>').append($('<span></span>').append($katex.clone())));
+            }
+        });
+    }
+    
+    let footnoteContent = $footnoteContent.html();
+    footnoteContent = `<div class="ck-content">${footnoteContent}</div>`
+    return footnoteContent || "";
 }
 
 export default {

apps/client/src/stylesheets/style.css

@@ -1213,6 +1213,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;
@@ -1769,7 +1773,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 {

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;

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;

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;

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;