Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ColorPicker UX #62910

Merged
merged 1 commit into from
Oct 7, 2022
Merged

ColorPicker UX #62910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions doc/classes/ColorPicker.xml
View file
Open in desktop
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.
KoBeWi marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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");
akien-mga marked this conversation as resolved.
Show resolved Hide resolved
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