block_category_display: Make categories buttons to show/hide blocks

When all the categories are shown, you may need to do quite a bit of
scrolling to find the block you want or just to discover what's there.
This changes the category display so that each category is a button that
can show or hide its blocks. All blocks are initially hidden to be able
to see all the available categories.

The expander is implemented as a flat button with a icon. Godot does
provide the Tree class with similar functionality, but it's a bit
complex to use. More importantly TreeItems are their own class that
don't derive from Node. That would break the current Block usage. The
Tree arrow icons are reused, though. To give a little more indication
that the category can be expanded, the color is lightened relative to
the expanded state.

https://phabricator.endlessm.com/T35507

Author: dbnicholson

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

@@ -2,22 +2,53 @@
 class_name BlockCategoryDisplay
 extends MarginContainer
 
+signal category_expanded(value: bool)
+
 var category: BlockCategory
 
-@onready var _label := %Label
+@onready var _button := %Button
+@onready var _blocks_container := %BlocksContainer
 @onready var _blocks := %Blocks
 @onready var _background := %Background
 
+@onready var _icon_collapsed := EditorInterface.get_editor_theme().get_icon("GuiTreeArrowRight", "EditorIcons")
+@onready var _icon_expanded := EditorInterface.get_editor_theme().get_icon("GuiTreeArrowDown", "EditorIcons")
 
-func _ready():
-	if category:
-		_label.text = category.name
-		_background.color = category.color.darkened(0.7)
+var expanded: bool:
+	set = _set_expanded
+
+
+func _set_expanded(value: bool):
+	expanded = value
+
+	_blocks_container.visible = expanded
+	if expanded:
+		_button.icon = _icon_expanded
+		_background.color = category.color.darkened(0.5)
+		_background.color.a = 0.3
+	else:
+		_button.icon = _icon_collapsed
+		_background.color = category.color.darkened(0.2)
 		_background.color.a = 0.3
 
-		for _block in category.block_list:
-			var block: Block = _block as Block
+	category_expanded.emit(expanded)
+
+
+func _ready():
+	if not category:
+		category = BlockCategory.new()
+
+	_button.text = category.name
+
+	for _block in category.block_list:
+		var block: Block = _block as Block
+
+		block.color = category.color
+
+		_blocks.add_child(block)
+
+	expanded = false
 
-			block.color = category.color
 
-			_blocks.add_child(block)
+func _on_button_toggled(toggled_on):
+	expanded = toggled_on

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

@@ -24,27 +24,39 @@ theme_override_constants/margin_right = 10
 theme_override_constants/margin_bottom = 4
 
 [node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer"]
+custom_minimum_size = Vector2(400, 0)
 layout_mode = 2
 
 [node name="Spacer" type="Control" parent="MarginContainer/VBoxContainer"]
 custom_minimum_size = Vector2(0, 4)
 layout_mode = 2
 
-[node name="Label" type="Label" parent="MarginContainer/VBoxContainer"]
+[node name="Button" type="Button" parent="MarginContainer/VBoxContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 theme_override_font_sizes/font_size = 16
+toggle_mode = true
 text = "Category"
+flat = true
+alignment = 0
+icon_alignment = 2
 
-[node name="Spacer2" type="Control" parent="MarginContainer/VBoxContainer"]
+[node name="BlocksContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer"]
+unique_name_in_owner = true
+visible = false
+layout_mode = 2
+
+[node name="Spacer2" type="Control" parent="MarginContainer/VBoxContainer/BlocksContainer"]
 custom_minimum_size = Vector2(0, 4)
 layout_mode = 2
 
-[node name="Blocks" type="VBoxContainer" parent="MarginContainer/VBoxContainer"]
+[node name="Blocks" type="VBoxContainer" parent="MarginContainer/VBoxContainer/BlocksContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 theme_override_constants/separation = 14
 
-[node name="Spacer3" type="Control" parent="MarginContainer/VBoxContainer"]
+[node name="Spacer3" type="Control" parent="MarginContainer/VBoxContainer/BlocksContainer"]
 custom_minimum_size = Vector2(0, 50)
 layout_mode = 2
+
+[connection signal="toggled" from="MarginContainer/VBoxContainer/Button" to="." method="_on_button_toggled"]