Merge pull request #310 from Tom94/better-option-sliders

Re-use checkbox nub for option sliders and slightly re-structure.

osu.Game/Graphics/UserInterface/Nub.cs

@@ -0,0 +1,113 @@
+// Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE
+
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transformations;
+using osu.Framework.Graphics.UserInterface;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    class Nub : Container, IStateful<CheckBoxState>
+    {
+        public const float COLLAPSED_SIZE = 20;
+        public const float EXPANDED_SIZE = 40;
+
+        private Box fill;
+
+        const float border_width = 3;
+        private Color4 glowingColour, idleColour;
+
+        public Nub()
+        {
+            Size = new Vector2(COLLAPSED_SIZE, 12);
+
+            Masking = true;
+
+            CornerRadius = Height / 2;
+            Masking = true;
+            BorderColour = Color4.White;
+            BorderThickness = border_width;
+
+            Children = new[]
+            {
+                fill = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0.01f, //todo: remove once we figure why containers aren't drawing at all times
+                },
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Colour = idleColour = colours.Pink;
+            glowingColour = colours.PinkLighter;
+
+            EdgeEffect = new EdgeEffect
+            {
+                Colour = colours.PinkDarker,
+                Type = EdgeEffectType.Glow,
+                Radius = 10,
+                Roundness = 8,
+            };
+
+            FadeGlowTo(0);
+        }
+
+        public bool Glowing
+        {
+            set
+            {
+                if (value)
+                {
+                    FadeColour(glowingColour, 500, EasingTypes.OutQuint);
+                    FadeGlowTo(1, 500, EasingTypes.OutQuint);
+                }
+                else
+                {
+                    FadeGlowTo(0, 500);
+                    FadeColour(idleColour, 500);
+                }
+            }
+        }
+
+        public bool Expanded
+        {
+            set
+            {
+                ResizeTo(new Vector2(value ? EXPANDED_SIZE : COLLAPSED_SIZE, 12), 500, EasingTypes.OutQuint);
+            }
+        }
+
+        private CheckBoxState state;
+
+        public CheckBoxState State
+        {
+            get
+            {
+                return state;
+            }
+            set
+            {
+                state = value;
+
+                switch (state)
+                {
+                    case CheckBoxState.Checked:
+                        fill.FadeIn(200, EasingTypes.OutQuint);
+                        break;
+                    case CheckBoxState.Unchecked:
+                        fill.FadeTo(0.01f, 200, EasingTypes.OutQuint); //todo: remove once we figure why containers aren't drawing at all times
+                        break;
+                }
+            }
+        }
+    }
+}

osu.Game/Graphics/UserInterface/OsuCheckbox.cs

@@ -66,7 +66,7 @@ namespace osu.Game.Graphics.UserInterface
             }
         }
 
-        private Light light;
+        private Nub nub;
         private SpriteText labelSpriteText;
         private AudioSample sampleChecked;
         private AudioSample sampleUnchecked;
@@ -79,7 +79,7 @@ namespace osu.Game.Graphics.UserInterface
             Children = new Drawable[]
             {
                 labelSpriteText = new OsuSpriteText(),
-                light = new Light
+                nub = new Nub
                 {
                     Anchor = Anchor.CentreRight,
                     Origin = Anchor.CentreRight,
@@ -102,13 +102,15 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override bool OnHover(InputState state)
         {
-            light.Glowing = true;
+            nub.Glowing = true;
+            nub.Expanded = true;
             return base.OnHover(state);
         }
 
         protected override void OnHoverLost(InputState state)
         {
-            light.Glowing = false;
+            nub.Glowing = false;
+            nub.Expanded = false;
             base.OnHoverLost(state);
         }
 
@@ -125,7 +127,7 @@ namespace osu.Game.Graphics.UserInterface
                 bindable.Value = true;
 
             sampleChecked?.Play();
-            light.State = CheckBoxState.Checked;
+            nub.State = CheckBoxState.Checked;
         }
 
         protected override void OnUnchecked()
@@ -134,97 +136,7 @@ namespace osu.Game.Graphics.UserInterface
                 bindable.Value = false;
 
             sampleUnchecked?.Play();
-            light.State = CheckBoxState.Unchecked;
+            nub.State = CheckBoxState.Unchecked;
         }
-
-        private class Light : Container, IStateful<CheckBoxState>
-        {
-            private Box fill;
-
-            const float border_width = 3;
-            private Color4 glowingColour, idleColour;
-
-            public Light()
-            {
-                Size = new Vector2(20, 12);
-
-                Masking = true;                
-
-                CornerRadius = Height / 2;
-                Masking = true;
-                BorderColour = Color4.White;
-                BorderThickness = border_width;
-
-                Children = new[]
-                {
-                    fill = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Alpha = 0.01f, //todo: remove once we figure why containers aren't drawing at all times
-                    },
-                };
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                Colour = idleColour = colours.Pink;
-                glowingColour = colours.PinkLighter;
-
-                EdgeEffect = new EdgeEffect
-                {
-                    Colour = colours.PinkDarker,
-                    Type = EdgeEffectType.Glow,
-                    Radius = 10,
-                    Roundness = 8,
-                };
-
-                FadeGlowTo(0);
-            }
-
-            public bool Glowing
-            {
-                set
-                {
-                    if (value)
-                    {
-                        ResizeTo(new Vector2(40, 12), 500, EasingTypes.OutQuint);
-                        FadeColour(glowingColour, 500, EasingTypes.OutQuint);
-                        FadeGlowTo(1, 500, EasingTypes.OutQuint);
-                    }
-                    else
-                    {
-                        ResizeTo(new Vector2(20, 12), 500, EasingTypes.OutQuint);
-                        FadeGlowTo(0, 500);
-                        FadeColour(idleColour, 500);
-                    }
-                }
-            }
-
-            private CheckBoxState state;
-
-            public CheckBoxState State
-            {
-                get
-                {
-                    return state;
-                }
-                set
-                {
-                    state = value;
-
-                    switch (state)
-                    {
-                        case CheckBoxState.Checked:
-                            fill.FadeIn(200, EasingTypes.OutQuint);
-                            break;
-                        case CheckBoxState.Unchecked:
-                            fill.FadeTo(0.01f, 200, EasingTypes.OutQuint); //todo: remove once we figure why containers aren't drawing at all times
-                            break;
-                    }
-                }
-            }
-        }
-
     }
 }

osu.Game/Graphics/UserInterface/OsuSliderBar.cs

@@ -0,0 +1,131 @@
+// Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE
+
+using OpenTK;
+using OpenTK.Input;
+using osu.Framework.Allocation;
+using osu.Framework.Audio;
+using osu.Framework.Audio.Sample;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Transformations;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public class OsuSliderBar<U> : SliderBar<U> where U : struct
+    {
+        private AudioSample sample;
+        private double lastSampleTime;
+
+        private Nub nub;
+        private Box leftBox, rightBox;
+
+        public OsuSliderBar()
+        {
+            Height = 12;
+            RangePadding = 20;
+            Children = new Drawable[]
+            {
+                leftBox = new Box
+                {
+                    Height = 2,
+                    Position = new Vector2(2, 0),
+                    RelativeSizeAxes = Axes.None,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                },
+                rightBox = new Box
+                {
+                    Height = 2,
+                    Position = new Vector2(-2, 0),
+                    RelativeSizeAxes = Axes.None,
+                    Anchor = Anchor.CentreRight,
+                    Origin = Anchor.CentreRight,
+                    Alpha = 0.5f,
+                },
+                nub = new Nub
+                {
+                    Origin = Anchor.TopCentre,
+                    State = CheckBoxState.Unchecked,
+                    Expanded = true,
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(AudioManager audio, OsuColour colours)
+        {
+            sample = audio.Sample.Get(@"Sliderbar/sliderbar");
+            leftBox.Colour = colours.Pink;
+            rightBox.Colour = colours.Pink;
+        }
+
+        private void playSample()
+        {
+            if (Clock == null || Clock.CurrentTime - lastSampleTime <= 50)
+                return;
+            lastSampleTime = Clock.CurrentTime;
+            sample.Frequency.Value = 1 + NormalizedValue * 0.2f;
+            sample.Play();
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            nub.Glowing = true;
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            nub.Glowing = false;
+            base.OnHoverLost(state);
+        }
+
+        protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
+        {
+            if (args.Key == Key.Left || args.Key == Key.Right)
+                playSample();
+            return base.OnKeyDown(state, args);
+        }
+
+        protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
+        {
+            nub.State = CheckBoxState.Checked;
+            return base.OnMouseDown(state, args);
+        }
+
+        protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
+        {
+            nub.State = CheckBoxState.Unchecked;
+            return base.OnMouseUp(state, args);
+        }
+
+        protected override bool OnClick(InputState state)
+        {
+            playSample();
+            return base.OnClick(state);
+        }
+
+        protected override bool OnDrag(InputState state)
+        {
+            playSample();
+            return base.OnDrag(state);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+            leftBox.Scale = new Vector2(MathHelper.Clamp(
+                nub.DrawPosition.X - nub.DrawWidth / 2, 0, DrawWidth), 1);
+            rightBox.Scale = new Vector2(MathHelper.Clamp(
+                DrawWidth - nub.DrawPosition.X - nub.DrawWidth / 2, 0, DrawWidth), 1);
+        }
+
+        protected override void UpdateValue(float value)
+        {
+            nub.MoveToX(RangePadding + UsableWidth * value, 250, EasingTypes.OutQuint);
+        }
+    }
+}

osu.Game/Overlays/Options/OptionSlider.cs

@@ -1,24 +1,14 @@
 //Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
 //Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
-using System;
-using OpenTK;
-using OpenTK.Input;
-using OpenTK.Graphics;
-using osu.Framework.Allocation;
-using osu.Framework.Audio;
-using osu.Framework.Audio.Sample;
 using osu.Framework.Configuration;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Sprites;
-using osu.Framework.Graphics.Transformations;
 using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input;
-using osu.Game.Graphics;
-using System.Linq;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Overlays.Options
 {
@@ -48,9 +38,12 @@ namespace osu.Game.Overlays.Options
             Direction = FlowDirection.VerticalOnly;
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
+            Padding = new MarginPadding { Right = 5 };
+
             Children = new Drawable[]
             {
-                text = new OsuSpriteText {
+                text = new OsuSpriteText
+                {
                     Alpha = 0,
                 },
                 slider = new OsuSliderBar<T>
@@ -60,116 +53,5 @@ namespace osu.Game.Overlays.Options
                 }
             };
         }
-
-        private class OsuSliderBar<U> : SliderBar<U> where U : struct
-        {
-            private AudioSample sample;
-            private double lastSampleTime;
-            
-            private Container nub;
-            private Box leftBox, rightBox;
-            
-            private float innerWidth
-            {
-                get
-                {
-                    return DrawWidth - Height;
-                }
-            }
-            
-            public OsuSliderBar()
-            {
-                Height = 20;
-                Padding = new MarginPadding { Left = Height / 2, Right = Height / 2 };
-                Children = new Drawable[]
-                {
-                    leftBox = new Box
-                    {
-                        Height = 2,
-                        RelativeSizeAxes = Axes.None,
-                        Anchor = Anchor.CentreLeft,
-                        Origin = Anchor.CentreLeft,
-                    },
-                    rightBox = new Box
-                    {
-                        Height = 2,
-                        RelativeSizeAxes = Axes.None,
-                        Anchor = Anchor.CentreRight,
-                        Origin = Anchor.CentreRight,
-                        Alpha = 0.5f,
-                    },
-                    nub = new Container
-                    {
-                        Width = Height,
-                        Height = Height,
-                        CornerRadius = Height / 2,
-                        Origin = Anchor.TopCentre,
-                        AutoSizeAxes = Axes.None,
-                        RelativeSizeAxes = Axes.None,
-                        Masking = true,
-                        BorderThickness = 3,
-                        Children = new[]
-                        {
-                            new Box
-                            {
-                                RelativeSizeAxes = Axes.Both
-                            }
-                        }
-                    }
-                };
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(AudioManager audio, OsuColour colours)
-            {
-                sample = audio.Sample.Get(@"Sliderbar/sliderbar");
-                leftBox.Colour = colours.Pink;
-                rightBox.Colour = colours.Pink;
-                nub.BorderColour = colours.Pink;
-                (nub.Children.First() as Box).Colour = colours.Pink.Opacity(0);
-            }
-
-            private void playSample()
-            {
-                if (Clock == null || Clock.CurrentTime - lastSampleTime <= 50)
-                    return;
-                lastSampleTime = Clock.CurrentTime;
-                sample.Frequency.Value = 1 + NormalizedValue * 0.2f;
-                sample.Play();
-            }
-            
-            protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
-            {
-                if (args.Key == Key.Left || args.Key == Key.Right)
-                    playSample();
-                return base.OnKeyDown(state, args);
-            }
-            
-            protected override bool OnClick(InputState state)
-            {
-                playSample();
-                return base.OnClick(state);
-            }
-            
-            protected override bool OnDrag(InputState state)
-            {
-                playSample();
-                return base.OnDrag(state);
-            }
-            
-            protected override void Update()
-            {
-                base.Update();
-                leftBox.Scale = new Vector2(MathHelper.Clamp(
-                    nub.DrawPosition.X - nub.DrawWidth / 2 + 2, 0, innerWidth), 1);
-                rightBox.Scale = new Vector2(MathHelper.Clamp(
-                    innerWidth - nub.DrawPosition.X - nub.DrawWidth / 2 + 2, 0, innerWidth), 1);
-            }
-
-            protected override void UpdateValue(float value)
-            {
-                nub.MoveToX(innerWidth * value);
-            }
-        }
     }
 }

osu.Game/osu.Game.csproj

@@ -68,6 +68,8 @@
     <Compile Include="Graphics\Cursor\CursorTrail.cs" />
     <Compile Include="Graphics\Sprites\OsuSpriteText.cs" />
     <Compile Include="Graphics\UserInterface\BackButton.cs" />
+    <Compile Include="Graphics\UserInterface\Nub.cs" />
+    <Compile Include="Graphics\UserInterface\OsuSliderBar.cs" />
     <Compile Include="Graphics\UserInterface\OsuTextBox.cs" />
     <Compile Include="Graphics\UserInterface\TwoLayerButton.cs" />
     <Compile Include="Modes\Objects\HitObjectParser.cs" />