moved parent list next to note title

src/public/javascripts/services/tree.js

@@ -17,11 +17,11 @@ import Branch from '../entities/branch.js';
 import NoteShort from '../entities/note_short.js';
 
 const $tree = $("#tree");
-const $parentList = $("#parent-list");
-const $parentListList = $("#parent-list-inner");
 const $createTopLevelNoteButton = $("#create-top-level-note-button");
 const $collapseTreeButton = $("#collapse-tree-button");
 const $scrollToCurrentNoteButton = $("#scroll-to-current-note-button");
+const $notePathList = $("#note-path-list");
+const $notePathCount = $("#note-path-count");
 
 let startNotePath = null;
 
@@ -189,12 +189,13 @@ async function showParentList(noteId, node) {
     const note = await treeCache.getNote(noteId);
     const parents = await note.getParentNotes();
 
+    $notePathCount.html(parents.length + " path" + (parents.length > 0 ? "s" : ""));
+
     if (parents.length <= 1) {
-        $parentList.hide();
     }
     else {
-        $parentList.show();
+        //$notePathList.show();
-        $parentListList.empty();
+        $notePathList.empty();
 
         for (const parentNote of parents) {
             const parentNotePath = await getSomeNotePath(parentNote);
@@ -202,16 +203,13 @@ async function showParentList(noteId, node) {
             const notePath = parentNotePath ? (parentNotePath + '/' + noteId) : noteId;
             const title = await treeUtils.getNotePathTitle(notePath);
 
-            let item;
+            const item = $("<li/>").append(await linkService.createNoteLink(notePath, title));
 
             if (node.getParent().data.noteId === parentNote.noteId) {
-                item = $("<span/>").attr("title", "Current note").append(title);
+                item.addClass("current");
-            }
-            else {
-                item = await linkService.createNoteLink(notePath, title);
             }
 
-            $parentListList.append($("<li/>").append(item));
+            $notePathList.append(item);
         }
     }
 }

src/public/stylesheets/style.css

@@ -175,20 +175,6 @@ div.ui-tooltip {
     margin-top: 10px;
 }
 
-#parent-list {
-    display: none;
-    margin-left: 20px;
-    border-top: 2px solid #eee;
-    padding-top: 10px;
-    grid-area: parent-list;
-    max-height: 300px;
-    overflow: auto;
-}
-
-#parent-list ul {
-    padding-left: 20px;
-}
-
 /*
 * .electron-in-page-search-window is a class specified to default
 * <webview> element for search window.
@@ -249,7 +235,7 @@ div.ui-tooltip {
     filter: opacity(7%);
 }
 
-.dropdown-menu li:not(.divider) {
+#note-type .dropdown-menu li:not(.divider) {
     padding: 5px;
     width: 200px;
 }
@@ -380,3 +366,7 @@ div.ui-tooltip {
 .btn.active {
     background-color: #ddd;
 }
+
+#note-path-list .current a {
+    font-weight: bold;
+}

src/views/index.ejs

@@ -87,16 +87,24 @@
         </div>
 
         <div id="tree"></div>
-
-        <div id="parent-list">
-          <p><strong>Note locations:</strong></p>
-
-          <ul id="parent-list-inner"></ul>
-        </div>
       </div>
 
       <div style="grid-area: title;">
         <div class="hide-toggle" style="display: flex; align-items: center;">
+          <div class="dropdown">
+            <button id="note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
+              <span id="note-path-count">1 path</span>
+
+              <span class="caret"></span>
+            </button>
+            <ul id="note-path-list" class="dropdown-menu" aria-labelledby="note-path-list-button">
+            </ul>
+          </div>
+
+          <input autocomplete="off" value="" id="note-title" style="margin-left: 15px; font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
+
+          <span id="note-id-display" title="Note ID"></span>
+
           <a title="Protect the note so that password will be required to view the note"
              class="icon-action"
              id="protect-button"
@@ -107,11 +115,7 @@
              id="unprotect-button"
              style="display: none; background: url('images/icons/unlock.png')"></a>
 
-          &nbsp;
+          &nbsp; &nbsp;
-
-          <input autocomplete="off" value="" id="note-title" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
-
-          <span id="note-id-display" title="Note ID"></span>
 
           <button class="btn btn-sm"
                   style="display: none; margin-right: 10px"
@@ -130,7 +134,7 @@
               Type: <span data-bind="text: typeString()"></span>
               <span class="caret"></span>
             </button>
-            <ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+            <ul id="note-type-dropdown" class="dropdown-menu dropdown-menu-right">
               <li data-bind="click: selectText, css: { selected: type() == 'text' }"><span class="check">&check;</span> <strong>Text</strong></li>
               <li role="separator" class="divider"></li>
               <li data-bind="click: selectRender, css: { selected: type() == 'render' && mime() == '' }"><span class="check">&check;</span> <strong>Render HTML note</strong></li>
@@ -147,7 +151,7 @@
               Note actions
               <span class="caret"></span>
             </button>
-            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
+            <ul class="dropdown-menu dropdown-menu-right">
               <li><a id="show-note-revisions-button">Note revisions</a></li>
               <li><a class="show-labels-button"><kbd>Alt+L</kbd> Labels</a></li>
               <li><a id="show-source-button"><kbd>Ctrl+U</kbd> HTML source</a></li>