button changes and book properties

bin/build-server.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 PKG_DIR=dist/trilium-linux-x64-server
-NODE_VERSION=14.16.1
+NODE_VERSION=14.17.0
 
 if [ "$1" != "DONTCOPY" ]
 then

src/public/app/layouts/desktop_layout.js

@@ -34,6 +34,7 @@ import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
 import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
 import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
+import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -102,6 +103,7 @@ export default class DesktopLayout {
                             new CollapsibleSectionContainer()
                                 .section(new SearchDefinitionWidget())
                                 .section(new BasicPropertiesWidget())
+                                .section(new BookPropertiesWidget())
                                 .section(new NotePropertiesWidget())
                                 .section(new FilePropertiesWidget())
                                 .section(new ImagePropertiesWidget())

src/public/app/services/note_list_renderer.js

@@ -132,30 +132,6 @@ const TPL = `
     }
     </style>
     
-    <div class="btn-group floating-button" style="right: 20px; top: 10px;">
-        <button type="button"
-                class="collapse-all-button btn icon-button bx bx-layer-minus"
-                title="Collapse all notes"></button>
-
-        &nbsp;
-        
-        <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-wrapper">
         <div class="note-list-pager"></div>
     
@@ -202,26 +178,6 @@ class NoteListRenderer {
 
         this.$noteList.addClass(this.viewType + '-view');
 
-        this.$noteList.find('.list-view-button').on('click', () => this.toggleViewType('list'));
-        this.$noteList.find('.grid-view-button').on('click', () => this.toggleViewType('grid'));
-
-        this.$noteList.find('.expand-children-button').on('click', async () => {
-            if (!this.parentNote.hasLabel('expanded')) {
-                await attributeService.addLabel(this.parentNote.noteId, 'expanded');
-            }
-
-            await this.renderList();
-        });
-
-        this.$noteList.find('.collapse-all-button').on('click', async () => {
-            // owned is important - we shouldn't remove inherited expanded labels
-            for (const expandedAttr of this.parentNote.getOwnedLabels('expanded')) {
-                await attributeService.removeAttributeById(this.parentNote.noteId, expandedAttr.attributeId);
-            }
-
-            await this.renderList();
-        });
-
         this.showNotePath = showNotePath;
     }
 
@@ -235,23 +191,6 @@ class NoteListRenderer {
         return new Set(includedLinks.map(rel => rel.value));
     }
 
-    async toggleViewType(type) {
-        if (type !== 'list' && type !== 'grid') {
-            throw new Error(`Invalid view type ${type}`);
-        }
-
-        this.viewType = type;
-
-        this.$noteList
-            .removeClass('grid-view')
-            .removeClass('list-view')
-            .addClass(this.viewType + '-view');
-
-        await attributeService.setLabel(this.parentNote.noteId, 'viewType', type);
-
-        await this.renderList();
-    }
-
     async renderList() {
         if (this.noteIds.length === 0) {
             this.$noteList.hide();

src/public/app/widgets/containers/collapsible_section_container.js

@@ -62,6 +62,10 @@ const TPL = `
     
     .section-button-container .bx {
         padding: 5px;
+        font-size: 150%;
+        position: relative;
+        top: -3px;
+        margin-right: 5px;
     }
     
     .section-body {
@@ -207,4 +211,14 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
     refreshSectionContainerCommand() {
         this.refreshWithNote(this.note, true);
     }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
+            // note type influences the list of available sections the most
+            // check for type is so that we don't update on each title rename
+            this.lastNoteType = this.note.type;
+
+            this.refresh();
+        }
+    }
 }

src/public/app/widgets/note_list.js

@@ -92,4 +92,12 @@ export default class NoteListWidget extends NoteContextAwareWidget {
             this.refresh();
         }
     }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) {
+            this.shownNoteId = null; // force render
+
+            this.checkRenderStatus();
+        }
+    }
 }

src/public/app/widgets/note_tree.js

@@ -36,26 +36,33 @@ const TPL = `
         padding-bottom: 35px;
         padding-top: 5px;
     }
-        
+    
-    .collapse-tree-button {
+    button.tree-floating-button {
-        position: absolute;
+        font-size: 1.5em;
-        bottom: 10px;
+        padding: 2px;
-        right: 80px;
+        max-height: 34px;
+        color: var(--button-text-color);
+        border-radius: var(--button-border-radius);
+        border: 1px solid transparent;
         z-index: 100;
+        position: absolute;
+        bottom: 13px;
+    }
+    
+    button.tree-floating-button:hover {
+        border: 1px solid var(--button-border-color);
+    }
+    
+    .collapse-tree-button {
+        right: 100px;
     }
     
     .scroll-to-active-note-button {
-        position: absolute;
+        right: 55px;
-        bottom: 10px;
-        right: 45px;
-        z-index: 100;
     }
     
     .tree-settings-button {
-        position: absolute;
-        bottom: 10px;
         right: 10px;
-        z-index: 100;
     }
     
     .tree-settings-popup {
@@ -65,16 +72,23 @@ const TPL = `
         border: 1px solid var(--main-border-color); 
         padding: 20px; 
         z-index: 1000;
-        width: 320px; 
+        width: 340px; 
         border-radius: 10px;
     }
     </style>
     
-    <button class="btn btn-sm icon-button bx bx-layer-minus collapse-tree-button" title="Collapse note tree" data-trigger-command="collapseTree"></button>
+    <div class="tree"></div>
     
-    <button class="btn btn-sm icon-button bx bx-crosshair scroll-to-active-note-button" title="Scroll to active note" data-trigger-command="scrollToActiveNote"></button>
+    <button class="tree-floating-button bx bx-layer-minus collapse-tree-button" 
+            title="Collapse note tree" 
+            data-trigger-command="collapseTree"></button>
     
-    <button class="btn btn-sm icon-button bx bx-cog tree-settings-button" title="Tree settings"></button>
+    <button class="tree-floating-button bx bx-crosshair scroll-to-active-note-button" 
+            title="Scroll to active note" 
+            data-trigger-command="scrollToActiveNote"></button>
+    
+    <button class="tree-floating-button bx bx-cog tree-settings-button" 
+            title="Tree settings"></button>
     
     <div class="tree-settings-popup">
         <div class="form-check">
@@ -107,8 +121,6 @@ const TPL = `
     
         <button class="btn btn-sm btn-primary save-tree-settings-button" type="submit">Save & apply changes</button>
     </div>
-    
-    <div class="tree"></div>
 </div>
 `;
 

src/public/app/widgets/type_property_widgets/basic_properties.js

@@ -6,7 +6,7 @@ const TPL = `
 <div class="basic-properties-widget">
     <style>
         .basic-properties-widget {
-            padding: 12px;
+            padding: 12px 12px 6px 12px;
             display: flex;
             align-items: baseline;
         }

src/public/app/widgets/type_property_widgets/book_properties.js

@@ -0,0 +1,106 @@
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import server from "../../services/server.js";
+import attributeService from "../../services/attributes.js";
+
+const TPL = `
+<div class="book-properties-widget">
+    <style>
+        .book-properties-widget {
+            padding: 12px 12px 6px 12px;
+            display: flex;
+        }
+        
+        .book-properties-widget > * {
+            margin-right: 15px;
+        }
+    </style>
+
+    <div style="display: flex; align-items: baseline">
+        <span style="white-space: nowrap">View type:&nbsp; &nbsp;</span>
+        
+        <select class="view-type-select form-control form-control-sm">
+            <option value="grid">Grid</option>
+            <option value="list">List</option>
+        </select>
+    </div>
+    
+    <button type="button"
+            class="collapse-all-button btn btn-sm"
+            title="Collapse all notes">
+    
+        <span class="bx bx-layer-minus"></span>
+        
+        Collapse
+    </button>
+
+    <button type="button"
+            class="expand-children-button btn btn-sm"
+            title="Expand all children">
+        <span class="bx bx-move-vertical"></span>
+        
+        Expand
+    </button>
+</div>
+`;
+export default class BookPropertiesWidget extends NoteContextAwareWidget {
+    static getType() { return "book-properties"; }
+
+    isEnabled() {
+        return this.note && this.note.type === 'book';
+    }
+
+    getTitle() {
+        return {
+            show: this.isEnabled(),
+            activate: true,
+            title: 'Book Properties',
+            icon: 'bx bx-book'
+        };
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.overflowing();
+
+        this.$viewTypeSelect = this.$widget.find('.view-type-select');
+        this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));
+
+        this.$expandChildrenButton = this.$widget.find('.expand-children-button');
+        this.$expandChildrenButton.on('click', async () => {
+            if (!this.note.hasLabel('expanded')) {
+                await attributeService.addLabel(this.noteId, 'expanded');
+            }
+        });
+
+        this.$collapseAllButton = this.$widget.find('.collapse-all-button');
+        this.$collapseAllButton.on('click', async () => {
+            // owned is important - we shouldn't remove inherited expanded labels
+            for (const expandedAttr of this.note.getOwnedLabels('expanded')) {
+                await attributeService.removeAttributeById(this.noteId, expandedAttr.attributeId);
+            }
+        });
+    }
+
+    async refreshWithNote(note) {
+        const viewType = this.note.getLabelValue('viewType') || 'grid';
+
+        this.$viewTypeSelect.val(viewType);
+
+        this.$expandChildrenButton.toggle(viewType === 'list');
+        this.$collapseAllButton.toggle(viewType === 'list');
+    }
+
+    async toggleViewType(type) {
+        if (type !== 'list' && type !== 'grid') {
+            throw new Error(`Invalid view type ${type}`);
+        }
+
+        await attributeService.setLabel(this.noteId, 'viewType', type);
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) {
+            this.refresh();
+        }
+    }
+}

src/public/stylesheets/style.css

@@ -269,12 +269,6 @@ div.ui-tooltip {
     opacity: 0.4;
 }
 
-button.icon-button {
-    font-size: 1.5em;
-    padding: 2px;
-    max-height: 34px;
-}
-
 .ck.ck-block-toolbar-button {
     transform: translateX(7px);
     color: var(--muted-text-color);
@@ -893,14 +887,15 @@ ul.fancytree-container li {
 
 .button-widget .bx {
     font-size: 120%;
-    display: inline-block;
+
-    position: relative;
-    padding: 15px 15px;
-    cursor: pointer;
 }
 
 #launcher-pane .button-widget .bx {
     font-size: 150%;
+    display: inline-block;
+    position: relative;
+    padding: 15px 15px;
+    cursor: pointer;
 }
 
 .button-widget:hover .bx {