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

feat(command_palette): improve layout

Browse Source
This commit is contained in:
Elian Doran
2025-07-27 18:11:43 +03:00
parent 3517715aab
commit d7f154cfd1
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -320,16 +320,16 @@ 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 class="command-header">`;
html += `<span class="command-icon ${suggestion.icon || "bx bx-terminal"}"></span>`; html += `<span class="command-icon ${suggestion.icon || "bx bx-terminal"}"></span>`;
html += `<span class="command-name">${suggestion.highlightedNotePathTitle}</span>`; html += `<div class="command-content">`;
if (suggestion.commandShortcut) { html += `<div class="command-name">${suggestion.highlightedNotePathTitle}</div>`;
html += `<kbd class="command-shortcut">${suggestion.commandShortcut}</kbd>`;
}
html += `</div>`;
if (suggestion.commandDescription) { if (suggestion.commandDescription) {
html += `<div class="command-description">${suggestion.commandDescription}</div>`; html += `<div class="command-description">${suggestion.commandDescription}</div>`;
} }
html += `</div>`;
if (suggestion.commandShortcut) {
html += `<kbd class="command-shortcut">${suggestion.commandShortcut}</kbd>`;
}
html += '</div>'; html += '</div>';
return html; return html;
} }

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

@@ -1781,6 +1781,13 @@ textarea {
} }
/* Command palette styling */ /* Command palette styling */
.jump-to-note-dialog .command-suggestion {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9em;
}
.jump-to-note-dialog .aa-suggestion .command-suggestion, .jump-to-note-dialog .aa-suggestion .command-suggestion,
.jump-to-note-dialog .aa-suggestion .command-suggestion div { .jump-to-note-dialog .aa-suggestion .command-suggestion div {
padding: 0; padding: 0;
@@ -1792,22 +1799,28 @@ textarea {
background-color: var(--hover-background-color); background-color: var(--hover-background-color);
} }
.jump-to-note-dialog .command-header { .jump-to-note-dialog .command-icon {
display: flex; color: var(--muted-text-color);
align-items: center; font-size: 1.125rem;
gap: 0.5rem; flex-shrink: 0;
position: relative; margin-top: 0.125rem;
} }
.jump-to-note-dialog .command-icon { .jump-to-note-dialog .command-content {
flex-shrink: 0; flex-grow: 1;
min-width: 0;
} }
.jump-to-note-dialog .command-name { .jump-to-note-dialog .command-name {
flex: 1;
font-weight: bold; font-weight: bold;
} }
.jump-to-note-dialog .command-description {
font-size: 0.8em;
line-height: 1.3;
opacity: 0.75;
}
.jump-to-note-dialog kbd.command-shortcut { .jump-to-note-dialog kbd.command-shortcut {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
@@ -1815,13 +1828,6 @@ textarea {
font-family: inherit !important; font-family: inherit !important;
} }
.jump-to-note-dialog .command-description {
margin-top: 0.25rem;
font-size: 0.875em;
line-height: 1.3;
opacity: 0.75;
}
.empty-table-placeholder { .empty-table-placeholder {
text-align: center; text-align: center;
color: var(--muted-text-color); color: var(--muted-text-color);