ColorPicker UX improvements

- Tabs and MenuButton for mode selection and enabling/disabling colorized sliders
- MenuButton for shape selection with new icon for each shape
- Drag and drop functionality for presets to arrange order
- A chronological list of recently selected presets which are global for the editor
- Presets are now highlighted as being active or inactive
- Thicker sliders for easy targeting
- `grabber_offset` theme constant for Slider
- Uncolorized sliders

4 files changed, 69 insertions, 0 deletions

diff --git a/scene/resources/default_theme/default_theme.cpp b/scene/resources/default_theme/default_theme.cpp
index 208e28f17a..03ee75b6ac 100644
--- a/scene/resources/default_theme/default_theme.cpp
+++ b/scene/resources/default_theme/default_theme.cpp
@@ -569,6 +569,8 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_icon("grabber_disabled", "HSlider", icons["slider_grabber_disabled"]);
 	theme->set_icon("tick", "HSlider", icons["hslider_tick"]);
 
+	theme->set_constant("grabber_offset", "HSlider", 0);
+
 	// VSlider
 
 	theme->set_stylebox("slider", "VSlider", style_slider);
@@ -580,6 +582,8 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_icon("grabber_disabled", "VSlider", icons["slider_grabber_disabled"]);
 	theme->set_icon("tick", "VSlider", icons["vslider_tick"]);
 
+	theme->set_constant("grabber_offset", "VSlider", 0);
+
 	// SpinBox
 
 	theme->set_icon("updown", "SpinBox", icons["updown"]);
@@ -899,7 +903,12 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_constant("h_width", "ColorPicker", 30 * scale);
 	theme->set_constant("label_width", "ColorPicker", 10 * scale);
 
+	theme->set_icon("folded_arrow", "ColorPicker", icons["arrow_right"]);
+	theme->set_icon("expanded_arrow", "ColorPicker", icons["arrow_down"]);
 	theme->set_icon("screen_picker", "ColorPicker", icons["color_picker_pipette"]);
+	theme->set_icon("shape_circle", "ColorPicker", icons["picker_shape_circle"]);
+	theme->set_icon("shape_rect", "ColorPicker", icons["picker_shape_rectangle"]);
+	theme->set_icon("shape_rect_wheel", "ColorPicker", icons["picker_shape_rectangle_wheel"]);
 	theme->set_icon("add_preset", "ColorPicker", icons["add"]);
 	theme->set_icon("color_hue", "ColorPicker", icons["color_picker_hue"]);
 	theme->set_icon("sample_bg", "ColorPicker", icons["mini_checkerboard"]);
diff --git a/scene/resources/default_theme/picker_shape_circle.svg b/scene/resources/default_theme/picker_shape_circle.svg
new file mode 100644
index 0000000000..8e7fb7f06e
--- /dev/null
+++ b/scene/resources/default_theme/picker_shape_circle.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h16v16h-16z"/></clipPath><g clip-path="url(#a)" fill="#eaeaea"><rect height="11" rx="5.5" transform="translate(1 2)" width="11"/><path d="m0 0h2v11h-2z" transform="translate(13 2)"/></g></svg>
diff --git a/scene/resources/default_theme/picker_shape_rectangle.svg b/scene/resources/default_theme/picker_shape_rectangle.svg
new file mode 100644
index 0000000000..3c7dd46884
--- /dev/null
+++ b/scene/resources/default_theme/picker_shape_rectangle.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h16v16h-16z"/></clipPath><g clip-path="url(#a)" fill="#eaeaea"><path d="m0 0h11v11h-11z" transform="translate(1 2)"/><path d="m0 0h2v11h-2z" transform="translate(13 2)"/></g></svg>
diff --git a/scene/resources/default_theme/picker_shape_rectangle_wheel.svg b/scene/resources/default_theme/picker_shape_rectangle_wheel.svg
new file mode 100644
index 0000000000..e85665a8f2
--- /dev/null
+++ b/scene/resources/default_theme/picker_shape_rectangle_wheel.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="16"
+   viewBox="0 0 16 16"
+   width="16"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="PickerShapeRectangleWheel.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs15" />
+  <sodipodi:namedview
+     id="namedview13"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     showgrid="true"
+     inkscape:zoom="16"
+     inkscape:cx="0.53125"
+     inkscape:cy="5.28125"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11">
+    <inkscape:grid
+       type="xygrid"
+       id="grid944" />
+  </sodipodi:namedview>
+  <clipPath
+     id="a">
+    <path
+       d="m0 0h16v16h-16z"
+       id="path2" />
+  </clipPath>
+  <g
+     clip-path="url(#a)"
+     fill="#eaeaea"
+     id="g9"
+     transform="matrix(0.85714286,0,0,0.85714286,1.1428571,1.1428571)">
+    <path
+       d="M 7,2 A 5,5 0 1 0 12,7 5.006,5.006 0 0 0 7,2 M 7,0 A 7,7 0 1 1 0,7 7,7 0 0 1 7,0 Z"
+       transform="translate(1,1)"
+       id="path5" />
+    <path
+       d="M 0,0 H 7 V 7 H 0 Z"
+       transform="translate(4.5,4.5)"
+       id="path7" />
+  </g>
+</svg>