Update TabControl in User Overlay in line with the web version (#5057)

Update TabControl in User Overlay in line with the web version

Co-authored-by: Dean Herbert <pe@ppy.sh>

osu.Game/Overlays/OverlayHeaderTabControl.cs

@@ -1,153 +1,23 @@
 // 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.Graphics;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
-using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
-    public class OverlayHeaderTabControl : TabControl<string>
+    public class OverlayHeaderTabControl : OverlayTabControl<string>
     {
-        private readonly Box bar;
+        protected override TabItem<string> CreateTabItem(string value) => new OverlayHeaderTabItem(value)
-
-        private Color4 accentColour = Color4.White;
-
-        public Color4 AccentColour
         {
-            get => accentColour;
+            AccentColour = AccentColour,
-            set
-            {
-                if (accentColour == value)
-                    return;
-
-                accentColour = value;
-                bar.Colour = value;
-
-                foreach (TabItem<string> tabItem in TabContainer)
-                {
-                    ((HeaderTabItem)tabItem).AccentColour = value;
-                }
-            }
-        }
-
-        public new MarginPadding Padding
-        {
-            get => TabContainer.Padding;
-            set => TabContainer.Padding = value;
-        }
-
-        public OverlayHeaderTabControl()
-        {
-            TabContainer.Masking = false;
-            TabContainer.Spacing = new Vector2(15, 0);
-
-            AddInternal(bar = new Box
-            {
-                RelativeSizeAxes = Axes.X,
-                Height = 2,
-                Anchor = Anchor.BottomLeft,
-                Origin = Anchor.CentreLeft
-            });
-        }
-
-        protected override Dropdown<string> CreateDropdown() => null;
-
-        protected override TabItem<string> CreateTabItem(string value) => new HeaderTabItem(value)
-        {
-            AccentColour = AccentColour
         };
 
-        private class HeaderTabItem : TabItem<string>
+        private class OverlayHeaderTabItem : OverlayTabItem<string>
         {
-            private readonly OsuSpriteText text;
+            public OverlayHeaderTabItem(string value)
-            private readonly ExpandingBar bar;
-
-            private Color4 accentColour;
-
-            public Color4 AccentColour
-            {
-                get => accentColour;
-                set
-                {
-                    if (accentColour == value)
-                        return;
-
-                    accentColour = value;
-                    bar.Colour = value;
-
-                    updateState();
-                }
-            }
-
-            public HeaderTabItem(string value)
                 : base(value)
             {
-                AutoSizeAxes = Axes.X;
+                Text.Text = value;
-                RelativeSizeAxes = Axes.Y;
-
-                Children = new Drawable[]
-                {
-                    text = new OsuSpriteText
-                    {
-                        Margin = new MarginPadding { Bottom = 10 },
-                        Origin = Anchor.BottomLeft,
-                        Anchor = Anchor.BottomLeft,
-                        Text = value,
-                        Font = OsuFont.GetFont()
-                    },
-                    bar = new ExpandingBar
-                    {
-                        Anchor = Anchor.BottomCentre,
-                        ExpandedSize = 7.5f,
-                        CollapsedSize = 0
-                    },
-                    new HoverClickSounds()
-                };
-            }
-
-            protected override bool OnHover(HoverEvent e)
-            {
-                base.OnHover(e);
-
-                updateState();
-
-                return true;
-            }
-
-            protected override void OnHoverLost(HoverLostEvent e)
-            {
-                base.OnHoverLost(e);
-
-                updateState();
-            }
-
-            protected override void OnActivated() => updateState();
-
-            protected override void OnDeactivated() => updateState();
-
-            private void updateState()
-            {
-                if (Active.Value || IsHovered)
-                {
-                    text.FadeColour(Color4.White, 120, Easing.InQuad);
-                    bar.Expand();
-
-                    if (Active.Value)
-                        text.Font = text.Font.With(weight: FontWeight.Bold);
-                }
-                else
-                {
-                    text.FadeColour(AccentColour, 120, Easing.InQuad);
-                    bar.Collapse();
-                    text.Font = text.Font.With(weight: FontWeight.Medium);
-                }
             }
         }
     }

osu.Game/Overlays/OverlayTabControl.cs

@@ -0,0 +1,163 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays
+{
+    public abstract class OverlayTabControl<T> : TabControl<T>
+    {
+        private readonly Box bar;
+
+        private Color4 accentColour = Color4.White;
+
+        public Color4 AccentColour
+        {
+            get => accentColour;
+            set
+            {
+                if (accentColour == value)
+                    return;
+
+                accentColour = value;
+                bar.Colour = value;
+
+                foreach (TabItem<T> tabItem in TabContainer)
+                {
+                    ((OverlayTabItem<T>)tabItem).AccentColour = value;
+                }
+            }
+        }
+
+        public new MarginPadding Padding
+        {
+            get => TabContainer.Padding;
+            set => TabContainer.Padding = value;
+        }
+
+        protected OverlayTabControl()
+        {
+            TabContainer.Masking = false;
+            TabContainer.Spacing = new Vector2(15, 0);
+
+            AddInternal(bar = new Box
+            {
+                RelativeSizeAxes = Axes.X,
+                Height = 2,
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.CentreLeft
+            });
+        }
+
+        protected override Dropdown<T> CreateDropdown() => null;
+
+        protected override TabItem<T> CreateTabItem(T value) => new OverlayTabItem<T>(value);
+
+        protected class OverlayTabItem<U> : TabItem<U>
+        {
+            private readonly ExpandingBar bar;
+
+            protected readonly OsuSpriteText Text;
+
+            private Color4 accentColour;
+
+            public Color4 AccentColour
+            {
+                get => accentColour;
+                set
+                {
+                    if (accentColour == value)
+                        return;
+
+                    accentColour = value;
+                    bar.Colour = value;
+
+                    updateState();
+                }
+            }
+
+            public OverlayTabItem(U value)
+                : base(value)
+            {
+                AutoSizeAxes = Axes.X;
+                RelativeSizeAxes = Axes.Y;
+
+                Children = new Drawable[]
+                {
+                    Text = new OsuSpriteText
+                    {
+                        Margin = new MarginPadding { Bottom = 10 },
+                        Origin = Anchor.BottomLeft,
+                        Anchor = Anchor.BottomLeft,
+                        Font = OsuFont.GetFont(),
+                    },
+                    bar = new ExpandingBar
+                    {
+                        Anchor = Anchor.BottomCentre,
+                        ExpandedSize = 7.5f,
+                        CollapsedSize = 0
+                    },
+                    new HoverClickSounds()
+                };
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                base.OnHover(e);
+
+                if (!Active.Value)
+                    HoverAction();
+
+                return true;
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                base.OnHoverLost(e);
+
+                if (!Active.Value)
+                    UnhoverAction();
+            }
+
+            protected override void OnActivated()
+            {
+                HoverAction();
+                Text.Font = Text.Font.With(weight: FontWeight.Bold);
+            }
+
+            protected override void OnDeactivated()
+            {
+                UnhoverAction();
+                Text.Font = Text.Font.With(weight: FontWeight.Medium);
+            }
+
+            private void updateState()
+            {
+                if (Active.Value)
+                    OnActivated();
+                else
+                    OnDeactivated();
+            }
+
+            protected virtual void HoverAction()
+            {
+                bar.Expand();
+                Text.FadeColour(Color4.White, 120, Easing.InQuad);
+            }
+
+            protected virtual void UnhoverAction()
+            {
+                bar.Collapse();
+                Text.FadeColour(AccentColour, 120, Easing.InQuad);
+            }
+        }
+    }
+}

osu.Game/Overlays/UserProfileOverlay.cs

@@ -9,7 +9,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API.Requests;
 using osu.Game.Overlays.Profile;
 using osu.Game.Overlays.Profile.Sections;
@@ -141,31 +140,28 @@ namespace osu.Game.Overlays
             }
         }
 
-        private class ProfileTabControl : PageTabControl<ProfileSection>
+        private class ProfileTabControl : OverlayTabControl<ProfileSection>
         {
-            private readonly Box bottom;
-
             public ProfileTabControl()
             {
                 TabContainer.RelativeSizeAxes &= ~Axes.X;
                 TabContainer.AutoSizeAxes |= Axes.X;
                 TabContainer.Anchor |= Anchor.x1;
                 TabContainer.Origin |= Anchor.x1;
-                AddInternal(bottom = new Box
-                {
-                    RelativeSizeAxes = Axes.X,
-                    Height = 1,
-                    Anchor = Anchor.BottomCentre,
-                    Origin = Anchor.BottomCentre,
-                    EdgeSmoothness = new Vector2(1)
-                });
             }
 
-            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileTabItem(value);
+            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileTabItem(value)
+            {
+                AccentColour = AccentColour
+            };
 
-            protected override Dropdown<ProfileSection> CreateDropdown() => null;
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                AccentColour = colours.Seafoam;
+            }
 
-            private class ProfileTabItem : PageTabItem
+            private class ProfileTabItem : OverlayTabItem<ProfileSection>
             {
                 public ProfileTabItem(ProfileSection value)
                     : base(value)
@@ -173,12 +169,6 @@ namespace osu.Game.Overlays
                     Text.Text = value.Title;
                 }
             }
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                bottom.Colour = colours.Yellow;
-            }
         }
 
         private class ProfileSectionsContainer : SectionsContainer<ProfileSection>