gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki 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
No known key found for this signature in database
2 changed files with 27 additions and 11 deletions
Show Stats 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) => {
if (suggestion.action === "command") {
let html = `<div class="command-suggestion">`;
html += `<div style="position: relative;">`;
html += `<span class="${suggestion.icon || "bx bx-terminal"}"></span> <strong>${suggestion.highlightedNotePathTitle}</strong>`;
html += `<div class="command-header">`;
html += `<span class="command-icon ${suggestion.icon || "bx bx-terminal"}"></span>`;
html += `<span class="command-name">${suggestion.highlightedNotePathTitle}</span>`;
if (suggestion.commandShortcut) {
html += ` <kbd>${suggestion.commandShortcut}</kbd>`;
html += `<kbd class="command-shortcut">${suggestion.commandShortcut}</kbd>`;
}
html += `</div>`;
if (suggestion.commandDescription) {
html += `<small style="color: var(--muted-text-color);">${suggestion.commandDescription}</small>`;
html += `<div class="command-description">${suggestion.commandDescription}</div>`;
}
html += '</div>';
return html;

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

@ -1793,21 +1793,36 @@ textarea {
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;
font-size: 0.8em;
background-color: var(--button-background-color);
border: 1px solid var(--main-border-color);
border-radius: 3px;
margin-left: 0.5rem;
position: absolute;
right: 1rem;
top: 0.75rem;
margin-left: auto;
flex-shrink: 0;
}
.jump-to-note-dialog .command-suggestion small {
display: block;
.jump-to-note-dialog .command-description {
margin-top: 0.25rem;
font-size: 0.875em;
color: var(--muted-text-color);
line-height: 1.3;
}