Merge pull request #2331 from DrabWeb/osu-tab-strip

Tab strip

osu.Game.Tests/Visual/TestCaseBreadcrumbs.cs

@@ -2,7 +2,9 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Tests.Visual
@@ -10,10 +12,12 @@ namespace osu.Game.Tests.Visual
     [TestFixture]
     public class TestCaseBreadcrumbs : OsuTestCase
     {
+        private readonly BreadcrumbControl<BreadcrumbTab> breadcrumbs;
+
         public TestCaseBreadcrumbs()
         {
-            BreadcrumbControl<BreadcrumbTab> c;
+
-            Add(c = new BreadcrumbControl<BreadcrumbTab>
+            Add(breadcrumbs = new BreadcrumbControl<BreadcrumbTab>
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
@@ -21,9 +25,15 @@ namespace osu.Game.Tests.Visual
                 Width = 0.5f,
             });
 
-            AddStep(@"first", () => c.Current.Value = BreadcrumbTab.Click);
+            AddStep(@"first", () => breadcrumbs.Current.Value = BreadcrumbTab.Click);
-            AddStep(@"second", () => c.Current.Value = BreadcrumbTab.The);
+            AddStep(@"second", () => breadcrumbs.Current.Value = BreadcrumbTab.The);
-            AddStep(@"third", () => c.Current.Value = BreadcrumbTab.Circles);
+            AddStep(@"third", () => breadcrumbs.Current.Value = BreadcrumbTab.Circles);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            breadcrumbs.StripColour = colours.Blue;
         }
 
         private enum BreadcrumbTab

osu.Game/Graphics/UserInterface/BreadcrumbControl.cs

@@ -17,6 +17,8 @@ namespace osu.Game.Graphics.UserInterface
 
         protected override TabItem<T> CreateTabItem(T value) => new BreadcrumbTabItem(value);
 
+        protected override float StripWidth() => base.StripWidth() - (padding + 8);
+
         public BreadcrumbControl()
         {
             Height = 26;

osu.Game/Graphics/UserInterface/OsuTabControl.cs

@@ -14,22 +14,36 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input;
+using osu.Framework.MathUtils;
 using osu.Game.Graphics.Sprites;
 
 namespace osu.Game.Graphics.UserInterface
 {
     public class OsuTabControl<T> : TabControl<T>
     {
+        private readonly Box strip;
+
         protected override Dropdown<T> CreateDropdown() => new OsuTabDropdown();
 
         protected override TabItem<T> CreateTabItem(T value) => new OsuTabItem(value);
 
+        protected virtual float StripWidth() => TabContainer.Children.Sum(c => c.IsPresent ? c.DrawWidth + TabContainer.Spacing.X : 0) - TabContainer.Spacing.X;
+        protected virtual float StripHeight() => 1;
+
         private static bool isEnumType => typeof(T).IsEnum;
 
         public OsuTabControl()
         {
             TabContainer.Spacing = new Vector2(10f, 0f);
 
+            Add(strip = new Box
+            {
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.BottomLeft,
+                Height = StripHeight(),
+                Colour = Color4.White.Opacity(0),
+            });
+
             if (isEnumType)
                 foreach (var val in (T[])Enum.GetValues(typeof(T)))
                     AddItem(val);
@@ -57,6 +71,12 @@ namespace osu.Game.Graphics.UserInterface
             }
         }
 
+        public Color4 StripColour
+        {
+            get => strip.Colour;
+            set => strip.Colour = value;
+        }
+
         protected override TabFillFlowContainer CreateTabFlow() => new OsuTabFillFlowContainer
         {
             Direction = FillDirection.Full,
@@ -65,6 +85,15 @@ namespace osu.Game.Graphics.UserInterface
             Masking = true
         };
 
+        protected override void UpdateAfterChildren()
+        {
+            base.UpdateAfterChildren();
+
+            // dont bother calculating if the strip is invisible
+            if (strip.Colour.MaxAlpha > 0)
+                strip.Width = Interpolation.ValueAt(MathHelper.Clamp(Clock.ElapsedFrameTime, 0, 1000), strip.Width, StripWidth(), 0, 500, Easing.OutQuint);
+        }
+
         public class OsuTabItem : TabItem<T>, IHasAccentColour
         {
             protected readonly SpriteText Text;

osu.Game/Overlays/Direct/Header.cs

@@ -13,7 +13,6 @@ namespace osu.Game.Overlays.Direct
     public class Header : SearchableListHeader<DirectTab>
     {
         protected override Color4 BackgroundColour => OsuColour.FromHex(@"252f3a");
-        protected override float TabStripWidth => 298;
 
         protected override DirectTab DefaultTab => DirectTab.Search;
         protected override Drawable CreateHeaderText() => new OsuSpriteText { Text = @"osu!direct", TextSize = 25 };

osu.Game/Overlays/SearchableList/SearchableListHeader.cs

@@ -14,12 +14,9 @@ namespace osu.Game.Overlays.SearchableList
 {
     public abstract class SearchableListHeader<T> : Container
     {
-        private readonly Box tabStrip;
-
         public readonly HeaderTabControl<T> Tabs;
 
         protected abstract Color4 BackgroundColour { get; }
-        protected abstract float TabStripWidth { get; } //can be removed once (if?) TabControl support auto sizing
         protected abstract T DefaultTab { get; }
         protected abstract Drawable CreateHeaderText();
         protected abstract FontAwesome Icon { get; }
@@ -63,13 +60,6 @@ namespace osu.Game.Overlays.SearchableList
                                 CreateHeaderText(),
                             },
                         },
-                        tabStrip = new Box
-                        {
-                            Anchor = Anchor.BottomLeft,
-                            Origin = Anchor.BottomLeft,
-                            Width = TabStripWidth,
-                            Height = 1,
-                        },
                         Tabs = new HeaderTabControl<T>
                         {
                             Anchor = Anchor.BottomLeft,
@@ -87,7 +77,7 @@ namespace osu.Game.Overlays.SearchableList
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            tabStrip.Colour = colours.Green;
+            Tabs.StripColour = colours.Green;
         }
     }
 }

osu.Game/Overlays/Social/Header.cs

@@ -17,7 +17,6 @@ namespace osu.Game.Overlays.Social
         private OsuSpriteText browser;
 
         protected override Color4 BackgroundColour => OsuColour.FromHex(@"38202e");
-        protected override float TabStripWidth => 438;
 
         protected override SocialTab DefaultTab => SocialTab.AllPlayers;
         protected override FontAwesome Icon => FontAwesome.fa_users;