moved note actions button into section container

src/public/app/layouts/desktop_layout.js

@@ -2,24 +2,12 @@ import FlexContainer from "../widgets/containers/flex_container.js";
 import GlobalMenuWidget from "../widgets/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
-import StandardTopWidget from "../widgets/standard_top_widget.js";
 import SidePaneContainer from "../widgets/containers/side_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteContextCachingWidget from "../widgets/note_context_caching_widget.js";
-import NotePathsWidget from "../widgets/note_paths.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import OwnedAttributeListWidget from "../widgets/type_property_widgets/owned_attribute_list.js";
-import NoteTypeWidget from "../widgets/note_type.js";
 import NoteActionsWidget from "../widgets/note_actions.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
-import NoteInfoWidget from "../widgets/collapsible_widgets/note_info.js";
-import CalendarWidget from "../widgets/collapsible_widgets/calendar.js";
-import LinkMapWidget from "../widgets/collapsible_widgets/link_map.js";
-import NoteRevisionsWidget from "../widgets/collapsible_widgets/note_revisions.js";
-import SimilarNotesWidget from "../widgets/similar_notes.js";
-import WhatLinksHereWidget from "../widgets/collapsible_widgets/what_links_here.js";
-import SidePaneToggles from "../widgets/side_pane_toggles.js";
-import EditedNotesWidget from "../widgets/collapsible_widgets/edited_notes.js";
 import CollapsibleSectionContainer from "../widgets/containers/collapsible_section_container.js";
 import PromotedAttributesWidget from "../widgets/type_property_widgets/promoted_attributes.js";
 import InheritedAttributesWidget from "../widgets/type_property_widgets/inherited_attribute_list.js";
@@ -194,7 +182,6 @@ export default class DesktopLayout {
                             .overflowing()
                             .child(new NoteIconWidget())
                             .child(new NoteTitleWidget())
-                            .child(new NoteActionsWidget().hideInZenMode())
                             .child(new ButtonWidget()
                                 .icon("bx-window-open bx-rotate-90")
                                 .title("Create new pane")
@@ -204,13 +191,14 @@ export default class DesktopLayout {
                         )
                         .child(
                             new CollapsibleSectionContainer()
-                                .child(new SearchDefinitionWidget())
-                                .child(new NotePropertiesWidget())
-                                .child(new FilePropertiesWidget())
-                                .child(new ImagePropertiesWidget())
-                                .child(new PromotedAttributesWidget())
-                                .child(new OwnedAttributeListWidget())
-                                .child(new InheritedAttributesWidget())
+                                .section(new SearchDefinitionWidget())
+                                .section(new NotePropertiesWidget())
+                                .section(new FilePropertiesWidget())
+                                .section(new ImagePropertiesWidget())
+                                .section(new PromotedAttributesWidget())
+                                .section(new OwnedAttributeListWidget())
+                                .section(new InheritedAttributesWidget())
+                                .button(new NoteActionsWidget())
                         )
                             .child(new NoteUpdateStatusWidget())
                         .child(

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

@@ -7,13 +7,16 @@ const TPL = `
         margin-bottom: 5px;  
     }
     
+    .section-top-row {
+        display: flex;
+    }
+    
     .section-title-container {
         display: flex;
         flex-direction: row;
         justify-content: center;
-        margin-top: 7px;
         margin-left: 10px;
-        margin-right: 10px;
+        flex-grow: 1;
     }
     
     .section-title {
@@ -51,6 +54,16 @@ const TPL = `
         flex-grow: 1;
     }
     
+    .section-button-container {
+        border-bottom: 1px solid var(--main-border-color); 
+        margin-right: 10px;
+    }
+    
+    .section-button-container .bx {
+        position: relative;
+        top: 6px;
+    }
+    
     .section-body {
         display: none;
         border-bottom: 1px solid var(--main-border-color);
@@ -71,7 +84,11 @@ const TPL = `
     }
     </style>
 
-    <div class="section-title-container"></div>
+    <div class="section-top-row">
+        <div class="section-title-container"></div>
+        <div class="section-button-container"></div>
+    </div>
+    
     <div class="section-body-container"></div>
 </div>`;
 
@@ -79,26 +96,22 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
     constructor() {
         super();
 
-        this.children = [];
-
-        this.positionCounter = 10;
+        this.sectionWidgets = [];
+        this.buttonWidgets = [];
     }
 
-    child(...components) {
-        if (!components) {
-            return this;
-        }
+    section(widget) {
+        super.child(widget);
 
-        super.child(...components);
+        this.sectionWidgets.push(widget);
 
-        for (const component of components) {
-            if (!component.position) {
-                component.position = this.positionCounter;
-                this.positionCounter += 10;
-            }
-        }
+        return this;
+    }
 
-        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
+    button(widget) {
+        super.child(widget);
+
+        this.buttonWidgets.push(widget);
 
         return this;
     }
@@ -108,16 +121,21 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
         this.overflowing();
 
         this.$titleContainer = this.$widget.find('.section-title-container');
+        this.$buttonContainer = this.$widget.find('.section-button-container');
         this.$bodyContainer = this.$widget.find('.section-body-container');
 
-        for (const widget of this.children) {
+        for (const sectionWidget of this.sectionWidgets) {
             this.$bodyContainer.append(
                 $('<div class="section-body">')
-                    .attr('data-section-component-id', widget.componentId)
-                    .append(widget.render())
+                    .attr('data-section-component-id', sectionWidget.componentId)
+                    .append(sectionWidget.render())
             );
         }
 
+        for (const buttonWidget of this.buttonWidgets) {
+            this.$buttonContainer.append(buttonWidget.render());
+        }
+
         this.$titleContainer.on('click', '.section-title-real', e => {
             const $sectionTitle = $(e.target).closest('.section-title-real');
 
@@ -145,15 +163,15 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
 
         this.$titleContainer.empty().append('<div class="section-title section-title-empty">');
 
-        for (const widget of this.children) {
-            const ret = widget.getTitle(note);
+        for (const sectionWidget of this.sectionWidgets) {
+            const ret = sectionWidget.getTitle(note);
 
             if (!ret.show) {
                 continue;
             }
 
             const $sectionTitle = $('<div class="section-title section-title-real">')
-                .attr('data-section-component-id', widget.componentId)
+                .attr('data-section-component-id', sectionWidget.componentId)
                 .append($('<span class="section-title-icon">')
                             .addClass(ret.icon)
                             .attr("title", ret.title))
@@ -167,7 +185,7 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
                 $sectionToActivate = $sectionTitle;
             }
 
-            if (this.lastActiveComponentId === widget.componentId) {
+            if (this.lastActiveComponentId === sectionWidget.componentId) {
                 $lastActiveSection = $sectionTitle;
             }
         }

src/public/app/widgets/note_tree.js

@@ -580,7 +580,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             node.setExpanded(branch.isExpanded, {noEvents: true, noAnimation: true});
         }
 
-        node.getTitle();
+        node.renderTitle();
     }
 
     /**