From 82f925bac2ab48e6da66e781351b890300599140 Mon Sep 17 00:00:00 2001 From: Dan Nicholson Date: Thu, 20 Jun 2024 16:45:01 -0600 Subject: [PATCH] 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 --- .../categories/block_category_display.gd | 49 +++++++++++++++---- .../categories/block_category_display.tscn | 20 ++++++-- 2 files changed, 56 insertions(+), 13 deletions(-) diff --git a/addons/block_code/ui/picker/categories/block_category_display.gd b/addons/block_code/ui/picker/categories/block_category_display.gd index 42678ccc..6597458f 100644 --- a/addons/block_code/ui/picker/categories/block_category_display.gd +++ b/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 diff --git a/addons/block_code/ui/picker/categories/block_category_display.tscn b/addons/block_code/ui/picker/categories/block_category_display.tscn index c0ed6aac..81f33688 100644 --- a/addons/block_code/ui/picker/categories/block_category_display.tscn +++ b/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"]