Skip to content

Commit

Permalink
Merge pull request #65042 from YuriSizov/editor-docks-tabbar-bg
Browse files Browse the repository at this point in the history
  • Loading branch information
@akien-mga
akien-mga authored Aug 30, 2022
2 parents 706d988 + 8b196be commit e27b61d
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 28 deletions.
3 changes: 3 additions & 0 deletions doc/classes/TabContainer.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,5 +258,8 @@
<theme_item name="tab_unselected" data_type="style" type="StyleBox">
The style of the other, unselected tabs.
</theme_item>
<theme_item name="tabbar_background" data_type="style" type="StyleBox">
The style for the background fill of the [TabBar] area.
</theme_item>
</theme_items>
</class>
7 changes: 6 additions & 1 deletion editor/editor_node.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,8 @@ void EditorNode::_notification(int p_what) {
gui_base->add_theme_style_override("panel", gui_base->get_theme_stylebox(SNAME("Background"), SNAME("EditorStyles")));
scene_root_parent->add_theme_style_override("panel", gui_base->get_theme_stylebox(SNAME("Content"), SNAME("EditorStyles")));
bottom_panel->add_theme_style_override("panel", gui_base->get_theme_stylebox(SNAME("panel"), SNAME("TabContainer")));

tabbar_panel->add_theme_style_override("panel", gui_base->get_theme_stylebox(SNAME("tabbar_background"), SNAME("TabContainer")));
scene_tabs->add_theme_style_override("tab_selected", gui_base->get_theme_stylebox(SNAME("SceneTabFG"), SNAME("EditorStyles")));
scene_tabs->add_theme_style_override("tab_unselected", gui_base->get_theme_stylebox(SNAME("SceneTabBG"), SNAME("EditorStyles")));

Expand Down Expand Up @@ -6490,8 +6492,11 @@ EditorNode::EditorNode() {
tab_preview->set_position(Point2(2, 2) * EDSCALE);
tab_preview_panel->add_child(tab_preview);

tabbar_panel = memnew(PanelContainer);
tabbar_panel->add_theme_style_override("panel", gui_base->get_theme_stylebox(SNAME("tabbar_background"), SNAME("TabContainer")));
srt->add_child(tabbar_panel);
tabbar_container = memnew(HBoxContainer);
srt->add_child(tabbar_container);
tabbar_panel->add_child(tabbar_container);

scene_tabs = memnew(TabBar);
scene_tabs->add_theme_style_override("tab_selected", gui_base->get_theme_stylebox(SNAME("SceneTabFG"), SNAME("EditorStyles")));
Expand Down
1 change: 1 addition & 0 deletions editor/editor_node.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ class EditorNode : public Node {
int dock_popup_selected_idx = -1;
int dock_select_rect_over_idx = -1;

PanelContainer *tabbar_panel = nullptr;
HBoxContainer *tabbar_container = nullptr;
Button *distraction_free = nullptr;
Button *scene_tab_add = nullptr;
Expand Down
62 changes: 35 additions & 27 deletions editor/editor_themes.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -656,45 +656,46 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {

// TabBar

Ref<StyleBoxFlat> style_tab_selected = style_widget->duplicate();
Ref<StyleBoxFlat> style_tab_base = style_widget->duplicate();

// Add a highlight line at the top of the selected tab.
style_tab_selected->set_border_width_all(0);
style_tab_selected->set_default_margin(SIDE_LEFT, widget_default_margin.x - border_width);
style_tab_selected->set_border_width(SIDE_TOP, Math::round(2 * EDSCALE));
// Make the highlight line prominent, but not too prominent as to not be distracting.
Color tab_highlight = dark_color_2.lerp(accent_color, 0.75);
style_tab_selected->set_border_color(tab_highlight);
style_tab_base->set_border_width_all(0);
// Don't round the top corners to avoid creating a small blank space between the tabs and the main panel.
// This also makes the top highlight look better.
style_tab_selected->set_corner_radius_all(0);
style_tab_base->set_corner_detail(corner_width);
style_tab_base->set_corner_radius_all(0);
style_tab_base->set_corner_radius(CORNER_TOP_LEFT, corner_radius * EDSCALE);
style_tab_base->set_corner_radius(CORNER_TOP_RIGHT, corner_radius * EDSCALE);

// Prevent visible artifacts and cover the top-left rounded corner of the panel below the tab if selected
// We can't prevent them with both rounded corners and non-zero border width, though
style_tab_selected->set_expand_margin_size(SIDE_BOTTOM, corner_width > 0 ? corner_width : border_width);

style_tab_base->set_expand_margin_size(SIDE_BOTTOM, corner_width > 0 ? corner_width : border_width);
// When using a border width greater than 0, visually line up the left of the selected tab with the underlying panel.
style_tab_selected->set_expand_margin_size(SIDE_LEFT, -border_width);
style_tab_base->set_expand_margin_size(SIDE_LEFT, -border_width);

style_tab_base->set_default_margin(SIDE_LEFT, widget_default_margin.x + 5 * EDSCALE);
style_tab_base->set_default_margin(SIDE_RIGHT, widget_default_margin.x + 5 * EDSCALE);
style_tab_base->set_default_margin(SIDE_BOTTOM, widget_default_margin.y);
style_tab_base->set_default_margin(SIDE_TOP, widget_default_margin.y);

Ref<StyleBoxFlat> style_tab_selected = style_tab_base->duplicate();

style_tab_selected->set_default_margin(SIDE_LEFT, widget_default_margin.x + 2 * EDSCALE);
style_tab_selected->set_default_margin(SIDE_RIGHT, widget_default_margin.x + 2 * EDSCALE);
style_tab_selected->set_default_margin(SIDE_BOTTOM, widget_default_margin.y);
style_tab_selected->set_default_margin(SIDE_TOP, widget_default_margin.y);
style_tab_selected->set_bg_color(base_color);
// Add a highlight line at the top of the selected tab.
style_tab_selected->set_border_width(SIDE_TOP, Math::round(2 * EDSCALE));
// Make the highlight line prominent, but not too prominent as to not be distracting.
Color tab_highlight = dark_color_2.lerp(accent_color, 0.75);
style_tab_selected->set_border_color(tab_highlight);
style_tab_selected->set_corner_radius_all(0);

Ref<StyleBoxFlat> style_tab_unselected = style_tab_selected->duplicate();
style_tab_unselected->set_bg_color(dark_color_1);
Ref<StyleBoxFlat> style_tab_unselected = style_tab_base->duplicate();
style_tab_unselected->set_expand_margin_size(SIDE_BOTTOM, 0);
style_tab_unselected->set_bg_color(dark_color_1);
// Add some spacing between unselected tabs to make them easier to distinguish from each other
style_tab_unselected->set_border_color(Color(0, 0, 0, 0));
style_tab_unselected->set_border_width(SIDE_LEFT, Math::round(1 * EDSCALE));
style_tab_unselected->set_border_width(SIDE_RIGHT, Math::round(1 * EDSCALE));
style_tab_unselected->set_default_margin(SIDE_LEFT, widget_default_margin.x + 2 * EDSCALE);
style_tab_unselected->set_default_margin(SIDE_RIGHT, widget_default_margin.x + 2 * EDSCALE);

Ref<StyleBoxFlat> style_tab_disabled = style_tab_selected->duplicate();
style_tab_disabled->set_bg_color(disabled_bg_color);
Ref<StyleBoxFlat> style_tab_disabled = style_tab_base->duplicate();
style_tab_disabled->set_expand_margin_size(SIDE_BOTTOM, 0);
style_tab_disabled->set_bg_color(disabled_bg_color);
style_tab_disabled->set_border_color(disabled_bg_color);

// Editor background
Expand Down Expand Up @@ -1199,6 +1200,13 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_constant("line_separation", "ItemList", 3 * EDSCALE);

// TabBar & TabContainer
Ref<StyleBoxFlat> style_tabbar_background = make_flat_stylebox(dark_color_1, 0, 0, 0, 0);
style_tabbar_background->set_expand_margin_size(SIDE_BOTTOM, corner_width > 0 ? corner_width : border_width);
style_tabbar_background->set_corner_detail(corner_width);
style_tabbar_background->set_corner_radius(CORNER_TOP_LEFT, corner_radius * EDSCALE);
style_tabbar_background->set_corner_radius(CORNER_TOP_RIGHT, corner_radius * EDSCALE);
theme->set_stylebox("tabbar_background", "TabContainer", style_tabbar_background);

theme->set_stylebox("tab_selected", "TabContainer", style_tab_selected);
theme->set_stylebox("tab_unselected", "TabContainer", style_tab_unselected);
theme->set_stylebox("tab_disabled", "TabContainer", style_tab_disabled);
Expand Down Expand Up @@ -1234,14 +1242,14 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
Ref<StyleBoxFlat> style_content_panel = style_default->duplicate();
style_content_panel->set_border_color(dark_color_3);
style_content_panel->set_border_width_all(border_width);
style_content_panel->set_border_width(Side::SIDE_TOP, 0);
style_content_panel->set_corner_radius(CORNER_TOP_LEFT, 0);
style_content_panel->set_corner_radius(CORNER_TOP_RIGHT, 0);
// compensate the border
style_content_panel->set_default_margin(SIDE_TOP, (2 + margin_size_extra) * EDSCALE);
style_content_panel->set_default_margin(SIDE_RIGHT, margin_size_extra * EDSCALE);
style_content_panel->set_default_margin(SIDE_BOTTOM, margin_size_extra * EDSCALE);
style_content_panel->set_default_margin(SIDE_LEFT, margin_size_extra * EDSCALE);
// Display border to visually split the body of the container from its possible backgrounds.
style_content_panel->set_border_width(Side::SIDE_TOP, Math::round(2 * EDSCALE));
style_content_panel->set_border_color(dark_color_2);
theme->set_stylebox("panel", "TabContainer", style_content_panel);

// TabContainerOdd can be used on tabs against the base color background (e.g. nested tabs).
Expand Down
4 changes: 4 additions & 0 deletions scene/gui/tab_container.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,10 @@ void TabContainer::_notification(int p_what) {

int header_height = _get_top_margin();

// Draw background for the tabbar.
Ref<StyleBox> tabbar_background = get_theme_stylebox(SNAME("tabbar_background"));
tabbar_background->draw(canvas, Rect2(0, 0, size.width, header_height));
// Draw the background for the tab's content.
panel->draw(canvas, Rect2(0, header_height, size.width, size.height - header_height));

// Draw the popup menu.
Expand Down
1 change: 1 addition & 0 deletions scene/resources/default_theme/default_theme.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -831,6 +831,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
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));
theme->set_stylebox("tabbar_background", "TabContainer", make_empty_stylebox(0, 0, 0, 0));

theme->set_icon("increment", "TabContainer", icons["scroll_button_right"]);
theme->set_icon("increment_highlight", "TabContainer", icons["scroll_button_right_hl"]);
Expand Down

0 comments on commit e27b61d

Please sign in to comment.