Fix setting screen UI

assets/icons/ArrowLeft.svg.import

@@ -0,0 +1,43 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://ljdlk0jneuwh"
+path="res://.godot/imported/ArrowLeft.svg-c2b4a2f3d67a298b3612ec432ca7c232.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/icons/ArrowLeft.svg"
+dest_files=["res://.godot/imported/ArrowLeft.svg-c2b4a2f3d67a298b3612ec432ca7c232.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/ui_parts/editor_scene.tscn

@@ -9,5 +9,5 @@ anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
 size_flags_vertical = 3
-theme_type_variation = &"SubtleFlatPanel"
+theme_type_variation = &"BasePanel"
 script = ExtResource("1_o7lif")

src/ui_parts/settings_menu.gd

@@ -4,11 +4,11 @@ const SettingsContentGeneric = preload("res://src/ui_widgets/settings_content_ge
 const SettingsContentPalettes = preload("res://src/ui_widgets/settings_content_palettes.tscn")
 const SettingsContentShortcuts = preload("res://src/ui_widgets/settings_content_shortcuts.tscn")
 
-@onready var lang_button: Button = $VBoxContainer/Language
+@onready var lang_button: Button = $VBoxContainer/PanelContainer/Language
 @onready var scroll_container: ScrollContainer = %ScrollContainer
 @onready var content_container: MarginContainer = %ScrollContainer/ContentContainer
-@onready var tabs: VBoxContainer = %Tabs
-@onready var close_button: Button = $VBoxContainer/CloseButton
+@onready var tabs: BoxContainer = $VBoxContainer/BoxContainer/Tabs
+@onready var back_button: Button = $VBoxContainer/PanelContainer/BackButton
 @onready var preview_panel: PanelContainer = $VBoxContainer/PreviewPanel
 
 enum TabIndex {FORMATTING, PALETTES, SHORTCUTS, THEMING, TAB_BAR, OTHER}
@@ -27,25 +27,25 @@ func get_tab_localized_name(tab_index: TabIndex) -> String:
 var focused_tab_index := -1 as TabIndex
 
 func _ready() -> void:
-	close_button.pressed.connect(queue_free)
+	back_button.pressed.connect(queue_free)
 	change_orientation()
 	Configs.orientation_changed.connect(change_orientation)
 
 	scroll_container.get_v_scroll_bar().visibility_changed.connect(adjust_right_margin)
 	adjust_right_margin()
 
-	Configs.theme_changed.connect(sync_theming)
-	sync_theming()
 	Configs.language_changed.connect(sync_localization)
 	sync_localization()
 	press_tab(0)
 
 func change_orientation():
 	if Configs.current_orientation == Configs.orientation.PORTRAIT:
 		$VBoxContainer/BoxContainer.vertical = true
+		tabs.vertical = false
 		$VBoxContainer/BoxContainer/PanelContainer.size_flags_vertical = SIZE_EXPAND_FILL
 	else:
 		$VBoxContainer/BoxContainer.vertical = false
+		tabs.vertical = true
 		$VBoxContainer/BoxContainer/PanelContainer.size_flags_horizontal = SIZE_EXPAND_FILL
 
 func _unhandled_input(event: InputEvent) -> void:
@@ -58,13 +58,7 @@ func _unhandled_input(event: InputEvent) -> void:
 func press_tab(index: int) -> void:
 	tabs.get_child(index).button_pressed = true
 
-func sync_theming() -> void:
-	var stylebox := ThemeDB.get_default_theme().get_stylebox("panel", theme_type_variation).duplicate()
-	stylebox.content_margin_top += 4.0
-	add_theme_stylebox_override("panel", stylebox)
-
 func sync_localization() -> void:
-	close_button.text = Translator.translate("Close")
 	lang_button.text = Translator.translate("Language") + ": " +\
 			TranslationUtils.get_locale_string(TranslationServer.get_locale())
 	setup_tabs()
@@ -84,7 +78,6 @@ func setup_tabs() -> void:
 		var tab := Button.new()
 		tab.text = get_tab_localized_name(tab_index)
 		tab.alignment = HORIZONTAL_ALIGNMENT_LEFT
-		tab.text_overrun_behavior = TextServer.OVERRUN_TRIM_ELLIPSIS
 		tab.toggle_mode = true
 		tab.action_mode = BaseButton.ACTION_MODE_BUTTON_PRESS
 		tab.focus_mode = Control.FOCUS_NONE

src/ui_parts/settings_menu.tscn

@@ -1,22 +1,34 @@
-[gd_scene load_steps=3 format=3 uid="uid://1rylg17uwltw"]
+[gd_scene load_steps=5 format=3 uid="uid://1rylg17uwltw"]
 
 [ext_resource type="Script" uid="uid://1rjr3yrqwueu" path="res://src/ui_parts/settings_menu.gd" id="1_1gf4m"]
+[ext_resource type="Texture2D" uid="uid://ljdlk0jneuwh" path="res://assets/icons/ArrowLeft.svg" id="2_kjrrb"]
 [ext_resource type="Texture2D" uid="uid://c528knojuxbw6" path="res://assets/icons/Languages.svg" id="2_ndyp7"]
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_kjrrb"]
+
 [node name="SettingsMenu" type="PanelContainer"]
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-theme_type_variation = &"DarkPanel"
+theme_type_variation = &"BasePanel"
 script = ExtResource("1_1gf4m")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="."]
 layout_mode = 2
 theme_override_constants/separation = 8
 
-[node name="Language" type="Button" parent="VBoxContainer"]
+[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer"]
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxEmpty_kjrrb")
+
+[node name="BackButton" type="Button" parent="VBoxContainer/PanelContainer"]
+layout_mode = 2
+size_flags_horizontal = 0
+icon = ExtResource("2_kjrrb")
+
+[node name="Language" type="Button" parent="VBoxContainer/PanelContainer"]
 layout_mode = 2
 size_flags_horizontal = 4
 focus_mode = 0
@@ -26,19 +38,13 @@ icon = ExtResource("2_ndyp7")
 [node name="BoxContainer" type="BoxContainer" parent="VBoxContainer"]
 layout_mode = 2
 size_flags_vertical = 3
-theme_override_constants/separation = 0
 vertical = true
 
-[node name="ContentPicker" type="PanelContainer" parent="VBoxContainer/BoxContainer"]
-custom_minimum_size = Vector2(160, 100)
-layout_mode = 2
-theme_type_variation = &"SideTabBar"
-
-[node name="Tabs" type="VBoxContainer" parent="VBoxContainer/BoxContainer/ContentPicker"]
-unique_name_in_owner = true
+[node name="Tabs" type="BoxContainer" parent="VBoxContainer/BoxContainer"]
+custom_minimum_size = Vector2(120, 0)
 layout_mode = 2
-size_flags_horizontal = 3
-theme_override_constants/separation = 0
+size_flags_horizontal = 0
+theme_override_constants/separation = 8
 
 [node name="PanelContainer" type="PanelContainer" parent="VBoxContainer/BoxContainer"]
 layout_mode = 2
@@ -61,15 +67,8 @@ theme_override_constants/margin_right = 2
 theme_override_constants/margin_bottom = 4
 
 [node name="PreviewPanel" type="PanelContainer" parent="VBoxContainer"]
-custom_minimum_size = Vector2(0, 48)
+custom_minimum_size = Vector2(0, 64)
 layout_mode = 2
 theme_type_variation = &"TextBox"
 
-[node name="CloseButton" type="Button" parent="VBoxContainer"]
-layout_mode = 2
-size_flags_horizontal = 4
-size_flags_vertical = 8
-focus_mode = 0
-mouse_default_cursor_shape = 2
-
-[connection signal="pressed" from="VBoxContainer/Language" to="." method="_on_language_pressed"]
+[connection signal="pressed" from="VBoxContainer/PanelContainer/Language" to="." method="_on_language_pressed"]

src/ui_widgets/setting_frame.gd

@@ -26,7 +26,7 @@ var dim_text := false  # For settings that wouldn't have an effect.
 var widget: Control
 var panel_width := 0
 
-var is_hovered := false
+var is_focused := false
 
 @onready var reset_button: Button = $ResetButton
 var ci := get_canvas_item()
@@ -90,8 +90,8 @@ func setup_fps_limit_dropdown() -> void:
 
 func _ready() -> void:
 	widget.size = Vector2(panel_width - 32, 22)
-	mouse_entered.connect(_on_mouse_entered)
-	mouse_exited.connect(_on_mouse_exited)
+	focus_entered.connect(_on_focus_entered)
+	focus_exited.connect(_on_focus_exited)
 	resized.connect(_on_resized)
 	reset_button.reset_size()
 	if type != Type.NONE:
@@ -177,16 +177,16 @@ func update_widgets() -> void:
 			reset_button.visible = not (disabled or is_equal_approx(getter.call(), default))
 	queue_redraw()
 
-func _on_mouse_entered() -> void:
-	is_hovered = true
+func _on_focus_entered() -> void:
+	is_focused = true
 	queue_redraw()
 
-func _on_mouse_exited() -> void:
-	is_hovered = false
+func _on_focus_exited() -> void:
+	is_focused = false
 	queue_redraw()
 
 func _draw() -> void:
-	if is_hovered:
+	if is_focused:
 		var sb := StyleBoxFlat.new()
 		sb.set_corner_radius_all(3)
 		sb.set_content_margin_all(2)

src/ui_widgets/setting_frame.tscn

@@ -9,6 +9,7 @@ layout_mode = 3
 anchors_preset = 10
 anchor_right = 1.0
 grow_horizontal = 2
+focus_mode = 1
 mouse_filter = 1
 script = ExtResource("1_p1ngn")
 

src/ui_widgets/settings_content_generic.gd

@@ -698,8 +698,8 @@ func setup_frame(frame: Control, has_default := true) -> void:
 	frame.getter = resource_ref.get.bind(bind)
 	if has_default:
 		frame.default = resource_ref.get_setting_default(current_setup_setting)
-	frame.mouse_entered.connect(set_preview.bind(current_setup_setting))
-	frame.mouse_exited.connect(remove_preview.bind(current_setup_setting))
+	frame.focus_entered.connect(set_preview.bind(current_setup_setting))
+	frame.focus_exited.connect(remove_preview.bind(current_setup_setting))
 
 func add_frame(frame: Control) -> void:
 	if setting_container.get_child_count() > 0:
@@ -786,6 +786,7 @@ func emit_preview_changed() -> void:
 		preview_changed.emit(margin_container)
 	elif preview is SettingCodePreview:
 		var code_preview := BetterTextEdit.new()
+		code_preview.scroll_fit_content_height = true
 		code_preview.editable = false
 		var update_highlighter := func() -> void:
 				code_preview.syntax_highlighter = SVGHighlighter.new()
@@ -807,6 +808,7 @@ func emit_preview_changed() -> void:
 		preview_changed.emit(code_preview)
 	elif preview is SettingFormatterPreview:
 		var code_preview := BetterTextEdit.new()
+		code_preview.scroll_fit_content_height = true
 		code_preview.editable = false
 
 		var update_highlighter := func() -> void:
@@ -837,19 +839,4 @@ func emit_preview_changed() -> void:
 		code_preview.tree_exiting.connect(preview.resource_bind.changed_deferred.disconnect.bind(
 				update_text), CONNECT_ONE_SHOT)
 		update_text.call()
-		# TODO Impressively, all this is necessary for scrollbars to work.
-		# TextEdit is so damn janky.
-		code_preview.hide()
-		code_preview.show()
-		await get_tree().process_frame
-		await get_tree().process_frame
-		if is_instance_valid(code_preview) and\
-		not is_zero_approx(code_preview.get_v_scroll_bar().max_value):
-			var tw := code_preview.create_tween().set_loops()
-			tw.tween_interval(1.75)
-			tw.tween_property(code_preview.get_v_scroll_bar(), ^"value",
-					floorf(code_preview.get_v_scroll_bar().max_value -\
-					code_preview.get_visible_line_count()), 0.5)
-			tw.tween_interval(1.75)
-			tw.tween_property(code_preview.get_v_scroll_bar(), ^"value", 0.0, 0.5)
 		preview_changed.emit(code_preview)

src/utils/ThemeUtils.gd

@@ -346,28 +346,28 @@ static func _setup_panelcontainer(theme: Theme) -> void:
 	textbox_stylebox.border_color = subtle_panel_border_color
 	theme.set_stylebox("panel", "TextBox", textbox_stylebox)
 
-	theme.add_type("SideTabBar")
-	theme.set_type_variation("SideTabBar", "PanelContainer")
-	var side_tabbar_stylebox := StyleBoxFlat.new()
-	side_tabbar_stylebox.bg_color = soft_base_color
-	side_tabbar_stylebox.set_content_margin_all(0)
-	side_tabbar_stylebox.corner_radius_top_left = 8
-	side_tabbar_stylebox.corner_radius_bottom_left = 8
-	theme.set_stylebox("panel", "SideTabBar", side_tabbar_stylebox)
-
 	theme.add_type("SideBarContent")
 	theme.set_type_variation("SideBarContent", "PanelContainer")
 	var panel_stylebox := StyleBoxFlat.new()
 	panel_stylebox.bg_color = tab_container_panel_inner_color
 	panel_stylebox.border_color = tab_container_panel_border_color
 	panel_stylebox.set_border_width_all(1)
-	panel_stylebox.corner_radius_top_right = 8
-	panel_stylebox.corner_radius_bottom_right = 8
+	panel_stylebox.set_corner_radius_all(8)
 	panel_stylebox.content_margin_left = 16
 	panel_stylebox.content_margin_right = 8
 	panel_stylebox.content_margin_top = 8
 	panel_stylebox.content_margin_bottom = 8
 	theme.set_stylebox("panel", "SideBarContent", panel_stylebox)
+
+	theme.add_type("BasePanel")
+	theme.set_type_variation("BasePanel", "PanelContainer")
+	var base_panel_stylebox := StyleBoxFlat.new()
+	base_panel_stylebox.content_margin_left = 8.0
+	base_panel_stylebox.content_margin_right = 8.0
+	base_panel_stylebox.content_margin_top = 6.0
+	base_panel_stylebox.content_margin_bottom = 6.0
+	base_panel_stylebox.bg_color = base_color
+	theme.set_stylebox("panel", "BasePanel", base_panel_stylebox)
 
 
 static func _setup_button(theme: Theme) -> void:
@@ -789,9 +789,7 @@ static func _setup_button(theme: Theme) -> void:
 	theme.set_type_variation("SideTab", "Button")
 
 	var normal_sidetab_stylebox := StyleBoxFlat.new()
-	normal_sidetab_stylebox.bg_color = softer_intermediate_color
-	normal_sidetab_stylebox.corner_radius_top_left = 4
-	normal_sidetab_stylebox.corner_radius_bottom_left = 4
+	normal_sidetab_stylebox.draw_center = false
 	normal_sidetab_stylebox.content_margin_left = 6.0
 	normal_sidetab_stylebox.content_margin_right = 6.0
 	normal_sidetab_stylebox.content_margin_bottom = 3.0
@@ -800,16 +798,13 @@ static func _setup_button(theme: Theme) -> void:
 
 	var hovered_sidetab_stylebox := normal_sidetab_stylebox.duplicate()
 	hovered_sidetab_stylebox.bg_color = softer_intermediate_hover_color
+	hovered_sidetab_stylebox.draw_center = true
 	theme.set_stylebox("hover", "SideTab", hovered_sidetab_stylebox)
 
-	var pressed_sidetab_stylebox := StyleBoxFlat.new()
+	var pressed_sidetab_stylebox := normal_sidetab_stylebox.duplicate()
 	pressed_sidetab_stylebox.bg_color = selected_tab_color
 	pressed_sidetab_stylebox.border_color = selected_tab_border_color
-	pressed_sidetab_stylebox.border_width_left = 2
-	pressed_sidetab_stylebox.content_margin_left = 10.0
-	pressed_sidetab_stylebox.content_margin_right = 6.0
-	pressed_sidetab_stylebox.content_margin_bottom = 3.0
-	pressed_sidetab_stylebox.content_margin_top = 3.0
+	pressed_sidetab_stylebox.border_width_bottom = 2
 	theme.set_stylebox("pressed", "SideTab", pressed_sidetab_stylebox)
 	theme.set_stylebox("hover_pressed", "SideTab", pressed_sidetab_stylebox)