From ee4ce3ffd80e7ce986cb6cf51ed5a6ccc9154bad Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Tue, 8 Sep 2020 23:25:21 +0200
Subject: [PATCH] display unhoist button on the left of the note title so that
 it's always visible, #1223

---
 src/public/app/services/hoisted_note.js  | 3 +++
 src/public/app/widgets/attribute_list.js | 2 +-
 src/public/app/widgets/note_tree.js      | 8 +++++---
 src/public/stylesheets/style.css         | 5 +++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/public/app/services/hoisted_note.js b/src/public/app/services/hoisted_note.js
index e8822ecf3..334df930d 100644
--- a/src/public/app/services/hoisted_note.js
+++ b/src/public/app/services/hoisted_note.js
@@ -1,6 +1,7 @@
 import options from './options.js';
 import appContext from "./app_context.js";
 import treeService from "./tree.js";
+import treeCache from "./tree_cache.js";
 
 function getHoistedNoteId() {
     return options.get('hoistedNoteId');
@@ -9,6 +10,8 @@ function getHoistedNoteId() {
 async function setHoistedNoteId(noteId) {
     await options.save('hoistedNoteId', noteId);
 
+    await treeCache.loadInitialTree();
+
     // FIXME - just use option load event
     appContext.triggerEvent('hoistedNoteChanged', {noteId});
 }
diff --git a/src/public/app/widgets/attribute_list.js b/src/public/app/widgets/attribute_list.js
index 854882ffd..b553873e7 100644
--- a/src/public/app/widgets/attribute_list.js
+++ b/src/public/app/widgets/attribute_list.js
@@ -207,7 +207,7 @@ export default class AttributeListWidget extends TabAwareWidget {
 
     async renderInheritedAttributes(attributes, $container) {
         for (const attribute of attributes) {
-            const $attr = await attributeRenderer.renderAttribute(attribute, false)
+            const $attr = (await attributeRenderer.renderAttribute(attribute, false))
                 .on('click', e => this.attributeDetailWidget.showAttributeDetail({
                     attribute: {
                         noteId: attribute.noteId,
diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js
index b2406daef..25f591cb1 100644
--- a/src/public/app/widgets/note_tree.js
+++ b/src/public/app/widgets/note_tree.js
@@ -32,7 +32,7 @@ const TPL = `
     .tree {
         height: 100%;
         overflow: auto;
-        padding-bottom: 20px;
+        padding-bottom: 35px;
     }
     
     .refresh-search-button {
@@ -464,9 +464,11 @@ export default class NoteTreeWidget extends TabAwareWidget {
                     && node.data.noteId === hoistedNoteService.getHoistedNoteId()
                     && $span.find('.unhoist-button').length === 0) {
 
-                    const unhoistButton = $('<span>&nbsp; (<a class="unhoist-button">unhoist</a>)</span>');
+                    const unhoistButton = $('<span class="unhoist-button-wrapper" title="Unhoist current note to show the whole note tree">[<a class="unhoist-button">unhoist</a>]</span>');
 
-                    $span.append(unhoistButton);
+                    // prepending since appending could push out (when note title is too long)
+                    // the button too much to the right so that it's not visible
+                    $span.prepend(unhoistButton);
                 }
 
                 const note = await treeCache.getNote(node.data.noteId);
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 259f0e69e..91556c525 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -540,6 +540,11 @@ div[data-notify="container"] {
     padding: 2px;
 }
 
+.unhoist-button-wrapper {
+    position: relative;
+    top: -4px;
+}
+
 .unhoist-button {
     text-decoration: underline !important;
     color: var(--link-color) !important;