Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 18:36:30 +01:00
Code Issues Packages Projects Releases Activity

client/quick search: extract inline styles

Browse Source
This commit is contained in:
Adorian Doran
2025-08-26 22:27:31 +03:00
committed by Elian Doran
parent a54177fee0
commit 93f80c6837
1 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/client/src/widgets/quick_search.ts
View File

@@ -62,13 +62,52 @@ const TPL = /*html*/`
display: none; display: none;
} }
.quick-search .dropdown-item:hover { .quick-search-item.dropdown-item:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
} }
.quick-search .quick-search-item {
display: flex;
flex-direction: column;
}
.quick-search .quick-search-item-header {
display: flex;
align-items: flex-start;
gap: 6px;
}
.quick-search .quick-search-item-icon {
flex-shrink: 0;
margin-top: 1px;
}
.quick-search search-result-title {
flex: 1;
}
.quick-search .search-result-attributes {
font-size: 0.75em;
color: var(--muted-text-color);
opacity: 0.5;
margin-left: 20px;
margin-top: 2px;
line-height: 1.2;"
}
.quick-search .search-result-content {
font-size: 0.85em;
color: var(--main-text-color);
opacity: 0.7;
margin-left: 20px;
margin-top: 4px;
line-height: 1.3;
}
.quick-search .dropdown-divider { .quick-search .dropdown-divider {
margin: 0; margin: 0;
} }
</style> </style>
<div class="input-group-prepend"> <div class="input-group-prepend">
@@ -83,6 +122,7 @@ const TPL = /*html*/`
const INITIAL_DISPLAYED_NOTES = 15; const INITIAL_DISPLAYED_NOTES = 15;
const LOAD_MORE_BATCH_SIZE = 10; const LOAD_MORE_BATCH_SIZE = 10;
// TODO: Deduplicate with server. // TODO: Deduplicate with server.
interface QuickSearchResponse { interface QuickSearchResponse {
searchResultNoteIds: string[]; searchResultNoteIds: string[];
@@ -237,20 +277,20 @@ export default class QuickSearchWidget extends BasicWidget {
const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">'); const $item = $('<a class="dropdown-item" tabindex="0" href="javascript:">');
// Build the display HTML with content snippet below the title // 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>`; </div>`;
// Add attribute snippet (tags/attributes) below the title if available // Add attribute snippet (tags/attributes) below the title if available
if (result.highlightedAttributeSnippet) { 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>`; itemHtml += `<div class="search-result-attributes">${result.highlightedAttributeSnippet}</div>`;
} }
// Add content snippet below the attributes if available // Add content snippet below the attributes if available
if (result.highlightedContentSnippet) { 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>`; itemHtml += `</div>`;