optimize usage of note path and attributes in the note tooltip, #1558

src/public/app/services/note_tooltip.js

@@ -88,7 +88,7 @@ async function renderTooltip(note) {
         return;
     }
 
-    let content = $("<h5>").text(await treeService.getNotePathTitle(someNotePath)).prop('outerHTML');
+    let content = '<h5 class="note-tooltip-title">' + (await treeService.getNoteTitleWithPathAsSuffix(someNotePath)).prop('outerHTML') + '</h5>';
 
     const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note);
 
@@ -98,7 +98,7 @@ async function renderTooltip(note) {
     });
 
     content = content
-        + $renderedAttributes[0].outerHTML
+        + '<div class="note-tooltip-attributes">' + $renderedAttributes[0].outerHTML + '</div>'
         + $renderedContent[0].outerHTML;
 
     return content;

src/public/app/services/tree.js

@@ -236,10 +236,8 @@ async function getNoteTitle(noteId, parentNoteId = null) {
     return title;
 }
 
-async function getNotePathTitle(notePath) {
-    utils.assertArguments(notePath);
-
-    const titlePath = [];
+async function getNotePathTitleComponents(notePath) {
+    const titleComponents = [];
 
     if (notePath.startsWith('root/')) {
         notePath = notePath.substr(5);
@@ -247,20 +245,51 @@ async function getNotePathTitle(notePath) {
 
     // special case when we want just root's title
     if (notePath === 'root') {
-        return await getNoteTitle(notePath);
+        titleComponents.push(await getNoteTitle(notePath));
+    } else {
+        let parentNoteId = 'root';
+
+        for (const noteId of notePath.split('/')) {
+            titleComponents.push(await getNoteTitle(noteId, parentNoteId));
+
+            parentNoteId = noteId;
+        }
     }
 
-    let parentNoteId = 'root';
+    return titleComponents;
+}
 
-    for (const noteId of notePath.split('/')) {
-        titlePath.push(await getNoteTitle(noteId, parentNoteId));
+async function getNotePathTitle(notePath) {
+    utils.assertArguments(notePath);
 
-        parentNoteId = noteId;
-    }
+    const titlePath = await getNotePathTitleComponents(notePath);
 
     return titlePath.join(' / ');
 }
 
+async function getNoteTitleWithPathAsSuffix(notePath) {
+    utils.assertArguments(notePath);
+
+    const titleComponents = await getNotePathTitleComponents(notePath);
+
+    if (!titleComponents || titleComponents.length === 0) {
+        return "";
+    }
+
+    const title = titleComponents[titleComponents.length - 1];
+    const path = titleComponents.slice(0, titleComponents.length - 1);
+
+    const $titleWithPath = $('<span class="note-title-with-path">')
+        .append($('<span class="note-title">').text(title));
+
+    if (path.length > 0) {
+        $titleWithPath
+            .append($('<span class="note-path">').text(' (' + path.join(' / ') + ')'));
+    }
+
+    return $titleWithPath;
+}
+
 function getHashValueFromAddress() {
     const str = document.location.hash ? document.location.hash.substr(1) : ""; // strip initial #
 
@@ -289,6 +318,7 @@ export default {
     getBranchIdFromNotePath,
     getNoteTitle,
     getNotePathTitle,
+    getNoteTitleWithPathAsSuffix,
     getHashValueFromAddress,
     parseNotePath
 };

src/public/stylesheets/style.css

@@ -420,12 +420,30 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
     margin-bottom: 7px;
 }
 
+.note-tooltip-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 .note-tooltip-content {
     /* height needs to stay small because tooltip has problem when it can't fit to either top or bottom of the cursor */
     max-height: 300px;
     overflow: hidden;
 }
 
+.note-tooltip-content .note-title-with-path .note-path {
+    font-size: small;
+}
+
+.note-tooltip-attributes {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 .tooltip-inner img {
     max-width: 250px;
     max-height: 250px;