Add rounded corners to EditorProperty and EditorSpinSlider

- Adds rounded corners to the EditorProperty child background, EditorSpinSlider label background, and resource sub-inspector borders and background.
- Allows customizing EditorSpinSlider label background through a new Theme StyleBox property, label_bg.
- Makes margins consistent in resource sub-inspectors.
- Removes space between buttons in NodePath, Resource, and multiline string editors.
- Adds space between label background and content for vertical property editors.
This commit is contained in:
FireForge 2022-03-31 18:55:51 -05:00
parent 410b6b5f7d
commit 9bc6f44c80
5 changed files with 47 additions and 47 deletions

View File

@ -62,7 +62,7 @@ Size2 EditorProperty::get_minimum_size() const {
Size2 ms; Size2 ms;
Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree")); Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree")); int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
ms.height = font->get_height(font_size); ms.height = font->get_height(font_size) + 4 * EDSCALE;
for (int i = 0; i < get_child_count(); i++) { for (int i = 0; i < get_child_count(); i++) {
Control *c = Object::cast_to<Control>(get_child(i)); Control *c = Object::cast_to<Control>(get_child(i));
@ -132,7 +132,7 @@ void EditorProperty::_notification(int p_what) {
int child_room = size.width * (1.0 - split_ratio); int child_room = size.width * (1.0 - split_ratio);
Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree")); Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree")); int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
int height = font->get_height(font_size); int height = font->get_height(font_size) + 4 * EDSCALE;
bool no_children = true; bool no_children = true;
//compute room needed //compute room needed
@ -236,30 +236,24 @@ void EditorProperty::_notification(int p_what) {
case NOTIFICATION_DRAW: { case NOTIFICATION_DRAW: {
Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree")); Ref<Font> font = get_theme_font(SNAME("font"), SNAME("Tree"));
int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree")); int font_size = get_theme_font_size(SNAME("font_size"), SNAME("Tree"));
Color dark_color = get_theme_color(SNAME("dark_color_2"), SNAME("Editor"));
bool rtl = is_layout_rtl(); bool rtl = is_layout_rtl();
Size2 size = get_size(); Size2 size = get_size();
if (bottom_editor) { if (bottom_editor) {
size.height = bottom_editor->get_offset(SIDE_TOP); size.height = bottom_editor->get_offset(SIDE_TOP) - get_theme_constant(SNAME("v_separation"));
} else if (label_reference) { } else if (label_reference) {
size.height = label_reference->get_size().height; size.height = label_reference->get_size().height;
} }
Ref<StyleBox> sb; Ref<StyleBox> sb = get_theme_stylebox(selected ? SNAME("bg_selected") : SNAME("bg"));
if (selected) {
sb = get_theme_stylebox(SNAME("bg_selected"));
} else {
sb = get_theme_stylebox(SNAME("bg"));
}
draw_style_box(sb, Rect2(Vector2(), size)); draw_style_box(sb, Rect2(Vector2(), size));
Ref<StyleBox> bg_stylebox = get_theme_stylebox(SNAME("child_bg"));
if (draw_top_bg && right_child_rect != Rect2()) { if (draw_top_bg && right_child_rect != Rect2()) {
draw_rect(right_child_rect, dark_color); draw_style_box(bg_stylebox, right_child_rect);
} }
if (bottom_child_rect != Rect2()) { if (bottom_child_rect != Rect2()) {
draw_rect(bottom_child_rect, dark_color); draw_style_box(bg_stylebox, bottom_child_rect);
} }
Color color; Color color;
@ -1075,7 +1069,7 @@ void EditorInspectorPlugin::_bind_methods() {
void EditorInspectorCategory::_notification(int p_what) { void EditorInspectorCategory::_notification(int p_what) {
switch (p_what) { switch (p_what) {
case NOTIFICATION_DRAW: { case NOTIFICATION_DRAW: {
Ref<StyleBox> sb = get_theme_stylebox(SNAME("prop_category_style"), SNAME("Editor")); Ref<StyleBox> sb = get_theme_stylebox(SNAME("bg"));
draw_style_box(sb, Rect2(Vector2(), get_size())); draw_style_box(sb, Rect2(Vector2(), get_size()));

View File

@ -172,6 +172,7 @@ void EditorPropertyMultilineText::_bind_methods() {
EditorPropertyMultilineText::EditorPropertyMultilineText() { EditorPropertyMultilineText::EditorPropertyMultilineText() {
HBoxContainer *hb = memnew(HBoxContainer); HBoxContainer *hb = memnew(HBoxContainer);
hb->add_theme_constant_override("separation", 0);
add_child(hb); add_child(hb);
set_bottom_editor(hb); set_bottom_editor(hb);
text = memnew(TextEdit); text = memnew(TextEdit);
@ -2948,6 +2949,7 @@ void EditorPropertyNodePath::_bind_methods() {
EditorPropertyNodePath::EditorPropertyNodePath() { EditorPropertyNodePath::EditorPropertyNodePath() {
HBoxContainer *hbc = memnew(HBoxContainer); HBoxContainer *hbc = memnew(HBoxContainer);
hbc->add_theme_constant_override("separation", 0);
add_child(hbc); add_child(hbc);
assign = memnew(Button); assign = memnew(Button);
assign->set_flat(true); assign->set_flat(true);
@ -3134,17 +3136,15 @@ void EditorPropertyResource::_update_property_bg() {
count_subinspectors = MIN(15, count_subinspectors); count_subinspectors = MIN(15, count_subinspectors);
add_theme_color_override("property_color", get_theme_color(SNAME("sub_inspector_property_color"), SNAME("Editor"))); add_theme_color_override("property_color", get_theme_color(SNAME("sub_inspector_property_color"), SNAME("Editor")));
add_theme_style_override("bg_selected", get_theme_stylebox("sub_inspector_property_bg_selected" + itos(count_subinspectors), SNAME("Editor"))); add_theme_style_override("bg_selected", get_theme_stylebox("sub_inspector_property_bg" + itos(count_subinspectors), SNAME("Editor")));
add_theme_style_override("bg", get_theme_stylebox("sub_inspector_property_bg" + itos(count_subinspectors), SNAME("Editor"))); add_theme_style_override("bg", get_theme_stylebox("sub_inspector_property_bg" + itos(count_subinspectors), SNAME("Editor")));
add_theme_constant_override("font_offset", get_theme_constant(SNAME("sub_inspector_font_offset"), SNAME("Editor")));
add_theme_constant_override("v_separation", 0); add_theme_constant_override("v_separation", 0);
} else { } else {
add_theme_color_override("property_color", get_theme_color(SNAME("property_color"), SNAME("EditorProperty"))); add_theme_color_override("property_color", get_theme_color(SNAME("property_color"), SNAME("EditorProperty")));
add_theme_style_override("bg_selected", get_theme_stylebox(SNAME("bg_selected"), SNAME("EditorProperty"))); add_theme_style_override("bg_selected", get_theme_stylebox(SNAME("bg_selected"), SNAME("EditorProperty")));
add_theme_style_override("bg", get_theme_stylebox(SNAME("bg"), SNAME("EditorProperty"))); add_theme_style_override("bg", get_theme_stylebox(SNAME("bg"), SNAME("EditorProperty")));
add_theme_constant_override("v_separation", get_theme_constant(SNAME("v_separation"), SNAME("EditorProperty"))); add_theme_constant_override("v_separation", get_theme_constant(SNAME("v_separation"), SNAME("EditorProperty")));
add_theme_constant_override("font_offset", get_theme_constant(SNAME("font_offset"), SNAME("EditorProperty")));
} }
updating_theme = false; updating_theme = false;

View File

@ -903,6 +903,8 @@ EditorResourcePicker::EditorResourcePicker() {
edit_button->connect("pressed", callable_mp(this, &EditorResourcePicker::_update_menu)); edit_button->connect("pressed", callable_mp(this, &EditorResourcePicker::_update_menu));
add_child(edit_button); add_child(edit_button);
edit_button->connect("gui_input", callable_mp(this, &EditorResourcePicker::_button_input)); edit_button->connect("gui_input", callable_mp(this, &EditorResourcePicker::_button_input));
add_theme_constant_override("separation", 0);
} }
// EditorScriptPicker // EditorScriptPicker

View File

@ -303,11 +303,11 @@ void EditorSpinSlider::_draw_spin_slider() {
Color lc = get_theme_color(is_read_only() ? SNAME("read_only_label_color") : SNAME("label_color")); Color lc = get_theme_color(is_read_only() ? SNAME("read_only_label_color") : SNAME("label_color"));
if (flat && !label.is_empty()) { if (flat && !label.is_empty()) {
Color label_bg_color = get_theme_color(SNAME("dark_color_3"), SNAME("Editor")); Ref<StyleBox> label_bg = get_theme_stylebox(SNAME("label_bg"), SNAME("EditorSpinSlider"));
if (rtl) { if (rtl) {
draw_rect(Rect2(Vector2(size.width - (sb->get_offset().x * 2 + label_width), 0), Vector2(sb->get_offset().x * 2 + label_width, size.height)), label_bg_color); draw_style_box(label_bg, Rect2(Vector2(size.width - (sb->get_offset().x * 2 + label_width), 0), Vector2(sb->get_offset().x * 2 + label_width, size.height)));
} else { } else {
draw_rect(Rect2(Vector2(), Vector2(sb->get_offset().x * 2 + label_width, size.height)), label_bg_color); draw_style_box(label_bg, Rect2(Vector2(), Vector2(sb->get_offset().x * 2 + label_width, size.height)));
} }
} }

View File

@ -72,7 +72,7 @@ static Ref<StyleBoxFlat> make_flat_stylebox(Color p_color, float p_margin_left =
style->set_bg_color(p_color); style->set_bg_color(p_color);
// Adjust level of detail based on the corners' effective sizes. // Adjust level of detail based on the corners' effective sizes.
style->set_corner_detail(Math::ceil(1.5 * p_corner_width * EDSCALE)); style->set_corner_detail(Math::ceil(1.5 * p_corner_width * EDSCALE));
style->set_corner_radius_all(p_corner_width); style->set_corner_radius_all(p_corner_width * EDSCALE);
style->set_default_margin(SIDE_LEFT, p_margin_left * EDSCALE); style->set_default_margin(SIDE_LEFT, p_margin_left * EDSCALE);
style->set_default_margin(SIDE_RIGHT, p_margin_right * EDSCALE); style->set_default_margin(SIDE_RIGHT, p_margin_right * EDSCALE);
style->set_default_margin(SIDE_BOTTOM, p_margin_bottom * EDSCALE); style->set_default_margin(SIDE_BOTTOM, p_margin_bottom * EDSCALE);
@ -890,6 +890,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_constant("item_start_padding", "PopupMenu", popup_menu_margin_size * EDSCALE); theme->set_constant("item_start_padding", "PopupMenu", popup_menu_margin_size * EDSCALE);
theme->set_constant("item_end_padding", "PopupMenu", popup_menu_margin_size * EDSCALE); theme->set_constant("item_end_padding", "PopupMenu", popup_menu_margin_size * EDSCALE);
// Sub-inspectors
for (int i = 0; i < 16; i++) { for (int i = 0; i < 16; i++) {
Color si_base_color = accent_color; Color si_base_color = accent_color;
@ -897,51 +898,53 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
si_base_color.set_hsv(Math::fmod(float(si_base_color.get_h() + hue_rotate), float(1.0)), si_base_color.get_s(), si_base_color.get_v()); si_base_color.set_hsv(Math::fmod(float(si_base_color.get_h() + hue_rotate), float(1.0)), si_base_color.get_s(), si_base_color.get_v());
si_base_color = accent_color.lerp(si_base_color, float(EDITOR_GET("docks/property_editor/subresource_hue_tint"))); si_base_color = accent_color.lerp(si_base_color, float(EDITOR_GET("docks/property_editor/subresource_hue_tint")));
Ref<StyleBoxFlat> sub_inspector_bg; // Sub-inspector background.
Ref<StyleBoxFlat> sub_inspector_bg = style_default->duplicate();
sub_inspector_bg = make_flat_stylebox(dark_color_1.lerp(si_base_color, 0.08), 2, 0, 2, 2); sub_inspector_bg->set_bg_color(dark_color_1.lerp(si_base_color, 0.08));
sub_inspector_bg->set_border_width_all(2 * EDSCALE);
sub_inspector_bg->set_border_width(SIDE_LEFT, 2);
sub_inspector_bg->set_border_width(SIDE_RIGHT, 2);
sub_inspector_bg->set_border_width(SIDE_BOTTOM, 2);
sub_inspector_bg->set_border_width(SIDE_TOP, 2);
sub_inspector_bg->set_default_margin(SIDE_LEFT, 3);
sub_inspector_bg->set_default_margin(SIDE_RIGHT, 3);
sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 10);
sub_inspector_bg->set_default_margin(SIDE_TOP, 5);
sub_inspector_bg->set_border_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8)); sub_inspector_bg->set_border_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8));
sub_inspector_bg->set_draw_center(true); sub_inspector_bg->set_default_margin(SIDE_LEFT, 4 * EDSCALE);
sub_inspector_bg->set_default_margin(SIDE_RIGHT, 4 * EDSCALE);
sub_inspector_bg->set_default_margin(SIDE_BOTTOM, 4 * EDSCALE);
sub_inspector_bg->set_default_margin(SIDE_TOP, 4 * EDSCALE);
sub_inspector_bg->set_corner_radius(CORNER_TOP_LEFT, 0);
sub_inspector_bg->set_corner_radius(CORNER_TOP_RIGHT, 0);
theme->set_stylebox("sub_inspector_bg" + itos(i), "Editor", sub_inspector_bg); theme->set_stylebox("sub_inspector_bg" + itos(i), "Editor", sub_inspector_bg);
Ref<StyleBoxFlat> bg_color; // EditorProperty background while it has a sub-inspector open.
bg_color.instantiate(); Ref<StyleBoxFlat> bg_color = make_flat_stylebox(si_base_color * Color(0.7, 0.7, 0.7, 0.8), 0, 0, 0, 0, corner_radius);
bg_color->set_bg_color(si_base_color * Color(0.7, 0.7, 0.7, 0.8)); bg_color->set_anti_aliased(false);
bg_color->set_border_width_all(0); bg_color->set_corner_radius(CORNER_BOTTOM_LEFT, 0);
bg_color->set_corner_radius(CORNER_BOTTOM_RIGHT, 0);
Ref<StyleBoxFlat> bg_color_selected;
bg_color_selected.instantiate();
bg_color_selected->set_border_width_all(0);
bg_color_selected->set_bg_color(si_base_color * Color(0.8, 0.8, 0.8, 0.8));
theme->set_stylebox("sub_inspector_property_bg" + itos(i), "Editor", bg_color); theme->set_stylebox("sub_inspector_property_bg" + itos(i), "Editor", bg_color);
theme->set_stylebox("sub_inspector_property_bg_selected" + itos(i), "Editor", bg_color_selected);
} }
theme->set_color("sub_inspector_property_color", "Editor", dark_theme ? Color(1, 1, 1, 1) : Color(0, 0, 0, 1)); theme->set_color("sub_inspector_property_color", "Editor", dark_theme ? Color(1, 1, 1, 1) : Color(0, 0, 0, 1));
theme->set_constant("sub_inspector_font_offset", "Editor", 4 * EDSCALE);
// EditorSpinSlider. // EditorSpinSlider.
theme->set_color("label_color", "EditorSpinSlider", font_color); theme->set_color("label_color", "EditorSpinSlider", font_color);
theme->set_color("read_only_label_color", "EditorSpinSlider", font_readonly_color); theme->set_color("read_only_label_color", "EditorSpinSlider", font_readonly_color);
Ref<StyleBoxFlat> editor_spin_label_bg = style_default->duplicate();
editor_spin_label_bg->set_bg_color(dark_color_3);
editor_spin_label_bg->set_border_width_all(0);
theme->set_stylebox("label_bg", "EditorSpinSlider", editor_spin_label_bg);
// EditorProperty
Ref<StyleBoxFlat> style_property_bg = style_default->duplicate(); Ref<StyleBoxFlat> style_property_bg = style_default->duplicate();
style_property_bg->set_bg_color(highlight_color); style_property_bg->set_bg_color(highlight_color);
style_property_bg->set_border_width_all(0); style_property_bg->set_border_width_all(0);
Ref<StyleBoxFlat> style_property_child_bg = style_default->duplicate();
style_property_child_bg->set_bg_color(dark_color_2);
style_property_child_bg->set_border_width_all(0);
theme->set_constant("font_offset", "EditorProperty", 8 * EDSCALE); theme->set_constant("font_offset", "EditorProperty", 8 * EDSCALE);
theme->set_stylebox("bg_selected", "EditorProperty", style_property_bg); theme->set_stylebox("bg_selected", "EditorProperty", style_property_bg);
theme->set_stylebox("bg", "EditorProperty", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty))); theme->set_stylebox("bg", "EditorProperty", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
theme->set_stylebox("child_bg", "EditorProperty", style_property_child_bg);
theme->set_constant("v_separation", "EditorProperty", (extra_spacing + default_margin_size) * EDSCALE); theme->set_constant("v_separation", "EditorProperty", (extra_spacing + default_margin_size) * EDSCALE);
theme->set_color("warning_color", "EditorProperty", warning_color); theme->set_color("warning_color", "EditorProperty", warning_color);
theme->set_color("property_color", "EditorProperty", property_color); theme->set_color("property_color", "EditorProperty", property_color);
@ -954,6 +957,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
style_property_group_note->set_bg_color(property_group_note_color); style_property_group_note->set_bg_color(property_group_note_color);
theme->set_stylebox("bg_group_note", "EditorProperty", style_property_group_note); theme->set_stylebox("bg_group_note", "EditorProperty", style_property_group_note);
// EditorInspectorSection
Color inspector_section_color = font_color.lerp(Color(0.5, 0.5, 0.5), 0.35); Color inspector_section_color = font_color.lerp(Color(0.5, 0.5, 0.5), 0.35);
theme->set_color("font_color", "EditorInspectorSection", inspector_section_color); theme->set_color("font_color", "EditorInspectorSection", inspector_section_color);
@ -1056,11 +1060,11 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_color("prop_subsection", "Editor", prop_subsection_color); theme->set_color("prop_subsection", "Editor", prop_subsection_color);
theme->set_color("drop_position_color", "Tree", accent_color); theme->set_color("drop_position_color", "Tree", accent_color);
// EditorInspectorCategory
Ref<StyleBoxFlat> category_bg = style_default->duplicate(); Ref<StyleBoxFlat> category_bg = style_default->duplicate();
// Make Trees easier to distinguish from other controls by using a darker background color.
category_bg->set_bg_color(prop_category_color); category_bg->set_bg_color(prop_category_color);
category_bg->set_border_color(prop_category_color); category_bg->set_border_color(prop_category_color);
theme->set_stylebox("prop_category_style", "Editor", category_bg); theme->set_stylebox("bg", "EditorInspectorCategory", category_bg);
// ItemList // ItemList
Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate(); Ref<StyleBoxFlat> style_itemlist_bg = style_default->duplicate();