Merge pull request #173 from peppy/options-design-improvements

Add an implementation of the new design of checkboxes.

osu-framework

@@ -1 +1 @@
-Subproject commit e5ad12e4aff8b638ee9d7b8a5542a85fab054ffa
+Subproject commit eb9869d6f5a15ee7ee3a0cdc006ab9f216444860

osu.Game/OsuGameBase.cs

@@ -49,6 +49,9 @@ namespace osu.Game
 
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/FontAwesome"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/osuFont"));
+            Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-Medium"));
+            Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-MediumItalic"));
+
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-Regular"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-RegularItalic"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-SemiBold"));
@@ -57,8 +60,6 @@ namespace osu.Game
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-BoldItalic"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-Light"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-LightItalic"));
-            Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-Medium"));
-            Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-MediumItalic"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-Black"));
             Fonts.AddStore(new GlyphStore(Resources, @"Fonts/Exo2.0-BlackItalic"));
 

osu.Game/Overlays/MusicController.cs

@@ -171,7 +171,7 @@ namespace osu.Game.Overlays
                     Origin = Anchor.BottomCentre,
                     Anchor = Anchor.BottomCentre,
                     Height = 10,
-                    Colour = Color4.Orange,
+                    Colour = new Color4(255, 204, 34, 255),
                     SeekRequested = seek
                 }
             };

osu.Game/Overlays/Options/CheckBoxOption.cs

@@ -1,10 +1,19 @@
 using System;
+using osu.Framework;
 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 OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Input;
 
 namespace osu.Game.Overlays.Options
 {
-    public class CheckBoxOption : BasicCheckBox
+    public class CheckBoxOption : CheckBox
     {
         private Bindable<bool> bindable;
 
@@ -25,6 +34,50 @@ namespace osu.Game.Overlays.Options
             }
         }
 
+        public Color4 CheckedColor { get; set; } = Color4.Cyan;
+        public Color4 UncheckedColor { get; set; } = Color4.White;
+        public int FadeDuration { get; set; }
+
+        public string LabelText
+        {
+            get { return labelSpriteText?.Text; }
+            set
+            {
+                if (labelSpriteText != null)
+                    labelSpriteText.Text = value;
+            }
+        }
+
+        public MarginPadding LabelPadding
+        {
+            get { return labelSpriteText?.Padding ?? new MarginPadding(); }
+            set
+            {
+                if (labelSpriteText != null)
+                    labelSpriteText.Padding = value;
+            }
+        }
+
+        private Light light;
+        private SpriteText labelSpriteText;
+
+        public CheckBoxOption()
+        {
+            AutoSizeAxes = Axes.Y;
+            RelativeSizeAxes = Axes.X;
+
+            Children = new Drawable[]
+            {
+                labelSpriteText = new SpriteText(),
+                light = new Light()
+                {
+                    Anchor = Anchor.CentreRight,
+                    Origin = Anchor.CentreRight,
+                    Margin = new MarginPadding { Right = 5 },
+                }
+            };
+        }
+
         private void bindableValueChanged(object sender, EventArgs e)
         {
             State = bindable.Value ? CheckBoxState.Checked : CheckBoxState.Unchecked;
@@ -37,18 +90,114 @@ namespace osu.Game.Overlays.Options
             base.Dispose(isDisposing);
         }
 
+        protected override bool OnHover(InputState state)
+        {
+            light.TriggerHover(state);
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            light.TriggerHoverLost(state);
+            base.OnHoverLost(state);
+        }
+
         protected override void OnChecked()
         {
             if (bindable != null)
                 bindable.Value = true;
-            base.OnChecked();
+
+            light.State = CheckBoxState.Checked;
         }
 
         protected override void OnUnchecked()
         {
             if (bindable != null)
                 bindable.Value = false;
-            base.OnUnchecked();
+
+            light.State = CheckBoxState.Unchecked;
         }
+
+        private class Light : Container, IStateful<CheckBoxState>
+        {
+            private Box fill;
+
+            const float border_width = 3;
+
+            Color4 hoverColour = new Color4(255, 221, 238, 255);
+            Color4 defaultColour = new Color4(255, 102, 170, 255);
+            Color4 glowColour = new Color4(187, 17, 119, 0);
+
+            public Light()
+            {
+                Size = new Vector2(40, 12);
+
+                Masking = true;
+
+                Colour = defaultColour;
+
+                EdgeEffect = new EdgeEffect
+                {
+                    Colour = glowColour,
+                    Type = EdgeEffectType.Glow,
+                    Radius = 10,
+                    Roundness = 8,
+                };
+
+                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
+                    },
+                };
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                FadeColour(hoverColour, 500, EasingTypes.OutQuint);
+                FadeGlowTo(1, 500, EasingTypes.OutQuint);
+
+                return base.OnHover(state);
+            }
+
+            protected override void OnHoverLost(InputState state)
+            {
+                FadeGlowTo(0, 500);
+                FadeColour(defaultColour, 500);
+                base.OnHoverLost(state);
+            }
+
+            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/Overlays/Options/OptionsSection.cs

@@ -18,7 +18,9 @@ namespace osu.Game.Overlays.Options
 
         public OptionsSection()
         {
-            const int headerSize = 30, headerMargin = 25;
+            Margin = new MarginPadding { Top = 20 };
+
+            const int headerSize = 26, headerMargin = 25;
             const int borderSize = 2;
             AutoSizeAxes = Axes.Y;
             RelativeSizeAxes = Axes.X;
@@ -26,7 +28,7 @@ namespace osu.Game.Overlays.Options
             {
                 new Box
                 {
-                    Colour = new Color4(30, 30, 30, 255),
+                    Colour = new Color4(0, 0, 0, 255),
                     RelativeSizeAxes = Axes.X,
                     Height = borderSize,
                 },
@@ -34,7 +36,7 @@ namespace osu.Game.Overlays.Options
                 {
                     Padding = new MarginPadding
                     {
-                        Top = 10 + borderSize,
+                        Top = 20 + borderSize,
                         Left = OptionsOverlay.CONTENT_MARGINS,
                         Right = OptionsOverlay.CONTENT_MARGINS,
                         Bottom = 10,
@@ -53,7 +55,7 @@ namespace osu.Game.Overlays.Options
                         {
                             Margin = new MarginPadding { Top = headerSize + headerMargin },
                             Direction = FlowDirection.VerticalOnly,
-                            Spacing = new Vector2(0, 25),
+                            Spacing = new Vector2(0, 50),
                             AutoSizeAxes = Axes.Y,
                             RelativeSizeAxes = Axes.X,
                         },

osu.Game/Overlays/Options/OptionsSubsection.cs

@@ -28,9 +28,9 @@ namespace osu.Game.Overlays.Options
                     {
                         new SpriteText
                         {
-                            TextSize = 25,
+                            TextSize = 17,
-                            Text = Header,
+                            Text = Header.ToUpper(),
-                            // TODO: Bold
+                            Font = @"Exo2.0-Black",
                         }
                     }
                 },

osu.Game/Overlays/Options/SidebarButton.cs

@@ -85,7 +85,7 @@ namespace osu.Game.Overlays.Options
                         Width = 5,
                         Anchor = Anchor.CentreRight,
                         Origin = Anchor.CentreRight,
-                        Colour = new Color4(233, 103, 161, 255)
+                        Colour = new Color4(247, 198, 35, 255)
                     }
             };
         }

osu.Game/Overlays/OptionsOverlay.cs

@@ -90,7 +90,7 @@ namespace osu.Game.Overlays
                                 },
                                 new SpriteText
                                 {
-                                    Colour = new Color4(235, 117, 139, 255),
+                                    Colour = new Color4(255, 102, 170, 255),
                                     Text = "Change the way osu! behaves",
                                     TextSize = 18,
                                     Margin = new MarginPadding { Left = CONTENT_MARGINS, Bottom = 30 },