Improve the look of inner tabs in modern theme

This commit is contained in:
passivestar 2025-12-28 15:27:39 +04:00
parent 63227bbc8a
commit 3393740d42
13 changed files with 88 additions and 10 deletions

View file

@ -39,6 +39,7 @@
#include "editor/file_system/editor_file_system.h"
#include "editor/gui/editor_file_dialog.h"
#include "editor/inspector/editor_inspector.h"
#include "editor/settings/editor_settings.h"
#include "editor/themes/editor_scale.h"
#include "editor/translations/editor_locale_dialog.h"
#include "scene/gui/split_container.h"
@ -613,6 +614,11 @@ void DynamicFontImportSettingsDialog::_notification(int p_what) {
} break;
case NOTIFICATION_THEME_CHANGED: {
const String theme_style = EDITOR_GET("interface/theme/style");
const String type_variation = theme_style == "Classic" ? "TabContainerOdd" : "TabContainerInner";
main_pages->set_theme_type_variation(type_variation);
preload_pages->set_theme_type_variation(type_variation);
add_var->set_button_icon(get_editor_theme_icon(SNAME("Add")));
label_warn->add_theme_color_override(SceneStringName(font_color), get_theme_color(SNAME("warning_color"), EditorStringName(Editor)));
} break;
@ -1014,7 +1020,6 @@ DynamicFontImportSettingsDialog::DynamicFontImportSettingsDialog() {
main_pages->set_tab_alignment(TabBar::ALIGNMENT_CENTER);
main_pages->set_v_size_flags(Control::SIZE_EXPAND_FILL);
main_pages->set_h_size_flags(Control::SIZE_EXPAND_FILL);
main_pages->set_theme_type_variation("TabContainerOdd");
root_vb->add_child(main_pages);
label_warn = memnew(Label);

View file

@ -4413,7 +4413,7 @@ void TileMapLayerEditor::set_show_layer_selector(bool p_show_layer_selector) {
void TileMapLayerEditor::update_layout(DockLayout p_layout) {
bool is_vertical = (p_layout == EditorDock::DockLayout::DOCK_LAYOUT_VERTICAL);
tabs_bar->get_parent()->remove_child(tabs_bar);
tabs_panel->get_parent()->remove_child(tabs_panel);
tile_map_toolbar->set_vertical(is_vertical);
layer_selector_separator->set_vertical(is_vertical);
layer_selection_hbox->set_vertical(is_vertical);
@ -4423,10 +4423,10 @@ void TileMapLayerEditor::update_layout(DockLayout p_layout) {
main_box_container->move_child(padding_control, is_vertical ? 0 : 2);
if (is_vertical) {
tile_map_wide_toolbar->add_child(tabs_bar);
tile_map_wide_toolbar->add_child(tabs_panel);
} else {
tile_map_toolbar->add_child(tabs_bar);
tile_map_toolbar->move_child(tabs_bar, 0);
tile_map_toolbar->add_child(tabs_panel);
tile_map_toolbar->move_child(tabs_panel, 0);
}
for (TileMapLayerSubEditorPlugin::TabData &tab_data : tabs_data) {
@ -4468,6 +4468,7 @@ TileMapLayerEditor::TileMapLayerEditor() {
// TabBar.
tabs_bar = memnew(TabBar);
tabs_bar->set_theme_type_variation("TabBarInner");
tabs_bar->set_clip_tabs(false);
for (int plugin_index = 0; plugin_index < tile_map_editor_plugins.size(); plugin_index++) {
Vector<TileMapLayerSubEditorPlugin::TabData> tabs_vector = tile_map_editor_plugins[plugin_index]->get_tabs();
@ -4491,7 +4492,10 @@ TileMapLayerEditor::TileMapLayerEditor() {
main_box_container->add_child(padding_control);
// Tabs.
tile_map_toolbar->add_child(tabs_bar);
tabs_panel = memnew(PanelContainer);
tabs_panel->set_theme_type_variation("PanelContainerTabbarInner");
tabs_panel->add_child(tabs_bar);
tile_map_toolbar->add_child(tabs_panel);
// Tabs toolbars.
for (TileMapLayerSubEditorPlugin::TabData &tab_data : tabs_data) {

View file

@ -419,6 +419,7 @@ private:
// Bottom panel.
Label *cant_edit_label = nullptr;
TabBar *tabs_bar = nullptr;
PanelContainer *tabs_panel = nullptr;
LocalVector<TileMapLayerSubEditorPlugin::TabData> tabs_data;
LocalVector<TileMapLayerSubEditorPlugin *> tabs_plugins;
void _update_bottom_panel();

View file

@ -824,6 +824,7 @@ TileSetEditor::TileSetEditor() {
// TabBar.
tabs_bar = memnew(TabBar);
tabs_bar->set_theme_type_variation("TabBarInner");
tabs_bar->set_tab_alignment(TabBar::ALIGNMENT_CENTER);
tabs_bar->set_clip_tabs(false);
tabs_bar->add_tab(TTR("Tile Sources"));
@ -832,7 +833,11 @@ TileSetEditor::TileSetEditor() {
tile_set_toolbar = memnew(HBoxContainer);
tile_set_toolbar->set_h_size_flags(SIZE_EXPAND_FILL);
tile_set_toolbar->add_child(tabs_bar);
PanelContainer *tabs_panel = memnew(PanelContainer);
tabs_panel->set_theme_type_variation("PanelContainerTabbarInner");
tabs_panel->add_child(tabs_bar);
tile_set_toolbar->add_child(tabs_panel);
main_vb->add_child(tile_set_toolbar);
//// Tiles ////

View file

@ -44,6 +44,7 @@
#include "editor/gui/progress_dialog.h"
#include "editor/inspector/editor_resource_picker.h"
#include "editor/settings/editor_command_palette.h"
#include "editor/settings/editor_settings.h"
#include "editor/themes/editor_scale.h"
#include "scene/gui/check_button.h"
#include "scene/gui/color_picker.h"
@ -2129,6 +2130,7 @@ ThemeItemEditorDialog::ThemeItemEditorDialog(ThemeTypeEditor *p_theme_type_edito
// Import Items tab.
TabContainer *import_tc = memnew(TabContainer);
import_tc->set_theme_type_variation("TabContainerInner");
import_tc->set_tab_alignment(TabBar::ALIGNMENT_CENTER);
tc->add_child(import_tc);
tc->set_tab_title(1, TTR("Import Items"));
@ -3485,6 +3487,9 @@ void ThemeTypeEditor::_notification(int p_what) {
rename_type_button->set_button_icon(get_editor_theme_icon(SNAME("Rename")));
remove_type_button->set_button_icon(get_editor_theme_icon(SNAME("Remove")));
const String theme_style = EDITOR_GET("interface/theme/style");
data_type_tabs->set_theme_type_variation(theme_style == "Classic" ? "TabContainerOdd" : "TabContainerInner");
data_type_tabs->set_tab_icon(0, get_editor_theme_icon(SNAME("Color")));
data_type_tabs->set_tab_icon(1, get_editor_theme_icon(SNAME("MemberConstant")));
data_type_tabs->set_tab_icon(2, get_editor_theme_icon(SNAME("FontItem")));
@ -3622,7 +3627,6 @@ ThemeTypeEditor::ThemeTypeEditor() {
main_vb->add_child(data_type_tabs);
data_type_tabs->set_v_size_flags(SIZE_EXPAND_FILL);
data_type_tabs->set_use_hidden_tabs_for_min_size(true);
data_type_tabs->set_theme_type_variation("TabContainerOdd");
color_items_list = _create_item_list(Theme::DATA_TYPE_COLOR);
constant_items_list = _create_item_list(Theme::DATA_TYPE_CONSTANT);

View file

@ -119,6 +119,7 @@ RenameDialog::RenameDialog(SceneTreeEditor *p_scene_tree_editor) {
vbc->add_child(cbut_collapse_features);
tabc_features = memnew(TabContainer);
tabc_features->set_theme_type_variation("TabContainerInner");
tabc_features->set_use_hidden_tabs_for_min_size(true);
vbc->add_child(tabc_features);

View file

@ -813,6 +813,7 @@ ProjectSettingsEditor::ProjectSettingsEditor(EditorData *p_data) {
tab_container->add_child(localization_editor);
TabContainer *globals_container = memnew(TabContainer);
globals_container->set_theme_type_variation("TabContainerInner");
globals_container->set_name(TTRC("Globals"));
tab_container->add_child(globals_container);

View file

@ -82,11 +82,13 @@ void EditorNativeShaderSourceVisualizer::_inspect_shader(RID p_shader) {
_load_theme_settings();
versions = memnew(TabContainer);
versions->set_theme_type_variation("TabContainerInner");
versions->set_tab_alignment(TabBar::ALIGNMENT_CENTER);
versions->set_v_size_flags(Control::SIZE_EXPAND_FILL);
versions->set_h_size_flags(Control::SIZE_EXPAND_FILL);
for (int i = 0; i < nsc.versions.size(); i++) {
TabContainer *vtab = memnew(TabContainer);
vtab->set_theme_type_variation("TabContainerInner");
vtab->set_name("Version " + itos(i));
vtab->set_tab_alignment(TabBar::ALIGNMENT_CENTER);
vtab->set_v_size_flags(Control::SIZE_EXPAND_FILL);

View file

@ -2009,6 +2009,13 @@ void ThemeClassic::populate_editor_styles(const Ref<EditorTheme> &p_theme, Edito
p_theme->set_stylebox(SceneStringName(panel), "TabContainerOdd", style_content_panel_odd);
}
// PanelContainerTabbarInner.
{
// Used by Modern theme.
p_theme->set_type_variation("PanelContainerTabbarInner", "PanelContainer");
p_theme->set_stylebox(SceneStringName(panel), "PanelContainerTabbarInner", EditorThemeManager::make_empty_stylebox(0, 0, 0, 0));
}
// TreeLineEdit.
{
Ref<StyleBoxFlat> tree_line_edit_style = p_theme->get_stylebox(CoreStringName(normal), SNAME("LineEdit"))->duplicate();

View file

@ -1975,7 +1975,7 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor
// TabContainerOdd variation.
{
// Can be used on tabs against the base color background (e.g. nested tabs).
// Used for tabs against the base color background in the classic theme.
p_theme->set_type_variation("TabContainerOdd", "TabContainer");
Ref<StyleBoxFlat> style_tab_selected_odd = p_theme->get_stylebox(SNAME("tab_selected"), SNAME("TabContainer"))->duplicate();
@ -1989,6 +1989,49 @@ void ThemeModern::populate_editor_styles(const Ref<EditorTheme> &p_theme, Editor
p_theme->set_stylebox("tabbar_background", "TabContainerOdd", p_theme->get_stylebox(SNAME("tabbar_background"), SNAME("TabContainer")));
}
// TabContainerInner, TabBarInner, PanelContainerTabbarInner variations.
{
// Used for tabs against the base color background in the modern theme.
p_theme->set_type_variation("TabContainerInner", "TabContainer");
p_theme->set_type_variation("TabBarInner", "TabBar");
p_theme->set_type_variation("PanelContainerTabbarInner", "PanelContainer");
Ref<StyleBoxFlat> style_tab_selected_inner = p_theme->get_stylebox(SNAME("tab_selected"), SNAME("TabContainer"))->duplicate();
style_tab_selected_inner->set_content_margin_individual(p_config.base_margin * 4 * EDSCALE, p_config.base_margin * 1.5 * EDSCALE, p_config.base_margin * 4 * EDSCALE, p_config.base_margin * 1.5 * EDSCALE);
style_tab_selected_inner->set_corner_radius_all(p_config.corner_radius * EDSCALE);
p_theme->set_stylebox("tab_selected", "TabContainerInner", style_tab_selected_inner);
p_theme->set_stylebox("tab_selected", "TabBarInner", style_tab_selected_inner);
Color background_color = p_config.surface_lower_color.lerp(p_config.mono_color_inv, 0.15);
Ref<StyleBoxFlat> style_tab_unselected_inner = style_tab_selected_inner->duplicate();
style_tab_unselected_inner->set_bg_color(background_color);
p_theme->set_stylebox("tab_unselected", "TabContainerInner", style_tab_unselected_inner);
p_theme->set_stylebox("tab_unselected", "TabBarInner", style_tab_unselected_inner);
Ref<StyleBoxFlat> style_tab_hovered_inner = style_tab_selected_inner->duplicate();
style_tab_hovered_inner->set_bg_color(background_color.lerp(p_config.mono_color, 0.05));
p_theme->set_stylebox("tab_hovered", "TabContainerInner", style_tab_hovered_inner);
p_theme->set_stylebox("tab_hovered", "TabBarInner", style_tab_hovered_inner);
Ref<StyleBoxFlat> style_tab_disabled_inner = style_tab_selected_inner->duplicate();
style_tab_disabled_inner->set_bg_color(background_color);
p_theme->set_stylebox("tab_disabled", "TabContainerInner", style_tab_disabled_inner);
p_theme->set_stylebox("tab_disabled", "TabBarInner", style_tab_disabled_inner);
Ref<StyleBoxFlat> style_tabbar_background_inner = p_theme->get_stylebox(SNAME("tabbar_background"), SNAME("TabContainer"))->duplicate();
style_tabbar_background_inner->set_content_margin_all(p_config.base_margin * EDSCALE);
style_tabbar_background_inner->set_corner_radius_all(p_config.corner_radius * EDSCALE + p_config.base_margin * EDSCALE);
style_tabbar_background_inner->set_bg_color(background_color);
p_theme->set_stylebox("tabbar_background", "TabContainerInner", style_tabbar_background_inner);
p_theme->set_constant("tab_separation", "TabContainerInner", p_config.separation_margin);
p_theme->set_constant("tab_separation", "TabBarInner", p_config.separation_margin);
p_theme->set_stylebox(SceneStringName(panel), "PanelContainerTabbarInner", style_tabbar_background_inner);
}
// TreeLineEdit.
{
Ref<StyleBoxFlat> tree_line_edit_style = p_theme->get_stylebox(CoreStringName(normal), SNAME("LineEdit"))->duplicate();

View file

@ -732,6 +732,7 @@ LocalizationEditor::LocalizationEditor() {
localization_changed = "localization_changed";
TabContainer *translations = memnew(TabContainer);
translations->set_theme_type_variation("TabContainerInner");
translations->set_v_size_flags(Control::SIZE_EXPAND_FILL);
add_child(translations);

View file

@ -404,6 +404,7 @@ ObjectDBProfilerPanel::ObjectDBProfilerPanel() {
// Tabs of various views right for each snapshot.
view_tabs = memnew(TabContainer);
view_tabs->set_theme_type_variation("TabContainerInner");
root_container->add_child(view_tabs);
view_tabs->set_custom_minimum_size(Size2(300 * EDSCALE, 0));
view_tabs->set_v_size_flags(SizeFlags::SIZE_EXPAND_FILL);

View file

@ -35,6 +35,7 @@
#include "editor/editor_node.h"
#include "editor/gui/editor_file_dialog.h"
#include "editor/settings/editor_command_palette.h"
#include "editor/settings/editor_settings.h"
#include "editor/themes/editor_scale.h"
HashMap<String, String> OpenXRActionMapEditor::interaction_profile_editors;
@ -59,6 +60,9 @@ void OpenXRActionMapEditor::_bind_methods() {
void OpenXRActionMapEditor::_notification(int p_what) {
switch (p_what) {
case NOTIFICATION_THEME_CHANGED: {
const String theme_style = EDITOR_GET("interface/theme/style");
tabs->set_theme_type_variation(theme_style == "Classic" ? "TabContainerOdd" : "TabContainerInner");
for (int i = 0; i < tabs->get_child_count(); i++) {
Control *tab = Object::cast_to<Control>(tabs->get_child(i));
if (tab) {
@ -481,7 +485,6 @@ OpenXRActionMapEditor::OpenXRActionMapEditor() {
tabs = memnew(TabContainer);
tabs->set_h_size_flags(SIZE_EXPAND_FILL);
tabs->set_v_size_flags(SIZE_EXPAND_FILL);
tabs->set_theme_type_variation("TabContainerOdd");
tabs->connect("tab_changed", callable_mp(this, &OpenXRActionMapEditor::_on_tabs_tab_changed));
tabs->connect("tab_button_pressed", callable_mp(this, &OpenXRActionMapEditor::_on_tab_button_pressed));
main_vb->add_child(tabs);