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 Jul 14, 2024
1 parent 97b8ad1 commit 69eea82
Show file tree
Hide file tree
Showing 9 changed files with 440 additions and 27 deletions.
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>
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.
40 changes: 38 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
Loading

0 comments on commit 69eea82

Please sign in to comment.