Theme tweaks (#6783)

apps/client/src/stylesheets/style.css

@@ -176,6 +176,11 @@ label.tn-checkbox + label.tn-checkbox {
     margin-left: 12px;
 }
 
+label.tn-radio input[type="radio"],
+label.tn-checkbox input[type="checkbox"] {
+    margin-right: .5em;
+}
+
 #left-pane input,
 #left-pane select,
 #left-pane textarea {
@@ -2344,14 +2349,6 @@ footer.webview-footer button {
     padding: 1px 10px 1px 10px;
 }
 
-/* Search result highlighting */
-.search-result-title b,
-.search-result-content b,
-.search-result-attributes b {
-    font-weight: 900;
-    color: var(--admonition-warning-accent-color);
-}
-
 /* Customized icons */
 
 .bx-tn-toc::before {

apps/client/src/stylesheets/theme-next-dark.css

@@ -121,6 +121,8 @@
     --quick-search-focus-border: #80808095;
     --quick-search-focus-background: #ffffff1f;
     --quick-search-focus-color: white;
+    --quick-search-result-content-background: #0000004d;
+    --quick-search-result-highlight-color: #a4d995;
 
     --left-pane-collapsed-border-color: #0009;
     --left-pane-background-color: #1f1f1f;

apps/client/src/stylesheets/theme-next-light.css

@@ -115,6 +115,8 @@
     --quick-search-focus-border: #00000029;
     --quick-search-focus-background: #ffffff80;
     --quick-search-focus-color: #000;
+    --quick-search-result-content-background: #00000017;
+    --quick-search-result-highlight-color: #c65050;
 
     --left-pane-collapsed-border-color: #0000000d;
     --left-pane-background-color: #f2f2f2;

apps/client/src/stylesheets/theme-next/forms.css

@@ -455,6 +455,7 @@ optgroup {
         left: 0;
         width: var(--box-size);
         height: 100%;
+        margin: unset;
         opacity: 0 !important;
     }
 

apps/client/src/stylesheets/theme-next/shell.css

@@ -330,7 +330,6 @@ body.layout-horizontal > .horizontal {
  */
 
  .calendar-dropdown-widget {
-    width: unset !important;
     padding: 12px;
     color: var(--calendar-color);
     user-select: none;
@@ -587,6 +586,10 @@ div.quick-search .search-button.show {
     top: 1px;
 }
 
+.quick-search .quick-search-item-icon {
+    vertical-align: text-bottom;
+}
+
 /* Note title */
 .quick-search .dropdown-menu .dropdown-item > a {
     color: var(--menu-text-color);
@@ -605,6 +608,25 @@ div.quick-search .search-button.show {
     overflow: hidden;
 }
 
+/* Note content snippet */
+:root .quick-search .search-result-content {
+    background-color: var(--quick-search-result-content-background);
+    border-radius: 4px;
+}
+
+/* Highlighted search terms */
+:root .quick-search .search-result-title b,
+:root .quick-search .search-result-content b,
+:root .quick-search .search-result-attributes b {
+    color: var(--quick-search-result-highlight-color);
+    font-weight: 600;
+}
+
+/* Divider line */
+.quick-search .dropdown-item::after {
+    display: none;
+}
+
 /*
  * TREE PANE
  */

apps/client/src/widgets/dialogs/delete_notes.tsx

@@ -113,10 +113,10 @@ function DeletedNotes({ noteIdsToBeDeleted }: { noteIdsToBeDeleted: DeleteNotesP
 
     if (noteIdsToBeDeleted.length) {
         return (
-            <div className="delete-notes-list-wrapper">
+            <div className="delete-notes-list-wrapper" style={{paddingTop: "16px"}}>
                 <h4>{t("delete_notes.notes_to_be_deleted", { notesCount: noteIdsToBeDeleted.length })}</h4>
     
-                <ul className="delete-notes-list" style={{ maxHeight: "200px", overflow: "auto" }}>
+                <ul className="delete-notes-list" style={{ maxHeight: "200px", overflow: "auto"}}>
                     {noteLinks.map((link, index) => (
                         <li key={index} dangerouslySetInnerHTML={{ __html: link }} />
                     ))}

apps/client/src/widgets/find.ts

@@ -87,7 +87,7 @@ const TPL = /*html*/`
 
         <div class="find-widget-spacer"></div>
 
-        <div class="find-widget-close-button"><button class="btn icon-action bx bx-x"></button></div>
+        <div class="find-widget-close-button"><button class="icon-action bx bx-x"></button></div>
     </div>
 
     <div class="replace-widget-box" style='display: none'>

apps/client/src/widgets/note_icon.css

@@ -10,13 +10,14 @@
     font-size: 180%;
     background-color: transparent;
     border: 1px solid transparent;
-    cursor: pointer;
     padding: 6px;
-    color: var(--main-text-color);
+    cursor: pointer;
+    color: var(--muted-text-color);
 }
-
+    
-.note-icon-widget button.note-icon:hover {
+.note-icon-widget button.note-icon:disabled {
-    border: 1px solid var(--main-border-color);
+    cursor: default;
+    opacity: .75;
 }
 
 .note-icon-widget .dropdown-menu {

apps/client/src/widgets/quick_search.ts

@@ -22,8 +22,9 @@ const TPL = /*html*/`
     }
 
     .quick-search .dropdown-menu {
-        max-height: 600px;
+        max-height: 80vh;
-        max-width: 600px;
+        min-width: 400px;
+        max-width: 720px;
         overflow-y: auto;
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -40,14 +41,11 @@ const TPL = /*html*/`
     .quick-search .dropdown-item:not(:last-child)::after {
         content: '';
         position: absolute;
+        left: 0;
         bottom: 0;
-        left: 50%;
+        width: 100%;
-        transform: translateX(-50%);
+        height: 1px;
-        width: 80%;
+        background: var(--dropdown-border-color);
-        height: 2px;
-        background: var(--main-border-color);
-        border-radius: 1px;
-        opacity: 0.4;
     }
     
     .quick-search .dropdown-item:last-child::after {
@@ -62,13 +60,52 @@ const TPL = /*html*/`
         display: none;
     }
     
-    .quick-search .dropdown-item:hover {
+    .quick-search-item.dropdown-item:hover {
         background-color: #f8f9fa;
     }
     
+     .quick-search .quick-search-item {
+        width: 100%;
+    }
+
+    .quick-search .quick-search-item-header {
+        padding: 0 8px;
+    }
+
+    .quick-search .quick-search-item-icon {
+        margin-inline-end: 2px;
+    }
+
+    .quick-search .search-result-title {
+        font-weight: 500;
+    }
+
+    .quick-search .search-result-attributes {
+        opacity: .5;
+        padding: 0 8px;
+        font-size: .75em;
+    }
+
+    .quick-search .search-result-content {
+        margin-top: 8px;
+        padding: 8px;
+        background-color: var(--accented-background-color);
+        color: var(--main-text-color);
+        font-size: .85em;
+    }
+
+    /* Search result highlighting */
+    .quick-search .search-result-title b,
+    .quick-search .search-result-content b,
+    .quick-search .search-result-attributes b {
+        color: var(--admonition-warning-accent-color);
+        text-decoration: underline;
+    }
+
     .quick-search .dropdown-divider {
         margin: 0;
     }
+
   </style>
 
   <div class="input-group-prepend">
@@ -83,6 +120,7 @@ const TPL = /*html*/`
 const INITIAL_DISPLAYED_NOTES = 15;
 const LOAD_MORE_BATCH_SIZE = 10;
 
+
 // TODO: Deduplicate with server.
 interface QuickSearchResponse {
     searchResultNoteIds: string[];
@@ -237,20 +275,22 @@ export default class QuickSearchWidget extends BasicWidget {
                 const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">');
                 
                 // Build the display HTML with content snippet below the title
-                let itemHtml = `<div style="display: flex; flex-direction: column;">
+                let itemHtml = `<div class="quick-search-item">
-                    <div style="display: flex; align-items: flex-start; gap: 6px;">
+                    <div class="quick-search-item-header">
-                        <span class="${result.icon}" style="flex-shrink: 0; margin-top: 1px;"></span>
+                        <span class="quick-search-item-icon ${result.icon}"></span>
-                        <span style="flex: 1;" class="search-result-title">${result.highlightedNotePathTitle}</span>
+                        <span class="search-result-title">${result.highlightedNotePathTitle}</span>
                     </div>`;
                 
                 // Add attribute snippet (tags/attributes) below the title if available
                 if (result.highlightedAttributeSnippet) {
-                    itemHtml += `<div style="font-size: 0.75em; color: var(--muted-text-color); opacity: 0.5; margin-left: 20px; margin-top: 2px; line-height: 1.2;" class="search-result-attributes">${result.highlightedAttributeSnippet}</div>`;
+                    // Replace <br> with a blank space to join the atributes on the same single line
+                    const snippet = (result.highlightedAttributeSnippet as string).replace(/<br\s?\/?>/g, " ");
+                    itemHtml += `<div class="search-result-attributes">${snippet}</div>`;
                 }
                 
                 // Add content snippet below the attributes if available
                 if (result.highlightedContentSnippet) {
-                    itemHtml += `<div style="font-size: 0.85em; color: var(--main-text-color); opacity: 0.7; margin-left: 20px; margin-top: 4px; line-height: 1.3;" class="search-result-content">${result.highlightedContentSnippet}</div>`;
+                    itemHtml += `<div class="search-result-content">${result.highlightedContentSnippet}</div>`;
                 }
                 
                 itemHtml += `</div>`;

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -186,7 +186,7 @@ function BulkActionsList({ note }: { note: FNote }) {
 function AddBulkActionButton({ note }: { note: FNote }) {
   return (
     <Dropdown
-      buttonClassName="action-add-toggle btn-sm"
+      buttonClassName="action-add-toggle btn btn-sm"
       text={<><Icon icon="bx bxs-zap" />{" "}{t("search_definition.action")}</>}
       noSelectButtonStyle
     >

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -359,36 +359,38 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                     disableNewlines disableSpellcheck
                 />
 
-                { needsSaving && <ActionButton
+                <div className="attribute-editor-buttons">
-                    icon="bx bx-save"
+                    { needsSaving && <ActionButton
-                    className="save-attributes-button"
+                        icon="bx bx-save"
-                    text={escapeQuotes(t("attribute_editor.save_attributes"))}
+                        className="save-attributes-button tn-tool-button"
-                    onClick={save}
+                        text={escapeQuotes(t("attribute_editor.save_attributes"))}
-                /> }
+                        onClick={save}
+                    /> }
 
-                <ActionButton 
+                    <ActionButton 
-                    icon="bx bx-plus"
+                        icon="bx bx-plus"
-                    className="add-new-attribute-button"
+                        className="add-new-attribute-button tn-tool-button"
-                    text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
+                        text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
-                    onClick={(e) => {
+                        onClick={(e) => {
-                        // Prevent automatic hiding of the context menu due to the button being clicked.
+                            // Prevent automatic hiding of the context menu due to the button being clicked.
-                        e.stopPropagation();
+                            e.stopPropagation();
 
-                        contextMenu.show<AttributeCommandNames>({
+                            contextMenu.show<AttributeCommandNames>({
-                            x: e.pageX,
+                                x: e.pageX,
-                            y: e.pageY,
+                                y: e.pageY,
-                            orientation: "left",
+                                orientation: "left",
-                            items: [
+                                items: [
-                                { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
+                                    { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
-                                { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
+                                    { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
-                                { title: "----" },
+                                    { title: "----" },
-                                { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
+                                    { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
-                                { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
+                                    { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
-                            ],
+                                ],
-                            selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
+                                selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
-                        });
+                            });
-                    }}
+                        }}
-                />
+                    />
+                </div>
 
                 { error && (
                     <div className="attribute-errors">

apps/client/src/widgets/ribbon/style.css

@@ -271,7 +271,7 @@
     border: 0 !important;
     outline: 0 !important;
     box-shadow: none !important;
-    padding: 0 0 0 5px !important;
+    padding: 0 100px 0 5px !important;
     margin: 0 !important;
     max-height: 100px;
     overflow: auto;
@@ -283,36 +283,19 @@
     background: transparent !important;
 }
 
-.save-attributes-button {
+.attribute-editor-buttons {
-    color: var(--muted-text-color);
+    display: flex;
     position: absolute;
-    bottom: 14px;
+    top: 0;
-    right: 25px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    font-size: 130%;
-}
-
-.add-new-attribute-button {
-    color: var(--muted-text-color);
-    position: absolute;
-    bottom: 13px;
     right: 0;
-    cursor: pointer;
+    bottom: 0;
-    border: 1px solid transparent;
+    align-items: center;
-    font-size: 130%;
+    gap: 10px;
-}
-
-.add-new-attribute-button:hover, .save-attributes-button:hover {
-    border: 1px solid var(--button-border-color);
-    border-radius: var(--button-border-radius);
-    background: var(--button-background-color);
-    color: var(--button-text-color);
 }
 
 .attribute-errors {
     color: red;
-    padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
+    padding: 5px 100px 0px 5px; /* large right padding to avoid buttons */
 }
 /* #endregion */