From 002b88dff16c2660a0158ace6d4ad2b50eeae465 Mon Sep 17 00:00:00 2001 From: Anish Mishra Date: Tue, 29 Jul 2025 00:04:44 +0530 Subject: [PATCH] Fix setting screen UI --- assets/icons/ArrowLeft.svg | 1 + assets/icons/ArrowLeft.svg.import | 43 ++++++++++++++++++++++ src/ui_parts/editor_scene.tscn | 2 +- src/ui_parts/settings_menu.gd | 19 +++------- src/ui_parts/settings_menu.tscn | 43 +++++++++++----------- src/ui_widgets/setting_frame.gd | 16 ++++---- src/ui_widgets/setting_frame.tscn | 1 + src/ui_widgets/settings_content_generic.gd | 21 ++--------- src/utils/ThemeUtils.gd | 35 ++++++++---------- 9 files changed, 100 insertions(+), 81 deletions(-) create mode 100644 assets/icons/ArrowLeft.svg create mode 100644 assets/icons/ArrowLeft.svg.import diff --git a/assets/icons/ArrowLeft.svg b/assets/icons/ArrowLeft.svg new file mode 100644 index 0000000..811a107 --- /dev/null +++ b/assets/icons/ArrowLeft.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/ArrowLeft.svg.import b/assets/icons/ArrowLeft.svg.import new file mode 100644 index 0000000..8aa90d7 --- /dev/null +++ b/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 diff --git a/src/ui_parts/editor_scene.tscn b/src/ui_parts/editor_scene.tscn index b9a69b6..6dcd19e 100644 --- a/src/ui_parts/editor_scene.tscn +++ b/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") diff --git a/src/ui_parts/settings_menu.gd b/src/ui_parts/settings_menu.gd index 1a16f3d..80e4f12 100644 --- a/src/ui_parts/settings_menu.gd +++ b/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,15 +27,13 @@ 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) @@ -43,9 +41,11 @@ func _ready() -> void: 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 diff --git a/src/ui_parts/settings_menu.tscn b/src/ui_parts/settings_menu.tscn index ba23d79..b4260fd 100644 --- a/src/ui_parts/settings_menu.tscn +++ b/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"] diff --git a/src/ui_widgets/setting_frame.gd b/src/ui_widgets/setting_frame.gd index 1e52e8d..a238062 100644 --- a/src/ui_widgets/setting_frame.gd +++ b/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) diff --git a/src/ui_widgets/setting_frame.tscn b/src/ui_widgets/setting_frame.tscn index 231c898..314a3b6 100644 --- a/src/ui_widgets/setting_frame.tscn +++ b/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") diff --git a/src/ui_widgets/settings_content_generic.gd b/src/ui_widgets/settings_content_generic.gd index 4347052..e463ed3 100644 --- a/src/ui_widgets/settings_content_generic.gd +++ b/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) diff --git a/src/utils/ThemeUtils.gd b/src/utils/ThemeUtils.gd index 844d3a4..2740cf7 100644 --- a/src/utils/ThemeUtils.gd +++ b/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)