From 8a019d617f1f1ecd1ef61812838bbe40532a0aa7 Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 14 Oct 2020 23:14:04 +0200 Subject: [PATCH] small visual tweaks to link map, including displaying the note icon --- src/public/app/entities/note_short.js | 35 ++++++++++++++++++++++ src/public/app/services/link_map.js | 42 +++++++++++++++++++-------- src/public/app/widgets/note_tree.js | 42 ++------------------------- src/public/stylesheets/link_map.css | 28 ++++++++++++++---- 4 files changed, 90 insertions(+), 57 deletions(-) diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index f55c175b9..aa7ae4de9 100644 --- a/src/public/app/entities/note_short.js +++ b/src/public/app/entities/note_short.js @@ -5,6 +5,16 @@ import noteAttributeCache from "../services/note_attribute_cache.js"; const LABEL = 'label'; const RELATION = 'relation'; +const NOTE_TYPE_ICONS = { + "file": "bx bx-file", + "image": "bx bx-image", + "code": "bx bx-code", + "render": "bx bx-extension", + "search": "bx bx-file-find", + "relation-map": "bx bx-map-alt", + "book": "bx bx-book" +}; + /** * FIXME: since there's no "full note" anymore we can rename this to Note * @@ -254,6 +264,31 @@ class NoteShort { return this.getAttributes(LABEL, name); } + getIcon(isFolder = false) { + const iconCassLabels = this.getLabels('iconClass'); + + if (iconCassLabels.length > 0) { + return iconCassLabels.map(l => l.value).join(' '); + } + else if (this.noteId === 'root') { + return "bx bx-chevrons-right"; + } + else if (this.type === 'text') { + if (isFolder) { + return "bx bx-folder"; + } + else { + return "bx bx-note"; + } + } + else if (this.type === 'code' && this.mime.startsWith('text/x-sql')) { + return "bx bx-data"; + } + else { + return NOTE_TYPE_ICONS[this.type]; + } + } + /** * @param {string} [name] - relation name to filter * @returns {Attribute[]} all note's relations (attributes with type relation), including inherited ones diff --git a/src/public/app/services/link_map.js b/src/public/app/services/link_map.js index 22f5d56ed..98808cf75 100644 --- a/src/public/app/services/link_map.js +++ b/src/public/app/services/link_map.js @@ -63,6 +63,27 @@ export default class LinkMap { noteIds.add(this.note.noteId); } + await treeCache.getNotes(Array.from(noteIds)); + + // pre-fetch the link titles, it's important to have hte construction afterwards synchronous + // since jsPlumb caculates width of the element + const $linkTitles = {}; + + for (const noteId of noteIds) { + const note = await treeCache.getNote(noteId); + + $linkTitles[noteId] = await linkService.createNoteLink(noteId, {title: note.title}); + + $linkTitles[noteId].on('click', e => { + try { + $linkTitles[noteId].tooltip('dispose'); + } + catch (e) {} + + linkService.goToLink(e); + }) + } + // preload all notes const notes = await treeCache.getNotes(Array.from(noteIds), true); @@ -98,18 +119,15 @@ export default class LinkMap { .addClass("note-box") .prop("id", noteBoxId); - linkService.createNoteLink(noteId, {title: note.title}).then($link => { - $link.on('click', e => { - try { - $link.tooltip('dispose'); - } - catch (e) {} + const $link = $linkTitles[noteId]; - linkService.goToLink(e); - }); - - $noteBox.append($("").addClass("title").append($link)); - }); + $noteBox.append( + $("") + .addClass(note.getIcon()), + $("") + .addClass("title") + .append($link) + ); if (noteId === this.note.noteId) { $noteBox.addClass("link-map-active-note"); @@ -273,4 +291,4 @@ export default class LinkMap { noteIdToId(noteId) { return this.linkMapContainerId + "-note-" + noteId; } -} \ No newline at end of file +} diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js index 666e74bb1..469e6ad4b 100644 --- a/src/public/app/widgets/note_tree.js +++ b/src/public/app/widgets/note_tree.js @@ -159,16 +159,6 @@ const TPL = ` `; -const NOTE_TYPE_ICONS = { - "file": "bx bx-file", - "image": "bx bx-image", - "code": "bx bx-code", - "render": "bx bx-extension", - "search": "bx bx-file-find", - "relation-map": "bx bx-map-alt", - "book": "bx bx-book" -}; - export default class NoteTreeWidget extends TabAwareWidget { constructor(treeName) { super(); @@ -562,40 +552,14 @@ export default class NoteTreeWidget extends TabAwareWidget { return noteList; } - getIconClass(note) { - const labels = note.getLabels('iconClass'); - - return labels.map(l => l.value).join(' '); - } - getIcon(note, isFolder) { const hoistedNoteId = hoistedNoteService.getHoistedNoteId(); - const iconClass = this.getIconClass(note); - - if (iconClass) { - return iconClass; - } - else if (note.noteId === 'root') { - return "bx bx-chevrons-right"; - } - else if (note.noteId === hoistedNoteId) { + if (note.noteId !== 'root' && note.noteId === hoistedNoteId) { return "bx bxs-arrow-from-bottom"; } - else if (note.type === 'text') { - if (isFolder) { - return "bx bx-folder"; - } - else { - return "bx bx-note"; - } - } - else if (note.type === 'code' && note.mime.startsWith('text/x-sql')) { - return "bx bx-data"; - } - else { - return NOTE_TYPE_ICONS[note.type]; - } + + return note.getIcon(isFolder); } updateNode(node) { diff --git a/src/public/stylesheets/link_map.css b/src/public/stylesheets/link_map.css index 7ccdfd38d..2b8d96dcf 100644 --- a/src/public/stylesheets/link_map.css +++ b/src/public/stylesheets/link_map.css @@ -4,22 +4,21 @@ } .link-map-container .note-box { - padding: 8px; + padding: 0px 8px 8px 8px; position: absolute !important; background-color: var(--main-background-color); color: var(--main-text-color); z-index: 4; border: 1px solid #666; - box-shadow: 2px 2px 19px #999; border-radius: 8px; opacity: 0.8; font-size: 11px; width: auto; - height: auto; - max-width: 200px; min-width: 120px; - max-height: 100px; + max-width: 250px; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .link-map-container .note-box:hover { @@ -47,4 +46,21 @@ .link-map-widget .note-box .title { font-size: 19px !important; -} \ No newline at end of file + font-weight: 600 +} + +#link-map-dialog .note-box .bx { + font-size: 24px !important; + position: relative; + top: 6px; + display: inline-block; + margin-right: 5px; +} + +.link-map-widget .note-box .bx { + font-size: 30px !important; + position: relative; + top: 6px; + display: inline-block; + margin-right: 5px; +}