Skip to content

Commit

Permalink
Adjust slider bar implementations to show focused state
Browse files Browse the repository at this point in the history
  • Loading branch information
peppy committed Oct 24, 2024
1 parent a039ee8 commit 6dd1efa
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 11 deletions.
25 changes: 24 additions & 1 deletion osu.Game/Graphics/UserInterface/RoundedSliderBar.cs
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input.Events;
using osu.Game.Overlays;
Expand All @@ -25,6 +26,8 @@ public partial class RoundedSliderBar<T> : OsuSliderBar<T>

private readonly HoverClickSounds hoverClickSounds;

private readonly Container mainContent;

private Color4 accentColour;

public Color4 AccentColour
Expand Down Expand Up @@ -62,7 +65,7 @@ public RoundedSliderBar()
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Padding = new MarginPadding { Horizontal = 2 },
Child = new CircularContainer
Child = mainContent = new CircularContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Expand Down Expand Up @@ -135,6 +138,26 @@ protected override void LoadComplete()
}, true);
}

protected override void OnFocus(FocusEvent e)
{
base.OnFocus(e);

mainContent.EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Glow,
Colour = AccentColour.Darken(1),
Hollow = true,
Radius = 2,
};
}

protected override void OnFocusLost(FocusLostEvent e)
{
base.OnFocusLost(e);

mainContent.EdgeEffect = default;
}

protected override bool OnHover(HoverEvent e)
{
updateGlow();
Expand Down
27 changes: 26 additions & 1 deletion osu.Game/Graphics/UserInterface/ShearedSliderBar.cs
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input.Events;
using osu.Game.Overlays;
Expand All @@ -26,6 +27,8 @@ public partial class ShearedSliderBar<T> : OsuSliderBar<T>

private readonly HoverClickSounds hoverClickSounds;

private readonly Container mainContent;

private Color4 accentColour;

public Color4 AccentColour
Expand Down Expand Up @@ -60,9 +63,11 @@ public ShearedSliderBar()
RangePadding = EXPANDED_SIZE / 2;
Children = new Drawable[]
{
new Container
mainContent = new Container
{
RelativeSizeAxes = Axes.Both,
Masking = true,
CornerRadius = 5,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Padding = new MarginPadding { Horizontal = 2 },
Expand Down Expand Up @@ -138,6 +143,26 @@ protected override void LoadComplete()
}, true);
}

protected override void OnFocus(FocusEvent e)
{
base.OnFocus(e);

mainContent.EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Glow,
Colour = AccentColour.Darken(1),
Hollow = true,
Radius = 2,
};
}

protected override void OnFocusLost(FocusLostEvent e)
{
base.OnFocusLost(e);

mainContent.EdgeEffect = default;
}

protected override bool OnHover(HoverEvent e)
{
updateGlow();
Expand Down
36 changes: 27 additions & 9 deletions osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ public CompositeDrawable? TabbableContentContainer
private Box background = null!;
private Box flashLayer = null!;
private FormTextBox.InnerTextBox textBox = null!;
private Slider slider = null!;
private InnerSlider slider = null!;
private FormFieldCaption caption = null!;
private IFocusManager focusManager = null!;

Expand Down Expand Up @@ -135,7 +135,7 @@ private void load(OsuColour colours, OsuGame? game)
},
TabbableContentContainer = tabbableContentContainer,
},
slider = new Slider
slider = new InnerSlider
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Expand Down Expand Up @@ -163,6 +163,7 @@ protected override void LoadComplete()
textBox.Current.BindValueChanged(textChanged);

slider.IsDragging.BindValueChanged(_ => updateState());
slider.Focused.BindValueChanged(_ => updateState());

current.ValueChanged += e => currentNumberInstantaneous.Value = e.NewValue;
current.MinValueChanged += v => currentNumberInstantaneous.MinValue = v;
Expand Down Expand Up @@ -259,16 +260,18 @@ protected override bool OnClick(ClickEvent e)

private void updateState()
{
bool childHasFocus = slider.Focused.Value || textBox.Focused.Value;

textBox.Alpha = 1;

background.Colour = currentNumberInstantaneous.Disabled ? colourProvider.Background4 : colourProvider.Background5;
caption.Colour = currentNumberInstantaneous.Disabled ? colourProvider.Foreground1 : colourProvider.Content2;
textBox.Colour = currentNumberInstantaneous.Disabled ? colourProvider.Foreground1 : colourProvider.Content1;

BorderThickness = IsHovered || textBox.Focused.Value || slider.IsDragging.Value ? 2 : 0;
BorderColour = textBox.Focused.Value ? colourProvider.Highlight1 : colourProvider.Light4;
BorderThickness = childHasFocus || IsHovered || slider.IsDragging.Value ? 2 : 0;
BorderColour = childHasFocus ? colourProvider.Highlight1 : colourProvider.Light4;

if (textBox.Focused.Value)
if (childHasFocus)
background.Colour = ColourInfo.GradientVertical(colourProvider.Background5, colourProvider.Dark3);
else if (IsHovered || slider.IsDragging.Value)
background.Colour = ColourInfo.GradientVertical(colourProvider.Background5, colourProvider.Dark4);
Expand All @@ -283,8 +286,10 @@ private void updateValueDisplay()
textBox.Text = slider.GetDisplayableValue(currentNumberInstantaneous.Value).ToString();
}

private partial class Slider : OsuSliderBar<T>
private partial class InnerSlider : OsuSliderBar<T>
{
public BindableBool Focused { get; } = new BindableBool();

public BindableBool IsDragging { get; set; } = new BindableBool();
public Action? OnCommit { get; set; }

Expand Down Expand Up @@ -344,7 +349,6 @@ private void load()
protected override void LoadComplete()
{
base.LoadComplete();

updateState();
}

Expand Down Expand Up @@ -382,11 +386,25 @@ protected override void OnHoverLost(HoverLostEvent e)
base.OnHoverLost(e);
}

protected override void OnFocus(FocusEvent e)
{
updateState();
Focused.Value = true;
base.OnFocus(e);
}

protected override void OnFocusLost(FocusLostEvent e)
{
updateState();
Focused.Value = false;
base.OnFocusLost(e);
}

private void updateState()
{
rightBox.Colour = colourProvider.Background6;
leftBox.Colour = IsHovered || IsDragged ? colourProvider.Highlight1.Opacity(0.5f) : colourProvider.Dark2;
nub.Colour = IsHovered || IsDragged ? colourProvider.Highlight1 : colourProvider.Light4;
leftBox.Colour = HasFocus || IsHovered || IsDragged ? colourProvider.Highlight1.Opacity(0.5f) : colourProvider.Dark2;
nub.Colour = HasFocus || IsHovered || IsDragged ? colourProvider.Highlight1 : colourProvider.Light4;
}

protected override void UpdateValue(float value)
Expand Down

0 comments on commit 6dd1efa

Please sign in to comment.