Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(note_tooltip): improve layout for empty notes

Browse Source
This commit is contained in:
Elian Doran 2025-02-07 21:36:22 +02:00
parent f77a29d7fe
commit 02d16d0125
No known key found for this signature in database
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/public/app/services/note_tooltip.ts
View File

@ -140,10 +140,6 @@ async function renderTooltip(note: FNote | null) {
} }
const noteTitleWithPathAsSuffix = await treeService.getNoteTitleWithPathAsSuffix(bestNotePath); const noteTitleWithPathAsSuffix = await treeService.getNoteTitleWithPathAsSuffix(bestNotePath);
let content = "";
if (noteTitleWithPathAsSuffix) {
content = `<h5 class="note-tooltip-title">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
}
const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note); const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
@ -151,8 +147,21 @@ async function renderTooltip(note: FNote | null) {
tooltip: true, tooltip: true,
trim: true trim: true
}); });
const isContentEmpty = ($renderedContent[0].innerHTML.length === 0);
content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>${$renderedContent[0].outerHTML}`; let content = "";
if (noteTitleWithPathAsSuffix) {
const classes = [ "note-tooltip-title" ];
if (isContentEmpty) {
classes.push("note-no-content");
}
content = `<h5 class="${classes.join(" ")}">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
}
content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>`;
if (!isContentEmpty) {
content += $renderedContent[0].outerHTML;
}
return content; return content;
} }

12
src/public/stylesheets/theme-next/shell.css
View File

@ -1206,13 +1206,21 @@ body .calendar-dropdown-widget .calendar-body a:hover {
.note-tooltip-content { .note-tooltip-content {
padding: 8px; padding: 8px;
min-height: 56px;
} }
.note-tooltip-content .note-title-with-path { .note-tooltip-title .note-title-with-path {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
border-bottom: 2px solid currentColor; }
.note-tooltip-title.note-no-content {
margin: 0;
}
.note-tooltip-title:not(.note-no-content) .note-title-with-path {
padding-bottom: 6px; padding-bottom: 6px;
border-bottom: 2px solid currentColor;
} }
.note-tooltip-content .note-path { .note-tooltip-content .note-path {