...

17 files changed, 135 insertions, 20 deletions

diff --git a/assets/cru/theme_builder/ThemeResources.xml b/assets/cru/theme_builder/ThemeResources.xml
index e39cc232..a61a59f8 100644
--- a/assets/cru/theme_builder/ThemeResources.xml
+++ b/assets/cru/theme_builder/ThemeResources.xml
@@ -3,6 +3,24 @@
         <Font size="16" />
     </Resource>
 
+    <Resource key="cru.theme_builder.icon-button.style">
+        <StyleRuleSet>
+            <StyleRule>
+                <NoCondition />
+                <PreferredSizeStyler width="30" height="20" />
+                <BorderStyler>
+                    <BorderStyle>
+                        <Thickness value="0" />
+                    </BorderStyle>
+                </BorderStyler>
+                <MarginStyler value="10 0 0 0" />
+                <CursorStyler>
+                    <Cursor value="hand" />
+                </CursorStyler>
+            </StyleRule>
+        </StyleRuleSet>
+    </Resource>
+
     <Resource key="cru.theme_builder.color_cube.style">
         <StyleRuleSet>
             <StyleRule>
diff --git a/include/cru/ui/components/PopupButton.h b/include/cru/ui/components/PopupButton.h
index 38109fbe..37420ff6 100644
--- a/include/cru/ui/components/PopupButton.h
+++ b/include/cru/ui/components/PopupButton.h
@@ -15,9 +15,15 @@ class CRU_UI_API PopupMenuTextButton : public Component {
  public:
   ui::controls::Control* GetRootControl() override { return &button_; }
 
+  ui::controls::Button* GetButton() { return &button_; }
+
   String GetButtonText() { return button_text_.GetText(); }
   void SetButtonText(String text) { button_text_.SetText(std::move(text)); }
 
+  void SetButtonTextColor(const Color& color) {
+    button_text_.SetTextColor(color);
+  }
+
   void SetMenuItems(std::vector<String> items);
 
   IEvent<Index>* MenuItemSelectedEvent() { return &menu_item_selected_event_; }
diff --git a/include/cru/ui/controls/TextBlock.h b/include/cru/ui/controls/TextBlock.h
index dc47d00a..e43d472f 100644
--- a/include/cru/ui/controls/TextBlock.h
+++ b/include/cru/ui/controls/TextBlock.h
@@ -3,6 +3,7 @@
 
 #include "../render/TextRenderObject.h"
 #include "TextHostControlService.h"
+#include "cru/platform/graphics/Brush.h"
 
 namespace cru::ui::controls {
 class CRU_UI_API TextBlock : public NoChildControl,
@@ -33,6 +34,14 @@ class CRU_UI_API TextBlock : public NoChildControl,
   bool IsSelectable() const;
   void SetSelectable(bool value);
 
+  std::shared_ptr<platform::graphics::IBrush> GetTextBrush() const {
+    return text_render_object_->GetBrush();
+  }
+  void SetTextBrush(std::shared_ptr<platform::graphics::IBrush> brush) {
+    text_render_object_->SetBrush(std::move(brush));
+  }
+  void SetTextColor(const Color& color);
+
   gsl::not_null<render::TextRenderObject*> GetTextRenderObject() override;
   render::ScrollRenderObject* GetScrollRenderObject() override {
     return nullptr;
diff --git a/include/cru/ui/render/TextRenderObject.h b/include/cru/ui/render/TextRenderObject.h
index 079c5680..16aff29d 100644
--- a/include/cru/ui/render/TextRenderObject.h
+++ b/include/cru/ui/render/TextRenderObject.h
@@ -1,6 +1,7 @@
 #pragma once
 #include "RenderObject.h"
 
+#include <memory>
 #include <string>
 
 namespace cru::ui::render {
@@ -37,6 +38,7 @@ class CRU_UI_API TextRenderObject : public RenderObject {
   String GetText() const;
   void SetText(String new_text);
 
+  std::shared_ptr<platform::graphics::IBrush> GetBrush() { return brush_; }
   void SetBrush(std::shared_ptr<platform::graphics::IBrush> new_brush);
 
   std::shared_ptr<platform::graphics::IFont> GetFont() const;
diff --git a/src/theme_builder/components/StyleRuleEditor.cpp b/src/theme_builder/components/StyleRuleEditor.cpp
index aa2806b1..eefe9451 100644
--- a/src/theme_builder/components/StyleRuleEditor.cpp
+++ b/src/theme_builder/components/StyleRuleEditor.cpp
@@ -1,17 +1,30 @@
 #include "StyleRuleEditor.h"
 #include "conditions/ConditionEditor.h"
+#include "cru/ui/ThemeManager.h"
 #include "cru/ui/style/StyleRule.h"
 
 namespace cru::theme_builder {
 StyleRuleEditor::StyleRuleEditor() {
-  main_layout_.SetFlexDirection(ui::controls::FlexDirection::Horizontal);
-  main_layout_.AddChild(&remove_button_);
+  main_layout_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
+  main_layout_.SetItemCrossAlign(ui::controls::FlexCrossAlignment::Start);
 
+  main_layout_.AddChild(&head_layout_);
+
+  label_.SetText(u"Style Rule");
+  head_layout_.AddChild(&label_);
+  head_layout_.AddChild(&remove_button_);
+
+  remove_button_.GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
   remove_button_.SetChild(&remove_button_text_);
-  remove_button_text_.SetText(u"X");
+  remove_button_text_.SetText(u"x");
+  remove_button_text_.SetTextColor(ui::colors::red);
 
-  main_layout_.AddChild(&right_layout_);
-  right_layout_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
+  main_layout_.AddChild(&body_layout_);
+  body_layout_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
+  body_layout_.SetItemCrossAlign(ui::controls::FlexCrossAlignment::Start);
+  body_layout_.SetMargin({20, 0, 0, 0});
 
   remove_button_.ClickEvent()->AddSpyOnlyHandler(
       [this] { remove_event_.Raise(nullptr); });
@@ -26,13 +39,13 @@ ui::style::StyleRule StyleRuleEditor::GetValue() const {
 
 void StyleRuleEditor::SetValue(const ui::style::StyleRule& style_rule,
                                bool trigger_change) {
-  right_layout_.ClearChildren();
+  body_layout_.ClearChildren();
   condition_editor_ =
       components::conditions::CreateConditionEditor(style_rule.GetCondition());
   styler_editor_ =
       components::stylers::CreateStylerEditor(style_rule.GetStyler());
-  right_layout_.AddChild(condition_editor_->GetRootControl());
-  right_layout_.AddChild(styler_editor_->GetRootControl());
+  body_layout_.AddChild(condition_editor_->GetRootControl());
+  body_layout_.AddChild(styler_editor_->GetRootControl());
   condition_editor_->ChangeEvent()->AddSpyOnlyHandler(
       [this] { change_event_.Raise(nullptr); });
   styler_editor_->ChangeEvent()->AddSpyOnlyHandler(
diff --git a/src/theme_builder/components/StyleRuleEditor.h b/src/theme_builder/components/StyleRuleEditor.h
index 204b65b4..8cee966f 100644
--- a/src/theme_builder/components/StyleRuleEditor.h
+++ b/src/theme_builder/components/StyleRuleEditor.h
@@ -4,6 +4,7 @@
 #include "cru/ui/controls/Button.h"
 #include "cru/ui/controls/Control.h"
 #include "cru/ui/controls/FlexLayout.h"
+#include "cru/ui/controls/TextBlock.h"
 #include "cru/ui/style/StyleRule.h"
 #include "stylers/StylerEditor.h"
 
@@ -29,9 +30,11 @@ class StyleRuleEditor : public ui::components::Component {
 
  private:
   ui::controls::FlexLayout main_layout_;
+  ui::controls::TextBlock label_;
+  ui::controls::FlexLayout head_layout_;
   ui::controls::Button remove_button_;
   ui::controls::TextBlock remove_button_text_;
-  ui::controls::FlexLayout right_layout_;
+  ui::controls::FlexLayout body_layout_;
   std::unique_ptr<components::conditions::ConditionEditor> condition_editor_;
   std::unique_ptr<components::stylers::StylerEditor> styler_editor_;
 
diff --git a/src/theme_builder/components/conditions/CompoundConditionEditor.cpp b/src/theme_builder/components/conditions/CompoundConditionEditor.cpp
index b7f54f77..beede667 100644
--- a/src/theme_builder/components/conditions/CompoundConditionEditor.cpp
+++ b/src/theme_builder/components/conditions/CompoundConditionEditor.cpp
@@ -5,6 +5,9 @@
 #include "FocusConditionEditor.h"
 #include "NoConditionEditor.h"
 #include "cru/common/ClonablePtr.h"
+#include "cru/platform/Color.h"
+#include "cru/ui/ThemeManager.h"
+#include "cru/ui/controls/FlexLayout.h"
 #include "cru/ui/style/Condition.h"
 
 namespace cru::theme_builder::components::conditions {
@@ -14,8 +17,12 @@ CompoundConditionEditorChild::CompoundConditionEditorChild(
   container_.SetFlexDirection(ui::controls::FlexDirection::Horizontal);
   container_.AddChild(&remove_button_);
 
+  remove_button_.GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
   remove_button_.SetChild(&remove_button_text_);
-  remove_button_text_.SetText(u"-");
+  remove_button_text_.SetText(u"x");
+  remove_button_text_.SetTextColor(ui::colors::red);
 
   container_.AddChild(condition_editor_->GetRootControl());
 
@@ -29,8 +36,16 @@ CompoundConditionEditor::CompoundConditionEditor() {
   SetLabel(u"Compound Condition");
 
   GetContainer()->AddChild(&children_container_);
-  GetContainer()->AddChild(add_child_button_.GetRootControl());
+  children_container_.SetItemCrossAlign(
+      ui::controls::FlexCrossAlignment::Start);
+
+  GetHeadContainer()->AddChild(add_child_button_.GetRootControl());
+
+  add_child_button_.GetButton()->GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
   add_child_button_.SetButtonText(u"+");
+  add_child_button_.SetButtonTextColor(ui::colors::green);
   add_child_button_.SetMenuItems({u"And Condition", u"Or Condition",
                                   u"Click State Condition", u"Focus Condition",
                                   u"Checked Condition", u"No Condition"});
diff --git a/src/theme_builder/components/conditions/CompoundConditionEditor.h b/src/theme_builder/components/conditions/CompoundConditionEditor.h
index 771d694f..471087ae 100644
--- a/src/theme_builder/components/conditions/CompoundConditionEditor.h
+++ b/src/theme_builder/components/conditions/CompoundConditionEditor.h
@@ -43,8 +43,8 @@ class CompoundConditionEditor : public ConditionEditor {
                    bool trigger_change = true);
 
  private:
-  ui::controls::FlexLayout children_container_;
   ui::components::PopupMenuTextButton add_child_button_;
+  ui::controls::FlexLayout children_container_;
   std::vector<std::unique_ptr<CompoundConditionEditorChild>> children_;
 };
 
diff --git a/src/theme_builder/components/conditions/ConditionEditor.cpp b/src/theme_builder/components/conditions/ConditionEditor.cpp
index 2840b250..3babe19c 100644
--- a/src/theme_builder/components/conditions/ConditionEditor.cpp
+++ b/src/theme_builder/components/conditions/ConditionEditor.cpp
@@ -10,7 +10,10 @@
 namespace cru::theme_builder::components::conditions {
 ConditionEditor::ConditionEditor() {
   container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
-  container_.AddChild(&label_);
+  container_.AddChild(&head_container_);
+
+  head_container_.SetFlexDirection(ui::controls::FlexDirection::Horizontal);
+  head_container_.AddChild(&label_);
 }
 
 ConditionEditor::~ConditionEditor() {}
diff --git a/src/theme_builder/components/conditions/ConditionEditor.h b/src/theme_builder/components/conditions/ConditionEditor.h
index 426e6ba8..35bac560 100644
--- a/src/theme_builder/components/conditions/ConditionEditor.h
+++ b/src/theme_builder/components/conditions/ConditionEditor.h
@@ -16,6 +16,8 @@ class ConditionEditor : public Editor {
 
   ui::controls::FlexLayout* GetContainer() { return &container_; }
 
+  ui::controls::FlexLayout* GetHeadContainer() { return &head_container_; }
+
   String GetLabel() const { return label_.GetText(); }
   void SetLabel(String label) { label_.SetText(std::move(label)); }
 
@@ -23,6 +25,7 @@ class ConditionEditor : public Editor {
 
  private:
   ui::controls::FlexLayout container_;
+  ui::controls::FlexLayout head_container_;
   ui::controls::TextBlock label_;
 };
 
diff --git a/src/theme_builder/components/properties/CornerRadiusPropertyEditor.cpp b/src/theme_builder/components/properties/CornerRadiusPropertyEditor.cpp
index 91e2c614..fc86b0ed 100644
--- a/src/theme_builder/components/properties/CornerRadiusPropertyEditor.cpp
+++ b/src/theme_builder/components/properties/CornerRadiusPropertyEditor.cpp
@@ -1,12 +1,15 @@
 #include "CornerRadiusPropertyEditor.h"
 #include "cru/ui/Base.h"
+#include "cru/ui/controls/FlexLayout.h"
 
 namespace cru::theme_builder::components::properties {
 CornerRadiusPropertyEditor::CornerRadiusPropertyEditor() {
-  left_top_editor_.SetLabel(u"Left Top");
-  right_top_editor_.SetLabel(u"Right Top");
-  left_bottom_editor_.SetLabel(u"Left Bottom");
-  right_bottom_editor_.SetLabel(u"Right Bottom");
+  container_.SetItemCrossAlign(ui::controls::FlexCrossAlignment::Start);
+
+  left_top_editor_.SetLabel(u"⌜");
+  right_top_editor_.SetLabel(u"⌝");
+  left_bottom_editor_.SetLabel(u"⌞");
+  right_bottom_editor_.SetLabel(u"⌟");
 
   container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
   container_.AddChild(left_top_editor_.GetRootControl());
diff --git a/src/theme_builder/components/properties/OptionalPropertyEditor.h b/src/theme_builder/components/properties/OptionalPropertyEditor.h
index d7362d50..0f22616a 100644
--- a/src/theme_builder/components/properties/OptionalPropertyEditor.h
+++ b/src/theme_builder/components/properties/OptionalPropertyEditor.h
@@ -2,6 +2,7 @@
 #include "../Editor.h"
 #include "cru/ui/controls/CheckBox.h"
 #include "cru/ui/controls/FlexLayout.h"
+#include "cru/ui/controls/TextBlock.h"
 
 #include <optional>
 
@@ -12,7 +13,9 @@ class OptionalPropertyEditor : public Editor {
   using PropertyType = typename TEditor::PropertyType;
 
   OptionalPropertyEditor() {
+    container_.AddChild(&label_);
     container_.AddChild(&check_box_);
+    check_box_.SetMargin({0, 0, 10, 0});
     container_.AddChild(editor_.GetRootControl());
 
     editor_.ChangeEvent()->AddHandler([this](std::nullptr_t) {
@@ -25,6 +28,9 @@ class OptionalPropertyEditor : public Editor {
 
   ui::controls::Control* GetRootControl() override { return &container_; }
 
+  String GetLabel() const { return label_.GetText(); }
+  void SetLabel(String label) { label_.SetText(std::move(label)); }
+
   bool IsEnabled() const { return check_box_.IsChecked(); }
   void SetEnabled(bool enabled, bool trigger_change = true) {
     check_box_.SetChecked(enabled);
@@ -52,6 +58,7 @@ class OptionalPropertyEditor : public Editor {
 
  private:
   ui::controls::FlexLayout container_;
+  ui::controls::TextBlock label_;
   ui::controls::CheckBox check_box_;
   TEditor editor_;
 };
diff --git a/src/theme_builder/components/stylers/BorderStylerEditor.cpp b/src/theme_builder/components/stylers/BorderStylerEditor.cpp
index b2522786..81eb66d3 100644
--- a/src/theme_builder/components/stylers/BorderStylerEditor.cpp
+++ b/src/theme_builder/components/stylers/BorderStylerEditor.cpp
@@ -15,6 +15,11 @@ BorderStylerEditor::BorderStylerEditor() {
   GetContainer()->AddChild(foreground_brush_editor_.GetRootControl());
   GetContainer()->AddChild(background_brush_editor_.GetRootControl());
 
+  thickness_editor_.GetEditor()->SetLabel(u"Thickness");
+  brush_editor_.GetEditor()->SetLabel(u"Border");
+  foreground_brush_editor_.GetEditor()->SetLabel(u"Foreground");
+  background_brush_editor_.GetEditor()->SetLabel(u"Background");
+
   ConnectChangeEvent(corner_radius_editor_);
   ConnectChangeEvent(thickness_editor_);
   ConnectChangeEvent(brush_editor_);
diff --git a/src/theme_builder/components/stylers/CompoundStylerEditor.cpp b/src/theme_builder/components/stylers/CompoundStylerEditor.cpp
index ac1cc0ea..258eeb26 100644
--- a/src/theme_builder/components/stylers/CompoundStylerEditor.cpp
+++ b/src/theme_builder/components/stylers/CompoundStylerEditor.cpp
@@ -2,6 +2,7 @@
 #include "BorderStylerEditor.h"
 #include "CursorStylerEditor.h"
 #include "cru/common/ClonablePtr.h"
+#include "cru/ui/ThemeManager.h"
 #include "cru/ui/style/Styler.h"
 
 namespace cru::theme_builder::components::stylers {
@@ -11,8 +12,12 @@ CompoundStylerEditorChild::CompoundStylerEditorChild(
   container_.SetFlexDirection(ui::controls::FlexDirection::Horizontal);
   container_.AddChild(&remove_button_);
 
+  remove_button_.GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
   remove_button_.SetChild(&remove_button_text_);
-  remove_button_text_.SetText(u"X");
+  remove_button_text_.SetText(u"x");
+  remove_button_text_.SetTextColor(ui::colors::red);
 
   container_.AddChild(styler_editor_->GetRootControl());
 
@@ -24,10 +29,17 @@ CompoundStylerEditorChild::~CompoundStylerEditorChild() {}
 
 CompoundStylerEditor::CompoundStylerEditor() {
   SetLabel(u"Compound Styler");
-  children_container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
   GetContainer()->AddChild(&children_container_);
+  children_container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
+  children_container_.SetItemCrossAlign(
+      ui::controls::FlexCrossAlignment::Start);
 
+  GetHeadContainer()->AddChild(add_child_button_.GetRootControl());
   add_child_button_.SetButtonText(u"+");
+  add_child_button_.GetButton()->GetStyleRuleSet()->SetParent(
+      ui::ThemeManager::GetInstance()->GetResourceStyleRuleSet(
+          u"cru.theme_builder.icon-button.style"));
+  add_child_button_.SetButtonTextColor(ui::colors::green);
   add_child_button_.SetMenuItems({
       u"Compound Styler",
       u"Border Styler",
diff --git a/src/theme_builder/components/stylers/StylerEditor.cpp b/src/theme_builder/components/stylers/StylerEditor.cpp
index 030a3752..56dec813 100644
--- a/src/theme_builder/components/stylers/StylerEditor.cpp
+++ b/src/theme_builder/components/stylers/StylerEditor.cpp
@@ -5,12 +5,17 @@
 #include "MarginStylerEditor.h"
 #include "PaddingStylerEditor.h"
 #include "PreferredSizeStylerEditor.h"
+#include "cru/ui/controls/FlexLayout.h"
+#include "cru/ui/render/FlexLayoutRenderObject.h"
 #include "cru/ui/style/Styler.h"
 
 namespace cru::theme_builder::components::stylers {
 StylerEditor::StylerEditor() {
   container_.SetFlexDirection(ui::controls::FlexDirection::Vertical);
-  container_.AddChild(&label_);
+  container_.AddChild(&head_container_);
+  container_.SetItemCrossAlign(ui::controls::FlexCrossAlignment::Start);
+  head_container_.SetFlexDirection(ui::render::FlexDirection::Horizontal);
+  head_container_.AddChild(&label_);
 }
 
 StylerEditor::~StylerEditor() {}
diff --git a/src/theme_builder/components/stylers/StylerEditor.h b/src/theme_builder/components/stylers/StylerEditor.h
index 02005481..482cce7d 100644
--- a/src/theme_builder/components/stylers/StylerEditor.h
+++ b/src/theme_builder/components/stylers/StylerEditor.h
@@ -15,6 +15,8 @@ class StylerEditor : public Editor {
 
   ui::controls::FlexLayout* GetContainer() { return &container_; }
 
+  ui::controls::FlexLayout* GetHeadContainer() { return &head_container_; }
+
   String GetLabel() const { return label_.GetText(); }
   void SetLabel(String label) { label_.SetText(std::move(label)); }
 
@@ -22,6 +24,7 @@ class StylerEditor : public Editor {
 
  private:
   ui::controls::FlexLayout container_;
+  ui::controls::FlexLayout head_container_;
   ui::controls::TextBlock label_;
 };
 
diff --git a/src/ui/controls/TextBlock.cpp b/src/ui/controls/TextBlock.cpp
index f3d2405b..79c66865 100644
--- a/src/ui/controls/TextBlock.cpp
+++ b/src/ui/controls/TextBlock.cpp
@@ -1,5 +1,8 @@
 #include "cru/ui/controls/TextBlock.h"
 
+#include "../Helper.h"
+#include "cru/platform/graphics/Factory.h"
+#include "cru/platform/gui/UiApplication.h"
 #include "cru/ui/ThemeManager.h"
 #include "cru/ui/render/CanvasRenderObject.h"
 #include "cru/ui/render/StackLayoutRenderObject.h"
@@ -39,6 +42,11 @@ bool TextBlock::IsSelectable() const { return service_->IsEnabled(); }
 
 void TextBlock::SetSelectable(bool value) { service_->SetEnabled(value); }
 
+void TextBlock::SetTextColor(const Color& color) {
+  text_render_object_->SetBrush(
+      GetUiApplication()->GetGraphicsFactory()->CreateSolidColorBrush(color));
+}
+
 gsl::not_null<render::TextRenderObject*> TextBlock::GetTextRenderObject() {
   return text_render_object_.get();
 }