Replace flat buttons with flat-styled buttons with a visible pressed state #81939
Conversation
|
As a glasses user, THANK YOU <3 |
|
Does light theme look good? |
|
Seems barely visible in light theme |
|
Could a translucent accent color be used for pressed flat buttons? This would make them easier to distinguish from other UI elements such as dropdowns. |
YuriSizov
force-pushed
the
gui-flat-and-depressed
branch
from
1145275 to
4bd569b
Compare
Like this? 
|
| @@ -949,7 +949,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) { | |||
| toolbar_stylebox->set_border_color(accent_color); | |||
| toolbar_stylebox->set_border_width(SIDE_BOTTOM, Math::round(2 * EDSCALE)); | |||
| toolbar_stylebox->set_content_margin(SIDE_BOTTOM, 0); | |||
| toolbar_stylebox->set_expand_margin_all(2 * EDSCALE); | |||
| toolbar_stylebox->set_expand_margin_individual(4 * EDSCALE, 2 * EDSCALE, 4 * EDSCALE, 4 * EDSCALE); | |||
There was a problem hiding this comment.
That stylebox is actually clipping buttons, but it's not noticeable if you don't have styles rendered on them. And the sides were too close with the pressed style on, so I extended them a bit.
There was a problem hiding this comment.
Without this change, the side margins match the top margin (bottom does look bad though).
idk, maybe your change is ok.
Looks good! Maybe the blue accent could be a bit more prominent, as it's quite subtle right now and can be hard to see (especially under sunlight). |
I get why you would want this, but the trouble is the content is also colored with the accent color. The closer we get to it, the less recognizable the content is going to be. There may be another way to style it entirely, without coloring the icon and the text with the accent color, perhaps. We could probably bikeshed and experiment more, but it's also something that we can tune afterwards, I think. |
|
On the contrary, I think we're at a good place between it being obvious and it not sticking out too much. |
|
Thanks! |
ToolButtonis back, baby!.. Wait, no, that sounds wrong. But we do have a usability problem whichToolButtoncould've solved.The problem
We use flat buttons throughout the editor UI, and in a couple of
Controlnodes (GraphEditandFileDialog). The problem with flat buttons is that they by design don't render any styleboxes except for the focus outline. So no visible pressed state for them, except for slightly tinted icon and/or text. In the editor, by default, it's a light blue color, and in the default theme it's a slightly different shade of white (which makes the pressed state completely invisible in theGraphEdittoolbar).Which of these buttons is toggled on and which are toggled off? This is not a trick question!
Within the editor users have expressed trouble noticing when some tools are enabled. This can depend a lot on the exact theme and theme colors used, but the default look definitely has this issue where lightly colored blue text or blue icon is getting lost on top of a bluish background.
https://youtu.be/nu6g942bAIU?t=846
The solution
One way to solve this problem is to make flat buttons render the pressed state as well, but that would break compatibility and expectation compared to what we have right now.
Thankfully, we have theme type variations. So I propose we use them here and introduce the
FlatButtontype variation (and alsoFlatMenuButtonforMenuButton), which would have empty styles for everything except for the pressed state. This would make them look like exactly like flat buttons, but with a proper style for when these buttons are pressed.godot.windows.editor.dev.x86_64_2023-09-19_16-17-39.mp4
With this PR these variations are present in the default theme and used in
GraphEditandFileDialogas well:It's going to look even better with #81582.
The implementation
I went through all toolbars and toolbar-alikes in the editor that use flat buttons and updated them to use this approach. Here are a few examples:
Videos and pictures!
godot.windows.editor.dev.x86_64_2023-09-19_16-21-52.mp4
godot.windows.editor.dev.x86_64_2023-09-19_16-22-32.mp4
I went mostly by code, and replaced flat buttons based on my memory of the tool, but I didn't check everything. I skipped some places too. So if you think I was too conservative or the other way around with the changes, do let me know and I will remove/add whatever is needed. Adjustments can also be done in a follow-up, of course.
Of course, the exact styling may require some adjustments. For example, it doesn't look too dissimilar from a non-flat button right now. But I think it's an overall usability improvement.