diff --git a/src/public/app/services/note_tooltip.js b/src/public/app/services/note_tooltip.js index 5c90419c2..f8451c987 100644 --- a/src/public/app/services/note_tooltip.js +++ b/src/public/app/services/note_tooltip.js @@ -88,7 +88,7 @@ async function renderTooltip(note) { return; } - let content = $("
").text(await treeService.getNotePathTitle(someNotePath)).prop('outerHTML'); + let content = '
' + (await treeService.getNoteTitleWithPathAsSuffix(someNotePath)).prop('outerHTML') + '
'; const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note); @@ -98,7 +98,7 @@ async function renderTooltip(note) { }); content = content - + $renderedAttributes[0].outerHTML + + '
' + $renderedAttributes[0].outerHTML + '
' + $renderedContent[0].outerHTML; return content; diff --git a/src/public/app/services/tree.js b/src/public/app/services/tree.js index d29e2ee8a..68129ba73 100644 --- a/src/public/app/services/tree.js +++ b/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 = $('') + .append($('').text(title)); + + if (path.length > 0) { + $titleWithPath + .append($('').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 }; diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 9a643d97b..0f4703da4 100644 --- a/src/public/stylesheets/style.css +++ b/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;