FyroxEngine / Fyrox

3D and 2D game engine written in Rust
https://fyrox.rs
MIT License
7.49k stars 339 forks source link

Feature: Widget color palette #550

Closed jacobtread closed 8 months ago

jacobtread commented 8 months ago

Description

This is a feature which i'm looking to implement into fyrox ui rather than a feature request

Widget palette structure for Widgets that defines a set of colors for the widget to use with different states (i.e Hover, Normal, Pressed, Selected) similar to the brush fields on the Decorator to allow all widgets to react to different states with colors (i.e the border of a widget can be transparent then given a color when the widget is hovered) or some other solution making the widgets more styleable

I will begin work on figuring out what a good way to do this would be and I will update this issue with my progress on it

jacobtread commented 8 months ago

Little proof of concept I've put together, (The widget palette structure would have a builder in its finished product) , but below is a little example of what I've got done with defining the colors for the states of the widget (The palette would be on the base widget itself): image

And then here's what that looks like actually running

https://github.com/FyroxEngine/Fyrox/assets/33708767/09664385-f116-43e0-9775-09a50678efe0

Still working on the kinks and will need to do a bit of fiddling to make sure all the previous usages of with_background and with_foreground along with the with_hover_brush etc are forward compatible

jacobtread commented 8 months ago

Cleaned it up a bit and its got a builder now, it replaces the previous background and foreground colors:

image

I've gone and done backward compatibility for the previous functions:

image

image

mrDIMAS commented 8 months ago

Looks like all you need is a custom widget. For example, you could make a MainMenuButton widget which would have a border and a text. Then you could react to mouse events inside it and switch colors as you need.

jacobtread commented 8 months ago

Looks like all you need is a custom widget. For example, you could make a MainMenuButton widget which would have a border and a text. Then you could react to mouse events inside it and switch colors as you need.

That sounds like it would work, however having those hover brush states for any widget still seems beneficial, its just a feature request though haha if you don't think its the right way of going about it you're welcome to close the pr

mrDIMAS commented 8 months ago

I added a new chapter in the book about custom widgets (if you interested) - https://fyrox-book.github.io/fyrox/ui/custom.html

jacobtread commented 8 months ago

Closing this issue as custom widgets are the solution to this rather than a color palette structure.