feat: scalable UI (#176)

* feat: scalable UI

* fix auto dpi detection

* fix typo and magic number

* fix logger tag ui

* update about ui

* fix system report

addons/panku_console/common/lynx_window2/lynx_window_2.gd

@@ -7,14 +7,14 @@ signal window_closed
 const lynx_window_shader_material:ShaderMaterial = preload("./lynx_window_shader_material.tres")
 
 @export var _window_title_container:HBoxContainer
-@export var _title_btn:Button
-@export var _close_btn:Button
-@export var _options_btn:Button
+@export var _title_btn:PankuButton
+@export var _close_btn:PankuButton
+@export var _options_btn:PankuButton
 @export var _resize_btn:Button
 @export var _shadow_focus:Panel
 @export var _shadow:NinePatchRect
 @export var _container:Panel
-@export var _pop_btn:Button
+@export var _pop_btn:PankuButton
 
 @export var no_resize := false
 @export var no_resize_x := false
@@ -164,12 +164,15 @@ func set_window_title_text(text:String):
 	if _os_window and _os_window.visible:
 		_os_window.title = text
 	else:
-		_title_btn.text = text
+		_title_btn.text = " " + text
 
 func get_normal_window_size():
 	if _folded: return _size_before_folded
 	return size
 
+func get_title_bar_height():
+	return _window_title_container.size.y
+
 func _ready():
 	custom_minimum_size = _window_title_container.get_minimum_size()
 
@@ -203,7 +206,7 @@ func _ready():
 				hide()
 	)
 
-	_title_btn.gui_input.connect(
+	_title_btn.button.gui_input.connect(
 		func(e):
 			if e is InputEventMouseButton and !e.pressed:
 				if e.button_index != MOUSE_BUTTON_NONE:
@@ -278,7 +281,7 @@ func _process(delta: float) -> void:
 		if window_rect.end.y > screen_rect.end.y:
 			target_position.y = screen_rect.end.y - window_rect.size.y
 		if window_rect.end.y > screen_rect.end.y + window_rect.size.y / 2:
-			target_position.y = screen_rect.end.y - 25
+			target_position.y = screen_rect.end.y - get_title_bar_height()
 		if window_rect.position.x < 0:
 			target_position.x = 0
 		if window_rect.end.x > screen_rect.end.x:
@@ -292,7 +295,6 @@ func _process(delta: float) -> void:
 			_size_animation = false
 		size = interp(size, _target_size, anim_interp_speed, delta)
 
-
 # Framerate-independent interpolation.
 func interp(from, to, lambda: float, delta: float):
 	return lerp(from, to, 1.0 - exp(-lambda * delta))

addons/panku_console/common/lynx_window2/lynx_window_2.tscn

@@ -1,79 +1,24 @@
-[gd_scene load_steps=26 format=3 uid="uid://s88loppa6gja"]
+[gd_scene load_steps=19 format=3 uid="uid://s88loppa6gja"]
 
 [ext_resource type="Material" uid="uid://dyipeqsa8lcpc" path="res://addons/panku_console/common/lynx_window2/lynx_window_shader_material.tres" id="1_tvp6i"]
 [ext_resource type="Script" path="res://addons/panku_console/common/lynx_window2/lynx_window_2.gd" id="2_1ul5o"]
-[ext_resource type="FontVariation" uid="uid://d2b8bo6ytpt2i" path="res://addons/panku_console/res/font/default_bold.tres" id="3_oes5e"]
+[ext_resource type="Theme" uid="uid://bk18yfu0d77wk" path="res://addons/panku_console/res/panku_console_theme.tres" id="2_3fhqk"]
 [ext_resource type="Texture2D" uid="uid://dosm26riekruh" path="res://addons/panku_console/res/icons2/menu.svg" id="4_4dlyn"]
+[ext_resource type="PackedScene" uid="uid://drn5t13m088fb" path="res://addons/panku_console/common/panku_button.tscn" id="4_dnesi"]
 [ext_resource type="Texture2D" uid="uid://gav3m4qtvgje" path="res://addons/panku_console/res/icons2/pop-out-svgrepo-com.svg" id="4_im81u"]
 [ext_resource type="Texture2D" uid="uid://8g5afcuanbl6" path="res://addons/panku_console/res/icons2/close.svg" id="5_l4qpm"]
 [ext_resource type="Texture2D" uid="uid://dvr12fl5prm78" path="res://addons/panku_console/res/effect/square_shadow.png" id="6_mfp1h"]
 [ext_resource type="Texture2D" uid="uid://ciu5jiw4xmkq0" path="res://addons/panku_console/res/icons2/resize-svgrepo-com.svg" id="7_duwqn"]
 [ext_resource type="Script" path="res://addons/panku_console/common/lynx_window2/border.gd" id="8_gj3ji"]
 
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_7nef7"]
-content_margin_left = 8.0
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_hv45g"]
 draw_center = false
 border_width_left = 1
 border_width_top = 1
 border_width_right = 1
 border_width_bottom = 1
 border_color = Color(1, 1, 1, 0.25098)
 
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_3qtq3"]
-content_margin_left = 8.0
-bg_color = Color(1, 1, 1, 0.12549)
-border_width_left = 1
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_iby4n"]
-content_margin_left = 8.0
-bg_color = Color(1, 1, 1, 0.12549)
-border_width_left = 1
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
-[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_sskw3"]
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_l6qrt"]
-draw_center = false
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.25098)
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_qf6ov"]
-bg_color = Color(0, 1, 0, 0.25098)
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_8fhjd"]
-bg_color = Color(0, 1, 0, 0.501961)
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_y5x25"]
-bg_color = Color(1, 0, 0, 0.25098)
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_28jhg"]
-bg_color = Color(1, 0, 0, 0.501961)
-border_width_top = 1
-border_width_right = 1
-border_width_bottom = 1
-border_color = Color(1, 1, 1, 0.501961)
-
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_6i67d"]
 content_margin_left = 8.0
 content_margin_top = 8.0
@@ -108,18 +53,20 @@ border_color = Color(1, 1, 1, 1)
 
 [node name="LynxWindow2" type="ColorRect" node_paths=PackedStringArray("_window_title_container", "_title_btn", "_close_btn", "_options_btn", "_resize_btn", "_shadow_focus", "_shadow", "_container", "_pop_btn")]
 material = ExtResource("1_tvp6i")
+clip_contents = true
 offset_right = 413.0
 offset_bottom = 305.0
+theme = ExtResource("2_3fhqk")
 script = ExtResource("2_1ul5o")
 _window_title_container = NodePath("VBoxContainer/Up")
-_title_btn = NodePath("VBoxContainer/Up/Button")
-_close_btn = NodePath("VBoxContainer/Up/Button2")
-_options_btn = NodePath("VBoxContainer/Up/Button3")
+_title_btn = NodePath("VBoxContainer/Up/TitleButton")
+_close_btn = NodePath("VBoxContainer/Up/CloseButton")
+_options_btn = NodePath("VBoxContainer/Up/MenuButton")
 _resize_btn = NodePath("Button")
 _shadow_focus = NodePath("Shadow2")
 _shadow = NodePath("Shadow")
 _container = NodePath("VBoxContainer/Down")
-_pop_btn = NodePath("VBoxContainer/Up/Button4")
+_pop_btn = NodePath("VBoxContainer/Up/PopupButton")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="."]
 layout_mode = 1
@@ -134,49 +81,46 @@ theme_override_constants/separation = 0
 layout_mode = 2
 theme_override_constants/separation = 0
 
-[node name="Button" type="Button" parent="VBoxContainer/Up"]
+[node name="TitleButton" parent="VBoxContainer/Up" instance=ExtResource("4_dnesi")]
 layout_mode = 2
 size_flags_horizontal = 3
-theme_override_fonts/font = ExtResource("3_oes5e")
-theme_override_font_sizes/font_size = 14
-theme_override_styles/normal = SubResource("StyleBoxFlat_7nef7")
-theme_override_styles/hover = SubResource("StyleBoxFlat_3qtq3")
-theme_override_styles/pressed = SubResource("StyleBoxFlat_iby4n")
-theme_override_styles/focus = SubResource("StyleBoxEmpty_sskw3")
+theme_override_styles/panel = SubResource("StyleBoxFlat_hv45g")
+
+[node name="TextureRect" parent="VBoxContainer/Up/TitleButton/HBoxContainer" index="0"]
+texture = null
+
+[node name="Label" parent="VBoxContainer/Up/TitleButton/HBoxContainer" index="1"]
 text = "Window Title"
-alignment = 0
-text_overrun_behavior = 1
 
-[node name="Button4" type="Button" parent="VBoxContainer/Up"]
+[node name="PopupButton" parent="VBoxContainer/Up" instance=ExtResource("4_dnesi")]
 layout_mode = 2
-tooltip_text = "Independent Window"
-theme_override_styles/normal = SubResource("StyleBoxFlat_l6qrt")
-theme_override_styles/hover = SubResource("StyleBoxFlat_qf6ov")
-theme_override_styles/pressed = SubResource("StyleBoxFlat_8fhjd")
-theme_override_styles/focus = SubResource("StyleBoxEmpty_sskw3")
-icon = ExtResource("4_im81u")
-alignment = 0
-icon_alignment = 1
-
-[node name="Button3" type="Button" parent="VBoxContainer/Up"]
+theme_override_styles/panel = SubResource("StyleBoxFlat_hv45g")
+
+[node name="TextureRect" parent="VBoxContainer/Up/PopupButton/HBoxContainer" index="0"]
+texture = ExtResource("4_im81u")
+
+[node name="Label" parent="VBoxContainer/Up/PopupButton/HBoxContainer" index="1"]
+visible = false
+
+[node name="MenuButton" parent="VBoxContainer/Up" instance=ExtResource("4_dnesi")]
 layout_mode = 2
-tooltip_text = "Context Menu"
-theme_override_styles/normal = SubResource("StyleBoxFlat_l6qrt")
-theme_override_styles/hover = SubResource("StyleBoxFlat_qf6ov")
-theme_override_styles/pressed = SubResource("StyleBoxFlat_8fhjd")
-theme_override_styles/focus = SubResource("StyleBoxEmpty_sskw3")
-icon = ExtResource("4_4dlyn")
-alignment = 0
-
-[node name="Button2" type="Button" parent="VBoxContainer/Up"]
+theme_override_styles/panel = SubResource("StyleBoxFlat_hv45g")
+
+[node name="TextureRect" parent="VBoxContainer/Up/MenuButton/HBoxContainer" index="0"]
+texture = ExtResource("4_4dlyn")
+
+[node name="Label" parent="VBoxContainer/Up/MenuButton/HBoxContainer" index="1"]
+visible = false
+
+[node name="CloseButton" parent="VBoxContainer/Up" instance=ExtResource("4_dnesi")]
 layout_mode = 2
-tooltip_text = "Close"
-theme_override_styles/normal = SubResource("StyleBoxFlat_l6qrt")
-theme_override_styles/hover = SubResource("StyleBoxFlat_y5x25")
-theme_override_styles/pressed = SubResource("StyleBoxFlat_28jhg")
-theme_override_styles/focus = SubResource("StyleBoxEmpty_sskw3")
-icon = ExtResource("5_l4qpm")
-alignment = 0
+theme_override_styles/panel = SubResource("StyleBoxFlat_hv45g")
+
+[node name="TextureRect" parent="VBoxContainer/Up/CloseButton/HBoxContainer" index="0"]
+texture = ExtResource("5_l4qpm")
+
+[node name="Label" parent="VBoxContainer/Up/CloseButton/HBoxContainer" index="1"]
+visible = false
 
 [node name="Down" type="Panel" parent="VBoxContainer"]
 layout_mode = 2
@@ -245,3 +189,8 @@ grow_vertical = 2
 mouse_filter = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_uldta")
 script = ExtResource("8_gj3ji")
+
+[editable path="VBoxContainer/Up/TitleButton"]
+[editable path="VBoxContainer/Up/PopupButton"]
+[editable path="VBoxContainer/Up/MenuButton"]
+[editable path="VBoxContainer/Up/CloseButton"]

addons/panku_console/common/panku_button.gd

@@ -0,0 +1,39 @@
+class_name PankuButton extends Control
+
+signal pressed
+signal button_down
+signal button_up
+
+@export
+var button:Button
+
+@export
+var trect:TextureRect
+
+@export
+var label:Label
+
+var icon:
+	set(v):
+		trect.texture = v
+	get:
+		return trect.texture
+
+var text:
+	set(v):
+		label.text = v
+	get:
+		return label.text
+
+func _ready():
+
+	button.pressed.connect(
+		func():
+			pressed.emit()
+	)
+	button.button_down.connect(
+		func(): button_down.emit()
+	)
+	button.button_up.connect(
+		func(): button_up.emit()
+	)

addons/panku_console/common/panku_button.tscn

@@ -0,0 +1,42 @@
+[gd_scene load_steps=5 format=3 uid="uid://drn5t13m088fb"]
+
+[ext_resource type="Script" path="res://addons/panku_console/common/panku_button.gd" id="1_7kf5f"]
+[ext_resource type="Texture2D" uid="uid://dchvk7qgfe37m" path="res://addons/panku_console/res/icons2/fold-svgrepo-com.svg" id="2_su653"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_v3kpx"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_cwnaw"]
+content_margin_top = 4.0
+content_margin_bottom = 4.0
+
+[node name="PankuButton" type="PanelContainer" node_paths=PackedStringArray("button", "trect", "label")]
+editor_description = "Godot's Button can't handle scaling icons properly as descripted in https://github.com/godotengine/godot-proposals/issues/660, so I have to make a new one."
+self_modulate = Color(1, 1, 1, 0)
+offset_right = 112.0
+offset_bottom = 31.0
+mouse_filter = 2
+theme_override_styles/panel = SubResource("StyleBoxEmpty_v3kpx")
+script = ExtResource("1_7kf5f")
+button = NodePath("Button")
+trect = NodePath("HBoxContainer/TextureRect")
+label = NodePath("HBoxContainer/Label")
+
+[node name="Button" type="Button" parent="."]
+layout_mode = 2
+
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
+layout_mode = 2
+mouse_filter = 2
+theme_override_constants/separation = 0
+
+[node name="TextureRect" type="TextureRect" parent="HBoxContainer"]
+layout_mode = 2
+mouse_filter = 2
+texture = ExtResource("2_su653")
+expand_mode = 2
+
+[node name="Label" type="Label" parent="HBoxContainer"]
+layout_mode = 2
+size_flags_vertical = 1
+theme_override_styles/normal = SubResource("StyleBoxEmpty_cwnaw")
+vertical_alignment = 1

addons/panku_console/console.tscn

@@ -1,6 +1,7 @@
-[gd_scene load_steps=3 format=3 uid="uid://cyftuo4syatlv"]
+[gd_scene load_steps=4 format=3 uid="uid://cyftuo4syatlv"]
 
 [ext_resource type="Script" path="res://addons/panku_console/console.gd" id="1_dohs1"]
+[ext_resource type="Theme" uid="uid://bk18yfu0d77wk" path="res://addons/panku_console/res/panku_console_theme.tres" id="2_wxhx6"]
 [ext_resource type="Script" path="res://addons/panku_console/common/lynx_window2/lynx_windows_manager_2.gd" id="10_f7qaq"]
 
 [node name="Console" type="CanvasLayer"]
@@ -17,4 +18,5 @@ anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
 mouse_filter = 2
+theme = ExtResource("2_wxhx6")
 script = ExtResource("10_f7qaq")

addons/panku_console/modules/about/about.gd

@@ -2,26 +2,18 @@ extends Control
 
 var _module:PankuModule
 
-@onready var intro := $SmoothScrollContainer/HBoxContainer/Control/VBoxContainer/Label
-@onready var project_page_button := $SmoothScrollContainer/HBoxContainer/Control/VBoxContainer/HBoxContainer/Button
-@onready var check_update_button := $SmoothScrollContainer/HBoxContainer/Control/VBoxContainer/HBoxContainer/Button2
+@export var intro:Label
+@export var project_page_button:Button
+@export var check_update_button:Button
 
 # Called when the node enters the scene tree for the first time.
 func _ready():
-	intro.text += "Version: " + PankuUtils.get_plugin_version() + "\n"
-	var sha = PankuUtils.get_commit_sha_short()
-	intro.text += "Commit: " + (sha if sha != "" else "Unknown") + "\n"
-	intro.text += "Godot Engine: " + Engine.get_version_info().string + "\n"
+	var version:String = PankuUtils.get_plugin_version()
+	var sha:String = PankuUtils.get_commit_sha_short()
+	if sha == "": sha = "Unknown"
 
-	intro.text += "\nPanku Console is a community driven project under MIT license, thanks to everyone who have contributed to this project:\n"
-	intro.text += "(Contact me if you don't see your name)\n\n"
-	intro.text += "Ark2000 (Feo Wu)\n"
-	intro.text += "scriptsengineer (Rafael Correa)\n"
-	intro.text += "mieldepoche\n"
-	intro.text += "Eggbertx\n"
-	intro.text += "univeous\n"
-	intro.text += "CheapMeow\n"
-	intro.text += "winston-yallow (Winston)\n"
+	intro.text = intro.text.replace("<version>", version)
+	intro.text = intro.text.replace("<commit>", sha)
 
 	project_page_button.pressed.connect(
 		func():