Using UISection for collapsable data sections in inspector

Data/AtomicEditor/Resources/EditorData/AtomicEditor/typescript/ui/inspector/NodeInspector.ts

@@ -27,23 +27,21 @@ class NodeInspector extends ScriptWidget {
     nodeLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
     nodeLayout.layoutParams = nlp;
 
-    var nodeContainer = new Atomic.UIContainer();
-    nodeContainer.gravity = Atomic.UI_GRAVITY_ALL;
-    nodeContainer.skinBg = "InspectorTopLayout";
-
     // node attr layout
 
+    var nodeSection = new Atomic.UISection();
+    nodeSection.text = "Node";
+    nodeSection.value = 1;
+    //nodeSection.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
+    //nodeSection.skinBg = "InspectorTextLabel";
+    nodeLayout.addChild(nodeSection);
+
     var attrsVerticalLayout = new Atomic.UILayout(Atomic.UI_AXIS_Y);
-    attrsVerticalLayout.gravity = Atomic.UI_GRAVITY_ALL;
+    attrsVerticalLayout.spacing = 3;
     attrsVerticalLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
-    nodeContainer.addChild(attrsVerticalLayout);
-
-    var nodeLabel = new Atomic.UITextField();
-    nodeLabel.textAlign = Atomic.UI_TEXT_ALIGN_LEFT;
-    nodeLabel.text = "Node";
-    nodeLabel.skinBg = "InspectorTextLabel";
+    attrsVerticalLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
 
-    attrsVerticalLayout.addChild(nodeLabel);
+    nodeSection.contentRoot.addChild(attrsVerticalLayout);
 
     var attrs = node.getAttributes();
 
@@ -76,12 +74,8 @@ class NodeInspector extends ScriptWidget {
 
       attrsVerticalLayout.addChild(attrLayout);
 
-
-
     }
 
-    nodeLayout.addChild(nodeContainer);
-
     this.addChild(nodeLayout);
 
   }

Source/Atomic/UI/UI.cpp

@@ -12,6 +12,7 @@
 #include <TurboBadger/tb_editfield.h>
 #include <TurboBadger/tb_select.h>
 #include <TurboBadger/tb_tab_container.h>
+#include <TurboBadger/tb_toggle_container.h>
 #include <TurboBadger/image/tb_image_widget.h>
 
 void register_tbbf_font_renderer();
@@ -46,6 +47,7 @@ using namespace tb;
 #include "UISceneView.h"
 #include "UIDragDrop.h"
 #include "UIContainer.h"
+#include "UISection.h"
 
 namespace tb
 {
@@ -464,6 +466,14 @@ UIWidget* UI::WrapWidget(tb::TBWidget* widget)
 
     // this is order dependent as we're using IsOfType which also works if a base class
 
+    if (widget->IsOfType<TBSection>())
+    {
+        UISection* section = new UISection(context_, false);
+        section->SetWidget(widget);
+        widgetWrap_[widget] = section;
+        return section;
+    }
+
     if (widget->IsOfType<TBContainer>())
     {
         UIContainer* container = new UIContainer(context_, false);

Source/Atomic/UI/UISection.cpp

@@ -0,0 +1,37 @@
+
+#include <TurboBadger/tb_widgets.h>
+#include <TurboBadger/tb_widgets_common.h>
+#include <TurboBadger/tb_toggle_container.h>
+
+#include <Atomic/IO/Log.h>
+
+#include "UIEvents.h"
+#include "UI.h"
+#include "UISection.h"
+
+using namespace tb;
+
+namespace Atomic
+{
+
+UISection::UISection(Context* context, bool createWidget) : UIWidget(context, false)
+{
+    if (createWidget)
+    {
+        widget_ = new TBSection();
+        widget_->SetDelegate(this);
+        GetSubsystem<UI>()->WrapWidget(this, widget_);
+    }
+}
+
+UISection::~UISection()
+{
+
+}
+
+bool UISection::OnEvent(const tb::TBWidgetEvent &ev)
+{
+    return UIWidget::OnEvent(ev);
+}
+
+}

Source/Atomic/UI/UISection.h

@@ -0,0 +1,27 @@
+
+#pragma once
+
+#include "UIWidget.h"
+
+namespace Atomic
+{
+
+
+class UISection : public UIWidget
+{
+    OBJECT(UISection)
+
+public:
+
+    UISection(Context* context, bool createWidget = true);
+    virtual ~UISection();
+
+protected:
+
+    virtual bool OnEvent(const tb::TBWidgetEvent &ev);
+
+private:
+
+};
+
+}

Source/AtomicJS/Javascript/JSUI.cpp

@@ -53,6 +53,7 @@ JSUI::JSUI(Context* context) : Object(context),
     uiTypes_["UITabContainer"] = true;
     uiTypes_["UISceneView"] = true;
     uiTypes_["UIContainer"] = true;
+    uiTypes_["UISection"] = true;
 
 }
 

Source/AtomicJS/Packages/Atomic/UI.json

@@ -8,7 +8,7 @@
 								"UIImageWidget", "UIClickLabel", "UICheckBox", "UIMenuItem", "UIMenuItemSource",
 								"UISelectList", "UIListView", "UIMessageWindow", "UILayoutParams", "UIFontDescription",
 								"UISkinImage", "UITabContainer", "UISceneView", "UIPreferredSize", "UIDragObject",
-								"UIContainer"],
+								"UIContainer", "UISection"],
 	"overloads" : {
 	}
 }