Add ExpandingBar UI element

osu.Game.Tests/Visual/UserInterface/TestSceneExpandingBar.cs

@@ -0,0 +1,50 @@
+// 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.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics.UserInterface;
+using osuTK.Graphics;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneExpandingBar : OsuTestScene
+    {
+        public TestSceneExpandingBar()
+        {
+            Container container;
+            ExpandingBar expandingBar;
+
+            Add(container = new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        Colour = Color4.Gray,
+                        Alpha = 0.5f,
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    expandingBar = new ExpandingBar
+                    {
+                        Anchor = Anchor.Centre,
+                        ExpandedSize = 10,
+                        CollapsedSize = 2,
+                        Colour = Color4.DeepSkyBlue,
+                    }
+                }
+            });
+
+            AddStep(@"Collapse", () => expandingBar.Collapse());
+            AddStep(@"Uncollapse", () => expandingBar.Expand());
+            AddSliderStep(@"Resize container", 1, 300, 150, value => container.ResizeTo(value));
+            AddStep(@"Horizontal", () => expandingBar.RelativeSizeAxes = Axes.X);
+            AddStep(@"Anchor top", () => expandingBar.Anchor = Anchor.TopCentre);
+            AddStep(@"Vertical", () => expandingBar.RelativeSizeAxes = Axes.Y);
+            AddStep(@"Anchor left", () => expandingBar.Anchor = Anchor.CentreLeft);
+        }
+    }
+}

osu.Game/Graphics/UserInterface/ExpandingBar.cs

@@ -0,0 +1,101 @@
+// 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 osuTK;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    /// <summary>
+    /// A rounded bar which can be expanded or collapsed.
+    /// Generally used for tabs or breadcrumbs.
+    /// </summary>
+    public class ExpandingBar : Circle
+    {
+        private bool isCollapsed;
+
+        public bool IsCollapsed
+        {
+            get => isCollapsed;
+            set
+            {
+                if (value == isCollapsed)
+                    return;
+
+                isCollapsed = value;
+                updateState();
+            }
+        }
+
+        private float expandedSize = 4;
+
+        public float ExpandedSize
+        {
+            get => expandedSize;
+            set
+            {
+                if (value == expandedSize)
+                    return;
+
+                expandedSize = value;
+                updateState();
+            }
+        }
+
+        private float collapsedSize = 2;
+
+        public float CollapsedSize
+        {
+            get => collapsedSize;
+            set
+            {
+                if (value == collapsedSize)
+                    return;
+
+                collapsedSize = value;
+                updateState();
+            }
+        }
+
+        public override Axes RelativeSizeAxes
+        {
+            get => base.RelativeSizeAxes;
+            set
+            {
+                base.RelativeSizeAxes = Axes.None;
+                Size = Vector2.Zero;
+
+                base.RelativeSizeAxes = value;
+                updateState();
+            }
+        }
+
+        public ExpandingBar()
+        {
+            RelativeSizeAxes = Axes.X;
+            Origin = Anchor.Centre;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            updateState();
+        }
+
+        public void Collapse() => IsCollapsed = true;
+
+        public void Expand() => IsCollapsed = false;
+
+        private void updateState()
+        {
+            float newSize = IsCollapsed ? CollapsedSize : ExpandedSize;
+            Easing easingType = IsCollapsed ? Easing.Out : Easing.OutElastic;
+
+            if (RelativeSizeAxes == Axes.X)
+                this.ResizeHeightTo(newSize, 400, easingType);
+            else
+                this.ResizeWidthTo(newSize, 400, easingType);
+        }
+    }
+}

osu.Game/Overlays/OverlayHeaderTabControl.cs

@@ -67,7 +67,7 @@ namespace osu.Game.Overlays
         private class HeaderTabItem : TabItem<string>
         {
             private readonly OsuSpriteText text;
-            private readonly Drawable bar;
+            private readonly ExpandingBar bar;
 
             private Color4 accentColour;
 
@@ -92,7 +92,7 @@ namespace osu.Game.Overlays
                 AutoSizeAxes = Axes.X;
                 RelativeSizeAxes = Axes.Y;
 
-                Children = new[]
+                Children = new Drawable[]
                 {
                     text = new OsuSpriteText
                     {
@@ -102,12 +102,11 @@ namespace osu.Game.Overlays
                         Text = value,
                         Font = OsuFont.GetFont()
                     },
-                    bar = new Circle
+                    bar = new ExpandingBar
                     {
-                        RelativeSizeAxes = Axes.X,
+                        Anchor = Anchor.BottomCentre,
-                        Height = 0,
+                        ExpandedSize = 7.5f,
-                        Origin = Anchor.CentreLeft,
+                        CollapsedSize = 0
-                        Anchor = Anchor.BottomLeft,
                     },
                     new HoverClickSounds()
                 };
@@ -138,7 +137,7 @@ namespace osu.Game.Overlays
                 if (Active.Value || IsHovered)
                 {
                     text.FadeColour(Color4.White, 120, Easing.InQuad);
-                    bar.ResizeHeightTo(7.5f, 120, Easing.InQuad);
+                    bar.Expand();
 
                     if (Active.Value)
                         text.Font = text.Font.With(weight: FontWeight.Bold);
@@ -146,7 +145,7 @@ namespace osu.Game.Overlays
                 else
                 {
                     text.FadeColour(AccentColour, 120, Easing.InQuad);
-                    bar.ResizeHeightTo(0, 120, Easing.InQuad);
+                    bar.Collapse();
                     text.Font = text.Font.With(weight: FontWeight.Medium);
                 }
             }