Skip to content

Commit

Permalink
ColorPicker UX improvements
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@VitikaSoni
VitikaSoni committed Sep 6, 2022
1 parent a49ec43 commit 1dce43d
Show file tree
Hide file tree
Showing 15 changed files with 737 additions and 112 deletions.
36 changes: 36 additions & 0 deletions doc/classes/ColorPicker.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,40 @@
[b]Note:[/b] The presets list is only for [i]this[/i] color picker.
</description>
</method>
<method name="add_recent_preset">
<return type="void" />
<param index="0" name="color" type="Color" />
<description>
Adds the given color to a list of color recent presets so that it can be picked later. Recent presets are the colors that were picked recently, a new preset is automatically created and added to recent presets when you pick a new color.
[b]Note:[/b] The recent presets list is only for [i]this[/i] color picker.
</description>
</method>
<method name="erase_preset">
<return type="void" />
<param index="0" name="color" type="Color" />
<description>
Removes the given color from the list of color presets of this color picker.
</description>
</method>
<method name="erase_recent_preset">
<return type="void" />
<param index="0" name="color" type="Color" />
<description>
Removes the given color from the list of color recent presets of this color picker.
</description>
</method>
<method name="get_presets" qualifiers="const">
<return type="PackedColorArray" />
<description>
Returns the list of colors in the presets of the color picker.
</description>
</method>
<method name="get_recent_presets" qualifiers="const">
<return type="PackedColorArray" />
<description>
Returns the list of colors in the recent presets of the color picker.
</description>
</method>
</methods>
<members>
<member name="color" type="Color" setter="set_pick_color" getter="get_pick_color" default="Color(1, 1, 1, 1)">
Expand Down Expand Up @@ -129,6 +150,12 @@
<theme_item name="color_hue" data_type="icon" type="Texture2D">
Custom texture for the hue selection slider on the right.
</theme_item>
<theme_item name="expanded_arrow" data_type="icon" type="Texture2D">
The icon for color preset drop down menu when expanded.
</theme_item>
<theme_item name="folded_arrow" data_type="icon" type="Texture2D">
The icon for color preset drop down menu when folded.
</theme_item>
<theme_item name="overbright_indicator" data_type="icon" type="Texture2D">
The indicator used to signalize that the color value is outside the 0-1 range.
</theme_item>
Expand All @@ -139,5 +166,14 @@
<theme_item name="screen_picker" data_type="icon" type="Texture2D">
The icon for the screen color picker button.
</theme_item>
<theme_item name="shape_circle" data_type="icon" type="Texture2D">
The icon for circular picker shapes.
</theme_item>
<theme_item name="shape_rect" data_type="icon" type="Texture2D">
The icon for rectangular picker shapes.
</theme_item>
<theme_item name="shape_rect_wheel" data_type="icon" type="Texture2D">
The icon for rectangular wheel picker shapes.
</theme_item>
</theme_items>
</class>
3 changes: 3 additions & 0 deletions doc/classes/HSlider.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<tutorials>
</tutorials>
<theme_items>
<theme_item name="grabber_offset" data_type="constant" type="int" default="0">
Vertical offset of the grabber.
</theme_item>
<theme_item name="grabber" data_type="icon" type="Texture2D">
The texture for the grabber (the draggable element).
</theme_item>
Expand Down
3 changes: 3 additions & 0 deletions doc/classes/VSlider.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
<member name="size_flags_vertical" type="int" setter="set_v_size_flags" getter="get_v_size_flags" overrides="Control" default="1" />
</members>
<theme_items>
<theme_item name="grabber_offset" data_type="constant" type="int" default="0">
Horizontal offset of the grabber.
</theme_item>
<theme_item name="grabber" data_type="icon" type="Texture2D">
The texture for the grabber (the draggable element).
</theme_item>
Expand Down
5 changes: 5 additions & 0 deletions editor/editor_themes.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1457,13 +1457,15 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_stylebox("slider", "HSlider", make_flat_stylebox(dark_color_3, 0, default_margin_size / 2, 0, default_margin_size / 2, corner_width));
theme->set_stylebox("grabber_area", "HSlider", make_flat_stylebox(contrast_color_1, 0, default_margin_size / 2, 0, default_margin_size / 2, corner_width));
theme->set_stylebox("grabber_area_highlight", "HSlider", make_flat_stylebox(contrast_color_1, 0, default_margin_size / 2, 0, default_margin_size / 2));
theme->set_constant("grabber_offset", "HSlider", 0);

// VSlider
theme->set_icon("grabber", "VSlider", theme->get_icon(SNAME("GuiSliderGrabber"), SNAME("EditorIcons")));
theme->set_icon("grabber_highlight", "VSlider", theme->get_icon(SNAME("GuiSliderGrabberHl"), SNAME("EditorIcons")));
theme->set_stylebox("slider", "VSlider", make_flat_stylebox(dark_color_3, default_margin_size / 2, 0, default_margin_size / 2, 0, corner_width));
theme->set_stylebox("grabber_area", "VSlider", make_flat_stylebox(contrast_color_1, default_margin_size / 2, 0, default_margin_size / 2, 0, corner_width));
theme->set_stylebox("grabber_area_highlight", "VSlider", make_flat_stylebox(contrast_color_1, default_margin_size / 2, 0, default_margin_size / 2, 0));
theme->set_constant("grabber_offset", "VSlider", 0);

// RichTextLabel
theme->set_color("default_color", "RichTextLabel", font_color);
Expand Down Expand Up @@ -1704,6 +1706,9 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
theme->set_constant("h_width", "ColorPicker", 30 * EDSCALE);
theme->set_constant("label_width", "ColorPicker", 10 * EDSCALE);
theme->set_icon("screen_picker", "ColorPicker", theme->get_icon(SNAME("ColorPick"), SNAME("EditorIcons")));
theme->set_icon("shape_circle", "ColorPicker", theme->get_icon(SNAME("PickerShapeCircle"), SNAME("EditorIcons")));
theme->set_icon("shape_rect", "ColorPicker", theme->get_icon(SNAME("PickerShapeRectangle"), SNAME("EditorIcons")));
theme->set_icon("shape_rect_wheel", "ColorPicker", theme->get_icon(SNAME("PickerShapeRectangleWheel"), SNAME("EditorIcons")));
theme->set_icon("add_preset", "ColorPicker", theme->get_icon(SNAME("Add"), SNAME("EditorIcons")));
theme->set_icon("sample_bg", "ColorPicker", theme->get_icon(SNAME("GuiMiniCheckerboard"), SNAME("EditorIcons")));
theme->set_icon("overbright_indicator", "ColorPicker", theme->get_icon(SNAME("OverbrightIndicator"), SNAME("EditorIcons")));
Expand Down
1 change: 1 addition & 0 deletions editor/icons/PickerShapeCircle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions editor/icons/PickerShapeRectangle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions editor/icons/PickerShapeRectangleWheel.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 27 additions & 28 deletions scene/gui/color_mode.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@ void ColorModeRGB::slider_draw(int p_which) {
Color left_color;
Color right_color;
Color color = color_picker->get_pick_color();
const real_t margin = 4 * color_picker->get_theme_default_base_scale();
const real_t margin = 16 * color_picker->get_theme_default_base_scale();

if (p_which == ColorPicker::SLIDER_COUNT) {
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, 0), Size2(size.x, margin)), true);

left_color = color;
left_color.a = 0;
Expand All @@ -97,10 +97,10 @@ void ColorModeRGB::slider_draw(int p_which) {
col.set(1, right_color);
col.set(2, right_color);
col.set(3, left_color);
pos.set(0, Vector2(0, margin));
pos.set(1, Vector2(size.x, margin));
pos.set(2, Vector2(size.x, margin * 2));
pos.set(3, Vector2(0, margin * 2));
pos.set(0, Vector2(0, 0));
pos.set(1, Vector2(size.x, 0));
pos.set(2, Vector2(size.x, margin));
pos.set(3, Vector2(0, margin));

slider->draw_polygon(pos, col);
}
Expand Down Expand Up @@ -147,10 +147,10 @@ void ColorModeHSV::slider_draw(int p_which) {
Color left_color;
Color right_color;
Color color = color_picker->get_pick_color();
const real_t margin = 4 * color_picker->get_theme_default_base_scale();
const real_t margin = 16 * color_picker->get_theme_default_base_scale();

if (p_which == ColorPicker::SLIDER_COUNT) {
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, 0), Size2(size.x, margin)), true);

left_color = color;
left_color.a = 0;
Expand All @@ -159,7 +159,7 @@ void ColorModeHSV::slider_draw(int p_which) {
} else if (p_which == 0) {
Ref<Texture2D> hue = color_picker->get_theme_icon(SNAME("color_hue"), SNAME("ColorPicker"));
slider->draw_set_transform(Point2(), -Math_PI / 2, Size2(1.0, 1.0));
slider->draw_texture_rect(hue, Rect2(Vector2(margin * -2, 0), Vector2(margin, size.x)), false);
slider->draw_texture_rect(hue, Rect2(Vector2(margin * -1, 0), Vector2(margin, size.x)), false);
return;
} else {
Color s_col;
Expand All @@ -174,10 +174,10 @@ void ColorModeHSV::slider_draw(int p_which) {
col.set(1, right_color);
col.set(2, right_color);
col.set(3, left_color);
pos.set(0, Vector2(0, margin));
pos.set(1, Vector2(size.x, margin));
pos.set(2, Vector2(size.x, margin * 2));
pos.set(3, Vector2(0, margin * 2));
pos.set(0, Vector2(0, 0));
pos.set(1, Vector2(size.x, 0));
pos.set(2, Vector2(size.x, margin));
pos.set(3, Vector2(0, margin));

slider->draw_polygon(pos, col);
}
Expand Down Expand Up @@ -216,10 +216,10 @@ void ColorModeRAW::slider_draw(int p_which) {
Color left_color;
Color right_color;
Color color = color_picker->get_pick_color();
const real_t margin = 4 * color_picker->get_theme_default_base_scale();
const real_t margin = 16 * color_picker->get_theme_default_base_scale();

if (p_which == ColorPicker::SLIDER_COUNT) {
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, 0), Size2(size.x, margin)), true);

left_color = color;
left_color.a = 0;
Expand All @@ -230,10 +230,10 @@ void ColorModeRAW::slider_draw(int p_which) {
col.set(1, right_color);
col.set(2, right_color);
col.set(3, left_color);
pos.set(0, Vector2(0, margin));
pos.set(1, Vector2(size.x, margin));
pos.set(2, Vector2(size.x, margin * 2));
pos.set(3, Vector2(0, margin * 2));
pos.set(0, Vector2(0, 0));
pos.set(1, Vector2(size.x, 0));
pos.set(2, Vector2(size.x, margin));
pos.set(3, Vector2(0, margin));

slider->draw_polygon(pos, col);
}
Expand All @@ -245,8 +245,7 @@ bool ColorModeRAW::apply_theme() const {
slider->remove_theme_icon_override("grabber");
slider->remove_theme_icon_override("grabber_highlight");
slider->remove_theme_style_override("slider");
slider->remove_theme_style_override("grabber_area");
slider->remove_theme_style_override("grabber_area_highlight");
slider->remove_theme_constant_override("grabber_offset");
}

return true;
Expand Down Expand Up @@ -294,10 +293,10 @@ void ColorModeOKHSL::slider_draw(int p_which) {
Color left_color;
Color right_color;
Color color = color_picker->get_pick_color();
const real_t margin = 4 * color_picker->get_theme_default_base_scale();
const real_t margin = 16 * color_picker->get_theme_default_base_scale();

if (p_which == ColorPicker::SLIDER_COUNT) {
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
slider->draw_texture_rect(color_picker->get_theme_icon(SNAME("sample_bg"), SNAME("ColorPicker")), Rect2(Point2(0, 0), Size2(size.x, margin)), true);

left_color = color;
left_color.a = 0;
Expand All @@ -306,7 +305,7 @@ void ColorModeOKHSL::slider_draw(int p_which) {
} else if (p_which == 0) {
Ref<Texture2D> hue = color_picker->get_theme_icon(SNAME("color_hue"), SNAME("ColorPicker"));
slider->draw_set_transform(Point2(), -Math_PI / 2, Size2(1.0, 1.0));
slider->draw_texture_rect(hue, Rect2(Vector2(margin * -2, 0), Vector2(margin, size.x)), false);
slider->draw_texture_rect(hue, Rect2(Vector2(margin * -1, 0), Vector2(margin, size.x)), false);
return;
} else {
Color s_col;
Expand All @@ -321,10 +320,10 @@ void ColorModeOKHSL::slider_draw(int p_which) {
col.set(1, right_color);
col.set(2, right_color);
col.set(3, left_color);
pos.set(0, Vector2(0, margin));
pos.set(1, Vector2(size.x, margin));
pos.set(2, Vector2(size.x, margin * 2));
pos.set(3, Vector2(0, margin * 2));
pos.set(0, Vector2(0, 0));
pos.set(1, Vector2(size.x, 0));
pos.set(2, Vector2(size.x, margin));
pos.set(3, Vector2(0, margin));

slider->draw_polygon(pos, col);
}
Loading

0 comments on commit 1dce43d

Please sign in to comment.