Change layout of settings menu

Split the settings controls into sections: Display, Input, Other
Add panel containers for each section
Fix focus modes for some controls

Author: Kvel2D

src/ui/game_menu/settings_menu.tscn

@@ -1,27 +1,28 @@
-[gd_scene load_steps=4 format=3 uid="uid://cx86ea3loo8a2"]
+[gd_scene load_steps=5 format=3 uid="uid://cx86ea3loo8a2"]
 
 [ext_resource type="Theme" uid="uid://bql5sxaowafw3" path="res://resources/theme/wc3_theme.tres" id="1_73d58"]
 [ext_resource type="Script" path="res://src/ui/game_menu/settings_menu.gd" id="2_2dtmk"]
 [ext_resource type="ButtonGroup" uid="uid://di3e75guncq3c" path="res://resources/button_groups/interface_size_setting_button_group.tres" id="2_fh8ol"]
+[ext_resource type="StyleBox" uid="uid://bw17avoi3cj5m" path="res://resources/theme/selected_unit_info/panel_container.tres" id="4_o5p4r"]
 
 [node name="SettingsMenu" type="PanelContainer" node_paths=PackedStringArray("_damage_numbers", "_enable_floating_text", "_enable_vfx", "_enable_sfx", "_enable_mouse_scroll", "_show_combat_log", "_show_tutorial_on_start", "_projectile_density", "_mouse_scroll", "_keyboard_scroll", "_apply_button", "_display_mode_combo")]
-custom_minimum_size = Vector2(800, 700)
+custom_minimum_size = Vector2(800, 900)
 theme = ExtResource("1_73d58")
 theme_type_variation = &"MainPanelContainer"
 script = ExtResource("2_2dtmk")
-_damage_numbers = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/DamageNumbers")
-_enable_floating_text = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/FloatingText")
-_enable_vfx = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/EnableVfx")
-_enable_sfx = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/EnableSfx")
-_enable_mouse_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/EnableMouseScroll")
-_show_combat_log = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/ShowCombatLog")
-_show_tutorial_on_start = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/ShowTutorialOnStart")
-_projectile_density = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/ProjectileDensity")
-_mouse_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/MouseScroll")
-_keyboard_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/KeyboardScroll")
+_damage_numbers = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/DamageNumbers")
+_enable_floating_text = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/FloatingText")
+_enable_vfx = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/EnableVfx")
+_enable_sfx = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer/EnableSfx")
+_enable_mouse_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer/EnableMouseScroll")
+_show_combat_log = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer/ShowCombatLog")
+_show_tutorial_on_start = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer/ShowTutorialOnStart")
+_projectile_density = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/ProjectileDensity")
+_mouse_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer/MouseScroll")
+_keyboard_scroll = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer/KeyboardScroll")
 _interface_size_button_group = ExtResource("2_fh8ol")
 _apply_button = NodePath("MarginContainer/VBoxContainer/HBoxContainer/ApplyButton")
-_display_mode_combo = NodePath("MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer/DisplayModeCombo")
+_display_mode_combo = NodePath("MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/DisplayModeCombo")
 
 [node name="MarginContainer" type="MarginContainer" parent="."]
 layout_mode = 2
@@ -44,20 +45,37 @@ horizontal_alignment = 1
 layout_mode = 2
 size_flags_vertical = 3
 
-[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer"]
+[node name="MarginContainer" type="MarginContainer" parent="MarginContainer/VBoxContainer/ScrollContainer"]
 layout_mode = 2
-theme_override_constants/separation = 10
+size_flags_horizontal = 3
+theme_override_constants/margin_right = 10
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+theme_override_constants/separation = 20
 
-[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="SectionDisplay" type="PanelContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer"]
+layout_mode = 2
+theme_override_styles/panel = ExtResource("4_o5p4r")
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay"]
 layout_mode = 2
 theme_override_constants/separation = 10
 
-[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer"]
+[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
+layout_mode = 2
+theme_type_variation = &"LabelLarge"
+text = "Display"
+horizontal_alignment = 1
+
+[node name="Label2" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
 text = "Display Mode"
 
-[node name="DisplayModeCombo" type="OptionButton" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer"]
+[node name="DisplayModeCombo" type="OptionButton" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
+size_flags_horizontal = 0
 selected = 0
 item_count = 3
 popup/item_0/text = "Full Screen"
@@ -66,109 +84,150 @@ popup/item_1/id = 1
 popup/item_2/text = "Windowed"
 popup/item_2/id = 2
 
-[node name="DamageNumbers" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="InterfaceSizeLabel" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
-focus_mode = 0
-text = "Show all damage numbers"
+text = "Interface size"
 
-[node name="FloatingText" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="HBoxContainer7" type="HBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
-text = "Enable floating text"
+size_flags_vertical = 3
 
-[node name="EnableVfx" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="SmallInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/HBoxContainer7"]
 layout_mode = 2
-text = "Enable visual effects"
+focus_mode = 0
+theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
+toggle_mode = true
+button_group = ExtResource("2_fh8ol")
+text = "Small"
+flat = true
 
-[node name="EnableSfx" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="MediumInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/HBoxContainer7"]
 layout_mode = 2
 focus_mode = 0
-text = "Enable sound effects"
+theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
+toggle_mode = true
+button_pressed = true
+button_group = ExtResource("2_fh8ol")
+text = "Medium"
+flat = true
 
-[node name="EnableMouseScroll" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="LargeInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/HBoxContainer7"]
 layout_mode = 2
 focus_mode = 0
-text = "Enable mouse scroll"
+theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
+toggle_mode = true
+button_group = ExtResource("2_fh8ol")
+text = "Large"
+flat = true
 
-[node name="ShowCombatLog" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="DamageNumbers" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
 focus_mode = 0
-text = "Show combat log"
+text = "Show all damage numbers"
 
-[node name="ShowTutorialOnStart" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="FloatingText" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
 focus_mode = 0
-text = "Display tutorial"
+text = "Enable floating text"
+
+[node name="EnableVfx" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
+layout_mode = 2
+focus_mode = 0
+text = "Enable visual effects"
 
-[node name="Label4" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="ProjectileDensityLabel" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
 layout_mode = 2
 tooltip_text = "Decreasing this setting can reduce lag in late game."
-text = "Projectile Density:"
+mouse_filter = 1
+text = "Projectile Density
+"
 
-[node name="ProjectileDensity" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="ProjectileDensity" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer"]
+custom_minimum_size = Vector2(350, 0)
 layout_mode = 2
+size_flags_horizontal = 0
 tooltip_text = "Decreasing this setting can reduce lag in late game."
+focus_mode = 0
 max_value = 1.0
 step = 0.1
+scrollable = false
+
+[node name="SectionInput" type="PanelContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer"]
+layout_mode = 2
+theme_override_styles/panel = ExtResource("4_o5p4r")
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput"]
+layout_mode = 2
+theme_override_constants/separation = 10
+
+[node name="Label3" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
+layout_mode = 2
+theme_type_variation = &"LabelLarge"
+text = "Input"
+horizontal_alignment = 1
+
+[node name="EnableMouseScroll" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
+layout_mode = 2
+tooltip_text = "Enables moving the camera by placing the mouse on the edge of the screen."
+focus_mode = 0
+text = "Enable mouse scroll"
 
-[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
 layout_mode = 2
-text = "Mouse scroll:"
+text = "Mouse scroll"
 
-[node name="MouseScroll" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="MouseScroll" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
+custom_minimum_size = Vector2(350, 0)
 layout_mode = 2
+size_flags_horizontal = 0
 focus_mode = 0
 max_value = 1.0
 step = 0.25
 value = 0.5
 scrollable = false
 
-[node name="Label2" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="Label2" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
 layout_mode = 2
-text = "Keyboard scroll:"
+text = "Keyboard scroll"
 
-[node name="KeyboardScroll" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="KeyboardScroll" type="HSlider" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionInput/VBoxContainer"]
+custom_minimum_size = Vector2(350, 0)
 layout_mode = 2
+size_flags_horizontal = 0
 focus_mode = 0
 max_value = 1.0
 step = 0.25
 value = 0.5
 scrollable = false
 
-[node name="Label3" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="SectionOther" type="PanelContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer"]
 layout_mode = 2
-text = "Interface size:"
+theme_override_styles/panel = ExtResource("4_o5p4r")
 
-[node name="HBoxContainer7" type="HBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer"]
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther"]
 layout_mode = 2
-size_flags_vertical = 3
+theme_override_constants/separation = 10
+
+[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer"]
+layout_mode = 2
+theme_type_variation = &"LabelLarge"
+text = "Misc"
+horizontal_alignment = 1
 
-[node name="SmallInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer7"]
+[node name="EnableSfx" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer"]
 layout_mode = 2
 focus_mode = 0
-theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
-toggle_mode = true
-button_group = ExtResource("2_fh8ol")
-text = "Small"
-flat = true
+text = "Enable sound effects"
 
-[node name="MediumInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer7"]
+[node name="ShowCombatLog" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer"]
 layout_mode = 2
 focus_mode = 0
-theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
-toggle_mode = true
-button_pressed = true
-button_group = ExtResource("2_fh8ol")
-text = "Medium"
-flat = true
+text = "Show combat log"
 
-[node name="LargeInterfaceSizeButton" type="Button" parent="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer7"]
+[node name="ShowTutorialOnStart" type="CheckBox" parent="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionOther/VBoxContainer"]
 layout_mode = 2
 focus_mode = 0
-theme_override_colors/font_color = Color(1, 1, 1, 0.588235)
-toggle_mode = true
-button_group = ExtResource("2_fh8ol")
-text = "Large"
-flat = true
+text = "Display tutorial"
 
 [node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/VBoxContainer"]
 layout_mode = 2
@@ -192,7 +251,7 @@ disabled = true
 text = "Apply"
 
 [connection signal="visibility_changed" from="." to="." method="_on_visibility_changed"]
-[connection signal="item_selected" from="MarginContainer/VBoxContainer/ScrollContainer/VBoxContainer/HBoxContainer/DisplayModeCombo" to="." method="_on_display_mode_combo_item_selected"]
+[connection signal="item_selected" from="MarginContainer/VBoxContainer/ScrollContainer/MarginContainer/VBoxContainer/SectionDisplay/VBoxContainer/DisplayModeCombo" to="." method="_on_display_mode_combo_item_selected"]
 [connection signal="pressed" from="MarginContainer/VBoxContainer/HBoxContainer/OkButton" to="." method="_on_ok_button_pressed"]
 [connection signal="pressed" from="MarginContainer/VBoxContainer/HBoxContainer/CancelButton" to="." method="_on_cancel_button_pressed"]
 [connection signal="pressed" from="MarginContainer/VBoxContainer/HBoxContainer/ApplyButton" to="." method="_on_apply_button_pressed"]