From 9f1e18e64ceb09cfeedd0a341de298e3ef806976 Mon Sep 17 00:00:00 2001 From: David Giardi Date: Thu, 9 Mar 2023 03:52:57 +0100 Subject: [PATCH] Add theming support for hovered tabs Tabs can now be styled differently when hovered by the mouse pointer. --- doc/classes/TabBar.xml | 6 ++++++ doc/classes/TabContainer.xml | 6 ++++++ editor/editor_themes.cpp | 10 ++++++++++ scene/gui/tab_bar.cpp | 12 +++++++++++- scene/gui/tab_bar.h | 2 ++ scene/gui/tab_container.cpp | 2 ++ scene/gui/tab_container.h | 1 + scene/resources/default_theme/default_theme.cpp | 6 ++++++ 8 files changed, 44 insertions(+), 1 deletion(-) diff --git a/doc/classes/TabBar.xml b/doc/classes/TabBar.xml index 4bbd74cd11a..0d4ae029076 100644 --- a/doc/classes/TabBar.xml +++ b/doc/classes/TabBar.xml @@ -326,6 +326,9 @@ Font color of disabled tabs. + + Font color of the currently hovered tab. Does not apply to the selected tab. + The tint of text outline of the tab name. @@ -378,6 +381,9 @@ The style of disabled tabs. + + The style of the currently hovered tab. Does not apply to the selected tab. + The style of the currently selected tab. diff --git a/doc/classes/TabContainer.xml b/doc/classes/TabContainer.xml index b0dcb932dc4..5c4e83cfa0d 100644 --- a/doc/classes/TabContainer.xml +++ b/doc/classes/TabContainer.xml @@ -200,6 +200,9 @@ Font color of disabled tabs. + + Font color of the currently hovered tab. + The tint of text outline of the tab name. @@ -256,6 +259,9 @@ The style of disabled tabs. + + The style of the currently hovered tab. + The style of the currently selected tab. diff --git a/editor/editor_themes.cpp b/editor/editor_themes.cpp index 5cd5ff05c57..0b1f217f901 100644 --- a/editor/editor_themes.cpp +++ b/editor/editor_themes.cpp @@ -747,6 +747,12 @@ Ref create_editor_theme(const Ref p_theme) { style_tab_selected->set_border_color(tab_highlight); style_tab_selected->set_corner_radius_all(0); + Ref 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 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 create_editor_theme(const Ref 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); diff --git a/scene/gui/tab_bar.cpp b/scene/gui/tab_bar.cpp index 5eb5a519ff1..316d4f6ce8f 100644 --- a/scene/gui/tab_bar.cpp +++ b/scene/gui/tab_bar.cpp @@ -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; } diff --git a/scene/gui/tab_bar.h b/scene/gui/tab_bar.h index a232061b693..adc2b8bde16 100644 --- a/scene/gui/tab_bar.h +++ b/scene/gui/tab_bar.h @@ -111,6 +111,7 @@ private: int icon_max_width = 0; Ref tab_unselected_style; + Ref tab_hovered_style; Ref tab_selected_style; Ref 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; diff --git a/scene/gui/tab_container.cpp b/scene/gui/tab_container.cpp index f4f71834751..4a7f88f7930 100644 --- a/scene/gui/tab_container.cpp +++ b/scene/gui/tab_container.cpp @@ -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); diff --git a/scene/gui/tab_container.h b/scene/gui/tab_container.h index f64f1fe2a33..ca605a9b79b 100644 --- a/scene/gui/tab_container.h +++ b/scene/gui/tab_container.h @@ -63,6 +63,7 @@ class TabContainer : public Container { int outline_size = 0; Ref tab_unselected_style; + Ref tab_hovered_style; Ref tab_selected_style; Ref tab_disabled_style; diff --git a/scene/resources/default_theme/default_theme.cpp b/scene/resources/default_theme/default_theme.cpp index a70cdeda20f..206922a6e5e 100644 --- a/scene/resources/default_theme/default_theme.cpp +++ b/scene/resources/default_theme/default_theme.cpp @@ -825,8 +825,11 @@ void fill_default_theme(Ref &theme, const Ref &default_font, const style_tab_unselected->set_border_color(style_popup_border_color); Ref style_tab_disabled = style_tab_unselected->duplicate(); style_tab_disabled->set_bg_color(style_disabled_color); + Ref 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, const Ref &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, const Ref &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, const Ref &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));