new CollapsibleSectionContainer WIP

src/public/app/widgets/abstract_container.js

@@ -0,0 +1,30 @@
+import BasicWidget from "./basic_widget.js";
+
+export default class AbstractContainer extends BasicWidget {
+    constructor() {
+        super();
+
+        this.children = [];
+
+        this.positionCounter = 10;
+    }
+
+    child(...components) {
+        if (!components) {
+            return this;
+        }
+
+        super.child(...components);
+
+        for (const component of components) {
+            if (!component.position) {
+                component.position = this.positionCounter;
+                this.positionCounter += 10;
+            }
+        }
+
+        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
+
+        return this;
+    }
+}

src/public/app/widgets/attribute_list.js

@@ -3,7 +3,6 @@ import AttributeDetailWidget from "./attribute_detail.js";
 import attributeRenderer from "../services/attribute_renderer.js";
 import AttributeEditorWidget from "./attribute_editor.js";
 import options from '../services/options.js';
-import PromotedAttributesWidget from "./promoted_attributes.js";
 
 const TPL = `
 <div class="attribute-list">
@@ -108,11 +107,15 @@ export default class AttributeListWidget extends TabAwareWidget {
     constructor() {
         super();
 
-        this.promotedAttributesWidget = new PromotedAttributesWidget().setParent(this);
         this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
         this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
 
-        this.child(this.promotedAttributesWidget, this.attributeEditorWidget, this.attributeDetailWidget);
+        this.child(this.attributeEditorWidget, this.attributeDetailWidget);
+    }
+
+    renderTitle() {
+        this.$title = $('<div>').text('Attribute list');
+        return this.$title;
     }
 
     doRender() {
@@ -159,25 +162,24 @@ export default class AttributeListWidget extends TabAwareWidget {
 
         this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
 
-        this.$widget.find('.promoted-attributes-placeholder').replaceWith(this.promotedAttributesWidget.render());
         this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
         this.$widget.append(this.attributeDetailWidget.render());
     }
 
     async refreshWithNote(note, updateOnly = false) {
         if (!updateOnly) {
-            const hasPromotedAttrs = this.promotedAttributesWidget.getPromotedDefinitionAttributes().length > 0;
-
-            if (hasPromotedAttrs) {
-                this.$promotedExpander.show();
-                this.$allAttrWrapper.toggle(options.is('promotedAttributesExpanded'));
-                this.$ownedAndInheritedWrapper.hide();
-                this.$inheritedAttributesWrapper.hide();
-            } else {
-                this.$promotedExpander.hide();
-                this.$allAttrWrapper.show();
-                this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded'));
-            }
+            // const hasPromotedAttrs = this.promotedAttributesWidget.getPromotedDefinitionAttributes().length > 0;
+            //
+            // if (hasPromotedAttrs) {
+            //     this.$promotedExpander.show();
+            //     this.$allAttrWrapper.toggle(options.is('promotedAttributesExpanded'));
+            //     this.$ownedAndInheritedWrapper.hide();
+            //     this.$inheritedAttributesWrapper.hide();
+            // } else {
+            //     this.$promotedExpander.hide();
+            //     this.$allAttrWrapper.show();
+            //     this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded'));
+            // }
         }
 
         const ownedAttributes = note.getOwnedAttributes().filter(attr => !attr.isAutoLink);

src/public/app/widgets/collapsible_section_container.js

@@ -0,0 +1,62 @@
+import AbstractContainer from "./abstract_container.js";
+
+const TPL = `
+<div class="section-container">
+    <style>
+    .section-title-container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        margin-top: 7px;
+    }
+    
+    .section-title {
+        padding-right: 10px;
+        padding-left: 10px;
+        color: var(--muted-text-color);
+        border-bottom: 1px solid var(--main-border-color); 
+    }
+    
+    .section-title:hover {
+        cursor: pointer;
+    }
+        
+    .section-title:hover {
+        color: var(--main-text-color);
+    }
+    
+    .section-title-empty {
+        flex-shrink: 1;
+        flex-grow: 1;
+    }
+    </style>
+
+    <div class="section-title-container"></div>
+    <div class="section-body-container"></div>
+</div>`;
+
+export default class CollapsibleSectionContainer extends AbstractContainer {
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+
+        this.$titleContainer = this.$widget.find('.section-title-container');
+        this.$bodyContainer = this.$widget.find('.section-body-container');
+
+        this.$titleContainer.append('<div class="section-title section-title-empty">');
+
+        for (const widget of this.children) {
+            this.$titleContainer.append(
+                $('<div class="section-title">')
+                    .append(widget.renderTitle())
+            );
+
+            this.$titleContainer.append('<div class="section-title section-title-empty">');
+
+            this.$bodyContainer.append(
+                $('<div class="section-body">')
+                    .append(widget.render())
+            );
+        }
+    }
+}

src/public/app/widgets/flex_container.js

@@ -1,6 +1,6 @@
-import BasicWidget from "./basic_widget.js";
+import AbstractContainer from "./abstract_container.js";
 
-export default class FlexContainer extends BasicWidget {
+export default class FlexContainer extends AbstractContainer {
     constructor(direction) {
         super();
 
@@ -9,29 +9,6 @@ export default class FlexContainer extends BasicWidget {
         }
 
         this.attrs.style = `display: flex; flex-direction: ${direction};`;
-
-        this.children = [];
-
-        this.positionCounter = 10;
-    }
-
-    child(...components) {
-        if (!components) {
-            return this;
-        }
-
-        super.child(...components);
-
-        for (const component of components) {
-            if (!component.position) {
-                component.position = this.positionCounter;
-                this.positionCounter += 10;
-            }
-        }
-
-        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
-
-        return this;
     }
 
     doRender() {

src/public/app/widgets/promoted_attributes.js

@@ -41,6 +41,11 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
         this.$container = this.$widget.find(".promoted-attributes-container");
     }
 
+    renderTitle() {
+        this.$title = $('<div>').text('Promoted attributes');
+        return this.$title;
+    }
+
     async refreshWithNote(note) {
         this.$container.empty();