Skip to content

Commit

Permalink
Improve SpinBox interaction, split arrows, add theme attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@davthedev
davthedev committed Aug 11, 2024
1 parent 739019e commit 01aa38c
Show file tree
Hide file tree
Showing 12 changed files with 460 additions and 28 deletions.
8 changes: 8 additions & 0 deletions doc/classes/EditorSpinSlider.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,12 @@
</description>
</signal>
</signals>
<theme_items>
<theme_item name="updown" data_type="icon" type="Texture2D">
Single up/down graphic for both up/down buttons. Likely to be deprecated when individual up/down buttons will be implemented.
</theme_item>
<theme_item name="updown_disabled" data_type="icon" type="Texture2D">
Single up/down graphic for both up/down buttons, when the control is readonly or disabled. Likely to be deprecated when individual up/down buttons will be implemented.
</theme_item>
</theme_items>
</class>
94 changes: 92 additions & 2 deletions doc/classes/SpinBox.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
The above code will create a [SpinBox], disable context menu on it and set the text alignment to right.
See [Range] class for more options over the [SpinBox].
[b]Note:[/b] With the [SpinBox]'s context menu disabled, you can right-click the bottom half of the spinbox to set the value to its minimum, while right-clicking the top half sets the value to its maximum.
[b]Note:[/b] [SpinBox] relies on an underlying [LineEdit] node. To theme a [SpinBox]'s background, add theme items for [LineEdit] and customize them.
[b]Note:[/b] [SpinBox] relies on an underlying [LineEdit] node. To theme a [SpinBox]'s background, add theme items for [LineEdit] and customize them. The [LineEdit] has the [code]SpinBoxInnerLineEdit[/code] theme variation, so that you can give it a distinct appearance from regular [LineEdit]s.
[b]Note:[/b] If you want to implement drag and drop for the underlying [LineEdit], you can use [method Control.set_drag_forwarding] on the node returned by [method get_line_edit].
</description>
<tutorials>
Expand Down Expand Up @@ -71,8 +71,98 @@
</member>
</members>
<theme_items>
<theme_item name="down_disabled_icon_modulate" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Down button icon modulation color, when the button is disabled.
</theme_item>
<theme_item name="down_hover_icon_modulate" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Down button icon modulation color, when the button is hovered.
</theme_item>
<theme_item name="down_icon_modulate" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Down button icon modulation color.
</theme_item>
<theme_item name="down_pressed_icon_modulate" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Down button icon modulation color, when the button is being pressed.
</theme_item>
<theme_item name="up_disabled_icon_modulate" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 0.5)">
Up button icon modulation color, when the button is disabled.
</theme_item>
<theme_item name="up_hover_icon_modulate" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Up button icon modulation color, when the button is hovered.
</theme_item>
<theme_item name="up_icon_modulate" data_type="color" type="Color" default="Color(0.875, 0.875, 0.875, 1)">
Up button icon modulation color.
</theme_item>
<theme_item name="up_pressed_icon_modulate" data_type="color" type="Color" default="Color(0.95, 0.95, 0.95, 1)">
Up button icon modulation color, when the button is being pressed.
</theme_item>
<theme_item name="buttons_vertical_separation" data_type="constant" type="int" default="0">
Vertical separation between the up and down buttons.
</theme_item>
<theme_item name="buttons_width" data_type="constant" type="int" default="16">
Width of the up and down buttons. If smaller than any icon set on the buttons, the said icon may overlap neighboring elements, unless [theme_item set_min_buttons_width_from_icons] is enabled.
</theme_item>
<theme_item name="field_and_buttons_separation" data_type="constant" type="int" default="2">
Width of the horizontal separation between the text input field ([LineEdit]) and the buttons.
</theme_item>
<theme_item name="set_min_buttons_width_from_icons" data_type="constant" type="int" default="1">
If not [code]0[/code], the minimum button width corresponds to the widest of all icons set on those buttons, even if [theme_item buttons_width] is smaller.
</theme_item>
<theme_item name="down" data_type="icon" type="Texture2D">
Down button icon, displayed in the middle of the down (value-decreasing) button.
</theme_item>
<theme_item name="down_disabled" data_type="icon" type="Texture2D">
Down button icon when the button is disabled.
</theme_item>
<theme_item name="down_hover" data_type="icon" type="Texture2D">
Down button icon when the button is hovered.
</theme_item>
<theme_item name="down_pressed" data_type="icon" type="Texture2D">
Down button icon when the button is being pressed.
</theme_item>
<theme_item name="up" data_type="icon" type="Texture2D">
Up button icon, displayed in the middle of the up (value-increasing) button.
</theme_item>
<theme_item name="up_disabled" data_type="icon" type="Texture2D">
Up button icon when the button is disabled.
</theme_item>
<theme_item name="up_hover" data_type="icon" type="Texture2D">
Up button icon when the button is hovered.
</theme_item>
<theme_item name="up_pressed" data_type="icon" type="Texture2D">
Up button icon when the button is being pressed.
</theme_item>
<theme_item name="updown" data_type="icon" type="Texture2D">
Sets a custom [Texture2D] for up and down arrows of the [SpinBox].
Single up/down graphic for both up/down buttons. It is displayed in the middle of the buttons and does not change upon interaction. It is recommended to use individual [theme_item up] and [theme_item down] graphics for better usability. This can also be used as additional decoration between the two buttons.
</theme_item>
<theme_item name="down_background" data_type="style" type="StyleBox">
Background graphic of the down button.
</theme_item>
<theme_item name="down_background_disabled" data_type="style" type="StyleBox">
Background graphic of the down button when disabled.
</theme_item>
<theme_item name="down_background_hovered" data_type="style" type="StyleBox">
Background graphic of the down button when hovered.
</theme_item>
<theme_item name="down_background_pressed" data_type="style" type="StyleBox">
Background graphic of the down button when being pressed.
</theme_item>
<theme_item name="field_and_buttons_separator" data_type="style" type="StyleBox">
[StyleBox] drawn in the space occupied by the separation between the input field and the buttons.
</theme_item>
<theme_item name="up_background" data_type="style" type="StyleBox">
Background graphic of the up button.
</theme_item>
<theme_item name="up_background_disabled" data_type="style" type="StyleBox">
Background graphic of the up button when disabled.
</theme_item>
<theme_item name="up_background_hovered" data_type="style" type="StyleBox">
Background graphic of the up button when hovered.
</theme_item>
<theme_item name="up_background_pressed" data_type="style" type="StyleBox">
Background graphic of the up button when being pressed.
</theme_item>
<theme_item name="up_down_buttons_separator" data_type="style" type="StyleBox">
[StyleBox] drawn in the space occupied by the separation between the up and down buttons.
</theme_item>
</theme_items>
</class>
6 changes: 5 additions & 1 deletion editor/gui/editor_spin_slider.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
#include "core/os/keyboard.h"
#include "editor/editor_settings.h"
#include "editor/themes/editor_scale.h"
#include "scene/theme/theme_db.h"

bool EditorSpinSlider::is_text_field() const {
return true;
Expand Down Expand Up @@ -383,7 +384,7 @@ void EditorSpinSlider::_draw_spin_slider() {

if (!hide_slider) {
if (get_step() == 1) {
Ref<Texture2D> updown2 = get_theme_icon(is_read_only() ? SNAME("updown_disabled") : SNAME("updown"), SNAME("SpinBox"));
Ref<Texture2D> updown2 = is_read_only() ? theme_cache.updown_disabled_icon : theme_cache.updown_icon;
int updown_vofs = (size.height - updown2->get_height()) / 2;
if (rtl) {
updown_offset = sb->get_margin(SIDE_LEFT);
Expand Down Expand Up @@ -701,6 +702,9 @@ void EditorSpinSlider::_bind_methods() {
ADD_SIGNAL(MethodInfo("ungrabbed"));
ADD_SIGNAL(MethodInfo("value_focus_entered"));
ADD_SIGNAL(MethodInfo("value_focus_exited"));

BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_ICON, EditorSpinSlider, updown_icon, "updown");
BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_ICON, EditorSpinSlider, updown_disabled_icon, "updown_disabled");
}

void EditorSpinSlider::_ensure_input_popup() {
Expand Down
5 changes: 5 additions & 0 deletions editor/gui/editor_spin_slider.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,11 @@ class EditorSpinSlider : public Range {
void _ensure_input_popup();
void _draw_spin_slider();

struct ThemeCache {
Ref<Texture2D> updown_icon;
Ref<Texture2D> updown_disabled_icon;
} theme_cache;

protected:
void _notification(int p_what);
virtual void gui_input(const Ref<InputEvent> &p_event) override;
Expand Down
1 change: 1 addition & 0 deletions editor/icons/GuiSpinboxDown.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/GuiSpinboxUp.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.
44 changes: 42 additions & 2 deletions editor/themes/editor_theme_manager.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1471,8 +1471,44 @@ void EditorThemeManager::_populate_standard_styles(const Ref<EditorTheme> &p_the
}

// SpinBox.
p_theme->set_icon("updown", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUpdown"), EditorStringName(EditorIcons)));
p_theme->set_icon("updown_disabled", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUpdownDisabled"), EditorStringName(EditorIcons)));
{
Ref<Texture2D> empty_icon = memnew(ImageTexture);
p_theme->set_icon("updown", "SpinBox", empty_icon);
p_theme->set_icon("up", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUp"), EditorStringName(EditorIcons)));
p_theme->set_icon("up_hover", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUp"), EditorStringName(EditorIcons)));
p_theme->set_icon("up_pressed", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUp"), EditorStringName(EditorIcons)));
p_theme->set_icon("up_disabled", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxUp"), EditorStringName(EditorIcons)));
p_theme->set_icon("down", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxDown"), EditorStringName(EditorIcons)));
p_theme->set_icon("down_hover", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxDown"), EditorStringName(EditorIcons)));
p_theme->set_icon("down_pressed", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxDown"), EditorStringName(EditorIcons)));
p_theme->set_icon("down_disabled", "SpinBox", p_theme->get_icon(SNAME("GuiSpinboxDown"), EditorStringName(EditorIcons)));

p_theme->set_stylebox("up_background", "SpinBox", make_empty_stylebox());
p_theme->set_stylebox("up_background_hovered", "SpinBox", p_config.button_style_hover);
p_theme->set_stylebox("up_background_pressed", "SpinBox", p_config.button_style_pressed);
p_theme->set_stylebox("up_background_disabled", "SpinBox", make_empty_stylebox());
p_theme->set_stylebox("down_background", "SpinBox", make_empty_stylebox());
p_theme->set_stylebox("down_background_hovered", "SpinBox", p_config.button_style_hover);
p_theme->set_stylebox("down_background_pressed", "SpinBox", p_config.button_style_pressed);
p_theme->set_stylebox("down_background_disabled", "SpinBox", make_empty_stylebox());

p_theme->set_color("up_icon_modulate", "SpinBox", p_config.font_color);
p_theme->set_color("up_hover_icon_modulate", "SpinBox", p_config.font_hover_color);
p_theme->set_color("up_pressed_icon_modulate", "SpinBox", p_config.font_pressed_color);
p_theme->set_color("up_disabled_icon_modulate", "SpinBox", p_config.font_disabled_color);
p_theme->set_color("down_icon_modulate", "SpinBox", p_config.font_color);
p_theme->set_color("down_hover_icon_modulate", "SpinBox", p_config.font_hover_color);
p_theme->set_color("down_pressed_icon_modulate", "SpinBox", p_config.font_pressed_color);
p_theme->set_color("down_disabled_icon_modulate", "SpinBox", p_config.font_disabled_color);

p_theme->set_stylebox("field_and_buttons_separator", "SpinBox", make_empty_stylebox());
p_theme->set_stylebox("up_down_buttons_separator", "SpinBox", make_empty_stylebox());

p_theme->set_constant("buttons_vertical_separation", "SpinBox", 0);
p_theme->set_constant("field_and_buttons_separation", "SpinBox", 2);
p_theme->set_constant("buttons_width", "SpinBox", 16);
p_theme->set_constant("set_min_buttons_width_from_icons", "SpinBox", 1);
}

// ProgressBar.
p_theme->set_stylebox("background", "ProgressBar", make_stylebox(p_theme->get_icon(SNAME("GuiProgressBar"), EditorStringName(EditorIcons)), 4, 4, 4, 4, 0, 0, 0, 0));
Expand Down Expand Up @@ -1858,6 +1894,10 @@ void EditorThemeManager::_populate_editor_styles(const Ref<EditorTheme> &p_theme
editor_spin_label_bg->set_border_width_all(0);
p_theme->set_stylebox("label_bg", "EditorSpinSlider", editor_spin_label_bg);

// Should be changed to using separate arrows like on SpinBox; planned for a separate PR.
p_theme->set_icon("updown", "EditorSpinSlider", p_theme->get_icon(SNAME("GuiSpinboxUpdown"), EditorStringName(EditorIcons)));
p_theme->set_icon("updown_disabled", "EditorSpinSlider", p_theme->get_icon(SNAME("GuiSpinboxUpdownDisabled"), EditorStringName(EditorIcons)));

// Launch Pad and Play buttons.
Ref<StyleBoxFlat> style_launch_pad = make_flat_stylebox(p_config.dark_color_1, 2 * EDSCALE, 0, 2 * EDSCALE, 0, p_config.corner_radius);
style_launch_pad->set_corner_radius_all(p_config.corner_radius * EDSCALE);
Expand Down
Loading

0 comments on commit 01aa38c

Please sign in to comment.