Merge pull request #15112 from bdach/slider-refresh

Refresh appearance and use colour provider theming in sliders and checkboxes

osu.Game.Tests/Visual/UserInterface/TestSceneLabelledSliderBar.cs

@@ -1,11 +1,15 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System;
+using System.Linq;
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Overlays;
 
 namespace osu.Game.Tests.Visual.UserInterface
 {
@@ -19,28 +23,62 @@ namespace osu.Game.Tests.Visual.UserInterface
         {
             AddStep("create component", () =>
             {
-                LabelledSliderBar<double> component;
+                FillFlowContainer flow;
 
-                Child = new Container
+                Child = flow = new FillFlowContainer
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     Width = 500,
                     AutoSizeAxes = Axes.Y,
-                    Child = component = new LabelledSliderBar<double>
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
                     {
-                        Current = new BindableDouble(5)
+                        new LabelledSliderBar<double>
                         {
-                            MinValue = 0,
+                            Current = new BindableDouble(5)
-                            MaxValue = 10,
+                            {
-                            Precision = 1,
+                                MinValue = 0,
-                        }
+                                MaxValue = 10,
-                    }
+                                Precision = 1,
+                            },
+                            Label = "a sample component",
+                            Description = hasDescription ? "this text describes the component" : string.Empty,
+                        },
+                    },
                 };
 
-                component.Label = "a sample component";
+                foreach (var colour in Enum.GetValues(typeof(OverlayColourScheme)).OfType<OverlayColourScheme>())
-                component.Description = hasDescription ? "this text describes the component" : string.Empty;
+                {
+                    flow.Add(new OverlayColourContainer(colour)
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Child = new LabelledSliderBar<double>
+                        {
+                            Current = new BindableDouble(5)
+                            {
+                                MinValue = 0,
+                                MaxValue = 10,
+                                Precision = 1,
+                            },
+                            Label = "a sample component",
+                            Description = hasDescription ? "this text describes the component" : string.Empty,
+                        }
+                    });
+                }
             });
         }
+
+        private class OverlayColourContainer : Container
+        {
+            [Cached]
+            private OverlayColourProvider colourProvider;
+
+            public OverlayColourContainer(OverlayColourScheme scheme)
+            {
+                colourProvider = new OverlayColourProvider(scheme);
+            }
+        }
     }
 }

osu.Game.Tests/Visual/UserInterface/TestSceneSettingsCheckbox.cs

@@ -0,0 +1,68 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using System.Linq;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Settings;
+using osuTK;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneSettingsCheckbox : OsuTestScene
+    {
+        [TestCase]
+        public void TestCheckbox()
+        {
+            AddStep("create component", () =>
+            {
+                FillFlowContainer flow;
+
+                Child = flow = new FillFlowContainer
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Width = 500,
+                    AutoSizeAxes = Axes.Y,
+                    Spacing = new Vector2(5),
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        new SettingsCheckbox
+                        {
+                            LabelText = "a sample component",
+                        },
+                    },
+                };
+
+                foreach (var colour1 in Enum.GetValues(typeof(OverlayColourScheme)).OfType<OverlayColourScheme>())
+                {
+                    flow.Add(new OverlayColourContainer(colour1)
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Child = new SettingsCheckbox
+                        {
+                            LabelText = "a sample component",
+                        }
+                    });
+                }
+            });
+        }
+
+        private class OverlayColourContainer : Container
+        {
+            [Cached]
+            private OverlayColourProvider colourProvider;
+
+            public OverlayColourContainer(OverlayColourScheme scheme)
+            {
+                colourProvider = new OverlayColourProvider(scheme);
+            }
+        }
+    }
+}

osu.Game/Graphics/UserInterface/Nub.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using JetBrains.Annotations;
 using osuTK;
 using osuTK.Graphics;
 using osu.Framework.Allocation;
@@ -12,63 +13,74 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
+using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class Nub : CircularContainer, IHasCurrentValue<bool>, IHasAccentColour
+    public class Nub : CompositeDrawable, IHasCurrentValue<bool>, IHasAccentColour
     {
-        public const float COLLAPSED_SIZE = 20;
+        public const float HEIGHT = 15;
-        public const float EXPANDED_SIZE = 40;
+
+        public const float EXPANDED_SIZE = 50;
 
         private const float border_width = 3;
 
-        private const double animate_in_duration = 150;
+        private const double animate_in_duration = 200;
         private const double animate_out_duration = 500;
 
+        private readonly Box fill;
+        private readonly Container main;
+
         public Nub()
         {
-            Box fill;
+            Size = new Vector2(EXPANDED_SIZE, HEIGHT);
 
-            Size = new Vector2(COLLAPSED_SIZE, 12);
+            InternalChildren = new[]
-
-            BorderColour = Color4.White;
-            BorderThickness = border_width;
-
-            Masking = true;
-
-            Children = new[]
             {
-                fill = new Box
+                main = new CircularContainer
                 {
+                    BorderColour = Color4.White,
+                    BorderThickness = border_width,
+                    Masking = true,
                     RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
+                    Anchor = Anchor.TopCentre,
-                    AlwaysPresent = true,
+                    Origin = Anchor.TopCentre,
+                    Children = new Drawable[]
+                    {
+                        fill = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0,
+                            AlwaysPresent = true,
+                        },
+                    }
                 },
             };
-
-            Current.ValueChanged += filled =>
-            {
-                fill.FadeTo(filled.NewValue ? 1 : 0, 200, Easing.OutQuint);
-                this.TransformTo(nameof(BorderThickness), filled.NewValue ? 8.5f : border_width, 200, Easing.OutQuint);
-            };
         }
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(OsuColour colours)
+        private void load([CanBeNull] OverlayColourProvider colourProvider, OsuColour colours)
         {
-            AccentColour = colours.Pink;
+            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
-            GlowingAccentColour = colours.PinkLighter;
+            GlowingAccentColour = colourProvider?.Highlight1.Lighten(0.2f) ?? colours.PinkLighter;
-            GlowColour = colours.PinkDarker;
+            GlowColour = colourProvider?.Highlight1 ?? colours.PinkLighter;
 
-            EdgeEffect = new EdgeEffectParameters
+            main.EdgeEffect = new EdgeEffectParameters
             {
                 Colour = GlowColour.Opacity(0),
                 Type = EdgeEffectType.Glow,
-                Radius = 10,
+                Radius = 8,
-                Roundness = 8,
+                Roundness = 5,
             };
         }
 
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindValueChanged(onCurrentValueChanged, true);
+        }
+
         private bool glowing;
 
         public bool Glowing
@@ -80,28 +92,17 @@ namespace osu.Game.Graphics.UserInterface
 
                 if (value)
                 {
-                    this.FadeColour(GlowingAccentColour, animate_in_duration, Easing.OutQuint);
+                    main.FadeColour(GlowingAccentColour, animate_in_duration, Easing.OutQuint);
-                    FadeEdgeEffectTo(1, animate_in_duration, Easing.OutQuint);
+                    main.FadeEdgeEffectTo(0.2f, animate_in_duration, Easing.OutQuint);
                 }
                 else
                 {
-                    FadeEdgeEffectTo(0, animate_out_duration);
+                    main.FadeEdgeEffectTo(0, animate_out_duration, Easing.OutQuint);
-                    this.FadeColour(AccentColour, animate_out_duration);
+                    main.FadeColour(AccentColour, animate_out_duration, Easing.OutQuint);
                 }
             }
         }
 
-        public bool Expanded
-        {
-            set
-            {
-                if (value)
-                    this.ResizeTo(new Vector2(EXPANDED_SIZE, 12), animate_in_duration, Easing.OutQuint);
-                else
-                    this.ResizeTo(new Vector2(COLLAPSED_SIZE, 12), animate_out_duration, Easing.OutQuint);
-            }
-        }
-
         private readonly Bindable<bool> current = new Bindable<bool>();
 
         public Bindable<bool> Current
@@ -126,7 +127,7 @@ namespace osu.Game.Graphics.UserInterface
             {
                 accentColour = value;
                 if (!Glowing)
-                    Colour = value;
+                    main.Colour = value;
             }
         }
 
@@ -139,7 +140,7 @@ namespace osu.Game.Graphics.UserInterface
             {
                 glowingAccentColour = value;
                 if (Glowing)
-                    Colour = value;
+                    main.Colour = value;
             }
         }
 
@@ -152,10 +153,22 @@ namespace osu.Game.Graphics.UserInterface
             {
                 glowColour = value;
 
-                var effect = EdgeEffect;
+                var effect = main.EdgeEffect;
                 effect.Colour = Glowing ? value : value.Opacity(0);
-                EdgeEffect = effect;
+                main.EdgeEffect = effect;
             }
         }
+
+        private void onCurrentValueChanged(ValueChangedEvent<bool> filled)
+        {
+            fill.FadeTo(filled.NewValue ? 1 : 0, 200, Easing.OutQuint);
+
+            if (filled.NewValue)
+                main.ResizeWidthTo(1, animate_in_duration, Easing.OutElasticHalf);
+            else
+                main.ResizeWidthTo(0.9f, animate_out_duration, Easing.OutElastic);
+
+            main.TransformTo(nameof(BorderThickness), filled.NewValue ? 8.5f : border_width, 200, Easing.OutQuint);
+        }
     }
 }

osu.Game/Graphics/UserInterface/OsuCheckbox.cs

@@ -9,16 +9,11 @@ using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics.Containers;
-using osuTK.Graphics;
 
 namespace osu.Game.Graphics.UserInterface
 {
     public class OsuCheckbox : Checkbox
     {
-        public Color4 CheckedColor { get; set; } = Color4.Cyan;
-        public Color4 UncheckedColor { get; set; } = Color4.White;
-        public int FadeDuration { get; set; }
-
         /// <summary>
         /// Whether to play sounds when the state changes as a result of user interaction.
         /// </summary>
@@ -104,14 +99,12 @@ namespace osu.Game.Graphics.UserInterface
         protected override bool OnHover(HoverEvent e)
         {
             Nub.Glowing = true;
-            Nub.Expanded = true;
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
             Nub.Glowing = false;
-            Nub.Expanded = false;
             base.OnHoverLost(e);
         }
 

osu.Game/Graphics/UserInterface/OsuSliderBar.cs

@@ -3,11 +3,13 @@
 
 using System;
 using System.Globalization;
+using JetBrains.Annotations;
 using osuTK;
 using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.UserInterface;
@@ -16,6 +18,7 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
 using osu.Framework.Utils;
+using osu.Game.Overlays;
 
 namespace osu.Game.Graphics.UserInterface
 {
@@ -52,34 +55,63 @@ namespace osu.Game.Graphics.UserInterface
             {
                 accentColour = value;
                 leftBox.Colour = value;
+            }
+        }
+
+        private Colour4 backgroundColour;
+
+        public Color4 BackgroundColour
+        {
+            get => backgroundColour;
+            set
+            {
+                backgroundColour = value;
                 rightBox.Colour = value;
             }
         }
 
         public OsuSliderBar()
         {
-            Height = 12;
+            Height = Nub.HEIGHT;
-            RangePadding = 20;
+            RangePadding = Nub.EXPANDED_SIZE / 2;
             Children = new Drawable[]
             {
-                leftBox = new Box
+                new Container
                 {
-                    Height = 2,
+                    RelativeSizeAxes = Axes.X,
-                    EdgeSmoothness = new Vector2(0, 0.5f),
+                    AutoSizeAxes = Axes.Y,
-                    Position = new Vector2(2, 0),
-                    RelativeSizeAxes = Axes.None,
                     Anchor = Anchor.CentreLeft,
                     Origin = Anchor.CentreLeft,
-                },
+                    Padding = new MarginPadding { Horizontal = 2 },
-                rightBox = new Box
+                    Child = new CircularContainer
-                {
+                    {
-                    Height = 2,
+                        RelativeSizeAxes = Axes.X,
-                    EdgeSmoothness = new Vector2(0, 0.5f),
+                        AutoSizeAxes = Axes.Y,
-                    Position = new Vector2(-2, 0),
+                        Anchor = Anchor.CentreLeft,
-                    RelativeSizeAxes = Axes.None,
+                        Origin = Anchor.CentreLeft,
-                    Anchor = Anchor.CentreRight,
+                        Masking = true,
-                    Origin = Anchor.CentreRight,
+                        CornerRadius = 5f,
-                    Alpha = 0.5f,
+                        Children = new Drawable[]
+                        {
+                            leftBox = new Box
+                            {
+                                Height = 5,
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.None,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                            },
+                            rightBox = new Box
+                            {
+                                Height = 5,
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.None,
+                                Anchor = Anchor.CentreRight,
+                                Origin = Anchor.CentreRight,
+                                Alpha = 0.5f,
+                            },
+                        },
+                    },
                 },
                 nubContainer = new Container
                 {
@@ -88,7 +120,7 @@ namespace osu.Game.Graphics.UserInterface
                     {
                         Origin = Anchor.TopCentre,
                         RelativePositionAxes = Axes.X,
-                        Expanded = true,
+                        Current = { Value = true }
                     },
                 },
                 new HoverClickSounds()
@@ -97,11 +129,12 @@ namespace osu.Game.Graphics.UserInterface
             Current.DisabledChanged += disabled => { Alpha = disabled ? 0.3f : 1; };
         }
 
-        [BackgroundDependencyLoader]
+        [BackgroundDependencyLoader(true)]
-        private void load(AudioManager audio, OsuColour colours)
+        private void load(AudioManager audio, [CanBeNull] OverlayColourProvider colourProvider, OsuColour colours)
         {
             sample = audio.Samples.Get(@"UI/notch-tick");
-            AccentColour = colours.Pink;
+            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
+            BackgroundColour = colourProvider?.Background5 ?? colours.Pink.Opacity(0.5f);
         }
 
         protected override void Update()
@@ -119,26 +152,25 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override bool OnHover(HoverEvent e)
         {
-            Nub.Glowing = true;
+            updateGlow();
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            Nub.Glowing = false;
+            updateGlow();
             base.OnHoverLost(e);
         }
 
-        protected override bool OnMouseDown(MouseDownEvent e)
+        protected override void OnDragEnd(DragEndEvent e)
         {
-            Nub.Current.Value = true;
+            updateGlow();
-            return base.OnMouseDown(e);
+            base.OnDragEnd(e);
         }
 
-        protected override void OnMouseUp(MouseUpEvent e)
+        private void updateGlow()
         {
-            Nub.Current.Value = false;
+            Nub.Glowing = IsHovered || IsDragged;
-            base.OnMouseUp(e);
         }
 
         protected override void OnUserChange(T value)

osu.Game/Overlays/Settings/SettingsSlider.cs

@@ -19,7 +19,7 @@ namespace osu.Game.Overlays.Settings
     {
         protected override Drawable CreateControl() => new TSlider
         {
-            Margin = new MarginPadding { Top = 5, Bottom = 5 },
+            Margin = new MarginPadding { Vertical = 10 },
             RelativeSizeAxes = Axes.X
         };
 

osu.Game/Screens/Play/PlayerSettings/PlayerCheckbox.cs

@@ -14,7 +14,7 @@ namespace osu.Game.Screens.Play.PlayerSettings
         {
             Nub.AccentColour = colours.Yellow;
             Nub.GlowingAccentColour = colours.YellowLighter;
-            Nub.GlowColour = colours.YellowDarker;
+            Nub.GlowColour = colours.YellowDark;
         }
     }
 }

osu.Game/Screens/Play/PlayerSettings/PlayerSliderBar.cs

@@ -29,7 +29,7 @@ namespace osu.Game.Screens.Play.PlayerSettings
                 AccentColour = colours.Yellow;
                 Nub.AccentColour = colours.Yellow;
                 Nub.GlowingAccentColour = colours.YellowLighter;
-                Nub.GlowColour = colours.YellowDarker;
+                Nub.GlowColour = colours.YellowDark;
             }
         }
     }