Merge branch 'master' into autopilot

osu.Game.Tests/Visual/Online/TestSceneRankGraph.cs

@@ -31,6 +31,7 @@ namespace osu.Game.Tests.Visual.Online
             var data = new int[89];
             var dataWithZeros = new int[89];
             var smallData = new int[89];
+            var edgyData = new int[89];
 
             for (int i = 0; i < 89; i++)
                 data[i] = dataWithZeros[i] = (i + 1) * 1000;
@@ -41,6 +42,14 @@ namespace osu.Game.Tests.Visual.Online
             for (int i = 79; i < 89; i++)
                 smallData[i] = 100000 - i * 1000;
 
+            bool edge = true;
+
+            for (int i = 0; i < 20; i++)
+            {
+                edgyData[i] = 100000 + (edge ? 1000 : -1000) * (i + 1);
+                edge = !edge;
+            }
+
             Add(new Container
             {
                 Anchor = Anchor.Centre,
@@ -120,6 +129,22 @@ namespace osu.Game.Tests.Visual.Online
                     }
                 };
             });
+
+            AddStep("graph with edges", () =>
+            {
+                graph.User.Value = new User
+                {
+                    Statistics = new UserStatistics
+                    {
+                        Ranks = new UserStatistics.UserRanks { Global = 12000 },
+                        PP = 12345,
+                    },
+                    RankHistory = new User.RankHistoryData
+                    {
+                        Data = edgyData,
+                    }
+                };
+            });
         }
     }
 }

osu.Game/Beatmaps/Drawables/UpdateableBeatmapBackgroundSprite.cs

@@ -32,6 +32,7 @@ namespace osu.Game.Beatmaps.Drawables
         protected virtual double UnloadDelay => 10000;
 
         private BeatmapInfo lastModel;
+        private bool firstLoad = true;
 
         protected override DelayedLoadWrapper CreateDelayedLoadWrapper(Drawable content, double timeBeforeLoad)
         {
@@ -39,11 +40,12 @@ namespace osu.Game.Beatmaps.Drawables
             {
                 // If DelayedLoadUnloadWrapper is attempting to RELOAD the same content (Beatmap), that means that it was
                 // previously UNLOADED and thus its children have been disposed of, so we need to recreate them here.
-                if (lastModel == Beatmap.Value)
+                if (!firstLoad && lastModel == Beatmap.Value)
                     return CreateDrawable(Beatmap.Value);
 
                 // If the model has changed since the previous unload (or if there was no load), then we can safely use the given content
                 lastModel = Beatmap.Value;
+                firstLoad = false;
                 return content;
             }, timeBeforeLoad, UnloadDelay);
         }

osu.Game/Configuration/DatabasedConfigManager.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System.Collections.Generic;
+using System.Linq;
 using osu.Framework.Bindables;
 using osu.Framework.Configuration;
 using osu.Game.Rulesets;
@@ -19,6 +20,8 @@ namespace osu.Game.Configuration
 
         private readonly RulesetInfo ruleset;
 
+        private readonly bool legacySettingsExist;
+
         protected DatabasedConfigManager(SettingsStore settings, RulesetInfo ruleset = null, int? variant = null)
         {
             this.settings = settings;
@@ -26,6 +29,7 @@ namespace osu.Game.Configuration
             this.variant = variant;
 
             databasedSettings = settings.Query(ruleset?.ID, variant);
+            legacySettingsExist = databasedSettings.Any(s => int.TryParse(s.Key, out var _));
 
             InitialiseDefaults();
         }
@@ -43,7 +47,18 @@ namespace osu.Game.Configuration
         {
             base.AddBindable(lookup, bindable);
 
-            var setting = databasedSettings.Find(s => (int)s.Key == (int)(object)lookup);
+            if (legacySettingsExist)
+            {
+                var legacySetting = databasedSettings.Find(s => s.Key == ((int)(object)lookup).ToString());
+
+                if (legacySetting != null)
+                {
+                    bindable.Parse(legacySetting.Value);
+                    settings.Delete(legacySetting);
+                }
+            }
+
+            var setting = databasedSettings.Find(s => s.Key == lookup.ToString());
 
             if (setting != null)
             {
@@ -53,7 +68,7 @@ namespace osu.Game.Configuration
             {
                 settings.Update(setting = new DatabasedSetting
                 {
-                    Key = lookup,
+                    Key = lookup.ToString(),
                     Value = bindable.Value,
                     RulesetID = ruleset?.ID,
                     Variant = variant,

osu.Game/Configuration/DatabasedSetting.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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.ComponentModel.DataAnnotations.Schema;
@@ -16,11 +16,7 @@ namespace osu.Game.Configuration
         public int? Variant { get; set; }
 
         [Column("Key")]
-        public int IntKey
+        public string Key { get; set; }
-        {
-            get => (int)Key;
-            private set => Key = value;
-        }
 
         [Column("Value")]
         public string StringValue
@@ -29,10 +25,9 @@ namespace osu.Game.Configuration
             set => Value = value;
         }
 
-        public object Key;
         public object Value;
 
-        public DatabasedSetting(object key, object value)
+        public DatabasedSetting(string key, object value)
         {
             Key = key;
             Value = value;

osu.Game/Configuration/SettingsStore.cs

@@ -37,5 +37,11 @@ namespace osu.Game.Configuration
 
             SettingChanged?.Invoke();
         }
+
+        public void Delete(DatabasedSetting setting)
+        {
+            using (var usage = ContextFactory.GetForWrite())
+                usage.Context.Remove(setting);
+        }
     }
 }

osu.Game/Graphics/UserInterface/OsuCheckbox.cs

@@ -78,7 +78,7 @@ namespace osu.Game.Graphics.UserInterface
 
             Current.DisabledChanged += disabled =>
             {
-                Alpha = disabled ? 0.3f : 1;
+                labelSpriteText.Alpha = Nub.Alpha = disabled ? 0.3f : 1;
             };
         }
 

osu.Game/Migrations/20180125143340_Settings.cs

@@ -16,7 +16,7 @@ namespace osu.Game.Migrations
                 {
                     ID = table.Column<int>(type: "INTEGER", nullable: false)
                         .Annotation("Sqlite:Autoincrement", true),
-                    Key = table.Column<int>(type: "INTEGER", nullable: false),
+                    Key = table.Column<int>(type: "TEXT", nullable: false),
                     RulesetID = table.Column<int>(type: "INTEGER", nullable: true),
                     Value = table.Column<string>(type: "TEXT", nullable: true),
                     Variant = table.Column<int>(type: "INTEGER", nullable: true)

osu.Game/Migrations/OsuDbContextModelSnapshot.cs

@@ -14,7 +14,7 @@ namespace osu.Game.Migrations
         {
 #pragma warning disable 612, 618
             modelBuilder
-                .HasAnnotation("ProductVersion", "2.2.1-servicing-10028");
+                .HasAnnotation("ProductVersion", "2.2.4-servicing-10062");
 
             modelBuilder.Entity("osu.Game.Beatmaps.BeatmapDifficulty", b =>
                 {
@@ -198,7 +198,7 @@ namespace osu.Game.Migrations
                     b.Property<int>("ID")
                         .ValueGeneratedOnAdd();
 
-                    b.Property<int>("IntKey")
+                    b.Property<string>("Key")
                         .HasColumnName("Key");
 
                     b.Property<int?>("RulesetID");

osu.Game/Overlays/KeyBindingPanel.cs

@@ -3,22 +3,14 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Sprites;
-using osu.Framework.Input.Bindings;
-using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.Sprites;
 using osu.Game.Input.Bindings;
 using osu.Game.Overlays.KeyBinding;
 using osu.Game.Overlays.Settings;
 using osu.Game.Rulesets;
-using osu.Game.Screens.Ranking;
-using osuTK;
 
 namespace osu.Game.Overlays
 {
-    public class KeyBindingPanel : SettingsPanel
+    public class KeyBindingPanel : SettingsSubPanel
     {
         protected override Drawable CreateHeader() => new SettingsHeader("key configuration", "Customise your keys!");
 
@@ -29,84 +21,6 @@ namespace osu.Game.Overlays
 
             foreach (var ruleset in rulesets.AvailableRulesets)
                 AddSection(new RulesetBindingsSection(ruleset));
-
-            AddInternal(new BackButton
-            {
-                Anchor = Anchor.BottomLeft,
-                Origin = Anchor.BottomLeft,
-                Action = Hide
-            });
-        }
-
-        public KeyBindingPanel()
-            : base(true)
-        {
-        }
-
-        private class BackButton : OsuClickableContainer, IKeyBindingHandler<GlobalAction>
-        {
-            private AspectContainer aspect;
-
-            [BackgroundDependencyLoader]
-            private void load()
-            {
-                Size = new Vector2(Sidebar.DEFAULT_WIDTH);
-                Children = new Drawable[]
-                {
-                    aspect = new AspectContainer
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        RelativeSizeAxes = Axes.Y,
-                        Children = new Drawable[]
-                        {
-                            new SpriteIcon
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Y = -15,
-                                Size = new Vector2(15),
-                                Shadow = true,
-                                Icon = FontAwesome.Solid.ChevronLeft
-                            },
-                            new OsuSpriteText
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Y = 15,
-                                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
-                                Text = @"back",
-                            },
-                        }
-                    }
-                };
-            }
-
-            protected override bool OnMouseDown(MouseDownEvent e)
-            {
-                aspect.ScaleTo(0.75f, 2000, Easing.OutQuint);
-                return base.OnMouseDown(e);
-            }
-
-            protected override bool OnMouseUp(MouseUpEvent e)
-            {
-                aspect.ScaleTo(1, 1000, Easing.OutElastic);
-                return base.OnMouseUp(e);
-            }
-
-            public bool OnPressed(GlobalAction action)
-            {
-                switch (action)
-                {
-                    case GlobalAction.Back:
-                        Click();
-                        return true;
-                }
-
-                return false;
-            }
-
-            public bool OnReleased(GlobalAction action) => false;
         }
     }
 }

osu.Game/Overlays/Profile/Header/Components/RankGraph.cs

@@ -96,7 +96,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
             if (ranks?.Length > 1)
             {
                 graph.UpdateBallPosition(e.MousePosition.X);
-                graph.ShowBall();
+                graph.ShowBar();
             }
 
             return base.OnHover(e);
@@ -114,7 +114,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
         {
             if (ranks?.Length > 1)
             {
-                graph.HideBall();
+                graph.HideBar();
             }
 
             base.OnHoverLost(e);
@@ -123,31 +123,41 @@ namespace osu.Game.Overlays.Profile.Header.Components
         private class RankChartLineGraph : LineGraph
         {
             private readonly CircularContainer movingBall;
+            private readonly Container bar;
             private readonly Box ballBg;
-            private readonly Box movingBar;
+            private readonly Box line;
 
             public Action<int> OnBallMove;
 
             public RankChartLineGraph()
             {
-                Add(movingBar = new Box
+                Add(bar = new Container
                 {
                     Origin = Anchor.TopCentre,
                     RelativeSizeAxes = Axes.Y,
-                    Width = 1.5f,
+                    AutoSizeAxes = Axes.X,
                     Alpha = 0,
                     RelativePositionAxes = Axes.Both,
-                });
+                    Children = new Drawable[]
-
+                    {
-                Add(movingBall = new CircularContainer
+                        line = new Box
-                {
+                        {
-                    Origin = Anchor.Centre,
+                            Anchor = Anchor.Centre,
-                    Size = new Vector2(18),
+                            Origin = Anchor.Centre,
-                    Alpha = 0,
+                            RelativeSizeAxes = Axes.Y,
-                    Masking = true,
+                            Width = 1.5f,
-                    BorderThickness = 4,
+                        },
-                    RelativePositionAxes = Axes.Both,
+                        movingBall = new CircularContainer
-                    Child = ballBg = new Box { RelativeSizeAxes = Axes.Both }
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(18),
+                            Masking = true,
+                            BorderThickness = 4,
+                            RelativePositionAxes = Axes.Y,
+                            Child = ballBg = new Box { RelativeSizeAxes = Axes.Both }
+                        }
+                    }
                 });
             }
 
@@ -155,29 +165,22 @@ namespace osu.Game.Overlays.Profile.Header.Components
             private void load(OsuColour colours)
             {
                 ballBg.Colour = colours.GreySeafoamDarker;
-                movingBall.BorderColour = colours.Yellow;
+                movingBall.BorderColour = line.Colour = colours.Yellow;
-                movingBar.Colour = colours.Yellow;
             }
 
             public void UpdateBallPosition(float mouseXPosition)
             {
+                const int duration = 200;
                 int index = calculateIndex(mouseXPosition);
-                movingBall.Position = calculateBallPosition(index);
+                Vector2 position = calculateBallPosition(index);
-                movingBar.X = movingBall.X;
+                movingBall.MoveToY(position.Y, duration, Easing.OutQuint);
+                bar.MoveToX(position.X, duration, Easing.OutQuint);
                 OnBallMove.Invoke(index);
             }
 
-            public void ShowBall()
+            public void ShowBar() => bar.FadeIn(fade_duration);
-            {
-                movingBall.FadeIn(fade_duration);
-                movingBar.FadeIn(fade_duration);
-            }
 
-            public void HideBall()
+            public void HideBar() => bar.FadeOut(fade_duration);
-            {
-                movingBall.FadeOut(fade_duration);
-                movingBar.FadeOut(fade_duration);
-            }
 
             private int calculateIndex(float mouseXPosition) => (int)Math.Round(mouseXPosition / DrawWidth * (DefaultValueCount - 1));
 

osu.Game/Overlays/Profile/Sections/Kudosu/KudosuInfo.cs

@@ -3,17 +3,15 @@
 
 using osu.Framework.Bindables;
 using osuTK;
-using osuTK.Graphics;
-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.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Users;
+using osu.Framework.Allocation;
 
 namespace osu.Game.Overlays.Profile.Sections.Kudosu
 {
@@ -24,46 +22,27 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
         public KudosuInfo(Bindable<User> user)
         {
             this.user.BindTo(user);
-
             CountSection total;
             CountSection avaliable;
-
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
             Masking = true;
             CornerRadius = 3;
-            EdgeEffect = new EdgeEffectParameters
-            {
-                Type = EdgeEffectType.Shadow,
-                Offset = new Vector2(0f, 1f),
-                Radius = 3f,
-                Colour = Color4.Black.Opacity(0.2f),
-            };
             Children = new Drawable[]
             {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(0.2f)
-                },
                 new FillFlowContainer
                 {
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Horizontal,
+                    Spacing = new Vector2(5, 0),
                     Children = new[]
                     {
-                        total = new CountSection(
+                        total = new CountTotal(),
-                            "Total Kudosu Earned",
+                        avaliable = new CountAvailable()
-                            "Based on how much of a contribution the user has made to beatmap moderation. See this link for more information."
-                        ),
-                        avaliable = new CountSection(
-                            "Kudosu Avaliable",
-                            "Kudosu can be traded for kudosu stars, which will help your beatmap get more attention. This is the number of kudosu you haven't traded in yet."
-                        ),
                     }
                 }
             };
-
             this.user.ValueChanged += u =>
             {
                 total.Count = u.NewValue?.Kudosu.Total ?? 0;
@@ -73,21 +52,43 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
 
         protected override bool OnClick(ClickEvent e) => true;
 
+        private class CountAvailable : CountSection
+        {
+            public CountAvailable()
+                : base("Kudosu Avaliable")
+            {
+                DescriptionText.Text = "Kudosu can be traded for kudosu stars, which will help your beatmap get more attention. This is the number of kudosu you haven't traded in yet.";
+            }
+        }
+
+        private class CountTotal : CountSection
+        {
+            public CountTotal()
+                : base("Total Kudosu Earned")
+            {
+                DescriptionText.AddText("Based on how much of a contribution the user has made to beatmap moderation. See ");
+                DescriptionText.AddLink("this link", "https://osu.ppy.sh/wiki/Kudosu");
+                DescriptionText.AddText(" for more information.");
+            }
+        }
+
         private class CountSection : Container
         {
             private readonly OsuSpriteText valueText;
+            protected readonly LinkFlowContainer DescriptionText;
+            private readonly Box lineBackground;
 
             public new int Count
             {
                 set => valueText.Text = value.ToString();
             }
 
-            public CountSection(string header, string description)
+            public CountSection(string header)
             {
                 RelativeSizeAxes = Axes.X;
                 Width = 0.5f;
                 AutoSizeAxes = Axes.Y;
-                Padding = new MarginPadding { Horizontal = 10, Top = 10, Bottom = 20 };
+                Padding = new MarginPadding { Top = 10, Bottom = 20 };
                 Child = new FillFlowContainer
                 {
                     AutoSizeAxes = Axes.Y,
@@ -96,39 +97,42 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
                     Spacing = new Vector2(0, 5),
                     Children = new Drawable[]
                     {
-                        new FillFlowContainer
+                        new CircularContainer
                         {
-                            AutoSizeAxes = Axes.Both,
+                            Masking = true,
-                            Direction = FillDirection.Horizontal,
+                            RelativeSizeAxes = Axes.X,
-                            Spacing = new Vector2(5, 0),
+                            Height = 5,
-                            Children = new Drawable[]
+                            Child = lineBackground = new Box
                             {
-                                new OsuSpriteText
+                                RelativeSizeAxes = Axes.Both,
-                                {
-                                    Anchor = Anchor.BottomLeft,
-                                    Origin = Anchor.BottomLeft,
-                                    Text = header + ":",
-                                    Font = OsuFont.GetFont(size: 20, weight: FontWeight.Regular, italics: true)
-                                },
-                                valueText = new OsuSpriteText
-                                {
-                                    Anchor = Anchor.BottomLeft,
-                                    Origin = Anchor.BottomLeft,
-                                    Text = "0",
-                                    Font = OsuFont.GetFont(size: 40, weight: FontWeight.Regular, italics: true),
-                                    UseFullGlyphHeight = false,
-                                }
                             }
                         },
-                        new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 19))
+                        new OsuSpriteText
+                        {
+                            Text = header,
+                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold)
+                        },
+                        valueText = new OsuSpriteText
+                        {
+                            Text = "0",
+                            Font = OsuFont.GetFont(size: 40, weight: FontWeight.Light),
+                            UseFullGlyphHeight = false,
+                        },
+                        DescriptionText = new LinkFlowContainer(t => t.Font = t.Font.With(size: 14))
                         {
                             RelativeSizeAxes = Axes.X,
                             AutoSizeAxes = Axes.Y,
-                            Text = description
                         }
                     }
                 };
             }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                lineBackground.Colour = colours.Yellow;
+                DescriptionText.Colour = colours.GreySeafoamLighter;
+            }
         }
     }
 }

osu.Game/Overlays/SettingsOverlay.cs

@@ -8,13 +8,12 @@ using osu.Game.Overlays.Settings;
 using osu.Game.Overlays.Settings.Sections;
 using osuTK.Graphics;
 using System.Collections.Generic;
+using System.Linq;
 
 namespace osu.Game.Overlays
 {
     public class SettingsOverlay : SettingsPanel
     {
-        private readonly KeyBindingPanel keyBindingPanel;
-
         protected override IEnumerable<SettingsSection> CreateSections() => new SettingsSection[]
         {
             new GeneralSection(),
@@ -22,29 +21,37 @@ namespace osu.Game.Overlays
             new GameplaySection(),
             new AudioSection(),
             new SkinSection(),
-            new InputSection(keyBindingPanel),
+            new InputSection(createSubPanel(new KeyBindingPanel())),
             new OnlineSection(),
             new MaintenanceSection(),
             new DebugSection(),
         };
 
+        private readonly List<SettingsSubPanel> subPanels = new List<SettingsSubPanel>();
+
         protected override Drawable CreateHeader() => new SettingsHeader("settings", "Change the way osu! behaves");
         protected override Drawable CreateFooter() => new SettingsFooter();
 
         public SettingsOverlay()
             : base(true)
         {
-            keyBindingPanel = new KeyBindingPanel
-            {
-                Depth = 1,
-                Anchor = Anchor.TopRight,
-            };
-            keyBindingPanel.StateChanged += keyBindingPanelStateChanged;
         }
 
-        public override bool AcceptsFocus => keyBindingPanel.State != Visibility.Visible;
+        public override bool AcceptsFocus => subPanels.All(s => s.State != Visibility.Visible);
 
-        private void keyBindingPanelStateChanged(Visibility visibility)
+        private T createSubPanel<T>(T subPanel)
+            where T : SettingsSubPanel
+        {
+            subPanel.Depth = 1;
+            subPanel.Anchor = Anchor.TopRight;
+            subPanel.StateChanged += subPanelStateChanged;
+
+            subPanels.Add(subPanel);
+
+            return subPanel;
+        }
+
+        private void subPanelStateChanged(Visibility visibility)
         {
             switch (visibility)
             {
@@ -66,12 +73,13 @@ namespace osu.Game.Overlays
             }
         }
 
-        protected override float ExpandedPosition => keyBindingPanel.State == Visibility.Visible ? -WIDTH : base.ExpandedPosition;
+        protected override float ExpandedPosition => subPanels.Any(s => s.State == Visibility.Visible) ? -WIDTH : base.ExpandedPosition;
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            ContentContainer.Add(keyBindingPanel);
+            foreach (var s in subPanels)
+                ContentContainer.Add(s);
         }
     }
 }

osu.Game/Overlays/SettingsPanel.cs

@@ -28,8 +28,6 @@ namespace osu.Game.Overlays
 
         protected const float WIDTH = 400;
 
-        private const float sidebar_padding = 10;
-
         protected Container<Drawable> ContentContainer;
 
         protected override Container<Drawable> Content => ContentContainer;

osu.Game/Overlays/SettingsSubPanel.cs

@@ -0,0 +1,103 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Bindings;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Input.Bindings;
+using osu.Game.Overlays.Settings;
+using osu.Game.Screens.Ranking;
+using osuTK;
+
+namespace osu.Game.Overlays
+{
+    public abstract class SettingsSubPanel : SettingsPanel
+    {
+        protected SettingsSubPanel()
+            : base(true)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            AddInternal(new BackButton
+            {
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.BottomLeft,
+                Action = Hide
+            });
+        }
+
+        private class BackButton : OsuClickableContainer, IKeyBindingHandler<GlobalAction>
+        {
+            private AspectContainer aspect;
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                Size = new Vector2(Sidebar.DEFAULT_WIDTH);
+                Children = new Drawable[]
+                {
+                    aspect = new AspectContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Y,
+                        Children = new Drawable[]
+                        {
+                            new SpriteIcon
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Y = -15,
+                                Size = new Vector2(15),
+                                Shadow = true,
+                                Icon = FontAwesome.Solid.ChevronLeft
+                            },
+                            new OsuSpriteText
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Y = 15,
+                                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                                Text = @"back",
+                            },
+                        }
+                    }
+                };
+            }
+
+            protected override bool OnMouseDown(MouseDownEvent e)
+            {
+                aspect.ScaleTo(0.75f, 2000, Easing.OutQuint);
+                return base.OnMouseDown(e);
+            }
+
+            protected override bool OnMouseUp(MouseUpEvent e)
+            {
+                aspect.ScaleTo(1, 1000, Easing.OutElastic);
+                return base.OnMouseUp(e);
+            }
+
+            public bool OnPressed(GlobalAction action)
+            {
+                switch (action)
+                {
+                    case GlobalAction.Back:
+                        Click();
+                        return true;
+                }
+
+                return false;
+            }
+
+            public bool OnReleased(GlobalAction action) => false;
+        }
+    }
+}