Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Improve the default project theme #51159
Conversation
|
Something's wrong with the texture progress control or with its surrounding container? |
It looks as intended. It's just that the higher spacing makes it not fit anymore within the container, so its edge looks flush with the panel instead of having some padding. I'm not sure where this addtitional spacing comes from though. |
|
Overall this is really nice! I'm not sure I like the scrollbars, and the other corners. Is there any program that has pointy edges on them?
It seems a bit bright. If we have white text we want to ensure the background is dark enough that people can easily read it. Can we make the background a nice even
|
Not that I know of. I'll reduce their radius to make them more square.
The panel's background is translucent, which is why it appears to be relatively bright against the clear color. I can make it slightly more opaque, which will make it appear darker. |
The new default project theme uses StyleBoxFlat extensively for a more modern design and better scalability to multiple resolutions. SVG icons are now used in place of PNG icons. While this does not allow for true vector-based icon drawing (icons are still rasterized at load-time), this makes the design work easier for contributors and opens the door to vector drawing in the future (e.g. with polygons or SDFs). Like for editor icons, the SVG header file is now built automatically when a SVG file is changed. This removing the need for running `make_header.py` manually (TODO). The "Use Hidpi" project setting has been removed in favor of a "Default Theme Scale" project setting, which allows creating the default theme at a higher/lower scale than the default. This can be used when designing GUIs with a high base resolution to ensure crisp visuals. TODO: - Finish theming all nodes and remove PNGs. - Generate fallback images when the NanoSVG module is disabled. - Print a warning message when compiling Godot with the NanoSVG module disabled. - Alternatively, make NanoSVG a hard requirement for compiling Godot.
Calinou
force-pushed the
Calinou:improve-default-project-theme
branch
from
4862905
to
4361035
Shouldn't it be opaque by default? |
I can make it opaque by default, but one reason I made it translucent by default is that it makes multiple overlapping panels distinguishable out of the box (since they don't have borders anymore). If panels are made opaque by default, the Self Modulate property could be used to adjust their opacity without overriding the stylebox. PS: I updated the After screenshots in OP to reflect the latest changes:
|
|
The corners… is it possible to have rounded edges? I can’t think of a modern interface that has anything other these days. I don’t mean to prevent anyone using this style, but just want to know if it’s possible to create an alternative |
Corners were rounded in an earlier revision of this theme, but there are currently several issues with rounded corners in StyleBoxFlat:
If we manage to fix the issue with StyleBoxFlat antialiasing, I'd be OK with making corners rounded again. In the Godot editor theme, corners are rounded and antialiasing is disabled. This combination works well because the Godot editor uses the |
|
@Calinou that’s a fantastic reply. Thanks for the info I guess that this is down to preference - and given the limitations I’d probably go with a one pixel radius and keep it simple. If we could solve the anti-aliasing problem… But either way, could we get your answer in the docs with some info on how to change the corner if one wanted to try rounded corners that would be most helpful I feel. |
The new default project theme uses StyleBoxFlat extensively for a more modern design and better scalability to multiple resolutions.
SVG icons are now used in place of PNG icons. While this does not allow for true vector-based icon drawing (icons are still rasterized at load-time), this makes the design work easier for contributors and opens the door to vector drawing in the future (e.g. with polygons or SDFs).
Like for editor icons, the SVG header file is now built automatically when a SVG file is changed. This removing the need for running
make_header.pymanually.The Use Hidpi project setting has been removed in favor of a Default Theme Scale project setting, which allows creating the default theme at a higher/lower scale than the default. This can be used when designing GUIs with a high base resolution to ensure crisp visuals.
The new theme has slightly different metrics, which may result in elements being shifted around when porting
3.xprojects (hence thebreaks compatlabel).Note: Unlike LineEdit, TextEdit will appear to have no visible focus outline because its focus outline is clipped by the main StyleBox's area (this is not about drawing order). We need to fix this in the TextEdit node, ideally before this PR is merged. See #32996.
This closes #25349.
Preview
On all screenshots, the first button is focused so that you can see how the focus outline looks.
Default resolution
Fullscreen (
2dstretch mode)The new theme scales much better to higher resolutions thanks to its StyleBoxFlat-based design.
TODO
make_header.pywhich should no longer be needed.