godotengine / godot-proposals

Godot Improvement Proposals (GIPs)
MIT License
1.16k stars 97 forks source link

UI Themes - Combining styling classes #10347

Open Alidonis opened 2 months ago

Alidonis commented 2 months ago

Describe the project you are working on

An arcade-focused rhythm game with heavy use of styled Control elements for user interaction with the software, including a sub-screen that allows personalization through profiles.

Describe the problem or limitation you are having in your project

The Theme ressource only allows for one style class out of Empty, BoxTexture, BoxFlat and LineBox, which cannot be combined together.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Combining Style classes to create interesting visuals such as lines with backgrounds or textures with lines.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

The user will be allowed to add multiple style classes to the typical override process, allowing them to combine the classes in whichever order they would like. Multiple textures, lines on top of textures, etc. are all unlocked by this solution.

If this enhancement will not be used often, can it be worked around with a few lines of script?

I do not know any possible workaround to the system.

Is there a reason why this should be core and not an add-on in the asset library?

Theming is a bit limited. This enhancement would drastically increase the amount of possibilities from a simple adjustment to the system.

Calinou commented 2 months ago

I feel we should improve StyleBoxFlat to be able to achieve the visual style you're looking for, rather than allowing the use of multiple StyleBoxes at once. The styleboxes other than StyleBoxFlat and StyleBoxTexture are very primitive in comparison and are mostly intended for special purposes. Also, if you're OK with using StyleBoxTexture, you probably don't mind your entire StyleBox being bitmap-based as opposed to being vector-based.

Can you post screenshots of the visual style you're aiming for?

If you are looking for inheritance, this is covered by a different proposal: https://github.com/godotengine/godot-proposals/issues/8094

Alidonis commented 2 months ago

image @Calinou Here my work so far. The problem I face is that I can't add A boxflat AND a line on the toggle button. it also causes visual glitches when hovering over a toggle button that was just unchecked. This would be solved by always having a boxflat, and combining with a linebox when I need a line.

Calinou commented 2 months ago

The problem I face is that I can't add A boxflat AND a line on the toggle button. it also causes visual glitches when hovering over a toggle button that was just unchecked.

As I understand it, you can have all your buttons have the same left border width defined to them, but make the border color fully transparent on all buttons except the toggle button.

Alidonis commented 2 months ago

As I understand it, you can have all your buttons have the same left border width defined to them, but make the border color fully transparent on all buttons except the toggle button.

It's not about borders here. It's about always having a background (defined by StyleBoxFlat) and a line on hover (defined by StyleBoxLine) while retaining the background. It's only in the case of Hover and Pressed aswell, with the others only having the StyleBoxFlat.