Better usability & theming for SpinBox & the Tree SpinBox-like cell

[davthedev]

I noticed some limitations with the existing implementation of SpinBox. Talking about this specific control with a text field and arrows to increase or decrease the value.

The current limitations I found are:

• One graphic for the two "increase" and "decrease" actions although there are two distinct clickable areas
• No interaction feedback, we are not sure we hit the arrow correctly
• Limited style options, in comparison to what I want to achieve in a project

After some tinkering, I was able to get the following. The improvements added include

• Separate up and down buttons
• Interaction feedback when hovered and pressed
• When the value is at the extremity of the allowed range, one of the arrows is disabled
• Stylable arrow buttons & icons, separators, configurable minimum buttons width & spacing with the edit field
• The embedded LineEdit receives a theme variation name so that it is easy to style it a different way from the regular LineEdit using a global theme

Rendering on the default runtime theme

With some styling, what is possible: (not the default theme, it is an example)

Big buttons for touch screens (customization example again)

Another possible minimal look with the new separator theme option

Live in Godot in the color selector

Actually, there are two different widgets that render this UI element. The second one is a specialized cell of Tree, and seems to be used inside the inspector and project / editor options to set the various values.

Here are the improvement ideas.

• Interaction feedback && improvements above on the SpinBox control (PR available: Improve SpinBox interaction, split arrows, add theme attributes godot#89265)
• Same on the Tree control for the SpinBox-like cell
• Styling the entire background of the widget encompassing the arrow buttons
• Allow setting the change speed, factor & delay when holding the mouse button pressed, same for the "value dragging" mode (press and hold on the buttons then move the mouse up/down) instead of hardcoded parameters
• Bring the Tree cell version in feature parity with the standalone SpinBox so that you can hold the mouse button pressed to give multiple "ticks". For now you have to click repeatedly. This would improve the properties editing usability a lot.
• Allow changing the side of the buttons independently of the RTL mode - would be "start" or "end"

[Zireael07]

Love the big buttons for the touchscreen (remember Godot itself is a Godot project AND has an Android version now)

[davthedev]

The big buttons are an example of what my changes in the PR can do. They are not brought to the default theme; you have to apply the style yourself.

[MewPurPur]

I know of multiple people who thought SpinBox was too scuffed to be useful, mainly because of this. So they winded up remaking this node from scratch, not even extending it. I'm one of them.

[akien-mga]

Implemented by godotengine/godot#89265.