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

refactor(command_palette): use CSS for styles

Browse Source
This commit is contained in:
Elian Doran
2025-07-27 15:44:47 +03:00
parent 126152ff63
commit 37461d0eb3
2 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/services/note_autocomplete.ts
View File

@@ -320,14 +320,15 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
suggestion: (suggestion) => { suggestion: (suggestion) => {
if (suggestion.action === "command") { if (suggestion.action === "command") {
let html = `<div class="command-suggestion">`; let html = `<div class="command-suggestion">`;
html += `<div style="position: relative;">`; html += `<div class="command-header">`;
html += `<span class="${suggestion.icon || "bx bx-terminal"}"></span> <strong>${suggestion.highlightedNotePathTitle}</strong>`; html += `<span class="command-icon ${suggestion.icon || "bx bx-terminal"}"></span>`;
html += `<span class="command-name">${suggestion.highlightedNotePathTitle}</span>`;
if (suggestion.commandShortcut) { if (suggestion.commandShortcut) {
html += ` <kbd>${suggestion.commandShortcut}</kbd>`; html += `<kbd class="command-shortcut">${suggestion.commandShortcut}</kbd>`;
} }
html += `</div>`; html += `</div>`;
if (suggestion.commandDescription) { if (suggestion.commandDescription) {
html += `<small style="color: var(--muted-text-color);">${suggestion.commandDescription}</small>`; html += `<div class="command-description">${suggestion.commandDescription}</div>`;
} }
html += '</div>'; html += '</div>';
return html; return html;

29
apps/client/src/stylesheets/style.css
View File

@@ -1793,21 +1793,36 @@ textarea {
background-color: var(--hover-background-color); background-color: var(--hover-background-color);
} }
.jump-to-note-dialog .command-suggestion kbd { .jump-to-note-dialog .command-header {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.jump-to-note-dialog .command-icon {
flex-shrink: 0;
}
.jump-to-note-dialog .command-name {
flex: 1;
font-weight: bold;
}
.jump-to-note-dialog .command-shortcut {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
font-size: 0.8em; font-size: 0.8em;
background-color: var(--button-background-color); background-color: var(--button-background-color);
border: 1px solid var(--main-border-color); border: 1px solid var(--main-border-color);
border-radius: 3px; border-radius: 3px;
margin-left: 0.5rem; margin-left: auto;
position: absolute; flex-shrink: 0;
right: 1rem;
top: 0.75rem;
} }
.jump-to-note-dialog .command-suggestion small { .jump-to-note-dialog .command-description {
display: block;
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.875em;
color: var(--muted-text-color);
line-height: 1.3; line-height: 1.3;
} }