Skip to content

Commit

Permalink
Merge pull request ppy#30413 from peppy/slider-bar-focus
Browse files Browse the repository at this point in the history 
Adjust slider bar implementations to show focused state
  • Loading branch information
@bdach
bdach authored Oct 25, 2024
2 parents b72a50b + e96d593 commit 09582aa
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 19 deletions.
2 changes: 1 addition & 1 deletion osu.Android.props
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="ppy.osu.Framework.Android" Version="2024.1009.0" />
<PackageReference Include="ppy.osu.Framework.Android" Version="2024.1025.0" />
</ItemGroup>
<PropertyGroup>
<!-- Fody does not handle Android build well, and warns when unchanged.
Expand Down
8 changes: 6 additions & 2 deletions osu.Game/Graphics/UserInterface/RangeSlider.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ public RangeSlider()
{
const float vertical_offset = 13;

InternalChildren = new Drawable[]
InternalChildren = new[]
{
label = new OsuSpriteText
{
Expand All @@ -115,7 +115,9 @@ public RangeSlider()
KeyboardStep = 0.1f,
RelativeSizeAxes = Axes.X,
Y = vertical_offset,
}
},
upperBound.Nub.CreateProxy(),
lowerBound.Nub.CreateProxy(),
};
}

Expand Down Expand Up @@ -160,6 +162,8 @@ public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) =>

protected partial class BoundSlider : RoundedSliderBar<double>
{
public new Nub Nub => base.Nub;

public string? DefaultString;
public LocalisableString? DefaultTooltip;
public string? TooltipSuffix;
Expand Down
25 changes: 24 additions & 1 deletion osu.Game/Graphics/UserInterface/RoundedSliderBar.cs
View file
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
32 changes: 28 additions & 4 deletions osu.Game/Graphics/UserInterface/ShearedSliderBar.cs
View file
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,12 +63,13 @@ 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 },
Child = new Container
{
RelativeSizeAxes = Axes.Both,
Expand Down Expand Up @@ -138,6 +142,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 Expand Up @@ -167,8 +191,8 @@ private void updateGlow()
protected override void UpdateAfterChildren()
{
base.UpdateAfterChildren();
LeftBox.Scale = new Vector2(Math.Clamp(RangePadding + Nub.DrawPosition.X - Nub.DrawWidth / 2.15f, 0, Math.Max(0, DrawWidth)), 1);
RightBox.Scale = new Vector2(Math.Clamp(DrawWidth - Nub.DrawPosition.X - RangePadding - Nub.DrawWidth / 2.15f, 0, Math.Max(0, DrawWidth)), 1);
LeftBox.Scale = new Vector2(Math.Clamp(RangePadding + Nub.DrawPosition.X - Nub.DrawWidth / 2.3f, 0, Math.Max(0, DrawWidth)), 1);
RightBox.Scale = new Vector2(Math.Clamp(DrawWidth - Nub.DrawPosition.X - RangePadding - Nub.DrawWidth / 2.3f, 0, Math.Max(0, DrawWidth)), 1);
}

protected override void UpdateValue(float value)
Expand Down
36 changes: 27 additions & 9 deletions osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs
View file
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
2 changes: 1 addition & 1 deletion osu.Game/osu.Game.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Realm" Version="11.5.0" />
<PackageReference Include="ppy.osu.Framework" Version="2024.1009.0" />
<PackageReference Include="ppy.osu.Framework" Version="2024.1025.0" />
<PackageReference Include="ppy.osu.Game.Resources" Version="2024.1003.0" />
<PackageReference Include="Sentry" Version="4.12.1" />
<!-- Held back due to 0.34.0 failing AOT compilation on ZstdSharp.dll dependency. -->
Expand Down
2 changes: 1 addition & 1 deletion osu.iOS.props
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
<MtouchInterpreter>-all</MtouchInterpreter>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="ppy.osu.Framework.iOS" Version="2024.1009.0" />
<PackageReference Include="ppy.osu.Framework.iOS" Version="2024.1025.0" />
</ItemGroup>
</Project>

0 comments on commit 09582aa

Please sign in to comment.