blackears / cyclopsLevelBuilder

A Godot plugin to let you block in levels inside the Godot editor.
MIT License
1.09k stars 44 forks source link

Use Godot editor UI theme properties #24

Open NathanLovato opened 1 year ago

NathanLovato commented 1 year ago

The addon uses styles that are different from those of the Godot editor and will not play well when users the changes their editor theme.


When possible to get the editor styles you want to avoid adding style boxes and other things on nodes. For example, to make a clickable icon or label you can create a Button node and set its flat property to true.

In other cases, you can import styles from the editor theme into your UI's theme resource. In the theme editor, click Manage Items... in the top-right, go to the Import Items tab, and Editor Theme. This is especially useful for getting constants such as spacing and whatnot.

To mimic the editor styles you sometimes have to go look at the engine source code to see what they use because it's not always obvious.

blackears commented 1 year ago

Is there a way to just have my component copy whatever is set by the editor? Or do I have to manually set it? This could be a problem for dark/light theme or if the values change on a future update. Most of my components don't set a theme.

Were there a specific components where you thought the theme was at odds with what the editor uses?

NathanLovato commented 1 year ago

If you don't override any styles on a given component, it will automatically use the editor theme. Generally, Control nodes inherit the theme resource attached to one of their ancestors.

The editor has a top-level theme resource which you can get in your plugin code by calling get_editor_interface().get_base_control().theme. Then you can use the Theme interface to retrieve its styles and properties when needed.

Were there a specific components where you thought the theme was at odds with what the editor uses?

Mainly the materials display and UV editor use their own thing. For the materials display it's mainly a matter of extracting stylebox resources from the editor theme, while for the UV or tool properties it could be a matter of replicating the inspector styles, which is more involved than just using the editor theme: there are a bunch of custom UI components and styles in the Inspector and they're not exposed as simple nodes to the user.

It's not very important stuff right now though.

blackears commented 1 year ago

The material dock itself does not implement any themes. The thumbnail buttons do, but that's just to get the red rectangle for highlighting the selected material.

I did have to write my own version of the inspector controls for the UV transform editor. They're not exactly the same and could use some improvement.