Initial work on UI/UX rework.

autoloads/appstate.gd

@@ -2,23 +2,23 @@ extends Node2D
 
 enum platform { LINUX, MAC, WIN, UNSUPPORTED }
 
-const DEFAULT_CHAIN_PROVIDERS_PATH = "res://chain_providers.cfg"
-const CHAIN_PROVIDERS_PATH = "user://chain_providers.cfg"
-const APP_CONFIG_PATH = "user://app.cfg"
-const VERSION_CONFIG = "res://version.cfg"
+const DEFAULT_CHAIN_PROVIDERS_PATH : String = "res://chain_providers.cfg"
+const CHAIN_PROVIDERS_PATH         : String = "user://chain_providers.cfg"
+const APP_CONFIG_PATH              : String = "user://app.cfg"
+const VERSION_CONFIG               : String = "res://version.cfg"
 
-const DRIVENET_NODE = "172.105.148.135"
+const DRIVENET_NODE                : String = "172.105.148.135"
 
-@onready var chain_state = preload("res://models/chain_state.tscn")
-@onready var chain_provider_info = preload("res://ui/components/dashboard/chain_providers_info/chain_provider_info.tscn")
-@onready var z_params_modal = preload("res://ui/components/dashboard/z_params_modal/z_params_modal.tscn")
+@onready var chain_state           : Resource = preload("res://models/chain_state.tscn")
+@onready var chain_provider_info   : Resource = preload("res://ui/components/dashboard/chain_providers_info/chain_provider_info.tscn")
+@onready var z_params_modal        : Resource = preload("res://ui/components/dashboard/z_params_modal/z_params_modal.tscn")
 
-var chain_providers_config: ConfigFile
-var app_config: ConfigFile
-var version_config: ConfigFile
+var chain_providers_config : ConfigFile
+var app_config             : ConfigFile
+var version_config         : ConfigFile
 
-var chain_providers: Dictionary = {}
-var chain_states: Dictionary = {}
+var chain_providers        : Dictionary = {}
+var chain_states           : Dictionary = {}
 
 signal chain_providers_changed
 signal chain_states_changed

project.godot

@@ -22,6 +22,11 @@ config/windows_native_icon="res://icon.ico"
 
 Appstate="*res://autoloads/appstate.tscn"
 
+[display]
+
+window/size/viewport_width=1024
+window/size/viewport_height=640
+
 [filesystem]
 
 import/blender/enabled=false

ui/components/dashboard/base_dashboard_panel/base_chain_dashboard_panel.gd

@@ -1,32 +1,34 @@
 extends PanelContainer
 class_name BaseChainDashboardPanel
 
-var chain_provider: ChainProvider
-var chain_state: ChainState
+var chain_provider : ChainProvider
+var chain_state    : ChainState
 
-var download_req: HTTPRequest
-var progress_timer: Timer
+var download_req   : HTTPRequest
+var progress_timer : Timer
 
-@onready var title = $Margin/VBox/Header/Title
-@onready var desc = $Margin/VBox/Content/Description
-@onready var block_height = $Margin/VBox/Footer/BlockHeight
-@onready var secondary_desc = $Margin/VBox/Content/SecondaryDescription
-@onready var left_indicator = $LeftColor
-@onready var background = $BackgroundPattern
-@onready var start_button = $Margin/VBox/Footer/StartButton
-@onready var stop_button = $Margin/VBox/Footer/StopButton
-#@onready var auto_mine_button = $Margin/VBox/Footer/Automine # removed due to signet
-@onready var refresh_bmm_button = $Margin/VBox/Footer/RefreshBMM
-@onready var download_button = $Margin/VBox/Footer/VBox/DownloadButton
-@onready var progress_bar = $Margin/VBox/Footer/VBox/ProgressBar
-@onready var settings_button = $Margin/VBox/Header/SettingsButton
+@onready var title              : Control = $Margin/VBox/Header/Title
+@onready var desc               : Control = $Margin/VBox/Content/Description
+@onready var block_height       : Control = $Margin/VBox/Footer/BlockHeight
+@onready var secondary_desc     : Control = $Margin/VBox/Content/SecondaryDescription
+@onready var left_indicator     : Control = $LeftColor
+@onready var background         : Control = $BackgroundPattern
+@onready var start_button       : Control = $Margin/VBox/Footer/StartButton
+@onready var stop_button        : Control = $Margin/VBox/Footer/StopButton
+#@onready var auto_mine_button  : Control = $Margin/VBox/Footer/Automine # removed due to signet
+@onready var refresh_bmm_button : Control = $Margin/VBox/Footer/RefreshBMM
+@onready var download_button    : Control = $Margin/VBox/Footer/VBox/DownloadButton
+@onready var progress_bar       : Control = $Margin/VBox/Footer/VBox/ProgressBar
+@onready var settings_button    : Control = $Margin/VBox/Header/SettingsButton
 
-var enabled_modulate: Color
-var disabled_modulate: Color
+var enabled           : bool = true
+
+var enabled_modulate  : Color
+var disabled_modulate : Color
 
 func _ready():
 	Appstate.connect("chain_states_changed", self.update_view)
-	enabled_modulate = modulate
+	enabled_modulate  = modulate
 	disabled_modulate = modulate.darkened(0.3)
 
 

ui/components/dashboard/base_dashboard_panel/base_chain_dashboard_panel.tscn

@@ -28,10 +28,11 @@ corner_radius_bottom_left = 6
 [node name="BaseChainDashboardPanel" type="PanelContainer"]
 clip_children = 2
 clip_contents = true
-custom_minimum_size = Vector2(0, 200)
+custom_minimum_size = Vector2(0, 100)
 offset_right = 450.0
 offset_bottom = 200.0
 size_flags_horizontal = 3
+size_flags_vertical = 0
 theme_override_styles/panel = SubResource("StyleBoxFlat_0u1v5")
 script = ExtResource("1_6647v")
 
@@ -100,7 +101,6 @@ text = "A blank sidechain based on Bitcoin Core 16.99"
 autowrap_mode = 2
 
 [node name="SecondaryDescription" type="RichTextLabel" parent="Margin/VBox/Content"]
-visible = false
 layout_mode = 2
 size_flags_vertical = 4
 theme_override_colors/default_color = Color(0.639216, 0.639216, 0.639216, 1)

ui/components/dashboard/dashboard.gd

@@ -1,7 +1,7 @@
 extends ScrollContainer
 
 @onready var drivechain = $VBox/Drivechain
-@onready var grid = $VBox/Grid
+@onready var grid = $VBox/Grid/HBox/VBox
 
 var panel = preload("res://ui/components/dashboard/base_dashboard_panel/base_chain_dashboard_panel.tscn")
 

ui/components/dashboard/dashboard.tscn

@@ -28,11 +28,22 @@ theme_override_constants/separation = 8
 [node name="Drivechain" type="VBoxContainer" parent="VBox"]
 layout_mode = 2
 
-[node name="Grid" type="GridContainer" parent="VBox"]
+[node name="BaseChainDashboardPanel" parent="VBox/Drivechain" instance=ExtResource("1_vxcbl")]
 layout_mode = 2
-theme_override_constants/h_separation = 8
-theme_override_constants/v_separation = 8
-columns = 2
 
-[node name="BaseChainDashboardPanel" parent="VBox/Grid" instance=ExtResource("1_vxcbl")]
+[node name="Grid" type="VBoxContainer" parent="VBox"]
 layout_mode = 2
+size_flags_vertical = 3
+
+[node name="HBox" type="HBoxContainer" parent="VBox/Grid"]
+layout_mode = 2
+
+[node name="Panel" type="Panel" parent="VBox/Grid/HBox"]
+custom_minimum_size = Vector2(50, 0)
+layout_mode = 2
+size_flags_horizontal = 0
+
+[node name="VBox" type="VBoxContainer" parent="VBox/Grid/HBox"]
+layout_mode = 2
+size_flags_horizontal = 3
+size_flags_vertical = 3

ui/components/left_menu/left_menu.gd

@@ -1,8 +1,8 @@
 extends PanelContainer
 
-@onready var dashboard_button := $VBox/DashboardButton
-@onready var playground_button := $VBox/PlaygroundButton
-@onready var settings_button := $VBox/SettingsButton
+@onready var dashboard_button := $HBox/DashboardButton
+@onready var playground_button := $HBox/PlaygroundButton
+@onready var settings_button := $HBox/SettingsButton
 
 signal left_menu_button_pressed(v: int)
 

ui/components/left_menu/left_menu.tscn

@@ -11,24 +11,29 @@ bg_color = Color(0.141176, 0.141176, 0.141176, 1)
 [node name="LeftMenu" type="PanelContainer"]
 anchors_preset = 9
 anchor_bottom = 1.0
-offset_right = 200.0
+offset_right = 1152.0
+offset_bottom = -598.0
 grow_vertical = 2
-size_flags_vertical = 3
+size_flags_horizontal = 3
+size_flags_vertical = 8
 theme_override_styles/panel = SubResource("StyleBoxFlat_c8gs8")
 script = ExtResource("1_yja75")
 
-[node name="VBox" type="VBoxContainer" parent="."]
+[node name="HBox" type="HBoxContainer" parent="."]
 custom_minimum_size = Vector2(200, 0)
 layout_mode = 2
+size_flags_vertical = 8
+size_flags_stretch_ratio = 0.0
 theme_override_constants/separation = 0
 
-[node name="Spacer" type="Control" parent="VBox"]
+[node name="Spacer" type="Control" parent="HBox"]
 custom_minimum_size = Vector2(0, 50)
 layout_mode = 2
 
-[node name="DashboardButton" type="Button" parent="VBox"]
+[node name="DashboardButton" type="Button" parent="HBox"]
 custom_minimum_size = Vector2(0, 40)
 layout_mode = 2
+size_flags_vertical = 4
 focus_mode = 0
 theme = ExtResource("1_vs06l")
 toggle_mode = true
@@ -37,26 +42,32 @@ text = "DASHBOARD"
 icon = ExtResource("3_rgc2b")
 alignment = 0
 
-[node name="PlaygroundButton" type="Button" parent="VBox"]
+[node name="PlaygroundButton" type="Button" parent="HBox"]
 visible = false
 custom_minimum_size = Vector2(0, 40)
 layout_mode = 2
+size_flags_vertical = 4
 focus_mode = 0
 theme = ExtResource("1_vs06l")
 toggle_mode = true
 text = "PLAYGROUND"
 alignment = 0
 
-[node name="SettingsButton" type="Button" parent="VBox"]
+[node name="VSeparator" type="VSeparator" parent="HBox"]
+layout_mode = 2
+size_flags_horizontal = 10
+
+[node name="SettingsButton" type="Button" parent="HBox"]
 custom_minimum_size = Vector2(0, 40)
 layout_mode = 2
+size_flags_vertical = 4
 focus_mode = 0
 theme = ExtResource("1_vs06l")
 toggle_mode = true
 text = "SETTINGS"
 icon = ExtResource("4_cr7m3")
 alignment = 0
 
-[connection signal="toggled" from="VBox/DashboardButton" to="." method="_on_left_menu_button_toggled" binds= [0]]
-[connection signal="toggled" from="VBox/PlaygroundButton" to="." method="_on_left_menu_button_toggled" binds= [1]]
-[connection signal="toggled" from="VBox/SettingsButton" to="." method="_on_left_menu_button_toggled" binds= [1]]
+[connection signal="toggled" from="HBox/DashboardButton" to="." method="_on_left_menu_button_toggled" binds= [0]]
+[connection signal="toggled" from="HBox/PlaygroundButton" to="." method="_on_left_menu_button_toggled" binds= [1]]
+[connection signal="toggled" from="HBox/SettingsButton" to="." method="_on_left_menu_button_toggled" binds= [1]]

ui/main.gd

@@ -1,7 +1,7 @@
 extends CanvasLayer
 
-@onready var tab_container = $HBox/Content/TabContainer
-@onready var left_menu = $HBox/LeftMenu
+@onready var tab_container = $VBox/Content/TabContainer
+@onready var left_menu = $VBox/LeftMenu
 
 
 # Called when the node enters the scene tree for the first time.

ui/main.tscn

@@ -8,28 +8,29 @@
 [node name="Main" type="CanvasLayer"]
 script = ExtResource("1_ur5w6")
 
-[node name="HBox" type="HBoxContainer" parent="."]
+[node name="VBox" type="VBoxContainer" parent="."]
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
 theme_override_constants/separation = 0
 
-[node name="LeftMenu" parent="HBox" instance=ExtResource("2_0lj2k")]
-layout_mode = 2
-
-[node name="Content" type="MarginContainer" parent="HBox"]
+[node name="Content" type="MarginContainer" parent="VBox"]
 layout_mode = 2
 size_flags_horizontal = 3
+size_flags_vertical = 3
 
-[node name="TabContainer" type="TabContainer" parent="HBox/Content"]
+[node name="TabContainer" type="TabContainer" parent="VBox/Content"]
 layout_mode = 2
 tabs_visible = false
 
-[node name="Dashboard" parent="HBox/Content/TabContainer" instance=ExtResource("3_3v44j")]
+[node name="Dashboard" parent="VBox/Content/TabContainer" instance=ExtResource("3_3v44j")]
 layout_mode = 2
 
-[node name="Settings" parent="HBox/Content/TabContainer" instance=ExtResource("4_3j67w")]
+[node name="Settings" parent="VBox/Content/TabContainer" instance=ExtResource("4_3j67w")]
 visible = false
 layout_mode = 2
+
+[node name="LeftMenu" parent="VBox" instance=ExtResource("2_0lj2k")]
+layout_mode = 2