Share sidebar colouring logic by splitting out SidebarIconButton

osu.Game/Overlays/Settings/Sidebar.cs

@@ -16,16 +16,16 @@ using osuTK;
 
 namespace osu.Game.Overlays.Settings
 {
-    public class Sidebar : Container<SidebarButton>, IStateful<ExpandedState>
+    public class Sidebar : Container<SidebarIconButton>, IStateful<ExpandedState>
     {
         private readonly Box background;
-        private readonly FillFlowContainer<SidebarButton> content;
+        private readonly FillFlowContainer<SidebarIconButton> content;
         public const float DEFAULT_WIDTH = 70;
         public const int EXPANDED_WIDTH = 200;
 
         public event Action<ExpandedState> StateChanged;
 
-        protected override Container<SidebarButton> Content => content;
+        protected override Container<SidebarIconButton> Content => content;
 
         public Sidebar()
         {
@@ -41,7 +41,7 @@ namespace osu.Game.Overlays.Settings
                 {
                     Children = new[]
                     {
-                        content = new FillFlowContainer<SidebarButton>
+                        content = new FillFlowContainer<SidebarIconButton>
                         {
                             Origin = Anchor.CentreLeft,
                             Anchor = Anchor.CentreLeft,

osu.Game/Overlays/Settings/SidebarButton.cs

@@ -1,144 +1,46 @@
-// 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 osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
-using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Overlays.Settings
 {
-    public class SidebarButton : OsuButton
+    public abstract class SidebarButton : OsuButton
     {
         private const double fade_duration = 50;
 
-        private readonly ConstrainedIconContainer iconContainer;
-        private readonly SpriteText headerText;
-        private readonly CircularContainer selectionIndicator;
-        private readonly Container text;
-
         [Resolved]
-        private OverlayColourProvider colourProvider { get; set; }
+        protected OverlayColourProvider ColourProvider { get; private set; }
 
-        // always consider as part of flow, even when not visible (for the sake of the initial animation).
+        protected abstract Drawable HoverTarget { get; }
-        public override bool IsPresent => true;
-
-        private SettingsSection section;
-
-        public SettingsSection Section
-        {
-            get => section;
-            set
-            {
-                section = value;
-                headerText.Text = value.Header;
-                iconContainer.Icon = value.CreateIcon();
-            }
-        }
-
-        private bool selected;
-
-        public bool Selected
-        {
-            get => selected;
-            set
-            {
-                selected = value;
-
-                if (IsLoaded)
-                    updateState();
-            }
-        }
-
-        public SidebarButton()
-        {
-            RelativeSizeAxes = Axes.X;
-            Height = 46;
-
-            AddRange(new Drawable[]
-            {
-                text = new Container
-                {
-                    Width = Sidebar.DEFAULT_WIDTH,
-                    RelativeSizeAxes = Axes.Y,
-                    Colour = OsuColour.Gray(0.6f),
-                    Children = new Drawable[]
-                    {
-                        headerText = new OsuSpriteText
-                        {
-                            Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreLeft,
-                        },
-                        iconContainer = new ConstrainedIconContainer
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Size = new Vector2(20),
-                        },
-                    }
-                },
-                selectionIndicator = new CircularContainer
-                {
-                    Alpha = 0,
-                    Width = 3,
-                    Height = 18,
-                    Masking = true,
-                    CornerRadius = 1.5f,
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Margin = new MarginPadding
-                    {
-                        Left = 9,
-                    },
-                    Child = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = Colour4.White
-                    }
-                },
-            });
-        }
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            BackgroundColour = colourProvider.Background5;
+            BackgroundColour = ColourProvider.Background5;
-            selectionIndicator.Colour = colourProvider.Highlight1;
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
-            updateState();
+            UpdateState();
+            FinishTransforms(true);
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            updateState();
+            UpdateState();
             return false;
         }
 
-        protected override void OnHoverLost(HoverLostEvent e) => updateState();
+        protected override void OnHoverLost(HoverLostEvent e) => UpdateState();
 
-        private void updateState()
+        protected virtual void UpdateState()
         {
-            if (Selected)
+            HoverTarget.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, fade_duration, Easing.OutQuint);
-            {
-                text.FadeColour(colourProvider.Content1, fade_duration, Easing.OutQuint);
-                selectionIndicator.FadeIn(fade_duration, Easing.OutQuint);
-                return;
-            }
-
-            text.FadeColour(IsHovered ? colourProvider.Light1 : colourProvider.Light3, fade_duration, Easing.OutQuint);
-            selectionIndicator.FadeOut(fade_duration, Easing.OutQuint);
         }
     }
 }

osu.Game/Overlays/Settings/SidebarIconButton.cs

@@ -0,0 +1,126 @@
+// 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 osuTK;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Overlays.Settings
+{
+    public class SidebarIconButton : SidebarButton
+    {
+        private const double fade_duration = 50;
+
+        private readonly ConstrainedIconContainer iconContainer;
+        private readonly SpriteText headerText;
+        private readonly CircularContainer selectionIndicator;
+        private readonly Container text;
+
+        protected override Drawable HoverTarget => text;
+
+        // always consider as part of flow, even when not visible (for the sake of the initial animation).
+        public override bool IsPresent => true;
+
+        private SettingsSection section;
+
+        public SettingsSection Section
+        {
+            get => section;
+            set
+            {
+                section = value;
+                headerText.Text = value.Header;
+                iconContainer.Icon = value.CreateIcon();
+            }
+        }
+
+        private bool selected;
+
+        public bool Selected
+        {
+            get => selected;
+            set
+            {
+                selected = value;
+
+                if (IsLoaded)
+                    UpdateState();
+            }
+        }
+
+        public SidebarIconButton()
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = 46;
+
+            AddRange(new Drawable[]
+            {
+                text = new Container
+                {
+                    Width = Sidebar.DEFAULT_WIDTH,
+                    RelativeSizeAxes = Axes.Y,
+                    Colour = OsuColour.Gray(0.6f),
+                    Children = new Drawable[]
+                    {
+                        headerText = new OsuSpriteText
+                        {
+                            Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                        },
+                        iconContainer = new ConstrainedIconContainer
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(20),
+                        },
+                    }
+                },
+                selectionIndicator = new CircularContainer
+                {
+                    Alpha = 0,
+                    Width = 3,
+                    Height = 18,
+                    Masking = true,
+                    CornerRadius = 1.5f,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Margin = new MarginPadding
+                    {
+                        Left = 9,
+                    },
+                    Child = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Colour4.White
+                    }
+                },
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            selectionIndicator.Colour = ColourProvider.Highlight1;
+        }
+
+        protected override void UpdateState()
+        {
+            if (Selected)
+            {
+                text.FadeColour(ColourProvider.Content1, fade_duration, Easing.OutQuint);
+                selectionIndicator.FadeIn(fade_duration, Easing.OutQuint);
+                return;
+            }
+
+            selectionIndicator.FadeOut(fade_duration, Easing.OutQuint);
+            base.UpdateState();
+        }
+    }
+}

osu.Game/Overlays/SettingsPanel.cs

@@ -44,7 +44,7 @@ namespace osu.Game.Overlays
         protected override Container<Drawable> Content => ContentContainer;
 
         protected Sidebar Sidebar;
-        private SidebarButton selectedSidebarButton;
+        private SidebarIconButton selectedSidebarButton;
 
         public SettingsSectionsContainer SectionsContainer { get; private set; }
 
@@ -252,11 +252,11 @@ namespace osu.Game.Overlays
             });
         }
 
-        private IEnumerable<SidebarButton> createSidebarButtons()
+        private IEnumerable<SidebarIconButton> createSidebarButtons()
         {
             foreach (var section in SectionsContainer)
             {
-                yield return new SidebarButton
+                yield return new SidebarIconButton
                 {
                     Section = section,
                     Action = () =>

osu.Game/Overlays/SettingsSubPanel.cs

@@ -7,7 +7,6 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Settings;
 using osuTK;
 
@@ -33,22 +32,20 @@ namespace osu.Game.Overlays
 
         protected override bool DimMainContent => false; // dimming is handled by main overlay
 
-        private class BackButton : OsuButton
+        private class BackButton : SidebarButton
         {
-            [Resolved]
+            private Container content;
-            private OverlayColourProvider colourProvider { get; set; }
+
+            protected override Drawable HoverTarget => content;
 
             [BackgroundDependencyLoader]
             private void load()
             {
                 Size = new Vector2(Sidebar.DEFAULT_WIDTH);
 
-                BackgroundColour = colourProvider.Background5;
-                Hover.Colour = Colour4.Transparent;
-
                 AddRange(new Drawable[]
                 {
-                    new Container
+                    content = new Container
                     {
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,