Move tabs panel button to TopAppBar and fix refresh issues

assets/icons/TripleBar.svg.import

@@ -0,0 +1,43 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://p6hce4bo5wdc"
+path="res://.godot/imported/TripleBar.svg-19349393e5cfabba548f5f1064687f3a.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/icons/TripleBar.svg"
+dest_files=["res://.godot/imported/TripleBar.svg-19349393e5cfabba548f5f1064687f3a.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

src/autoload/Configs.gd

@@ -86,7 +86,7 @@ func reset_settings() -> void:
 	savedata = SaveData.new()
 	savedata.reset_to_default()
 	savedata.language = "en"
-	savedata.set_shortcut_panel_slots({ 0: "ui_undo", 1: "ui_redo", 2: "duplicate", 3: "delete"})
+	savedata.set_shortcut_panel_slots({ 0: "ui_undo", 1: "ui_redo", 2: "duplicate", 3: "delete", 4: "import", 5: "export"})
 	savedata.set_palettes([Palette.new("Pure", Palette.Preset.PURE)])
 	save()
 	post_load()

src/config_classes/SaveData.gd

@@ -14,7 +14,7 @@ func get_setting_default(setting: String) -> Variant:
 	match setting:
 		"base_color":
 			match theme_preset:
-				ThemePreset.DARK: return Color("121212")
+				ThemePreset.DARK: return Color("1a1a1a")
 				ThemePreset.LIGHT: return Color("e6e6ff")
 				ThemePreset.BLACK: return Color("000")
 		"accent_color":
@@ -223,7 +223,7 @@ const CURRENT_VERSION = 1
 			theme_preset = new_value
 			emit_changed()
 
-@export var base_color := Color("121212"):
+@export var base_color := Color("1a1a1a"):
 	set(new_value):
 		if base_color != new_value:
 			base_color = new_value
@@ -795,7 +795,7 @@ func set_palettes(new_palettes: Array[Palette]) -> void:
 			emit_changed()
 			Configs.shortcut_panel_changed.emit()
 
-const SHORTCUT_PANEL_MAX_SLOTS = 6
+const SHORTCUT_PANEL_MAX_SLOTS = 7
 @export var _shortcut_panel_slots: Dictionary[int, String] = {}:
 	set(new_value):
 		# Validation

src/ui_parts/display.gd

@@ -14,7 +14,6 @@ const NumberEdit = preload("res://src/ui_widgets/number_edit.gd")
 @onready var toolbar: PanelContainer = $ViewportPanel/VBoxContainer/Toolbar
 
 var tabs_panel: PanelContainer
-var should_refresh_tabs := false
 
 var reference_overlay := false
 
@@ -141,11 +140,3 @@ func _update_input_debug(event: InputEvent) -> void:
 			new_text = new_text.right(-new_text.find("\n") - 1)
 		new_text += event_text + "\n"
 		input_debug_label.text = new_text
-
-
-func show_tabs_panel() -> void:
-	if should_refresh_tabs:
-		HandlerGUI.tabs_panel.refresh_tabs()
-		should_refresh_tabs = false
-	HandlerGUI.tabs_panel.get_parent().show()
-	HandlerGUI.tabs_panel.animate_in()

src/ui_parts/display.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=19 format=3 uid="uid://bvrncl7e6yn5b"]
+[gd_scene load_steps=18 format=3 uid="uid://bvrncl7e6yn5b"]
 
 [ext_resource type="Script" uid="uid://bxmb134e3sqpr" path="res://src/ui_parts/display.gd" id="1_oib5g"]
 [ext_resource type="Texture2D" uid="uid://iglrqrqyg4kn" path="res://assets/icons/Reference.svg" id="4_2hiq7"]
@@ -15,7 +15,6 @@
 [ext_resource type="Texture2D" uid="uid://c68og6bsqt0lb" path="res://assets/icons/backgrounds/Checkerboard.svg" id="11_1bm1s"]
 [ext_resource type="Script" uid="uid://dtplje5mhdmrj" path="res://src/ui_parts/display_texture.gd" id="12_qi23s"]
 [ext_resource type="Script" uid="uid://csqewpxr21ywy" path="res://src/ui_parts/handles_manager.gd" id="13_lwhwy"]
-[ext_resource type="Texture2D" uid="uid://8x628rb2bnep" path="res://assets/icons/TabSwitcher.svg" id="14_ryr8t"]
 [ext_resource type="Texture2D" uid="uid://d04w7h3k83w8u" path="res://assets/icons/element/svg.svg" id="15_kq8gf"]
 
 [sub_resource type="ShaderMaterial" id="ShaderMaterial_kqplg"]
@@ -182,25 +181,6 @@ layout_mode = 2
 size_flags_vertical = 4
 alignment = 2
 
-[node name="Control" type="Control" parent="ViewportPanel/VBoxContainer/Toolbar"]
-layout_mode = 2
-mouse_filter = 2
-
-[node name="TabsPanel" type="Button" parent="ViewportPanel/VBoxContainer/Toolbar/Control"]
-layout_mode = 1
-anchors_preset = -1
-anchor_left = 0.5
-anchor_right = 0.5
-offset_left = -12.0
-offset_top = -55.0
-offset_right = 12.0
-offset_bottom = -16.0
-grow_horizontal = 2
-focus_mode = 0
-mouse_default_cursor_shape = 2
-icon = ExtResource("14_ryr8t")
-icon_alignment = 1
-
 [node name="DebugMargins" type="MarginContainer" parent="ViewportPanel"]
 visible = false
 layout_mode = 2
@@ -240,4 +220,3 @@ horizontal_alignment = 2
 [connection signal="value_changed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/Snapping/SnapNumberEdit" to="." method="_on_snap_number_edit_value_changed"]
 [connection signal="zoom_changed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/ZoomMenu" to="ViewportPanel/VBoxContainer/ViewportContainer/Viewport" method="_on_zoom_changed"]
 [connection signal="zoom_reset_pressed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/ZoomMenu" to="ViewportPanel/VBoxContainer/ViewportContainer/Viewport" method="center_frame"]
-[connection signal="pressed" from="ViewportPanel/VBoxContainer/Toolbar/Control/TabsPanel" to="." method="show_tabs_panel"]

src/ui_parts/tabs_panel.gd

@@ -4,13 +4,18 @@ const tabItem = preload("res://src/ui_widgets/tab_item.tscn")
 
 @onready var tab_container: VBoxContainer = $VBoxContainer/ScrollContainer/VBoxContainer
 
+var should_refresh = false
+
 func _ready() -> void:
 	get_parent().gui_input.connect(_on_parent_gui_input)
 	Configs.tab_removed.connect(refresh_tabs)
 	Configs.tab_selected.connect(highlight_active_tab)
+	Configs.tabs_changed.connect(func(): should_refresh = true)
 	refresh_tabs()
 
 func animate_in() -> void:
+	if should_refresh:
+		refresh_tabs()
 	var tween := get_tree().create_tween()
 	tween.tween_property(self, "position:x", 0, 0.3).from(-200).set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_OUT)
 
@@ -19,8 +24,10 @@ func animate_out() -> void:
 	tween.tween_property(self, "position:x", -200, 0.3).set_trans(Tween.TRANS_CUBIC).set_ease(Tween.EASE_OUT)
 	await tween.finished
 	get_parent().hide()
+	should_refresh = false
 
 func refresh_tabs() -> void:
+	should_refresh = false
 	for i in tab_container.get_children():
 		i.queue_free()
 

src/ui_parts/top_app_bar.gd

@@ -4,9 +4,9 @@ const LayoutPopup = preload("res://src/ui_parts/layout_popup.gd")
 
 const LayoutPopupScene = preload("res://src/ui_parts/layout_popup.tscn")
 
-@onready var more_options: Button = $RightSide/MoreOptions
+@onready var more_options: Button = $MoreOptions
 @onready var size_button: Button = $SizeButton
-@onready var layout_button: Button = $LeftSide/LayoutButton
+@onready var layout_button: Button = $LayoutButton
 
 func sync_localization() -> void:
 	layout_button.tooltip_text = Translator.translate("Layout")
@@ -99,3 +99,12 @@ func _on_layout_button_pressed() -> void:
 	var layout_popup := LayoutPopupScene.instantiate()
 	HandlerGUI.popup_under_rect_center(layout_popup, layout_button.get_global_rect(),
 			get_viewport())
+
+
+func _on_new_tab_button_pressed() -> void:
+	Configs.savedata.add_empty_tab()
+
+
+func _on_tabs_panel_button_pressed() -> void:
+	HandlerGUI.tabs_panel.get_parent().show()
+	HandlerGUI.tabs_panel.animate_in()

src/ui_parts/top_app_bar.tscn

@@ -1,11 +1,13 @@
-[gd_scene load_steps=11 format=3 uid="uid://cxmrx6t4jkhyj"]
+[gd_scene load_steps=13 format=3 uid="uid://cxmrx6t4jkhyj"]
 
 [ext_resource type="Script" uid="uid://cgbgw4ok5jxk5" path="res://src/ui_parts/top_app_bar.gd" id="1_jmrmv"]
+[ext_resource type="Texture2D" uid="uid://p6hce4bo5wdc" path="res://assets/icons/TripleBar.svg" id="2_1c622"]
 [ext_resource type="Texture2D" uid="uid://ccbta5q43jobk" path="res://assets/icons/More.svg" id="2_tyac5"]
 [ext_resource type="Texture2D" uid="uid://ckkkgof1hcbld" path="res://assets/icons/Gear.svg" id="3_mw1j6"]
 [ext_resource type="Script" uid="uid://ynx3s1jc6bwq" path="res://src/ui_widgets/BetterButton.gd" id="4_1c622"]
 [ext_resource type="Texture2D" uid="uid://b6mqp088ef65" path="res://assets/icons/Layouts.svg" id="5_wucs8"]
 [ext_resource type="FontFile" uid="uid://dc0w4sx0h0fui" path="res://assets/fonts/FontBold.ttf" id="6_8jjfh"]
+[ext_resource type="Texture2D" uid="uid://bnl24bflj771n" path="res://assets/icons/CreateTab.svg" id="7_1c622"]
 [ext_resource type="Script" uid="uid://41g64ussxcbn" path="res://src/ui_parts/current_file_button.gd" id="7_irbyw"]
 [ext_resource type="Texture2D" uid="uid://6ymbl3jqersp" path="res://assets/icons/Import.svg" id="8_qg4on"]
 [ext_resource type="Texture2D" uid="uid://rxfu7kcmo7c1" path="res://assets/icons/Save.svg" id="9_mw1j6"]
@@ -16,30 +18,33 @@ anchors_preset = -1
 anchor_right = 1.0
 offset_bottom = 24.0
 grow_horizontal = 2
+theme_override_constants/separation = 0
 script = ExtResource("1_jmrmv")
 
-[node name="LeftSide" type="HBoxContainer" parent="."]
+[node name="TabsPanelButton" type="Button" parent="."]
 layout_mode = 2
+focus_mode = 0
+mouse_default_cursor_shape = 2
+theme_type_variation = &"FlatButton"
+text = "Tabs"
+icon = ExtResource("2_1c622")
 
-[node name="LayoutButton" type="Button" parent="LeftSide"]
-visible = false
+[node name="NewTabButton" type="Button" parent="."]
 layout_mode = 2
-size_flags_horizontal = 2
 focus_mode = 0
 mouse_default_cursor_shape = 2
-theme_type_variation = &"ContextButton"
-icon = ExtResource("5_wucs8")
+theme_type_variation = &"IconButton"
+icon = ExtResource("7_1c622")
+icon_alignment = 1
 
-[node name="SettingsButton" type="Button" parent="LeftSide"]
+[node name="CurrentFileButton" type="Button" parent="."]
 layout_mode = 2
-size_flags_horizontal = 2
+size_flags_horizontal = 3
 focus_mode = 0
 mouse_default_cursor_shape = 2
-theme_type_variation = &"IconButton"
-icon = ExtResource("3_mw1j6")
-script = ExtResource("4_1c622")
-action = "open_settings"
-metadata/_custom_type_script = "uid://ynx3s1jc6bwq"
+theme_type_variation = &"FlatButton"
+text_overrun_behavior = 3
+script = ExtResource("7_irbyw")
 
 [node name="SizeButton" type="Button" parent="."]
 layout_mode = 2
@@ -48,21 +53,16 @@ mouse_default_cursor_shape = 2
 theme_type_variation = &"ContextButton"
 theme_override_fonts/font = ExtResource("6_8jjfh")
 
-[node name="CurrentFileButton" type="Button" parent="."]
+[node name="LayoutButton" type="Button" parent="."]
+visible = false
 layout_mode = 2
-size_flags_horizontal = 3
 focus_mode = 0
 mouse_default_cursor_shape = 2
-theme_type_variation = &"FlatButton"
-text_overrun_behavior = 3
-script = ExtResource("7_irbyw")
-
-[node name="RightSide" type="HBoxContainer" parent="."]
-layout_mode = 2
+theme_type_variation = &"ContextButton"
+icon = ExtResource("5_wucs8")
 
-[node name="SaveButton" type="Button" parent="RightSide"]
+[node name="SaveButton" type="Button" parent="."]
 layout_mode = 2
-size_flags_horizontal = 2
 focus_mode = 0
 mouse_default_cursor_shape = 2
 theme_type_variation = &"IconButton"
@@ -71,30 +71,44 @@ script = ExtResource("4_1c622")
 action = "save"
 metadata/_custom_type_script = "uid://ynx3s1jc6bwq"
 
-[node name="ImportButton" type="Button" parent="RightSide"]
+[node name="SettingsButton" type="Button" parent="."]
 layout_mode = 2
 focus_mode = 0
 mouse_default_cursor_shape = 2
-theme_type_variation = &"ContextButton"
+theme_type_variation = &"IconButton"
+icon = ExtResource("3_mw1j6")
+script = ExtResource("4_1c622")
+action = "open_settings"
+metadata/_custom_type_script = "uid://ynx3s1jc6bwq"
+
+[node name="ImportButton" type="Button" parent="."]
+visible = false
+layout_mode = 2
+focus_mode = 0
+mouse_default_cursor_shape = 2
+theme_type_variation = &"IconButton"
 icon = ExtResource("8_qg4on")
 script = ExtResource("4_1c622")
 action = "import"
 metadata/_custom_type_script = "uid://ynx3s1jc6bwq"
 
-[node name="ExportButton" type="Button" parent="RightSide"]
+[node name="ExportButton" type="Button" parent="."]
+visible = false
 layout_mode = 2
 focus_mode = 0
 mouse_default_cursor_shape = 2
-theme_type_variation = &"ContextButton"
+theme_type_variation = &"IconButton"
 icon = ExtResource("9_yt30r")
 script = ExtResource("4_1c622")
 action = "export"
 metadata/_custom_type_script = "uid://ynx3s1jc6bwq"
 
-[node name="MoreOptions" type="Button" parent="RightSide"]
+[node name="MoreOptions" type="Button" parent="."]
 layout_mode = 2
-size_flags_horizontal = 2
 focus_mode = 0
 mouse_default_cursor_shape = 2
 theme_type_variation = &"IconButton"
 icon = ExtResource("2_tyac5")
+
+[connection signal="pressed" from="TabsPanelButton" to="." method="_on_tabs_panel_button_pressed"]
+[connection signal="pressed" from="NewTabButton" to="." method="_on_new_tab_button_pressed"]

src/utils/ThemeUtils.gd

@@ -162,9 +162,10 @@ static func recalculate_colors() -> void:
 	editable_text_color = tinted_contrast_color
 
 	# Panels
-	basic_panel_inner_color = base_color.lerp(extreme_theme_color, 0.1).lerp(max_contrast_color, 0.04)
-	basic_panel_border_color = desaturated_color
-	subtle_panel_border_color = desaturated_color.lerp(basic_panel_inner_color, 0.64)
+	basic_panel_inner_color = softer_base_color
+	basic_panel_border_color = base_color.lerp(max_contrast_color, 0.24)
+	subtle_panel_border_color = basic_panel_border_color.lerp(basic_panel_inner_color, 0.4)
+	subtle_panel_border_color.s = minf(subtle_panel_border_color.s * 2.0, lerpf(subtle_panel_border_color.s, 1.0, 0.2))
 
 	overlay_panel_inner_color = base_color.lerp(extreme_theme_color, 0.15)
 	overlay_panel_subtler_inner_color = base_color.lerp(extreme_theme_color, 0.08)
@@ -243,13 +244,13 @@ static func _setup_panelcontainer(theme: Theme) -> void:
 	theme.add_type("PanelContainer")
 	var stylebox := StyleBoxFlat.new()
 	stylebox.set_corner_radius_all(12)
-	#stylebox.set_border_width_all(1)
+	stylebox.set_border_width_all(1)
 	stylebox.content_margin_left = 8.0
 	stylebox.content_margin_right = 8.0
 	stylebox.content_margin_top = 6.0
 	stylebox.content_margin_bottom = 6.0
 	stylebox.bg_color = basic_panel_inner_color # surfaceContainer
-	#stylebox.border_color = basic_panel_border_color # outline
+	stylebox.border_color = basic_panel_border_color # outline
 	theme.set_stylebox("panel", "PanelContainer", stylebox)
 
 	theme.add_type("OutlinedPanel")