Change the color picker panel's expand button to be bigger and have text

Translations/Translations.pot

@@ -1318,6 +1318,10 @@ msgstr ""
 msgid "Select a picker shape."
 msgstr ""
 
+#. Refers to color-related options such as sliders that set color channel values like R, G, B and A.
+msgid "Color options"
+msgstr ""
+
 msgid "Left tool"
 msgstr ""
 

assets/graphics/misc/value_arrow_right.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="12"
+   height="12"
+   viewBox="0 0 12 12"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     fill="#ffffff"
+     fill-opacity="0.784"
+     d="m 3.0053782,2.0185704 c 0.01,0.26378 0.1165,0.5144 0.3067,0.69726 l 3.2929,3.293 -3.2929,3.293 c -0.1936,0.18826 -0.3028,0.44679 -0.3028,0.7167996 2e-4,0.89742 1.0909,1.3404 1.7168,0.69727 l 4,-3.9999996 c 0.3904,-0.39053 0.3904,-1.0235 0,-1.4141 l -4,-4 c -0.6321,-0.65733997 -1.7422,-0.19491 -1.7207,0.7168 z"
+     id="path1" />
+</svg>

assets/graphics/misc/value_arrow_right.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cefhafnbc8upf"
+path="res://.godot/imported/value_arrow_right.svg-7fe12cf8468d0e5236e1ce8bb4a7bec1.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/value_arrow_right.svg"
+dest_files=["res://.godot/imported/value_arrow_right.svg-7fe12cf8468d0e5236e1ce8bb4a7bec1.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

src/UI/ColorPickers/ColorPicker.gd

@@ -1,5 +1,8 @@
 extends Container
 
+const VALUE_ARROW := preload("res://assets/graphics/misc/value_arrow_right.svg")
+const VALUE_ARROW_EXPANDED := preload("res://assets/graphics/misc/value_arrow.svg")
+
 ## The swatches button of the [ColorPicker] node. Used to ensure that swatches are always invisible
 var swatches_button: Button
 @onready var color_picker := %ColorPicker as ColorPicker
@@ -7,7 +10,7 @@ var swatches_button: Button
 @onready var left_color_rect := %LeftColorRect as ColorRect
 @onready var right_color_rect := %RightColorRect as ColorRect
 @onready var average_color := %AverageColor as ColorRect
-@onready var expand_button: TextureButton = $ScrollContainer/VerticalContainer/ExpandButton
+@onready var expand_button: Button = $ScrollContainer/VerticalContainer/ExpandButton
 
 
 func _ready() -> void:
@@ -65,6 +68,10 @@ func _ready() -> void:
 	# increases the size of the color buttons.
 	var presets_container := picker_vbox_container.get_child(6, true) as GridContainer
 	presets_container.add_theme_constant_override("h_separation", 5)
+	# Move the expand button above the RGB, HSV etc buttons
+	expand_button.get_parent().remove_child(expand_button)
+	picker_vbox_container.add_child(expand_button)
+	picker_vbox_container.move_child(expand_button, 2)
 
 
 func _on_color_picker_color_changed(color: Color) -> void:
@@ -106,6 +113,10 @@ func _on_ColorDefaults_pressed() -> void:
 
 
 func _on_expand_button_toggled(toggled_on: bool) -> void:
+	if toggled_on:
+		expand_button.icon = VALUE_ARROW_EXPANDED
+	else:
+		expand_button.icon = VALUE_ARROW
 	color_picker.color_modes_visible = toggled_on
 	color_picker.sliders_visible = toggled_on
 	color_picker.presets_visible = toggled_on

src/UI/ColorPickers/ColorPicker.tscn

@@ -1,11 +1,10 @@
-[gd_scene load_steps=13 format=3 uid="uid://c3vcvhh4d8hd7"]
+[gd_scene load_steps=12 format=3 uid="uid://c3vcvhh4d8hd7"]
 
 [ext_resource type="Script" path="res://src/UI/ColorPickers/ColorPicker.gd" id="1_r8ot0"]
 [ext_resource type="Texture2D" uid="uid://d0v821l01w7go" path="res://assets/graphics/misc/color_switch.png" id="2_ojj3i"]
 [ext_resource type="PackedScene" uid="uid://3pmb60gpst7b" path="res://src/UI/Nodes/TransparentChecker.tscn" id="3_vjkb0"]
 [ext_resource type="Shader" path="res://src/Shaders/TransparentChecker.gdshader" id="4_oxnnt"]
-[ext_resource type="Texture2D" uid="uid://ct8wn8m6x4m54" path="res://assets/graphics/misc/value_arrow.svg" id="6_b86m2"]
-[ext_resource type="Texture2D" uid="uid://bhkmiijflfqxx" path="res://assets/graphics/misc/value_arrow_up.svg" id="7_p4te3"]
+[ext_resource type="Texture2D" uid="uid://cefhafnbc8upf" path="res://assets/graphics/misc/value_arrow_right.svg" id="5_hhe4d"]
 
 [sub_resource type="ButtonGroup" id="ButtonGroup_02x7w"]
 
@@ -196,13 +195,14 @@ offset_right = 13.0
 offset_bottom = 13.0
 mouse_filter = 2
 
-[node name="ExpandButton" type="TextureButton" parent="ScrollContainer/VerticalContainer" groups=["UIButtons"]]
+[node name="ExpandButton" type="Button" parent="ScrollContainer/VerticalContainer"]
 layout_mode = 2
-size_flags_horizontal = 4
 mouse_default_cursor_shape = 2
 toggle_mode = true
-texture_normal = ExtResource("6_b86m2")
-texture_pressed = ExtResource("7_p4te3")
+text = "Color options"
+icon = ExtResource("5_hhe4d")
+flat = true
+alignment = 0
 
 [connection signal="color_changed" from="ScrollContainer/VerticalContainer/ColorPicker" to="." method="_on_color_picker_color_changed"]
 [connection signal="toggled" from="ScrollContainer/VerticalContainer/ColorButtons/LeftColorButton" to="." method="_on_left_color_button_toggled"]