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 23, 2024
1 parent 739019e commit e371587
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 texture representing both the up and down buttons.
</theme_item>
<theme_item name="updown_disabled" data_type="icon" type="Texture2D">
Single texture representing both the up and down buttons, when the control is readonly or disabled.
</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 respective icon may overlap neighboring elements, unless [theme_item set_min_buttons_width_from_icons] is different than [code]0[/code].
</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 texture representing both the up and down buttons icons. 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 style of the down button.
</theme_item>
<theme_item name="down_background_disabled" data_type="style" type="StyleBox">
Background style of the down button when disabled.
</theme_item>
<theme_item name="down_background_hovered" data_type="style" type="StyleBox">
Background style of the down button when hovered.
</theme_item>
<theme_item name="down_background_pressed" data_type="style" type="StyleBox">
Background style 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 style of the up button.
</theme_item>
<theme_item name="up_background_disabled" data_type="style" type="StyleBox">
Background style of the up button when disabled.
</theme_item>
<theme_item name="up_background_hovered" data_type="style" type="StyleBox">
Background style of the up button when hovered.
</theme_item>
<theme_item name="up_background_pressed" data_type="style" type="StyleBox">
Background style 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);

// TODO Use separate arrows instead like on SpinBox. Planned for a different 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 e371587

Please sign in to comment.