asgardius/virtualx-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add theming support for hovered tabs

Browse source 
Tabs can now be styled differently when hovered by the mouse pointer.
This commit is contained in:
David Giardi 2023-03-09 03:52:57 +01:00
parent 06f5b09ca4
commit 9f1e18e64c
8 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
doc/classes/TabBar.xml
View file

@ -326,6 +326,9 @@
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Font color of disabled tabs.
</theme_item>
<theme_item name="font_hovered_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Font color of the currently hovered tab. Does not apply to the selected tab.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the tab name.
</theme_item>
@ -378,6 +381,9 @@
<theme_item name="tab_disabled" data_type="style" type="StyleBox">
The style of disabled tabs.
</theme_item>
<theme_item name="tab_hovered" data_type="style" type="StyleBox">
The style of the currently hovered tab. Does not apply to the selected tab.
</theme_item>
<theme_item name="tab_selected" data_type="style" type="StyleBox">
The style of the currently selected tab.
</theme_item>

6
doc/classes/TabContainer.xml
View file

@ -200,6 +200,9 @@
<theme_item name="font_disabled_color" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Font color of disabled tabs.
</theme_item>
<theme_item name="font_hovered_color" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Font color of the currently hovered tab.
</theme_item>
<theme_item name="font_outline_color" data_type="color" type="Color" default="Color(1, 1, 1, 1)">
The tint of text outline of the tab name.
</theme_item>
@ -256,6 +259,9 @@
<theme_item name="tab_disabled" data_type="style" type="StyleBox">
The style of disabled tabs.
</theme_item>
<theme_item name="tab_hovered" data_type="style" type="StyleBox">
The style of the currently hovered tab.
</theme_item>
<theme_item name="tab_selected" data_type="style" type="StyleBox">
The style of the currently selected tab.
</theme_item>

10
editor/editor_themes.cpp
View file

@ -747,6 +747,12 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
style_tab_selected->set_border_color(tab_highlight);
style_tab_selected->set_corner_radius_all(0);
Ref<StyleBoxFlat> style_tab_hovered = style_tab_base->duplicate();
style_tab_hovered->set_bg_color(dark_color_1.lerp(base_color, 0.4));
// Hovered tab has a subtle highlight between normal and selected states.
style_tab_hovered->set_corner_radius_all(0);
Ref<StyleBoxFlat> style_tab_unselected = style_tab_base->duplicate();
style_tab_unselected->set_expand_margin(SIDE_BOTTOM, 0);
style_tab_unselected->set_bg_color(dark_color_1);
@ -1319,17 +1325,21 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_stylebox("tabbar_background", "TabContainer", style_tabbar_background);
theme->set_stylebox("tab_selected", "TabContainer", style_tab_selected);
theme->set_stylebox("tab_hovered", "TabContainer", style_tab_hovered);
theme->set_stylebox("tab_unselected", "TabContainer", style_tab_unselected);
theme->set_stylebox("tab_disabled", "TabContainer", style_tab_disabled);
theme->set_stylebox("tab_selected", "TabBar", style_tab_selected);
theme->set_stylebox("tab_hovered", "TabBar", style_tab_hovered);
theme->set_stylebox("tab_unselected", "TabBar", style_tab_unselected);
theme->set_stylebox("tab_disabled", "TabBar", style_tab_disabled);
theme->set_stylebox("button_pressed", "TabBar", style_menu);
theme->set_stylebox("button_highlight", "TabBar", style_menu);
theme->set_color("font_selected_color", "TabContainer", font_color);
theme->set_color("font_hovered_color", "TabContainer", font_color);
theme->set_color("font_unselected_color", "TabContainer", font_disabled_color);
theme->set_color("font_outline_color", "TabContainer", font_outline_color);
theme->set_color("font_selected_color", "TabBar", font_color);
theme->set_color("font_hovered_color", "TabBar", font_color);
theme->set_color("font_unselected_color", "TabBar", font_disabled_color);
theme->set_color("font_outline_color", "TabBar", font_outline_color);
theme->set_color("drop_mark_color", "TabContainer", tab_highlight);

12
scene/gui/tab_bar.cpp
View file

@ -44,7 +44,7 @@ Size2 TabBar::get_minimum_size() const {
return ms;
}
int y_margin = MAX(MAX(theme_cache.tab_unselected_style->get_minimum_size().height, theme_cache.tab_selected_style->get_minimum_size().height), theme_cache.tab_disabled_style->get_minimum_size().height);
int y_margin = MAX(MAX(MAX(theme_cache.tab_unselected_style->get_minimum_size().height, theme_cache.tab_hovered_style->get_minimum_size().height), theme_cache.tab_selected_style->get_minimum_size().height), theme_cache.tab_disabled_style->get_minimum_size().height);
for (int i = 0; i < tabs.size(); i++) {
if (tabs[i].hidden) {
@ -58,6 +58,8 @@ Size2 TabBar::get_minimum_size() const {
style = theme_cache.tab_disabled_style;
} else if (current == i) {
style = theme_cache.tab_selected_style;
} else if (hover == i) {
style = theme_cache.tab_hovered_style;
} else {
style = theme_cache.tab_unselected_style;
}
@ -307,6 +309,7 @@ void TabBar::_update_theme_item_cache() {
theme_cache.icon_max_width = get_theme_constant(SNAME("icon_max_width"));
theme_cache.tab_unselected_style = get_theme_stylebox(SNAME("tab_unselected"));
theme_cache.tab_hovered_style = get_theme_stylebox(SNAME("tab_hovered"));
theme_cache.tab_selected_style = get_theme_stylebox(SNAME("tab_selected"));
theme_cache.tab_disabled_style = get_theme_stylebox(SNAME("tab_disabled"));
@ -322,6 +325,7 @@ void TabBar::_update_theme_item_cache() {
theme_cache.outline_size = get_theme_constant(SNAME("outline_size"));
theme_cache.font_selected_color = get_theme_color(SNAME("font_selected_color"));
theme_cache.font_hovered_color = get_theme_color(SNAME("font_hovered_color"));
theme_cache.font_unselected_color = get_theme_color(SNAME("font_unselected_color"));
theme_cache.font_disabled_color = get_theme_color(SNAME("font_disabled_color"));
theme_cache.font_outline_color = get_theme_color(SNAME("font_outline_color"));
@ -397,6 +401,9 @@ void TabBar::_notification(int p_what) {
if (tabs[i].disabled) {
sb = theme_cache.tab_disabled_style;
col = theme_cache.font_disabled_color;
} else if (i == hover) {
sb = theme_cache.tab_hovered_style;
col = theme_cache.font_hovered_color;
} else {
sb = theme_cache.tab_unselected_style;
col = theme_cache.font_unselected_color;
@ -857,6 +864,7 @@ void TabBar::_update_hover() {
if (hover != -1) {
emit_signal(SNAME("tab_hovered"), hover);
}
queue_redraw();
}
if (hover_buttons == -1) { // No hover.
@ -1296,6 +1304,8 @@ int TabBar::get_tab_width(int p_idx) const {
style = theme_cache.tab_disabled_style;
} else if (current == p_idx) {
style = theme_cache.tab_selected_style;
} else if (hover == p_idx) {
style = theme_cache.tab_hovered_style;
} else {
style = theme_cache.tab_unselected_style;
}

2
scene/gui/tab_bar.h
View file

@ -111,6 +111,7 @@ private:
int icon_max_width = 0;
Ref<StyleBox> tab_unselected_style;
Ref<StyleBox> tab_hovered_style;
Ref<StyleBox> tab_selected_style;
Ref<StyleBox> tab_disabled_style;
@ -126,6 +127,7 @@ private:
int outline_size = 0;
Color font_selected_color;
Color font_hovered_color;
Color font_unselected_color;
Color font_disabled_color;
Color font_outline_color;

2
scene/gui/tab_container.cpp
View file

@ -150,6 +150,7 @@ void TabContainer::_update_theme_item_cache() {
theme_cache.outline_size = get_theme_constant(SNAME("outline_size"));
theme_cache.tab_unselected_style = get_theme_stylebox(SNAME("tab_unselected"));
theme_cache.tab_hovered_style = get_theme_stylebox(SNAME("tab_hovered"));
theme_cache.tab_selected_style = get_theme_stylebox(SNAME("tab_selected"));
theme_cache.tab_disabled_style = get_theme_stylebox(SNAME("tab_disabled"));
@ -227,6 +228,7 @@ void TabContainer::_on_theme_changed() {
}
tab_bar->add_theme_style_override(SNAME("tab_unselected"), theme_cache.tab_unselected_style);
tab_bar->add_theme_style_override(SNAME("tab_hovered"), theme_cache.tab_hovered_style);
tab_bar->add_theme_style_override(SNAME("tab_selected"), theme_cache.tab_selected_style);
tab_bar->add_theme_style_override(SNAME("tab_disabled"), theme_cache.tab_disabled_style);

1
scene/gui/tab_container.h
View file

@ -63,6 +63,7 @@ class TabContainer : public Container {
int outline_size = 0;
Ref<StyleBox> tab_unselected_style;
Ref<StyleBox> tab_hovered_style;
Ref<StyleBox> tab_selected_style;
Ref<StyleBox> tab_disabled_style;

6
scene/resources/default_theme/default_theme.cpp
View file

@ -825,8 +825,11 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
style_tab_unselected->set_border_color(style_popup_border_color);
Ref<StyleBoxFlat> style_tab_disabled = style_tab_unselected->duplicate();
style_tab_disabled->set_bg_color(style_disabled_color);
Ref<StyleBoxFlat> style_tab_hovered = style_tab_unselected->duplicate();
style_tab_hovered->set_bg_color(Color(0.1, 0.1, 0.1, 0.3));
theme->set_stylebox("tab_selected", "TabContainer", style_tab_selected);
theme->set_stylebox("tab_hovered", "TabContainer", style_tab_hovered);
theme->set_stylebox("tab_unselected", "TabContainer", style_tab_unselected);
theme->set_stylebox("tab_disabled", "TabContainer", style_tab_disabled);
theme->set_stylebox("panel", "TabContainer", make_flat_stylebox(style_normal_color, 0, 0, 0, 0));
@ -844,6 +847,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_font_size("font_size", "TabContainer", -1);
theme->set_color("font_selected_color", "TabContainer", control_font_hover_color);
theme->set_color("font_hovered_color", "TabContainer", control_font_hover_color);
theme->set_color("font_unselected_color", "TabContainer", control_font_low_color);
theme->set_color("font_disabled_color", "TabContainer", control_font_disabled_color);
theme->set_color("font_outline_color", "TabContainer", Color(1, 1, 1));
@ -857,6 +861,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
// TabBar
theme->set_stylebox("tab_selected", "TabBar", style_tab_selected);
theme->set_stylebox("tab_hovered", "TabBar", style_tab_hovered);
theme->set_stylebox("tab_unselected", "TabBar", style_tab_unselected);
theme->set_stylebox("tab_disabled", "TabBar", style_tab_disabled);
theme->set_stylebox("button_pressed", "TabBar", button_pressed);
@ -873,6 +878,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
theme->set_font_size("font_size", "TabBar", -1);
theme->set_color("font_selected_color", "TabBar", control_font_hover_color);
theme->set_color("font_hovered_color", "TabBar", control_font_hover_color);
theme->set_color("font_unselected_color", "TabBar", control_font_low_color);
theme->set_color("font_disabled_color", "TabBar", control_font_disabled_color);
theme->set_color("font_outline_color", "TabBar", Color(1, 1, 1));