Upgrade the look of the brushes popup (#815)

* Upgrade the brushes popup

* upgrade brushes popup

* Formatting

* fix name of 1st brush not written

* use grid container instead of vbox

and added categories

* Some UI Changes

* typo

* Fix autowrap

* fix node paths

* formatting

* more formatting

* more formatting

And hopefully the final commit

* sigh... more formatting

src/Tools/Draw.gd

@@ -39,20 +39,18 @@ func _on_BrushType_pressed() -> void:
 		Global.brushes_popup.connect(
 			"brush_selected", self, "_on_Brush_selected", [], CONNECT_ONESHOT
 		)
-	# Now we set position and tab allignment considering certain conditions
-	var pop_size := Vector2(226, 72)
-	var pop_position: Vector2 = $Brush/Type.rect_global_position
-	var off_limit: float = Global.shrink * (pop_position.x + pop_size.x) - OS.get_window_size().x
-	if off_limit <= 72 and off_limit > 0:  # Some space left "Leftward"
-		pop_position -= Vector2(pop_size.x / 2.0 - 48, -32)
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_CENTER
-	elif off_limit >= 72:  # No space left "Leftward"
-		pop_position -= Vector2(pop_size.x / 2.0 + 16, -32)
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_RIGHT
-	else:
-		pop_position -= Vector2(0, -32)  # Plenty of space left "Leftward"
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_LEFT
-	Global.brushes_popup.popup(Rect2(pop_position, pop_size))
+	# Now we set position and columns
+	var tool_option_container = get_node("../../")
+	var brush_button = $Brush/Type
+	var pop_position = brush_button.rect_global_position + Vector2(0, brush_button.rect_size.y)
+	var size_x = tool_option_container.rect_size.x
+	var size_y = tool_option_container.rect_size.y - $Brush.rect_position.y - $Brush.rect_size.y
+	var columns = int(size_x / 36) - 1  # 36 is the rect_size of BrushButton.tscn
+	var categories = Global.brushes_popup.get_node("Background/Brushes/Categories")
+	for child in categories.get_children():
+		if child is GridContainer:
+			child.columns = columns
+	Global.brushes_popup.popup(Rect2(pop_position, Vector2(size_x, size_y)))
 
 
 func _on_Brush_selected(brush: Brushes.Brush) -> void:

src/Tools/SelectionTools/PaintSelect.gd

@@ -273,20 +273,18 @@ func _on_BrushType_pressed() -> void:
 		Global.brushes_popup.connect(
 			"brush_selected", self, "_on_Brush_selected", [], CONNECT_ONESHOT
 		)
-	# Now we set position and tab allignment considering certain conditions
-	var pop_size := Vector2(226, 72)
-	var pop_position: Vector2 = $Brush/Type.rect_global_position
-	var off_limit: float = Global.shrink * (pop_position.x + pop_size.x) - OS.get_window_size().x
-	if off_limit <= 72 and off_limit > 0:  # Some space left "Leftward"
-		pop_position -= Vector2(pop_size.x / 2.0 - 48, -32)
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_CENTER
-	elif off_limit >= 72:  # No space left "Leftward"
-		pop_position -= Vector2(pop_size.x / 2.0 + 16, -32)
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_RIGHT
-	else:
-		pop_position -= Vector2(0, -32)  # Plenty of space left "Leftward"
-		Global.brushes_popup.get_node("TabContainer").tab_align = TabContainer.ALIGN_LEFT
-	Global.brushes_popup.popup(Rect2(pop_position, pop_size))
+	# Now we set position and columns
+	var tool_option_container = get_node("../../")
+	var brush_button = $Brush/Type
+	var pop_position = brush_button.rect_global_position + Vector2(0, brush_button.rect_size.y)
+	var size_x = tool_option_container.rect_size.x
+	var size_y = tool_option_container.rect_size.y - $Brush.rect_position.y - $Brush.rect_size.y
+	var columns = int(size_x / 36) - 1  # 36 is the rect_size of BrushButton.tscn
+	var categories = Global.brushes_popup.get_node("Background/Brushes/Categories")
+	for child in categories.get_children():
+		if child is GridContainer:
+			child.columns = columns
+	Global.brushes_popup.popup(Rect2(pop_position, Vector2(size_x, size_y)))
 
 
 func _on_Brush_selected(brush: Brushes.Brush) -> void:

src/UI/Buttons/BrushButton.gd

@@ -3,6 +3,10 @@ extends BaseButton
 var brush = Global.brushes_popup.Brush.new()
 
 
+func _ready():
+	$TransparentChecker.fit_rect($BrushTexture.get_rect())
+
+
 func _on_BrushButton_pressed() -> void:
 	# Delete the brush on middle mouse press
 	if Input.is_action_just_released("middle_mouse"):

src/UI/Buttons/BrushButton.tscn

@@ -1,52 +1,48 @@
 [gd_scene load_steps=3 format=2]
 
+[ext_resource path="res://src/UI/Nodes/TransparentChecker.tscn" type="PackedScene" id=1]
 [ext_resource path="res://src/UI/Buttons/BrushButton.gd" type="Script" id=2]
 
-[sub_resource type="StyleBoxFlat" id=1]
-bg_color = Color( 1, 1, 1, 1 )
-border_color = Color( 1, 1, 1, 1 )
-corner_radius_top_left = 5
-corner_radius_top_right = 5
-corner_radius_bottom_right = 5
-corner_radius_bottom_left = 5
-anti_aliasing = false
-
 [node name="BrushButton" type="Button"]
-margin_right = 32.0
-margin_bottom = 32.0
-rect_min_size = Vector2( 32, 32 )
-custom_styles/hover = SubResource( 1 )
-custom_styles/pressed = SubResource( 1 )
-custom_styles/focus = SubResource( 1 )
-custom_styles/disabled = SubResource( 1 )
-custom_styles/normal = SubResource( 1 )
+margin_right = 36.0
+margin_bottom = 36.0
+rect_min_size = Vector2( 36, 36 )
 button_mask = 7
 script = ExtResource( 2 )
 __meta__ = {
-"_edit_use_anchors_": false
+"_editor_description_": ""
 }
 
+[node name="TransparentChecker" parent="." instance=ExtResource( 1 )]
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = 2.0
+margin_top = 2.0
+margin_right = -2.0
+margin_bottom = -2.0
+
 [node name="BrushTexture" type="TextureRect" parent="."]
-margin_right = 32.0
-margin_bottom = 32.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = 2.0
+margin_top = 2.0
+margin_right = -2.0
+margin_bottom = -2.0
 rect_min_size = Vector2( 32, 32 )
 expand = true
 stretch_mode = 6
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="DeleteButton" type="Button" parent="."]
 visible = false
-modulate = Color( 1, 0.00392157, 0.00392157, 0.709804 )
-margin_left = 24.0
-margin_right = 44.0
-margin_bottom = 20.0
-rect_scale = Vector2( 0.4, 0.4 )
+modulate = Color( 1, 0.00392157, 0.00392157, 0.878431 )
+anchor_left = 1.0
+anchor_right = 1.0
+margin_left = -12.0
+margin_top = 2.0
+margin_right = 8.0
+margin_bottom = 22.0
+rect_scale = Vector2( 0.5, 0.5 )
 text = "X"
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [connection signal="mouse_entered" from="." to="." method="_on_BrushButton_mouse_entered"]
 [connection signal="mouse_exited" from="." to="." method="_on_BrushButton_mouse_exited"]

src/UI/Buttons/BrushesPopup.gd

@@ -18,7 +18,7 @@ class Brush:
 
 
 func _ready() -> void:
-	var container = get_node("TabContainer/File/FileBrushContainer")
+	var container = get_node("Background/Brushes/Categories/DefaultBrushContainer")
 	var button := create_button(pixel_image)
 	button.brush.type = PIXEL
 	button.hint_tooltip = "Pixel brush"
@@ -54,7 +54,7 @@ static func create_button(image: Image) -> Node:
 	var button: BaseButton = preload("res://src/UI/Buttons/BrushButton.tscn").instance()
 	var tex := ImageTexture.new()
 	tex.create_from_image(image, 0)
-	button.get_child(0).texture = tex
+	button.get_node("BrushTexture").texture = tex
 	button.mouse_default_cursor_shape = Control.CURSOR_POINTING_HAND
 	return button
 
@@ -65,7 +65,15 @@ static func add_file_brush(images: Array, hint := "") -> void:
 	button.brush.image = images[0]
 	button.brush.random = images
 	button.hint_tooltip = hint
-	var container = Global.brushes_popup.get_node("TabContainer/File/FileBrushContainer")
+	var container
+	if button.brush.type == RANDOM_FILE:
+		container = Global.brushes_popup.get_node(
+			"Background/Brushes/Categories/RandomFileBrushContainer"
+		)
+	else:
+		container = Global.brushes_popup.get_node(
+			"Background/Brushes/Categories/FileBrushContainer"
+		)
 	container.add_child(button)
 	button.brush.index = button.get_index()
 
@@ -75,24 +83,34 @@ static func add_project_brush(image: Image, hint := "") -> void:
 	button.brush.type = CUSTOM
 	button.brush.image = image
 	button.hint_tooltip = hint
-	var container = Global.brushes_popup.get_node("TabContainer/Project/ProjectBrushContainer")
+	var container = Global.brushes_popup.get_node(
+		"Background/Brushes/Categories/ProjectBrushContainer"
+	)
 	container.add_child(button)
 	button.brush.index = button.get_index()
+	container.visible = true
+	Global.brushes_popup.get_node("Background/Brushes/Categories/ProjectLabel").visible = true
 
 
 static func clear_project_brush() -> void:
-	var container = Global.brushes_popup.get_node("TabContainer/Project/ProjectBrushContainer")
+	var container = Global.brushes_popup.get_node(
+		"Background/Brushes/Categories/ProjectBrushContainer"
+	)
 	for child in container.get_children():
 		child.queue_free()
 		Global.brushes_popup.emit_signal("brush_removed", child.brush)
 
 
 func get_brush(type: int, index: int) -> Brush:
-	var container
-	if type == CUSTOM:
-		container = get_node("TabContainer/Project/ProjectBrushContainer")
-	else:
-		container = get_node("TabContainer/File/FileBrushContainer")
+	var container = get_node("Background/Brushes/Categories/DefaultBrushContainer")
+	match type:
+		CUSTOM:
+			container = get_node("Background/Brushes/Categories/ProjectBrushContainer")
+		FILE:
+			container = get_node("Background/Brushes/Categories/FileBrushContainer")
+		RANDOM_FILE:
+			container = get_node("Background/Brushes/Categories/RandomFileBrushContainer")
+
 	var brush := get_default_brush()
 	if index < container.get_child_count():
 		brush = container.get_child(index).brush
@@ -106,6 +124,13 @@ func remove_brush(brush_button: Node) -> void:
 	var undo_brushes: Array = project.brushes.duplicate()
 	project.brushes.erase(brush_button.brush.image)
 
+	if project.brushes.size() == 0:
+		var container = Global.brushes_popup.get_node(
+			"Background/Brushes/Categories/ProjectBrushContainer"
+		)
+		container.visible = false
+		Global.brushes_popup.get_node("Background/Brushes/Categories/ProjectLabel").visible = false
+
 	project.undos += 1
 	project.undo_redo.create_action("Delete Custom Brush")
 	project.undo_redo.add_do_property(project, "brushes", project.brushes)
@@ -120,8 +145,8 @@ func undo_custom_brush(brush_button: BaseButton = null) -> void:
 	Global.general_undo()
 	var action_name: String = Global.current_project.undo_redo.get_current_action_name()
 	if action_name == "Delete Custom Brush":
-		$TabContainer/Project/ProjectBrushContainer.add_child(brush_button)
-		$TabContainer/Project/ProjectBrushContainer.move_child(
+		$Background/Brushes/Categories/ProjectBrushContainer.add_child(brush_button)
+		$Background/Brushes/Categories/ProjectBrushContainer.move_child(
 			brush_button, brush_button.brush.index
 		)
 		brush_button.get_node("DeleteButton").visible = false
@@ -131,4 +156,4 @@ func redo_custom_brush(brush_button: BaseButton = null) -> void:
 	Global.general_redo()
 	var action_name: String = Global.current_project.undo_redo.get_current_action_name()
 	if action_name == "Delete Custom Brush":
-		$TabContainer/Project/ProjectBrushContainer.remove_child(brush_button)
+		$Background/Brushes/Categories/ProjectBrushContainer.remove_child(brush_button)

src/UI/Buttons/BrushesPopup.tscn

@@ -3,42 +3,98 @@
 [ext_resource path="res://src/UI/Buttons/BrushesPopup.gd" type="Script" id=1]
 
 [node name="BrushesPopup" type="Popup"]
-margin_right = 226.0
-margin_bottom = 144.0
+margin_right = 183.0
+margin_bottom = 271.0
 rect_min_size = Vector2( 0, 144 )
 script = ExtResource( 1 )
 
-[node name="TabContainer" type="TabContainer" parent="."]
+[node name="Background" type="PanelContainer" parent="."]
 anchor_right = 1.0
 anchor_bottom = 1.0
-size_flags_vertical = 3
-drag_to_rearrange_enabled = true
 
-[node name="File" type="ScrollContainer" parent="TabContainer"]
-anchor_right = 1.0
-anchor_bottom = 1.0
-margin_left = 4.0
-margin_top = 32.0
-margin_right = -4.0
-margin_bottom = -4.0
+[node name="Brushes" type="ScrollContainer" parent="Background"]
+margin_left = 7.0
+margin_top = 7.0
+margin_right = 176.0
+margin_bottom = 264.0
 rect_min_size = Vector2( 0, 36 )
 size_flags_horizontal = 3
 scroll_horizontal_enabled = false
 
-[node name="FileBrushContainer" type="GridContainer" parent="TabContainer/File"]
-columns = 6
+[node name="Categories" type="VBoxContainer" parent="Background/Brushes"]
+margin_right = 169.0
+margin_bottom = 257.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+
+[node name="Label" type="Label" parent="Background/Brushes/Categories"]
+margin_right = 169.0
+margin_bottom = 14.0
+text = "Default Brushes"
+autowrap = true
 
-[node name="Project" type="ScrollContainer" parent="TabContainer"]
+[node name="HSeparator" type="HSeparator" parent="Background/Brushes/Categories/Label"]
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_top = -4.0
+
+[node name="DefaultBrushContainer" type="GridContainer" parent="Background/Brushes/Categories"]
+margin_top = 18.0
+margin_right = 169.0
+margin_bottom = 18.0
+
+[node name="ProjectLabel" type="Label" parent="Background/Brushes/Categories"]
 visible = false
+margin_top = 56.0
+margin_right = 49.0
+margin_bottom = 104.0
+text = "Project Brushes"
+autowrap = true
+
+[node name="HSeparator" type="HSeparator" parent="Background/Brushes/Categories/ProjectLabel"]
+anchor_top = 1.0
 anchor_right = 1.0
 anchor_bottom = 1.0
-margin_left = 4.0
-margin_top = 32.0
-margin_right = -4.0
-margin_bottom = -4.0
-rect_min_size = Vector2( 0, 36 )
-size_flags_horizontal = 3
-scroll_horizontal_enabled = false
+margin_top = -4.0
+
+[node name="ProjectBrushContainer" type="GridContainer" parent="Background/Brushes/Categories"]
+margin_top = 22.0
+margin_right = 169.0
+margin_bottom = 22.0
+
+[node name="FileLabel" type="Label" parent="Background/Brushes/Categories"]
+margin_top = 26.0
+margin_right = 169.0
+margin_bottom = 40.0
+text = "File Brushes"
+autowrap = true
+
+[node name="HSeparator" type="HSeparator" parent="Background/Brushes/Categories/FileLabel"]
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_top = -4.0
+
+[node name="FileBrushContainer" type="GridContainer" parent="Background/Brushes/Categories"]
+margin_top = 44.0
+margin_right = 169.0
+margin_bottom = 44.0
+
+[node name="RandomFileLabel" type="Label" parent="Background/Brushes/Categories"]
+margin_top = 48.0
+margin_right = 169.0
+margin_bottom = 62.0
+text = "Random File Brushes"
+autowrap = true
+
+[node name="HSeparator" type="HSeparator" parent="Background/Brushes/Categories/RandomFileLabel"]
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_top = -4.0
 
-[node name="ProjectBrushContainer" type="GridContainer" parent="TabContainer/Project"]
-columns = 5
+[node name="RandomFileBrushContainer" type="GridContainer" parent="Background/Brushes/Categories"]
+margin_top = 66.0
+margin_right = 169.0
+margin_bottom = 66.0