From 6dd1efa0132e9ab9f08eea02439d794e191f73bf Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 24 Oct 2024 19:46:16 +0900 Subject: [PATCH 1/5] Adjust slider bar implementations to show focused state --- .../UserInterface/RoundedSliderBar.cs | 25 ++++++++++++- .../UserInterface/ShearedSliderBar.cs | 27 +++++++++++++- .../Graphics/UserInterfaceV2/FormSliderBar.cs | 36 ++++++++++++++----- 3 files changed, 77 insertions(+), 11 deletions(-) diff --git a/osu.Game/Graphics/UserInterface/RoundedSliderBar.cs b/osu.Game/Graphics/UserInterface/RoundedSliderBar.cs index 56047173bb..aeab7c34b2 100644 --- a/osu.Game/Graphics/UserInterface/RoundedSliderBar.cs +++ b/osu.Game/Graphics/UserInterface/RoundedSliderBar.cs @@ -8,6 +8,7 @@ using osu.Framework.Allocation; 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; @@ -25,6 +26,8 @@ namespace osu.Game.Graphics.UserInterface private readonly HoverClickSounds hoverClickSounds; + private readonly Container mainContent; + private Color4 accentColour; public Color4 AccentColour @@ -62,7 +65,7 @@ namespace osu.Game.Graphics.UserInterface Anchor = Anchor.CentreLeft, Origin = Anchor.CentreLeft, Padding = new MarginPadding { Horizontal = 2 }, - Child = new CircularContainer + Child = mainContent = new CircularContainer { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, @@ -135,6 +138,26 @@ namespace osu.Game.Graphics.UserInterface }, 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(); diff --git a/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs b/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs index 0df1c1d204..f4c6f07262 100644 --- a/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs +++ b/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs @@ -8,6 +8,7 @@ using osu.Framework.Allocation; 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; @@ -26,6 +27,8 @@ namespace osu.Game.Graphics.UserInterface private readonly HoverClickSounds hoverClickSounds; + private readonly Container mainContent; + private Color4 accentColour; public Color4 AccentColour @@ -60,9 +63,11 @@ namespace osu.Game.Graphics.UserInterface 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 }, @@ -138,6 +143,26 @@ namespace osu.Game.Graphics.UserInterface }, 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(); diff --git a/osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs b/osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs index da28437eee..532423876e 100644 --- a/osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs +++ b/osu.Game/Graphics/UserInterfaceV2/FormSliderBar.cs @@ -71,7 +71,7 @@ namespace osu.Game.Graphics.UserInterfaceV2 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!; @@ -135,7 +135,7 @@ namespace osu.Game.Graphics.UserInterfaceV2 }, TabbableContentContainer = tabbableContentContainer, }, - slider = new Slider + slider = new InnerSlider { Anchor = Anchor.CentreRight, Origin = Anchor.CentreRight, @@ -163,6 +163,7 @@ namespace osu.Game.Graphics.UserInterfaceV2 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; @@ -259,16 +260,18 @@ namespace osu.Game.Graphics.UserInterfaceV2 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); @@ -283,8 +286,10 @@ namespace osu.Game.Graphics.UserInterfaceV2 textBox.Text = slider.GetDisplayableValue(currentNumberInstantaneous.Value).ToString(); } - private partial class Slider : OsuSliderBar + private partial class InnerSlider : OsuSliderBar { + public BindableBool Focused { get; } = new BindableBool(); + public BindableBool IsDragging { get; set; } = new BindableBool(); public Action? OnCommit { get; set; } @@ -344,7 +349,6 @@ namespace osu.Game.Graphics.UserInterfaceV2 protected override void LoadComplete() { base.LoadComplete(); - updateState(); } @@ -382,11 +386,25 @@ namespace osu.Game.Graphics.UserInterfaceV2 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) From 6e8400a95885f2e33588f909034f0a5474b1c52b Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 24 Oct 2024 20:37:38 +0900 Subject: [PATCH 2/5] Fix gap in `ShearedSliderBar` when focused --- osu.Game/Graphics/UserInterface/ShearedSliderBar.cs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs b/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs index f4c6f07262..a36b9c7a4c 100644 --- a/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs +++ b/osu.Game/Graphics/UserInterface/ShearedSliderBar.cs @@ -70,7 +70,6 @@ namespace osu.Game.Graphics.UserInterface CornerRadius = 5, Anchor = Anchor.CentreLeft, Origin = Anchor.CentreLeft, - Padding = new MarginPadding { Horizontal = 2 }, Child = new Container { RelativeSizeAxes = Axes.Both, @@ -192,8 +191,8 @@ namespace osu.Game.Graphics.UserInterface 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) From c666fa7472f9dc8a0fb529ba85816151198d8973 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 25 Oct 2024 16:09:08 +0900 Subject: [PATCH 3/5] Update framework --- osu.Android.props | 2 +- osu.Game/osu.Game.csproj | 2 +- osu.iOS.props | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/osu.Android.props b/osu.Android.props index 7844dcc1fe..f271bdfaaf 100644 --- a/osu.Android.props +++ b/osu.Android.props @@ -10,7 +10,7 @@ true - + diff --git a/osu.iOS.props b/osu.iOS.props index 9fc7cdf453..ecb9ae2c8d 100644 --- a/osu.iOS.props +++ b/osu.iOS.props @@ -17,6 +17,6 @@ -all - + From 1fc221bb396c0c0fa626c49cc80e154654ea73e4 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 25 Oct 2024 16:13:02 +0900 Subject: [PATCH 4/5] Fix focus glow appearing above range slider's nubs --- osu.Game/Graphics/UserInterface/RangeSlider.cs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/osu.Game/Graphics/UserInterface/RangeSlider.cs b/osu.Game/Graphics/UserInterface/RangeSlider.cs index f83dff6295..45c7f713ee 100644 --- a/osu.Game/Graphics/UserInterface/RangeSlider.cs +++ b/osu.Game/Graphics/UserInterface/RangeSlider.cs @@ -115,7 +115,9 @@ namespace osu.Game.Graphics.UserInterface KeyboardStep = 0.1f, RelativeSizeAxes = Axes.X, Y = vertical_offset, - } + }, + upperBound.Nub.CreateProxy(), + lowerBound.Nub.CreateProxy(), }; } @@ -160,6 +162,8 @@ namespace osu.Game.Graphics.UserInterface protected partial class BoundSlider : RoundedSliderBar { + public new Nub Nub => base.Nub; + public string? DefaultString; public LocalisableString? DefaultTooltip; public string? TooltipSuffix; From e96d593b1fa4030ff8da1cedd2b86836735a4144 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Fri, 25 Oct 2024 19:58:31 +0200 Subject: [PATCH 5/5] Fix redundant array type specification --- osu.Game/Graphics/UserInterface/RangeSlider.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Graphics/UserInterface/RangeSlider.cs b/osu.Game/Graphics/UserInterface/RangeSlider.cs index 45c7f713ee..422c2ca4a3 100644 --- a/osu.Game/Graphics/UserInterface/RangeSlider.cs +++ b/osu.Game/Graphics/UserInterface/RangeSlider.cs @@ -98,7 +98,7 @@ namespace osu.Game.Graphics.UserInterface { const float vertical_offset = 13; - InternalChildren = new Drawable[] + InternalChildren = new[] { label = new OsuSpriteText {