Added and styled FilterTabControls

osu.Desktop.VisualTests/Tests/TestCaseTabControl.cs

@@ -0,0 +1,60 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE
+
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.UserInterface.Tab;
+using osu.Framework.Screens.Testing;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Screens.Select.Filter;
+using osu.Game.Screens.Select.Tab;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    public class TestCaseTabControl : TestCase
+    {
+        public override string Description => @"Filter for song select";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            OsuSpriteText text;
+            FilterTabControl<GroupMode> filter;
+
+            Add(new FillFlowContainer
+            {
+                Direction = FillDirection.Horizontal,
+                AutoSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    filter = new FilterTabControl<GroupMode>(GroupMode.All, GroupMode.RecentlyPlayed)
+                    {
+                        Width = 229,
+                        AutoSort = true
+                    },
+                    text = new OsuSpriteText
+                    {
+                        Text = "None",
+                        Margin = new MarginPadding(4)
+                    }
+                }
+            });
+            
+            filter.ValueChanged += (sender, mode) =>
+            {
+                Debug.WriteLine($"Selected {mode}");
+                text.Text = mode.ToString();
+            };
+        }
+    }
+}

osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj

@@ -193,6 +193,7 @@
     <Compile Include="Tests\TestCaseMenuButtonSystem.cs" />
     <Compile Include="Tests\TestCaseReplay.cs" />
     <Compile Include="Tests\TestCaseScoreCounter.cs" />
+    <Compile Include="Tests\TestCaseTabControl.cs" />
     <Compile Include="Tests\TestCaseTextAwesome.cs" />
     <Compile Include="Tests\TestCasePlaySongSelect.cs" />
     <Compile Include="Tests\TestCaseTwoLayerButton.cs" />

osu.Game/Screens/Select/FilterControl.cs

@@ -93,16 +93,12 @@ namespace osu.Game.Screens.Select
         {
             private TabControl<GroupMode> groupTabs;
             private TabControl<SortMode> sortTabs;
+            private OsuSpriteText spriteText;
 
             public GroupSortTabs()
             {
                 RelativeSizeAxes = Axes.X;
                 AutoSizeAxes = Axes.Y;
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
                 Children = new Drawable[]
                 {
                     new Box
@@ -114,29 +110,42 @@ namespace osu.Game.Screens.Select
                         Anchor = Anchor.TopLeft,
                         Position = new Vector2(0, 23)
                     },
-                    groupTabs = new FilterTabControl<GroupMode>
+                    groupTabs = new FilterTabControl<GroupMode>(GroupMode.All, GroupMode.RecentlyPlayed)
                     {
-                        Width = 210
+                        Width = 230,
+                        AutoSort = true
                     },
-                    sortTabs = new FilterTabControl<SortMode>
+                    new Container
                     {
-                        Width = 180,
+                        AutoSizeAxes = Axes.Both,
                         Anchor = Anchor.TopRight,
-                        Origin = Anchor.TopRight
+                        Origin = Anchor.TopRight,
+                        Children = new Drawable[]
+                        {
+                            spriteText = new OsuSpriteText
+                            {
+                                Font = @"Exo2.0-Bold",
+                                Text = "Sort results by",
+                                TextSize = 14,
+                                Margin = new MarginPadding
+                                {
+                                    Top = 5,
+                                    Bottom = 5
+                                },
+                            },
+                            sortTabs = new FilterTabControl<SortMode>(87)
+                            {
+                                Width = 191,
+                                AutoSort = true
+                            }
+                        }
                     }
                 };
-                sortTabs.Prefix.Children = new Drawable[]
+            }
-                {
+
-                    new OsuSpriteText
+            [BackgroundDependencyLoader]
-                    {
+            private void load(OsuColour colours) {
-                        Font = @"Exo2.0-Bold",
+                spriteText.Colour = colours.GreenLight;
-                        Text = "Sort results by",
-                        TextSize = 14,
-                        Margin = new MarginPadding { Top = 5, Bottom = 5 },
-                    }
-                };
-                groupTabs.Pin(GroupMode.All);
-                groupTabs.Pin(GroupMode.RecentlyPlayed);
             }
         }
     }

osu.Game/Screens/Select/Tab/FilterTabControl.cs

@@ -10,5 +10,13 @@ namespace osu.Game.Screens.Select.Tab
         protected override TabDropDownMenu<T> CreateDropDownMenu() => new FilterTabDropDownMenu<T>();
 
         protected override TabItem<T> CreateTabItem(T value) => new FilterTabItem<T> { Value = value };
+
+        public FilterTabControl(float offset, params T[] pinned) : base(offset, pinned)
+        {
+        }
+
+        public FilterTabControl(params T[] pinned) : base(pinned)
+        {
+        }
     }
 }

osu.Game/Screens/Select/Tab/FilterTabDropDownHeader.cs

@@ -1,7 +1,6 @@
 // Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu-framework/master/LICENCE
 
-using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.UserInterface;
@@ -30,11 +29,5 @@ namespace osu.Game.Screens.Select.Tab
                 }
             };
         }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            ellipses.Colour = colours.Blue;
-        }
     }
 }

osu.Game/Screens/Select/Tab/FilterTabDropDownMenu.cs

@@ -7,10 +7,12 @@ using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions;
 using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Transforms;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Graphics.UserInterface.Tab;
 using osu.Game.Graphics;
+using osu.Game.Screens.Select.Filter;
 using OpenTK;
 using OpenTK.Graphics;
 
@@ -18,6 +20,9 @@ namespace osu.Game.Screens.Select.Tab
 {
     public class FilterTabDropDownMenu<T> : TabDropDownMenu<T>
     {
+        public override float HeaderWidth => 14;
+        public override float HeaderHeight => 24;
+
         protected override BasicDropDownHeader CreateHeader() => new FilterTabDropDownHeader();
 
         protected override IEnumerable<DropDownMenuItem<T>> GetDropDownItems(IEnumerable<KeyValuePair<string, T>> values)
@@ -25,9 +30,11 @@ namespace osu.Game.Screens.Select.Tab
 
         public FilterTabDropDownMenu()
         {
-            ContentContainer.CornerRadius = 4;
             MaxDropDownHeight = int.MaxValue;
-            ContentBackground.Colour = Color4.Black.Opacity(0.5f);
+            ContentContainer.CornerRadius = 4;
+            ContentBackground.Colour = Color4.Black.Opacity(0.9f);
+            ScrollContainer.ScrollDraggerVisible = false;
+            DropDownItemsContainer.Padding = new MarginPadding { Left = 5, Bottom = 7, Right = 5, Top = 7 };
 
             if (!typeof(T).IsEnum)
                 throw new InvalidOperationException("TabControl only supports enums as the generic type argument");
@@ -62,9 +69,12 @@ namespace osu.Game.Screens.Select.Tab
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours) {
+        private void load(OsuColour colours)
-            //Colour = colours.White;
+        {
-            //SelectedItem.Colour = colours.Blue;
+            if (typeof(T) == typeof(SortMode))
+                Header.Colour = colours.GreenLight;
+            else
+                Header.Colour = colours.Blue;
         }
     }
 }

osu.Game/Screens/Select/Tab/FilterTabDropDownMenuItem.cs

@@ -9,6 +9,7 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics;
 using OpenTK.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Screens.Select.Filter;
 
 namespace osu.Game.Screens.Select.Tab
 {
@@ -16,9 +17,11 @@ namespace osu.Game.Screens.Select.Tab
     {
         public FilterTabDropDownMenuItem(string text, T value) : base(text, value)
         {
-            Foreground.Padding = new MarginPadding(5);
+            Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4 };
-            Background.Colour = Color4.Red;
             Foreground.Margin = new MarginPadding { Left = 7 };
+
+            Masking = true;
+            CornerRadius = 6;
             Foreground.Add(new OsuSpriteText
             {
                 Text = text,
@@ -30,10 +33,20 @@ namespace osu.Game.Screens.Select.Tab
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            BackgroundColour = Color4.Black.Opacity(0.8f);
+            BackgroundColour = Color4.Black.Opacity(0f);
-            BackgroundColourHover = new Color4(124, 200, 253, 255);
+            ForegroundColourHover = Color4.Black;
-            BackgroundColourSelected = new Color4(124, 200, 253, 255);
+            ForegroundColourSelected = Color4.Black;
-            //BackgroundColourSelected = new Color4(163, 196, 36, 255); // Green
+
+            if (typeof(T) == typeof(SortMode))
+            {
+                BackgroundColourHover = new Color4(163, 196, 36, 255);
+                BackgroundColourSelected = new Color4(163, 196, 36, 255);
+            }
+            else
+            {
+                BackgroundColourHover = new Color4(124, 200, 253, 255);
+                BackgroundColourSelected = new Color4(124, 200, 253, 255);
+            }
         }
     }
 }

osu.Game/Screens/Select/Tab/FilterTabItem.cs

@@ -2,6 +2,7 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using System;
+using OpenTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions;
 using osu.Framework.Graphics;
@@ -11,7 +12,7 @@ using osu.Framework.Graphics.UserInterface.Tab;
 using osu.Framework.Input;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using OpenTK.Graphics;
+using osu.Game.Screens.Select.Filter;
 
 namespace osu.Game.Screens.Select.Tab
 {
@@ -90,16 +91,21 @@ namespace osu.Game.Screens.Select.Tab
             };
         }
 
-        // TODO: Remove this (for debugging)
-        public override string ToString() {
-            return Value.ToString();
-        }
-
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            fadeColour = colours.Blue;
+            if (typeof(T) == typeof(SortMode))
-            text.Colour = colours.Blue;
+            {
+                fadeColour = colours.GreenLight;
+                if (!Active)
+                    text.Colour = colours.GreenLight;
+            }
+            else
+            {
+                fadeColour = colours.Blue;
+                if (!Active)
+                    text.Colour = colours.Blue;
+            }
         }
     }
 }