reworked section container to be icon based

src/public/app/services/branches.js

@@ -120,7 +120,7 @@ async function moveNodeUpInHierarchy(node) {
 
     if (!hoistedNoteService.isTopLevelNode(node) && node.getParent().getChildren().length <= 1) {
         node.getParent().folder = false;
-        node.getParent().renderTitle();
+        node.getParent().getTitle();
     }
 }
 

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

@@ -23,6 +23,12 @@ const TPL = `
         border-bottom: 1px solid var(--main-border-color); 
     }
 
+    .section-title .bx {
+        font-size: 170%;
+        position: relative;
+        top: 6px;
+    }
+    
     .section-title.active {
         color: var(--main-text-color);
         border-bottom: 1px solid var(--main-text-color);
@@ -37,6 +43,10 @@ const TPL = `
     }
     
     .section-title-empty {
+        flex-basis: 20px;
+    }
+    
+    .section-title-empty:last-of-type {
         flex-shrink: 1;
         flex-grow: 1;
     }
@@ -51,6 +61,14 @@ const TPL = `
     .section-body.active {
         display: block;
     }
+    
+    .section-title-label {
+        display: none;
+    }
+    
+    .section-title.active .section-title-label {
+        display: inline;
+    }
     </style>
 
     <div class="section-title-container"></div>
@@ -128,7 +146,7 @@ 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.renderTitle(note);
+            const ret = widget.getTitle(note);
 
             if (!ret.show) {
                 continue;
@@ -136,7 +154,11 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
 
             const $sectionTitle = $('<div class="section-title section-title-real">')
                 .attr('data-section-component-id', widget.componentId)
-                .append(ret.$title);
+                .append($('<span class="section-title-icon">')
+                            .addClass(ret.icon)
+                            .attr("title", ret.title))
+                .append(" ")
+                .append($('<span class="section-title-label">').text(ret.title));
 
             this.$titleContainer.append($sectionTitle);
             this.$titleContainer.append('<div class="section-title section-title-empty">');
@@ -150,6 +172,8 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
             }
         }
 
+        this.$titleContainer.find('.section-title-icon').tooltip();
+
         if (!$sectionToActivate) {
             $sectionToActivate = $lastActiveSection;
         }

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.renderTitle();
+        node.getTitle();
     }
 
     /**

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

@@ -61,11 +61,12 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
         return this.note && this.note.type === 'file';
     }
 
-    renderTitle(note) {
+    getTitle() {
         return {
             show: this.isEnabled(),
             activate: true,
-            $title: 'File'
+            title: 'File',
+            icon: 'bx bx-file'
         };
     }
 

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

@@ -43,11 +43,12 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         return this.note && this.note.type === 'image';
     }
 
-    renderTitle(note) {
+    getTitle(note) {
         return {
             show: this.isEnabled(),
             activate: true,
-            $title: 'Image'
+            title: 'Image',
+            icon: 'bx bx-image'
         };
     }
 

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

@@ -28,14 +28,11 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
         this.child(this.attributeDetailWidget);
     }
 
-    renderTitle(note) {
+    getTitle() {
-        const inheritedAttributes = this.getInheritedAttributes(note);
-
-        this.$title.text(`Inherited attrs (${inheritedAttributes.length})`);
-
         return {
             show: true,
-            $title: this.$title
+            title: "Inherited attributes",
+            icon: "bx bx-list-plus"
         };
     }
 
@@ -45,8 +42,6 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
 
         this.$container = this.$widget.find('.inherited-attributes-container');
         this.$widget.append(this.attributeDetailWidget.render());
-
-        this.$title = $('<div>');
     }
 
     async refreshWithNote(note) {

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

@@ -21,11 +21,12 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
         return this.note && !!this.note.getLabelValue('pageUrl');
     }
 
-    renderTitle(note) {
+    getTitle() {
         return {
             show: this.isEnabled(),
             activate: true,
-            $title: 'Info'
+            title: 'Info',
+            icon: 'bx bx-info-square'
         };
     }
 

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

@@ -31,14 +31,11 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
         this.child(this.attributeEditorWidget, this.attributeDetailWidget);
     }
 
-    renderTitle(note) {
+    getTitle() {
-        const ownedAttrs = note.getAttributes().filter(attr => attr.noteId === this.noteId && !attr.isAutoLink)
-
-        this.$title.text(`Owned attrs (${ownedAttrs.length})`);
-
         return {
             show: true,
-            $title: this.$title
+            title: "Owned attributes",
+            icon: "bx bx-list-check"
         };
     }
 
@@ -68,7 +65,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
         if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
             this.refreshWithNote(this.note, true);
 
-            this.renderTitle(this.note);
+            this.getTitle(this.note);
         }
     }
 }

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

@@ -39,23 +39,20 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
         this.$widget = $(TPL);
         this.overflowing();
         this.$container = this.$widget.find(".promoted-attributes-container");
-
-        this.$title = $('<div>');
     }
 
-    renderTitle(note) {
+    getTitle(note) {
         const promotedDefAttrs = note.getPromotedDefinitionAttributes();
 
         if (promotedDefAttrs.length === 0) {
             return { show: false };
         }
 
-        this.$title.text(`Promoted attrs (${promotedDefAttrs.length})`);
-
         return {
             show: true,
             activate: true,
-            $title: this.$title
+            title: "Promoted attributes",
+            icon: "bx bx-table"
         };
     }
 
@@ -292,7 +289,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
         if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
             this.refresh();
 
-            this.renderTitle(this.note);
+            this.getTitle(this.note);
             this.triggerCommand('refreshSectionContainer');
         }
     }

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

@@ -206,11 +206,12 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
         return this.note && this.note.type === 'search';
     }
 
-    renderTitle(note) {
+    getTitle() {
         return {
             show: this.isEnabled(),
             activate: true,
-            $title: 'Search'
+            title: 'Search',
+            icon: 'bx bx-search'
         };
     }