Category icons, tooltips, and shorter labels

addons/block_code/ui/constants.gd

@@ -21,125 +21,150 @@ const BUILTIN_CATEGORIES_PROPS: Dictionary = {
 	{
 		"color": Color("ec3b59"),
 		"order": 10,
+		"icon": "PlayStart",
 	},
 	"Lifecycle | Spawn":
 	{
 		"color": Color("ec3b59"),
 		"order": 15,
+		"icon": "Play",
 	},
 	"Transform | Position":
 	{
 		"color": Color("4b6584"),
 		"order": 20,
+		"icon": "ToolMove",
 	},
 	"Transform | Rotation":
 	{
 		"color": Color("4b6584"),
 		"order": 30,
+		"icon": "ToolMove",
 	},
 	"Transform | Scale":
 	{
 		"color": Color("4b6584"),
 		"order": 40,
+		"icon": "ToolMove",
 	},
 	"Graphics | Modulate":
 	{
 		"color": Color("03aa74"),
 		"order": 50,
+		"icon": "Paint",
 	},
 	"Graphics | Visibility":
 	{
 		"color": Color("03aa74"),
 		"order": 60,
+		"icon": "Paint",
 	},
 	"Graphics | Viewport":
 	{
 		"color": Color("03aa74"),
 		"order": 61,
+		"icon": "Paint",
 	},
 	"Graphics | Animation":
 	{
 		"color": Color("03aa74"),
 		"order": 62,
+		"icon": "Paint",
 	},
 	"UI":
 	{
 		"color": Color("03aa74"),
 		"order": 65,
+		"icon": "ThemeDeselectAll",
 	},
 	"Sounds":
 	{
 		"color": Color("e30fc0"),
 		"order": 70,
+		"icon": "AudioStreamPlayer",
 	},
 	"Physics | Mass":
 	{
 		"color": Color("a5b1c2"),
 		"order": 80,
+		"icon": "RigidBody2D",
 	},
 	"Physics | Velocity":
 	{
 		"color": Color("a5b1c2"),
 		"order": 90,
+		"icon": "RigidBody2D",
 	},
 	"Input":
 	{
 		"color": Color("d54322"),
 		"order": 100,
+		"icon": "Slot",
 	},
 	"Communication | Methods":
 	{
 		"color": Color("4b7bec"),
 		"order": 110,
+		"icon": "Signals",
 	},
 	"Communication | Nodes":
 	{
 		"color": Color("4b7bec"),
 		"order": 115,
+		"icon": "Signals",
 	},
 	"Communication | Groups":
 	{
 		"color": Color("4b7bec"),
 		"order": 120,
+		"icon": "Signals",
 	},
 	"Info | Score":
 	{
 		"color": Color("cf6a87"),
 		"order": 130,
+		"icon": "NodeInfo",
 	},
 	"Loops":
 	{
 		"color": Color("20bf6b"),
 		"order": 140,
+		"icon": "RotateRight",
 	},
 	"Logic | Conditionals":
 	{
 		"color": Color("45aaf2"),
 		"order": 150,
+		"icon": "AnimationFilter",
 	},
 	"Logic | Comparison":
 	{
 		"color": Color("45aaf2"),
 		"order": 160,
+		"icon": "AnimationFilter",
 	},
 	"Logic | Boolean":
 	{
 		"color": Color("45aaf2"),
 		"order": 170,
+		"icon": "AnimationFilter",
 	},
 	"Variables":
 	{
 		"color": Color("ff8f08"),
 		"order": 180,
+		"icon": "Key",
 	},
 	"Math":
 	{
 		"color": Color("a55eea"),
 		"order": 190,
+		"icon": "VisualShaderNodeVectorFunc",
 	},
 	"Log":
 	{
 		"color": Color("002050"),
 		"order": 200,
+		"icon": "Debug",
 	},
 }

addons/block_code/ui/picker/categories/block_category.gd

@@ -2,12 +2,14 @@ extends RefCounted
 
 var name: String
 var color: Color
+var icon: String
 var order: int
 
 
-func _init(p_name: String = "", p_color: Color = Color.WHITE, p_order: int = 0):
+func _init(p_name: String = "", p_color: Color = Color.WHITE, p_icon: String = "FileBroken", p_order: int = 0):
 	name = p_name
 	color = p_color
+	icon = p_icon
 	order = p_order
 
 

addons/block_code/ui/picker/categories/block_category_button.gd

@@ -9,19 +9,22 @@ signal selected
 var category: BlockCategory
 
 @onready var _panel := %Panel
+@onready var _icon := %Icon
 @onready var _label := %Label
+@onready var _button := %Button
 
 
 func _ready():
 	if not category:
 		category = BlockCategory.new("Example", Color.RED)
 
 	if not Util.node_is_part_of_edited_scene(self):
-		var new_stylebox: StyleBoxFlat = _panel.get_theme_stylebox("panel").duplicate()
-		new_stylebox.bg_color = category.color
-		_panel.add_theme_stylebox_override("panel", new_stylebox)
+		var texture = load("res://addons/block_code/ui/picker/categories/category_icons/" + category.icon + ".svg")
+		_icon.texture = texture
+		_panel.modulate = category.color
 
-	_label.text = category.name
+	_label.text = category.name.get_slice("| ", 1)
+	_button.tooltip_text = category.name.get_slice(" |", 0)
 
 
 func _on_button_pressed():

addons/block_code/ui/picker/categories/block_category_button.tscn

@@ -1,26 +1,27 @@
-[gd_scene load_steps=7 format=3 uid="uid://bdtetj0gs45hv"]
+[gd_scene load_steps=8 format=3 uid="uid://bdtetj0gs45hv"]
 
 [ext_resource type="Script" path="res://addons/block_code/ui/picker/categories/block_category_button.gd" id="1_pxxnl"]
+[ext_resource type="Texture2D" uid="uid://cn4ub7dwl4ae5" path="res://addons/block_code/ui/picker/categories/category_icons/block_code_node.svg" id="2_s8lmp"]
 
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_eogpc"]
-bg_color = Color(1, 0, 0, 1)
-corner_radius_top_left = 100
-corner_radius_top_right = 100
-corner_radius_bottom_right = 100
-corner_radius_bottom_left = 100
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_w0e7p"]
+bg_color = Color(1, 1, 1, 1)
+corner_radius_top_left = 4
+corner_radius_top_right = 4
+corner_radius_bottom_right = 4
+corner_radius_bottom_left = 4
 
-[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_ousiv"]
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_dgecf"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_fyk0j"]
 bg_color = Color(1, 1, 1, 0.196078)
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ha83k"]
 bg_color = Color(1, 1, 1, 0.392157)
 
-[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_dgecf"]
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_ousiv"]
 
 [node name="BlockCategoryButton" type="MarginContainer"]
-custom_minimum_size = Vector2(150, 0)
+custom_minimum_size = Vector2(140, 0)
 offset_right = 148.0
 offset_bottom = 32.0
 script = ExtResource("1_pxxnl")
@@ -39,19 +40,33 @@ theme_override_constants/margin_bottom = 8
 [node name="Panel" type="Panel" parent="HBoxContainer/MarginContainer"]
 unique_name_in_owner = true
 layout_mode = 2
-theme_override_styles/panel = SubResource("StyleBoxFlat_eogpc")
+theme_override_styles/panel = SubResource("StyleBoxFlat_w0e7p")
+
+[node name="MarginContainer" type="MarginContainer" parent="HBoxContainer/MarginContainer"]
+layout_mode = 2
+theme_override_constants/margin_left = 4
+theme_override_constants/margin_top = 4
+theme_override_constants/margin_right = 4
+theme_override_constants/margin_bottom = 4
+
+[node name="Icon" type="TextureRect" parent="HBoxContainer/MarginContainer/MarginContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+texture = ExtResource("2_s8lmp")
 
 [node name="Label" type="Label" parent="HBoxContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 text = "Example"
 
 [node name="Button" type="Button" parent="."]
+unique_name_in_owner = true
 layout_mode = 2
+tooltip_text = "Example"
 mouse_default_cursor_shape = 2
-theme_override_styles/normal = SubResource("StyleBoxEmpty_ousiv")
+theme_override_styles/focus = SubResource("StyleBoxEmpty_dgecf")
 theme_override_styles/hover = SubResource("StyleBoxFlat_fyk0j")
 theme_override_styles/pressed = SubResource("StyleBoxFlat_ha83k")
-theme_override_styles/focus = SubResource("StyleBoxEmpty_dgecf")
+theme_override_styles/normal = SubResource("StyleBoxEmpty_ousiv")
 
 [connection signal="pressed" from="Button" to="." method="_on_button_pressed"]

addons/block_code/ui/picker/categories/category_factory.gd

@@ -12,8 +12,9 @@ static func get_all_categories(custom_categories: Array[BlockCategory] = []) ->
 	for category_name in Constants.BUILTIN_CATEGORIES_PROPS:
 		var props: Dictionary = Constants.BUILTIN_CATEGORIES_PROPS.get(category_name, {})
 		var color: Color = props.get("color", Color.SLATE_GRAY)
+		var icon: String = props.get("icon", 0)
 		var order: int = props.get("order", 0)
-		result.append(BlockCategory.new(category_name, color, order))
+		result.append(BlockCategory.new(category_name, color, icon, order))
 
 	# TODO: Should we deduplicate custom_categories here?
 	result.append_array(custom_categories)

addons/block_code/ui/picker/categories/category_icons/AnimationFilter.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dewgvf1lr8qod"
+path="res://.godot/imported/AnimationFilter.svg-bc406d34aedc59dac64e8f11add2985a.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://addons/block_code/ui/picker/categories/category_icons/AnimationFilter.svg"
+dest_files=["res://.godot/imported/AnimationFilter.svg-bc406d34aedc59dac64e8f11add2985a.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+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/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