Add focused styling to buttons (#13414)

This commit is contained in:
rubenwardy 2023-04-14 00:09:29 +01:00 committed by GitHub
parent 2a1bc82887
commit 9d1ae80e89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 8 deletions

@ -3211,6 +3211,7 @@ Some types may inherit styles from parent types.
* *all elements* * *all elements*
* default - Equivalent to providing no states * default - Equivalent to providing no states
* button, button_exit, image_button, item_image_button * button, button_exit, image_button, item_image_button
* focused - Active when button has focus
* hovered - Active when the mouse is hovering over the element * hovered - Active when the mouse is hovering over the element
* pressed - Active when the button is pressed * pressed - Active when the button is pressed

@ -190,6 +190,7 @@ local style_fs = [[
style[one_btn14:hovered;bgimg=testformspec_bg_hovered.png;fgimg=testformspec_hovered.png;textcolor=yellow] style[one_btn14:hovered;bgimg=testformspec_bg_hovered.png;fgimg=testformspec_hovered.png;textcolor=yellow]
style[one_btn14:pressed;bgimg=testformspec_bg_pressed.png;fgimg=testformspec_pressed.png;textcolor=blue] style[one_btn14:pressed;bgimg=testformspec_bg_pressed.png;fgimg=testformspec_pressed.png;textcolor=blue]
style[one_btn14:hovered+pressed;textcolor=purple] style[one_btn14:hovered+pressed;textcolor=purple]
style[one_btn14:focused;textcolor=red]
image_button[0,9.6;1,1;testformspec_button_image.png;one_btn14;Bg] image_button[0,9.6;1,1;testformspec_button_image.png;one_btn14;Bg]
style[one_btn15;border=false;bgcolor=#1cc;bgimg=testformspec_bg.png;bgimg_hovered=testformspec_bg_hovered.png;bgimg_pressed=testformspec_bg_pressed.png] style[one_btn15;border=false;bgcolor=#1cc;bgimg=testformspec_bg.png;bgimg_hovered=testformspec_bg_hovered.png;bgimg_pressed=testformspec_bg_pressed.png]
@ -198,10 +199,10 @@ local style_fs = [[
style[one_btn16;border=false;bgimg=testformspec_bg_9slice.png;bgimg_middle=4,6;padding=5,7;fgimg=testformspec_bg.png;fgimg_middle=1] style[one_btn16;border=false;bgimg=testformspec_bg_9slice.png;bgimg_middle=4,6;padding=5,7;fgimg=testformspec_bg.png;fgimg_middle=1]
style[one_btn16:hovered;bgimg=testformspec_bg_9slice_hovered.png;fgimg=testformspec_bg_hovered.png] style[one_btn16:hovered;bgimg=testformspec_bg_9slice_hovered.png;fgimg=testformspec_bg_hovered.png]
style[one_btn16:pressed;bgimg=testformspec_bg_9slice_pressed.png;fgimg=testformspec_bg_pressed.png] style[one_btn16:pressed;bgimg=testformspec_bg_9slice_pressed.png;fgimg=testformspec_bg_pressed.png]
style[one_btn16:focused;bgimg=testformspec_bg_9slice_focused.png;fgimg=testformspec_bg_focused.png]
image_button[2.5,9.6;2,1;;one_btn16;9-Slice Bg] image_button[2.5,9.6;2,1;;one_btn16;9-Slice Bg]
container[2.75,0] container[2.75,0]
style[one_tb1;textcolor=Yellow] style[one_tb1;textcolor=Yellow]

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

@ -61,13 +61,16 @@ public:
NUM_PROPERTIES, NUM_PROPERTIES,
NONE NONE
}; };
enum State
// State is a bitfield, it's possible to have multiple of these at once
enum State : u8
{ {
STATE_DEFAULT = 0, STATE_DEFAULT = 0,
STATE_HOVERED = 1 << 0, STATE_FOCUSED = 1 << 0,
STATE_PRESSED = 1 << 1, STATE_HOVERED = 1 << 1,
NUM_STATES = 1 << 2, STATE_PRESSED = 1 << 2,
STATE_INVALID = 1 << 3, NUM_STATES = 1 << 3, // This includes all permutations
STATE_INVALID = 1 << 4,
}; };
private: private:
@ -150,6 +153,8 @@ public:
{ {
if (name == "default") { if (name == "default") {
return STATE_DEFAULT; return STATE_DEFAULT;
} else if (name == "focused") {
return STATE_FOCUSED;
} else if (name == "hovered") { } else if (name == "hovered") {
return STATE_HOVERED; return STATE_HOVERED;
} else if (name == "pressed") { } else if (name == "pressed") {

@ -200,6 +200,7 @@ bool GUIButton::OnEvent(const SEvent& event)
// mouse is outside of the formspec. Thus, we test the position here. // mouse is outside of the formspec. Thus, we test the position here.
if ( !IsPushButton && AbsoluteClippingRect.isPointInside( if ( !IsPushButton && AbsoluteClippingRect.isPointInside(
core::position2d<s32>(event.MouseInput.X, event.MouseInput.Y ))) { core::position2d<s32>(event.MouseInput.X, event.MouseInput.Y ))) {
Environment->setFocus(this);
setPressed(true); setPressed(true);
} }
@ -258,8 +259,10 @@ void GUIButton::draw()
// PATCH // PATCH
// Track hovered state, if it has changed then we need to update the style. // Track hovered state, if it has changed then we need to update the style.
bool hovered = isHovered(); bool hovered = isHovered();
if (hovered != WasHovered) { bool focused = isFocused();
if (hovered != WasHovered || focused != WasFocused) {
WasHovered = hovered; WasHovered = hovered;
WasFocused = focused;
setFromState(); setFromState();
} }
@ -387,7 +390,7 @@ EGUI_BUTTON_IMAGE_STATE GUIButton::getImageState(bool pressed, const ButtonImage
{ {
// figure state we should have // figure state we should have
EGUI_BUTTON_IMAGE_STATE state = EGBIS_IMAGE_DISABLED; EGUI_BUTTON_IMAGE_STATE state = EGBIS_IMAGE_DISABLED;
bool focused = Environment->hasFocus((IGUIElement*)this); bool focused = isFocused();
bool mouseOver = isHovered(); bool mouseOver = isHovered();
if (isEnabled()) if (isEnabled())
{ {
@ -582,6 +585,12 @@ bool GUIButton::isHovered() const
IGUIElement *hovered = Environment->getHovered(); IGUIElement *hovered = Environment->getHovered();
return hovered == this || (hovered != nullptr && hovered->getParent() == this); return hovered == this || (hovered != nullptr && hovered->getParent() == this);
} }
//! Returns if this element (or one of its direct children) is focused
bool GUIButton::isFocused() const
{
return Environment->hasFocus((IGUIElement*)this, true);
}
// END PATCH // END PATCH
//! Sets the pressed state of the button if this is a pushbutton //! Sets the pressed state of the button if this is a pushbutton
@ -662,6 +671,9 @@ void GUIButton::setFromState()
if (isHovered()) if (isHovered())
state = static_cast<StyleSpec::State>(state | StyleSpec::STATE_HOVERED); state = static_cast<StyleSpec::State>(state | StyleSpec::STATE_HOVERED);
if (isFocused())
state = static_cast<StyleSpec::State>(state | StyleSpec::STATE_FOCUSED);
setFromStyle(StyleSpec::getStyleFromStatePropagation(Styles, state)); setFromStyle(StyleSpec::getStyleFromStatePropagation(Styles, state));
} }

@ -123,6 +123,9 @@ public:
// PATCH // PATCH
//! Returns if this element (or one of its direct children) is hovered //! Returns if this element (or one of its direct children) is hovered
bool isHovered() const; bool isHovered() const;
//! Returns if this element (or one of its direct children) is focused
bool isFocused() const;
// END PATCH // END PATCH
//! Sets if the button should use the skin to draw its border //! Sets if the button should use the skin to draw its border
@ -268,6 +271,7 @@ private:
video::SColor Colors[4]; video::SColor Colors[4];
// PATCH // PATCH
bool WasHovered = false; bool WasHovered = false;
bool WasFocused = false;
ISimpleTextureSource *TSrc; ISimpleTextureSource *TSrc;
gui::IGUIStaticText *StaticText; gui::IGUIStaticText *StaticText;