diff --git a/TODO.md b/TODO.md
index dbf4869..b0efb2e 100644
--- a/TODO.md
+++ b/TODO.md
@@ -94,8 +94,10 @@
- Input propagation
- ~~Pass input to widgets.~~
- Add element focus logic, make them focusable with action inputs.
-- Basic input elements (button, text field, toggle).
+- Basic input elements (~~button~~, text field, toggle).
- Styling
- - Add style settings for UI panels (for buttons, labels, etc.).
+ - ~~Style sheet~~
+ - ~~Add style settings for UI panels (for buttons, labels, etc.).~~
+ - Animated styles
- Find a way to reference external assets in the style (fonts, textures).
- Create a default style for widgets.
diff --git a/Voile/Source/UI/Containers/Container.cs b/Voile/Source/UI/Containers/Container.cs
index 11f3e3b..8afb8b7 100644
--- a/Voile/Source/UI/Containers/Container.cs
+++ b/Voile/Source/UI/Containers/Container.cs
@@ -142,10 +142,7 @@ public abstract class Container : UIElement, IParentableElement
public override void Render(RenderSystem renderer, Style style)
{
- var backgroundColor = style.BackgroundColor;
-
- renderer.SetTransform(GlobalPosition, Vector2.Zero);
- renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+ RenderStyleBox(renderer, style);
foreach (var child in Children)
{
diff --git a/Voile/Source/UI/Style.cs b/Voile/Source/UI/Style.cs
index 8a409f6..726b27f 100644
--- a/Voile/Source/UI/Style.cs
+++ b/Voile/Source/UI/Style.cs
@@ -44,6 +44,9 @@ public class StyleSheet : TextDataResource
{"Label", new Style()
{
TextColor = Color.FromHexString("#161616"),
+ BackgroundColor = Color.DarkRed,
+ BorderSize = new Margin(2.0f),
+ BorderColor = Color.Red
}},
{ "Button", new Style()
{
diff --git a/Voile/Source/UI/UIElement.cs b/Voile/Source/UI/UIElement.cs
index 477a51c..c3a02ab 100644
--- a/Voile/Source/UI/UIElement.cs
+++ b/Voile/Source/UI/UIElement.cs
@@ -110,6 +110,60 @@ public abstract class UIElement : IElement, IRenderableElement, IResizeableEleme
public abstract void Render(RenderSystem renderer, Style style);
protected abstract void OnUpdate();
+ ///
+ /// Renders a stylebox from a given style.
+ ///
+ ///
+ ///
+ protected void RenderStyleBox(RenderSystem renderer, Style style)
+ {
+ var backgroundColor = style.BackgroundColor;
+ var borderColor = style.BorderColor;
+ var borderSize = style.BorderSize;
+
+ renderer.SetTransform(GlobalPosition, Vector2.Zero);
+
+ renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+
+ if (borderSize.Left > 0)
+ {
+ renderer.SetTransform(GlobalPosition, Vector2.Zero);
+ renderer.DrawRectangle(
+ new Vector2(borderSize.Left, Size.Height),
+ borderColor
+ );
+ }
+
+ if (borderSize.Top > 0)
+ {
+ renderer.SetTransform(GlobalPosition, Vector2.Zero);
+ renderer.DrawRectangle(
+ new Vector2(Size.Width, borderSize.Top),
+ borderColor
+ );
+ }
+
+ if (borderSize.Right > 0)
+ {
+ var rightX = GlobalPosition.X + Size.Width - borderSize.Right;
+ renderer.SetTransform(new Vector2(rightX, GlobalPosition.Y), Vector2.Zero);
+ renderer.DrawRectangle(
+ new Vector2(borderSize.Right, Size.Height),
+ borderColor
+ );
+ }
+
+ if (borderSize.Bottom > 0)
+ {
+ var bottomY = GlobalPosition.Y + Size.Height - borderSize.Bottom;
+ renderer.SetTransform(new Vector2(GlobalPosition.X, bottomY), Vector2.Zero);
+ renderer.DrawRectangle(
+ new Vector2(Size.Width, borderSize.Bottom),
+ borderColor
+ );
+ }
+ }
+
public void DrawSize(RenderSystem renderer)
{
renderer.SetTransform(GlobalPosition, Vector2.Zero);
diff --git a/Voile/Source/UI/Widgets/Button.cs b/Voile/Source/UI/Widgets/Button.cs
index ec28466..c07ba4a 100644
--- a/Voile/Source/UI/Widgets/Button.cs
+++ b/Voile/Source/UI/Widgets/Button.cs
@@ -85,8 +85,10 @@ public class Button : Widget
_padding = style.Padding;
var textColor = style.TextColor;
- renderer.SetTransform(GlobalPosition, Vector2.Zero);
- renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+ // renderer.SetTransform(GlobalPosition, Vector2.Zero);
+ // renderer.DrawRectangle(new Vector2(Size.Width, Size.Height), backgroundColor);
+
+ RenderStyleBox(renderer, style);
var textPosition = new Vector2(GlobalPosition.X + Padding.Left, GlobalPosition.Y + Padding.Top);
renderer.SetTransform(textPosition, Vector2.Zero);
diff --git a/Voile/Source/UI/Widgets/Label.cs b/Voile/Source/UI/Widgets/Label.cs
index ae04d5f..e834ff9 100644
--- a/Voile/Source/UI/Widgets/Label.cs
+++ b/Voile/Source/UI/Widgets/Label.cs
@@ -52,7 +52,7 @@ public class Label : Widget
public override void Render(RenderSystem renderer, Style style)
{
- // TODO: use style here.
+ RenderStyleBox(renderer, style);
renderer.SetTransform(GlobalPosition, Vector2.Zero);
renderer.DrawText(_suitableFont, _text, style.TextColor);