note list renderer improvements, still WIP

src/public/app/services/note_content_renderer.js

@@ -26,7 +26,7 @@ async function getRenderedContent(note) {
     }
     else if (type === 'file' || type === 'pdf') {
         function getFileUrl() {
-            return utils.getUrlForDownload("api/notes/" + note.noteId + "/download");
+            return utils.getUrlForDownload(`api/notes/${note.noteId}/download`);
         }
 
         const $downloadButton = $('<button class="file-download btn btn-primary" type="button">Download</button>');
@@ -51,7 +51,7 @@ async function getRenderedContent(note) {
 
         if (type === 'pdf') {
             const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-            $pdfPreview.attr("src", utils.getUrlForDownload("api/notes/" + note.noteId + "/open"));
+            $pdfPreview.attr("src", utils.getUrlForDownload(`api/notes/${note.noteId}/open`));
 
             $rendered.append($pdfPreview);
         }

src/public/app/services/note_list_renderer.js

@@ -36,6 +36,8 @@ const TPL = `
     <style>
     .note-list {
         overflow: hidden;
+        position: relative;
+        height: 100%;
     }
     
     .note-book-card {
@@ -70,8 +72,38 @@ const TPL = `
     .note-book-title {
         flex-grow: 0;
     }
+    
+    .note-list-container {
+        height: 100%;
+        overflow: auto;
+    }
+    
+    .note-expander {
+        font-size: x-large;
+        position: relative;
+        top: 2px;
+        cursor: pointer;
+    }
     </style>
     
+    <div class="btn-group floating-button" style="right: 20px; top: 10px;">
+        <button type="button"
+                class="expand-children-button btn icon-button bx bx-move-vertical"
+                title="Expand all children"></button>
+
+        &nbsp;
+
+        <button type="button"
+                class="list-view-button btn icon-button bx bx-menu"
+                title="List view"></button>
+
+        &nbsp;
+
+        <button type="button"
+                class="grid-view-button btn icon-button bx bx-grid-alt"
+                title="Grid view"></button>
+    </div>
+    
     <div class="note-list-container"></div>
 </div>`;
 
@@ -130,7 +162,8 @@ async function renderList(notes, parentNote = null) {
     return $noteList;
 }
 
-async function renderNote(note) {
+// TODO: we should also render (promoted) attributes
+async function renderNote(note, renderContent) {
     const notePath = /*this.notePath + '/' + */ note.noteId;
 
     const $content = $('<div class="note-book-content">')
@@ -139,9 +172,14 @@ async function renderNote(note) {
     const $card = $('<div class="note-book-card">')
         .attr('data-note-id', note.noteId)
         .css("flex-basis", ZOOMS[zoomLevel].width)
-        .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(notePath, {showTooltip: false})))
+        .append(
+            $('<h5 class="note-book-title">')
+                .append('<span class="note-expander bx bx-chevron-right"></span>')
+                .append(await linkService.createNoteLink(notePath, {showTooltip: false}))
+        )
         .append($content);
 
+    if (renderContent) {
         try {
             const {type, renderedContent} = await noteContentRenderer.getRenderedContent(note);
 
@@ -168,6 +206,7 @@ async function renderNote(note) {
                 .append($('<div class="note-book-children-content">'))
             );
         }
+    }
 
     return $card;
 }

src/public/app/widgets/type_widgets/book.js

@@ -8,6 +8,8 @@ const TPL = `
         height: 100%;
         padding: 0 10px 10px 10px;
         position: relative;
+        display: flex;
+        flex-direction: column;
     }
     
     .note-book-auto-message {
@@ -19,8 +21,9 @@ const TPL = `
         margin-top: 5px;
     }
     
-    .note-book-content {
+    .note-detail-book-content {
         flex-grow: 1;
+        min-height: 0;
     }
     </style>