Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[3.x] Add focus font color to Button and derivatives #54264

Merged
merged 1 commit into from
Oct 26, 2021
Merged

[3.x] Add focus font color to Button and derivatives #54264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions doc/classes/Button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.9, 0.9, 0.2 )">
Text [Color] used when the [Button] is disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [Button] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [Button] is being hovered.
</theme_item>
Expand Down
5 changes: 5 additions & 0 deletions doc/classes/CheckBox.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
The check icon to display when the [CheckBox] is checked.
</theme_item>
<theme_item name="checked_disabled" data_type="icon" type="Texture">
The check icon to display when the [CheckBox] is checked and disabled.
</theme_item>
<theme_item name="disabled" data_type="style" type="StyleBox">
The [StyleBox] to display as a background when the [CheckBox] is disabled.
Expand All @@ -41,6 +42,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.9, 0.9, 0.2 )">
The [CheckBox] text's font color when it's disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
The [CheckBox] text's font color when it's focused. Only replaces the normal text color of the checkbox. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
The [CheckBox] text's font color when it's hovered.
</theme_item>
Expand Down Expand Up @@ -79,6 +83,7 @@
The check icon to display when the [CheckBox] is unchecked.
</theme_item>
<theme_item name="unchecked_disabled" data_type="icon" type="Texture">
The check icon to display when the [CheckBox] is unchecked and disabled.
</theme_item>
</theme_items>
</class>
3 changes: 3 additions & 0 deletions doc/classes/CheckButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.9, 0.9, 0.2 )">
The [CheckButton] text's font color when it's disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
The [CheckButton] text's font color when it's focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
The [CheckButton] text's font color when it's hovered.
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/ColorPickerButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.9, 0.9, 0.3 )">
Text [Color] used when the [ColorPickerButton] is disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 1, 1, 1, 1 )">
Text [Color] used when the [ColorPickerButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 1, 1, 1, 1 )">
Text [Color] used when the [ColorPickerButton] is being hovered.
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/LinkButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
<theme_item name="font_color" data_type="color" type="Color" default="Color( 0.88, 0.88, 0.88, 1 )">
Default text [Color] of the [LinkButton].
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [LinkButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [LinkButton] is being hovered.
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/MenuButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 1, 1, 1, 0.3 )">
Text [Color] used when the [MenuButton] is disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [MenuButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [MenuButton] is being hovered.
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/OptionButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.9, 0.9, 0.2 )">
Text [Color] used when the [OptionButton] is disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [OptionButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [OptionButton] is being hovered.
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/ToolButton.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
<theme_item name="font_color_disabled" data_type="color" type="Color" default="Color( 0.9, 0.95, 1, 0.3 )">
Text [Color] used when the [ToolButton] is disabled.
</theme_item>
<theme_item name="font_color_focus" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [ToolButton] is focused. Only replaces the normal text color of the button. Disabled, hovered, and pressed states take precedence over this color.
</theme_item>
<theme_item name="font_color_hover" data_type="color" type="Color" default="Color( 0.94, 0.94, 0.94, 1 )">
Text [Color] used when the [ToolButton] is being hovered.
</theme_item>
Expand Down
8 changes: 8 additions & 0 deletions editor/editor_themes.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

const Color font_color = mono_color.linear_interpolate(base_color, 0.25);
const Color font_color_hl = mono_color.linear_interpolate(base_color, 0.15);
const Color font_color_focus = mono_color.linear_interpolate(base_color, 0.15);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's the same as font_color_hl, why couldn't you just reuse it?

Copy link
Contributor Author

@YuriSizov YuriSizov Oct 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the same for the purpose of quickly fixing it, but I fully expect we may want to tune it (granted, probably not in 3.4). I just think that it will be easier to customize if needs be.

The difference would be like one line, this line.

const Color font_color_disabled = Color(mono_color.r, mono_color.g, mono_color.b, 0.3);
const Color font_color_readonly = Color(mono_color.r, mono_color.g, mono_color.b, 0.65);
const Color font_color_selection = accent_color * Color(1, 1, 1, 0.4);
Expand Down Expand Up @@ -614,8 +615,10 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

theme->set_color("font_color", "MenuButton", font_color);
theme->set_color("font_color_hover", "MenuButton", font_color_hl);
theme->set_color("font_color_focus", "MenuButton", font_color_focus);
theme->set_color("font_color", "ToolButton", font_color);
theme->set_color("font_color_hover", "ToolButton", font_color_hl);
theme->set_color("font_color_focus", "ToolButton", font_color_focus);
theme->set_color("font_color_pressed", "ToolButton", accent_color);

theme->set_stylebox("MenuHover", "EditorStyles", style_menu_hover_border);
Expand All @@ -629,6 +632,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

theme->set_color("font_color", "Button", font_color);
theme->set_color("font_color_hover", "Button", font_color_hl);
theme->set_color("font_color_focus", "Button", font_color_focus);
theme->set_color("font_color_pressed", "Button", accent_color);
theme->set_color("font_color_disabled", "Button", font_color_disabled);
theme->set_color("icon_color_hover", "Button", icon_color_hover);
Expand All @@ -643,6 +647,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

theme->set_color("font_color", "OptionButton", font_color);
theme->set_color("font_color_hover", "OptionButton", font_color_hl);
theme->set_color("font_color_focus", "OptionButton", font_color_focus);
theme->set_color("font_color_pressed", "OptionButton", accent_color);
theme->set_color("font_color_disabled", "OptionButton", font_color_disabled);
theme->set_color("icon_color_hover", "OptionButton", icon_color_hover);
Expand All @@ -664,6 +669,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

theme->set_color("font_color", "CheckButton", font_color);
theme->set_color("font_color_hover", "CheckButton", font_color_hl);
theme->set_color("font_color_focus", "CheckButton", font_color_focus);
theme->set_color("font_color_pressed", "CheckButton", accent_color);
theme->set_color("font_color_disabled", "CheckButton", font_color_disabled);
theme->set_color("icon_color_hover", "CheckButton", icon_color_hover);
Expand All @@ -689,6 +695,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

theme->set_color("font_color", "CheckBox", font_color);
theme->set_color("font_color_hover", "CheckBox", font_color_hl);
theme->set_color("font_color_focus", "CheckBox", font_color_focus);
theme->set_color("font_color_pressed", "CheckBox", accent_color);
theme->set_color("font_color_disabled", "CheckBox", font_color_disabled);
theme->set_color("icon_color_hover", "CheckBox", icon_color_hover);
Expand Down Expand Up @@ -1097,6 +1104,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_stylebox("focus", "LinkButton", style_empty);
theme->set_color("font_color", "LinkButton", font_color);
theme->set_color("font_color_hover", "LinkButton", font_color_hl);
theme->set_color("font_color_focus", "LinkButton", font_color_focus);
theme->set_color("font_color_pressed", "LinkButton", accent_color);
theme->set_color("font_color_disabled", "LinkButton", font_color_disabled);

Expand Down
15 changes: 12 additions & 3 deletions scene/gui/button.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,18 @@ void Button::_notification(int p_what) {
if (!flat) {
style->draw(ci, Rect2(Point2(0, 0), size));
}
color = get_color("font_color");
if (has_color("icon_color_normal")) {
color_icon = get_color("icon_color_normal");

// Focus colors only take precedence over normal state.
if (has_focus()) {
color = get_color("font_color_focus");
if (has_color("icon_color_focus")) {
color_icon = get_color("icon_color_focus");
}
Comment on lines +91 to +93
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This color isn't defined anywhere.

Copy link
Contributor Author

@YuriSizov YuriSizov Oct 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, all icon_color_* options are like that, I've mentioned it on RC. I've added it for consistency, but I decided not to add definitions for any of them in this PR. They are used for some strange part of ToolButton (along with the icon icon, similarly unexposed). In master they seem to be properly exposed for the Button type.

} else {
color = get_color("font_color");
if (has_color("icon_color_normal")) {
color_icon = get_color("icon_color_normal");
}
}
} break;
case DRAW_HOVER_PRESSED: {
Expand Down
4 changes: 4 additions & 0 deletions scene/gui/file_dialog.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,22 @@ void FileDialog::_notification(int p_what) {

Color font_color = get_color("font_color", "ToolButton");
Color font_color_hover = get_color("font_color_hover", "ToolButton");
Color font_color_focus = get_color("font_color_focus", "ToolButton");
Color font_color_pressed = get_color("font_color_pressed", "ToolButton");

dir_up->add_color_override("icon_color_normal", font_color);
dir_up->add_color_override("icon_color_hover", font_color_hover);
dir_up->add_color_override("font_color_focus", font_color_focus);
dir_up->add_color_override("icon_color_pressed", font_color_pressed);

refresh->add_color_override("icon_color_normal", font_color);
refresh->add_color_override("icon_color_hover", font_color_hover);
refresh->add_color_override("font_color_focus", font_color_focus);
refresh->add_color_override("icon_color_pressed", font_color_pressed);

show_hidden->add_color_override("icon_color_normal", font_color);
show_hidden->add_color_override("icon_color_hover", font_color_hover);
show_hidden->add_color_override("font_color_focus", font_color_focus);
show_hidden->add_color_override("icon_color_pressed", font_color_pressed);

} else if (p_what == NOTIFICATION_POPUP_HIDE) {
Expand Down
6 changes: 5 additions & 1 deletion scene/gui/link_button.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@ void LinkButton::_notification(int p_what) {

switch (get_draw_mode()) {
case DRAW_NORMAL: {
color = get_color("font_color");
if (has_focus()) {
color = get_color("font_color_focus");
} else {
color = get_color("font_color");
}
do_underline = underline_mode == UNDERLINE_MODE_ALWAYS;
} break;
case DRAW_HOVER_PRESSED:
Expand Down
6 changes: 5 additions & 1 deletion scene/gui/option_button.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,11 @@ void OptionButton::_notification(int p_what) {
clr = get_color("font_color_disabled");
break;
default:
clr = get_color("font_color");
if (has_focus()) {
clr = get_color("font_color_focus");
} else {
clr = get_color("font_color");
}
}
}

Expand Down
9 changes: 9 additions & 0 deletions scene/resources/default_theme/default_theme.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
Color control_font_color_lower = Color(0.63, 0.63, 0.63);
Color control_font_color_low = Color(0.69, 0.69, 0.69);
Color control_font_color_hover = Color(0.94, 0.94, 0.94);
Color control_font_color_focus = Color(0.94, 0.94, 0.94);
Color control_font_color_disabled = Color(0.9, 0.9, 0.9, 0.2);
Color control_font_color_pressed = Color(1, 1, 1);
Color font_color_selection = Color(0.49, 0.49, 0.49);
Expand Down Expand Up @@ -237,6 +238,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "Button", control_font_color);
theme->set_color("font_color_pressed", "Button", control_font_color_pressed);
theme->set_color("font_color_hover", "Button", control_font_color_hover);
theme->set_color("font_color_focus", "Button", control_font_color_focus);
theme->set_color("font_color_disabled", "Button", control_font_color_disabled);

theme->set_constant("hseparation", "Button", 2 * scale);
Expand All @@ -250,6 +252,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "LinkButton", control_font_color);
theme->set_color("font_color_pressed", "LinkButton", control_font_color_pressed);
theme->set_color("font_color_hover", "LinkButton", control_font_color_hover);
theme->set_color("font_color_focus", "LinkButton", control_font_color_focus);

theme->set_constant("underline_spacing", "LinkButton", 2 * scale);

Expand All @@ -266,6 +269,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "ColorPickerButton", Color(1, 1, 1, 1));
theme->set_color("font_color_pressed", "ColorPickerButton", Color(0.8, 0.8, 0.8, 1));
theme->set_color("font_color_hover", "ColorPickerButton", Color(1, 1, 1, 1));
theme->set_color("font_color_focus", "ColorPickerButton", Color(1, 1, 1, 1));
theme->set_color("font_color_disabled", "ColorPickerButton", Color(0.9, 0.9, 0.9, 0.3));

theme->set_constant("hseparation", "ColorPickerButton", 2 * scale);
Expand All @@ -282,6 +286,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "ToolButton", control_font_color);
theme->set_color("font_color_pressed", "ToolButton", control_font_color_pressed);
theme->set_color("font_color_hover", "ToolButton", control_font_color_hover);
theme->set_color("font_color_focus", "ToolButton", control_font_color_focus);
theme->set_color("font_color_disabled", "ToolButton", Color(0.9, 0.95, 1, 0.3));

theme->set_constant("hseparation", "ToolButton", 3);
Expand All @@ -307,6 +312,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "OptionButton", control_font_color);
theme->set_color("font_color_pressed", "OptionButton", control_font_color_pressed);
theme->set_color("font_color_hover", "OptionButton", control_font_color_hover);
theme->set_color("font_color_focus", "OptionButton", control_font_color_focus);
theme->set_color("font_color_disabled", "OptionButton", control_font_color_disabled);

theme->set_constant("hseparation", "OptionButton", 2 * scale);
Expand All @@ -325,6 +331,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color", "MenuButton", control_font_color);
theme->set_color("font_color_pressed", "MenuButton", control_font_color_pressed);
theme->set_color("font_color_hover", "MenuButton", control_font_color_hover);
theme->set_color("font_color_focus", "MenuButton", control_font_color_focus);
theme->set_color("font_color_disabled", "MenuButton", Color(1, 1, 1, 0.3));

theme->set_constant("hseparation", "MenuButton", 3 * scale);
Expand Down Expand Up @@ -364,6 +371,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color_pressed", "CheckBox", control_font_color_pressed);
theme->set_color("font_color_hover", "CheckBox", control_font_color_hover);
theme->set_color("font_color_hover_pressed", "CheckBox", control_font_color_pressed);
theme->set_color("font_color_focus", "CheckBox", control_font_color_focus);
theme->set_color("font_color_disabled", "CheckBox", control_font_color_disabled);

theme->set_constant("hseparation", "CheckBox", 4 * scale);
Expand Down Expand Up @@ -395,6 +403,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_color("font_color_pressed", "CheckButton", control_font_color_pressed);
theme->set_color("font_color_hover", "CheckButton", control_font_color_hover);
theme->set_color("font_color_hover_pressed", "CheckButton", control_font_color_pressed);
theme->set_color("font_color_focus", "CheckButton", control_font_color_focus);
theme->set_color("font_color_disabled", "CheckButton", control_font_color_disabled);

theme->set_constant("hseparation", "CheckButton", 4 * scale);
Expand Down