Abstract DirectOverlay layout into base class for Social and osu!direct - BrowseOverlay, initial layout of social browser

osu.Desktop.VisualTests/Tests/TestCaseSocial.cs

@@ -0,0 +1,23 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Testing;
+using osu.Game.Overlays;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    public class TestCaseSocial : TestCase
+    {
+        public override string Description => @"social browser overlay";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            SocialOverlay s = new SocialOverlay();
+            Add(s);
+
+            AddStep(@"toggle", s.ToggleVisibility);
+        }
+    }
+}

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

@@ -223,6 +223,7 @@
     <Compile Include="Tests\TestCaseDrawableRoom.cs" />
     <Compile Include="Tests\TestCaseUserPanel.cs" />
     <Compile Include="Tests\TestCaseDirect.cs" />
+    <Compile Include="Tests\TestCaseSocial.cs" />
   </ItemGroup>
   <ItemGroup />
   <ItemGroup />

osu.Game/Graphics/UserInterface/PageTabControl.cs

@@ -10,22 +10,20 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 
-namespace osu.Game.Overlays.Direct
+namespace osu.Game.Graphics.UserInterface
 {
-    public class SortTabControl : OsuTabControl<SortCriteria>
+    public class PageTabControl<T> : OsuTabControl<T>
     {
-        protected override TabItem<SortCriteria> CreateTabItem(SortCriteria value) => new SortTabItem(value);
+        protected override TabItem<T> CreateTabItem(T value) => new PageTabItem(value);
 
-        public SortTabControl()
+        public PageTabControl()
         {
             Height = 30;
         }
 
-        private class SortTabItem : TabItem<SortCriteria>
+        private class PageTabItem : TabItem<T>
         {
             private const float transition_duration = 100;
 
@@ -46,7 +44,7 @@ namespace osu.Game.Overlays.Direct
                 }
             }
 
-            public SortTabItem(SortCriteria value) : base(value)
+            public PageTabItem(T value) : base(value)
             {
                 AutoSizeAxes = Axes.X;
                 RelativeSizeAxes = Axes.Y;
@@ -104,14 +102,4 @@ namespace osu.Game.Overlays.Direct
             }
         }
     }
-
-    public enum SortCriteria
-    {
-        Title,
-        Artist,
-        Creator,
-        Difficulty,
-        Ranked,
-        Rating,
-    }
 }

osu.Game/Overlays/Browse/BrowseFilterControl.cs

@@ -0,0 +1,111 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// 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.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Overlays.Browse
+{
+    public abstract class BrowseFilterControl<T> : Container
+    {
+        private const float padding = 10;
+
+        private readonly Box tabStrip;
+
+        public readonly SearchTextBox Search;
+        public readonly PageTabControl<T> Tabs;
+
+        protected abstract Color4 BackgroundColour { get; }
+        protected abstract T DefaultTab { get; }
+        protected virtual Drawable CreateControls() => new Container(); //todo: naming
+
+        public BrowseFilterControl()
+        {
+            if (!typeof(T).IsEnum)
+                throw new InvalidOperationException("BrowseFilterControl only supports enums as the generic type argument");
+
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = BackgroundColour,
+                },
+                tabStrip = new Box
+                {
+                    Anchor = Anchor.BottomLeft,
+                    Origin = Anchor.BottomLeft,
+                    RelativeSizeAxes = Axes.X,
+                    Height = 1,
+                    Alpha = 0.9f,
+                },
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Padding = new MarginPadding { Top = padding, Horizontal = BrowseOverlay.WIDTH_PADDING },
+                    Children = new Drawable[]
+                    {
+                        Search = new FilterSearchTextBox
+                        {
+                            RelativeSizeAxes = Axes.X,
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Margin = new MarginPadding { Top = padding }, //todo: margin is still applied without any controls
+                            Children = new[]
+                            {
+                                CreateControls(),
+                            },
+                        },
+                        Tabs = new PageTabControl<T>
+                        {
+                            RelativeSizeAxes = Axes.X,
+                        },
+                        new Box //keep the tab strip part of autosize, but don't put it in the flow container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 1,
+                            Colour = Color4.White.Opacity(0),
+                        },
+                    },
+                },
+            };
+
+            Tabs.Current.Value = DefaultTab;
+            Tabs.Current.TriggerChange();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            tabStrip.Colour = colours.Yellow;
+        }
+
+        private class FilterSearchTextBox : SearchTextBox
+        {
+            protected override Color4 BackgroundUnfocused => backgroundColour;
+            protected override Color4 BackgroundFocused => backgroundColour;
+
+            private Color4 backgroundColour;
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                backgroundColour = colours.Gray2.Opacity(0.9f);
+            }
+        }
+    }
+}

osu.Game/Overlays/Browse/BrowseHeader.cs

@@ -0,0 +1,96 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using System.Linq;
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Overlays.Browse
+{
+    public abstract class BrowseHeader<T> : Container
+    {
+        public static readonly float HEIGHT = 90;
+
+        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();
+
+        public BrowseHeader()
+        {
+            if (!typeof(T).IsEnum)
+                throw new InvalidOperationException("BrowseHeader only supports enums as the generic type argument");
+
+            RelativeSizeAxes = Axes.X;
+            Height = HEIGHT;
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = BackgroundColour,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Left = BrowseOverlay.WIDTH_PADDING, Right = BrowseOverlay.WIDTH_PADDING }, 
+                    Children = new Drawable[]
+                    {
+                        new FillFlowContainer
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.BottomLeft,
+                            Position = new Vector2(-35f, 5f),
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(10f, 0f),
+                            Children = new Drawable[]
+                            {
+                                new TextAwesome
+                                {
+                                    TextSize = 25,
+                                    Icon = FontAwesome.fa_osu_chevron_down_o,
+                                },
+                                CreateHeaderText(),
+                            },
+                        },
+                        tabStrip = new Box
+                        {
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            Width = TabStripWidth,
+                            Height = 1,
+                        },
+                        Tabs = new HeaderTabControl<T>
+                        {
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            RelativeSizeAxes = Axes.X,
+                        },
+                    },
+                },
+            };
+
+            Tabs.Current.Value = DefaultTab;
+            Tabs.Current.TriggerChange();
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            tabStrip.Colour = colours.Green;
+        }
+    }
+}

osu.Game/Overlays/Browse/BrowseOverlay.cs

@@ -0,0 +1,126 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK.Graphics;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Backgrounds;
+
+namespace osu.Game.Overlays.Browse
+{
+    public abstract class BrowseOverlay : WaveOverlayContainer
+    {
+        public static readonly float WIDTH_PADDING = 80;
+    }
+
+    //todo: naming
+    //todo: crash when pressing tab
+    public abstract class BrowseOverlay<T,U> : BrowseOverlay
+    {
+        private readonly Container scrollContainer;
+
+        protected readonly BrowseHeader<T> Header;
+        protected readonly BrowseFilterControl<U> Filter;
+        protected readonly FillFlowContainer ScrollFlow;
+
+        protected abstract Color4 BackgroundColour { get; }
+        protected abstract Color4 TrianglesColourLight { get; }
+        protected abstract Color4 TrianglesColourDark { get; }
+        protected abstract BrowseHeader<T> CreateHeader();
+        protected abstract BrowseFilterControl<U> CreateFilterControl();
+
+        public BrowseOverlay()
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = BackgroundColour,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    Children = new[]
+                    {
+                        new Triangles
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            TriangleScale = 5,
+                            ColourLight = TrianglesColourLight,
+                            ColourDark = TrianglesColourDark,
+                        },
+                    },
+                },
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        Header = CreateHeader(),
+                        Filter = CreateFilterControl(),
+                    },
+                },
+                scrollContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new[]
+                    {
+                        new ScrollContainer
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            ScrollDraggerVisible = false,
+                            Children = new[]
+                            {
+                                ScrollFlow = new FillFlowContainer
+                                {
+                                    RelativeSizeAxes = Axes.X,
+                                    AutoSizeAxes = Axes.Y,
+                                    Padding = new MarginPadding { Horizontal = BrowseOverlay.WIDTH_PADDING },
+                                    Direction = FillDirection.Vertical,
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+
+            Filter.Search.Exit = Hide;
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            scrollContainer.Padding = new MarginPadding { Top = Header.Height + Filter.Height };
+        }
+
+        protected override bool OnFocus(InputState state)
+        {
+            Filter.Search.TriggerFocus();
+            return false;
+        }
+
+        protected override void PopIn()
+        {
+            base.PopIn();
+
+            Filter.Search.HoldFocus = true;
+        }
+
+        protected override void PopOut()
+        {
+            base.PopOut();
+
+            Filter.Search.HoldFocus = false;
+        }
+    }
+}

osu.Game/Overlays/Browse/DisplayStyleControl.cs

@@ -0,0 +1,102 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using osu.Framework.Configuration;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
+
+namespace osu.Game.Overlays.Browse
+{
+    public class DisplayStyleControl<T> : Container
+    {
+        public readonly SlimEnumDropdown<T> Dropdown;
+        public readonly Bindable<PanelDisplayStyle> DisplayStyle = new Bindable<PanelDisplayStyle>();
+
+        public DisplayStyleControl()
+        {
+            AutoSizeAxes = Axes.Both;
+
+            Children = new[]
+            {
+                new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    Spacing = new Vector2(10f, 0f),
+                    Direction = FillDirection.Horizontal,
+                    Children = new Drawable[]
+                    {
+                        new FillFlowContainer
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Spacing = new Vector2(5f, 0f),
+                            Direction = FillDirection.Horizontal,
+                            Children = new[]
+                            {
+                                new DisplayStyleToggleButton(FontAwesome.fa_th_large, PanelDisplayStyle.Grid, DisplayStyle),
+                                new DisplayStyleToggleButton(FontAwesome.fa_list_ul, PanelDisplayStyle.List, DisplayStyle),
+                            },
+                        },
+                        Dropdown = new SlimEnumDropdown<T>
+                        {
+                            RelativeSizeAxes = Axes.None,
+                            Width = 160f,
+                        },
+                    },
+                },
+            };
+
+            DisplayStyle.Value = PanelDisplayStyle.Grid;
+        }
+
+        private class DisplayStyleToggleButton : ClickableContainer
+        {
+            private readonly TextAwesome icon;
+            private readonly PanelDisplayStyle style;
+            private readonly Bindable<PanelDisplayStyle> bindable;
+
+            public DisplayStyleToggleButton(FontAwesome icon, PanelDisplayStyle style, Bindable<PanelDisplayStyle> bindable)
+            {
+                this.bindable = bindable;
+                this.style = style;
+                Size = new Vector2(25f);
+
+                Children = new Drawable[]
+                {
+                    this.icon = new TextAwesome
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Icon = icon,
+                        TextSize = 18,
+                        UseFullGlyphHeight = false,
+                        Alpha = 0.5f,
+                    },
+                };
+
+                bindable.ValueChanged += Bindable_ValueChanged;
+                Bindable_ValueChanged(bindable.Value);
+                Action = () => bindable.Value = this.style;
+            }
+
+            private void Bindable_ValueChanged(PanelDisplayStyle style)
+            {
+                icon.FadeTo(style == this.style ? 1.0f : 0.5f, 100);
+            }
+
+            protected override void Dispose(bool isDisposing)
+            {
+                bindable.ValueChanged -= Bindable_ValueChanged;
+            }
+        }
+    }
+
+    public enum PanelDisplayStyle
+    {
+        Grid,
+        List,
+    }
+}

osu.Game/Overlays/Browse/HeaderTabControl.cs

@@ -0,0 +1,28 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK.Graphics;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Overlays.Browse
+{
+    public class HeaderTabControl<T> : OsuTabControl<T>
+    {
+        protected override TabItem<T> CreateTabItem(T value) => new HeaderTabItem(value);
+
+        public HeaderTabControl()
+        {
+            Height = 26;
+            AccentColour = Color4.White;
+        }
+
+        private class HeaderTabItem : OsuTabItem
+        {
+            public HeaderTabItem(T value) : base(value)
+            {
+                Text.TextSize = 16;
+            }
+        }
+    }
+}

osu.Game/Overlays/Browse/SlimEnumDropdown.cs

@@ -7,12 +7,10 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 
-namespace osu.Game.Overlays.Direct
+namespace osu.Game.Overlays.Browse
 {
     public class SlimEnumDropdown<T> : OsuEnumDropdown<T>
     {
-        public const float HEIGHT = 25;
-
         protected override DropdownHeader CreateHeader() => new SlimDropdownHeader { AccentColour = AccentColour };
         protected override Menu CreateMenu() => new SlimMenu();
 
@@ -20,7 +18,7 @@ namespace osu.Game.Overlays.Direct
         {
             public SlimDropdownHeader()
             {
-                Height = HEIGHT;
+                Height = 25;
                 Icon.TextSize = 16;
                 Foreground.Padding = new MarginPadding { Top = 4, Bottom = 4, Left = 8, Right = 4 };
             }

osu.Game/Overlays/Direct/FilterControl.cs

@@ -5,117 +5,47 @@ using OpenTK;
 using OpenTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Configuration;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Sprites;
 using osu.Game.Database;
 using osu.Game.Graphics;
-using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays.Browse;
 
 namespace osu.Game.Overlays.Direct
 {
-    public class FilterControl : Container
+    public class FilterControl : BrowseFilterControl<DirectSortCritera>
     {
-        public static readonly float HEIGHT = 35 + 32 + 30 + padding * 2; // search + mode toggle buttons + sort tabs + padding
+        private FillFlowContainer<RulesetToggleButton> modeButtons;
 
-        private const float padding = 10;
+        public readonly DisplayStyleControl<RankStatus> DisplayStyleControl; //todo: naming
 
-        private readonly Box tabStrip;
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"384552");
-        private readonly FillFlowContainer<RulesetToggleButton> modeButtons;
+        protected override DirectSortCritera DefaultTab => DirectSortCritera.Title;
+        protected override Drawable CreateControls()
+        {
+            modeButtons = new FillFlowContainer<RulesetToggleButton>
+            {
+                AutoSizeAxes = Axes.Both,
+                Spacing = new Vector2(10f, 0f),
+            };
 
-        public readonly SearchTextBox Search;
+            return modeButtons;
-        public readonly SortTabControl SortTabs;
+        }
-        public readonly OsuEnumDropdown<RankStatus> RankStatusDropdown;
-        public readonly Bindable<DirectOverlay.PanelDisplayStyle> DisplayStyle = new Bindable<DirectOverlay.PanelDisplayStyle>();
-
-        protected override bool InternalContains(Vector2 screenSpacePos) => base.InternalContains(screenSpacePos) || RankStatusDropdown.Contains(screenSpacePos);
 
         public FilterControl()
         {
-            RelativeSizeAxes = Axes.X;
+            Add(DisplayStyleControl = new DisplayStyleControl<RankStatus>
-            Height = HEIGHT;
-            DisplayStyle.Value = DirectOverlay.PanelDisplayStyle.Grid;
-
-            Children = new Drawable[]
             {
-                new Box
+                Anchor = Anchor.BottomRight,
-                {
+                Origin = Anchor.BottomRight,
-                    RelativeSizeAxes = Axes.Both,
+                Margin = new MarginPadding { Bottom = 5, Right = BrowseOverlay.WIDTH_PADDING },
-                    Colour = OsuColour.FromHex(@"384552"),
+            });
-                    Alpha = 0.9f,
-                },
-                tabStrip = new Box
-                {
-                    Anchor = Anchor.BottomLeft,
-                    Origin = Anchor.TopLeft,
-                    RelativeSizeAxes = Axes.X,
-                    Height = 1,
-                },
-                new FillFlowContainer
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Padding = new MarginPadding { Left = DirectOverlay.WIDTH_PADDING, Right = DirectOverlay.WIDTH_PADDING },
-                    Children = new Drawable[]
-                    {
-                        Search = new DirectSearchTextBox
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            Margin = new MarginPadding { Top = padding },
-                        },
-                        modeButtons = new FillFlowContainer<RulesetToggleButton>
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Spacing = new Vector2(padding, 0f),
-                            Margin = new MarginPadding { Top = padding },
-                        },
-                        SortTabs = new SortTabControl
-                        {
-                            RelativeSizeAxes = Axes.X,
-                        },
-                    },
-                },
-                new FillFlowContainer
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Anchor = Anchor.TopRight,
-                    Origin = Anchor.TopRight,
-                    Spacing = new Vector2(10f, 0f),
-                    Direction = FillDirection.Horizontal,
-                    Margin = new MarginPadding { Top = HEIGHT - SlimEnumDropdown<DirectTab>.HEIGHT - padding, Right = DirectOverlay.WIDTH_PADDING },
-                    Children = new Drawable[]
-                    {
-                        new FillFlowContainer
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Spacing = new Vector2(5f, 0f),
-                            Direction = FillDirection.Horizontal,
-                            Children = new[]
-                            {
-                                new DisplayStyleToggleButton(FontAwesome.fa_th_large, DirectOverlay.PanelDisplayStyle.Grid, DisplayStyle),
-                                new DisplayStyleToggleButton(FontAwesome.fa_list_ul, DirectOverlay.PanelDisplayStyle.List, DisplayStyle),
-                            },
-                        },
-                        RankStatusDropdown = new SlimEnumDropdown<RankStatus>
-                        {
-                            RelativeSizeAxes = Axes.None,
-                            Width = 160f,
-                        },
-                    },
-                },
-            };
-
-            RankStatusDropdown.Current.Value = RankStatus.RankedApproved;
-            SortTabs.Current.Value = SortCriteria.Title;
-            SortTabs.Current.TriggerChange();
         }
 
         [BackgroundDependencyLoader(true)]
         private void load(OsuGame game, RulesetDatabase rulesets, OsuColour colours)
         {
-            tabStrip.Colour = colours.Yellow;
+            DisplayStyleControl.Dropdown.AccentColour = colours.BlueDark;
-            RankStatusDropdown.AccentColour = colours.BlueDark;
 
             var b = new Bindable<RulesetInfo>(); //backup bindable incase the game is null
             foreach (var r in rulesets.AllRulesets)
@@ -124,20 +54,6 @@ namespace osu.Game.Overlays.Direct
             }
         }
 
-        private class DirectSearchTextBox : SearchTextBox
-        {
-            protected override Color4 BackgroundUnfocused => backgroundColour;
-            protected override Color4 BackgroundFocused => backgroundColour;
-
-            private Color4 backgroundColour;
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                backgroundColour = colours.Gray2.Opacity(0.9f);
-            }
-        }
-
         private class RulesetToggleButton : ClickableContainer
         {
             private readonly TextAwesome icon;
@@ -188,46 +104,15 @@ namespace osu.Game.Overlays.Direct
                 base.Dispose(isDisposing);
             }
         }
+    }
 
-        private class DisplayStyleToggleButton : ClickableContainer
+    public enum DirectSortCritera
-        {
+    {
-            private readonly TextAwesome icon;
+        Title,
-            private readonly DirectOverlay.PanelDisplayStyle style;
+        Artist,
-            private readonly Bindable<DirectOverlay.PanelDisplayStyle> bindable;
+        Creator,
-
+        Difficulty,
-            public DisplayStyleToggleButton(FontAwesome icon, DirectOverlay.PanelDisplayStyle style, Bindable<DirectOverlay.PanelDisplayStyle> bindable)
+        Ranked,
-            {
+        Rating,
-                this.bindable = bindable;
-                this.style = style;
-                Size = new Vector2(SlimEnumDropdown<DirectTab>.HEIGHT);
-
-                Children = new Drawable[]
-                {
-                    this.icon = new TextAwesome
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        Icon = icon,
-                        TextSize = 18,
-                        UseFullGlyphHeight = false,
-                        Alpha = 0.5f,
-                    },
-                };
-
-                bindable.ValueChanged += Bindable_ValueChanged;
-                Bindable_ValueChanged(bindable.Value);
-                Action = () => bindable.Value = this.style;
-            }
-
-            private void Bindable_ValueChanged(DirectOverlay.PanelDisplayStyle style)
-            {
-                icon.FadeTo(style == this.style ? 1.0f : 0.5f, 100);
-            }
-
-            protected override void Dispose(bool isDisposing)
-            {
-                bindable.ValueChanged -= Bindable_ValueChanged;
-            }
-        }
     }
 }

osu.Game/Overlays/Direct/Header.cs

@@ -2,113 +2,27 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using System.ComponentModel;
-using OpenTK;
 using OpenTK.Graphics;
-using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Sprites;
-using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays.Browse;
-
-using Container = osu.Framework.Graphics.Containers.Container;
 
 namespace osu.Game.Overlays.Direct
 {
-    public class Header : Container
+    public class Header : BrowseHeader<DirectTab>
     {
-        public static readonly float HEIGHT = 90;
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"252f3a");
+        protected override float TabStripWidth => 298;
 
-        private readonly Box tabStrip;
+        protected override DirectTab DefaultTab => DirectTab.Search;
-
+        protected override Drawable CreateHeaderText() => new OsuSpriteText { Text = @"osu!direct", TextSize = 25, };
-        public readonly OsuTabControl<DirectTab> Tabs;
 
         public Header()
         {
-            Height = HEIGHT;
-
-            Children = new Drawable[]
-            {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.FromHex(@"252f3a"),
-                },
-                new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Left = DirectOverlay.WIDTH_PADDING, Right = DirectOverlay.WIDTH_PADDING },
-                    Children = new Drawable[]
-                    {
-                        new FillFlowContainer
-                        {
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.BottomLeft,
-                            Position = new Vector2(-35f, 5f),
-                            AutoSizeAxes = Axes.Both,
-                            Direction = FillDirection.Horizontal,
-                            Spacing = new Vector2(10f, 0f),
-                            Children = new Drawable[]
-                            {
-                                new TextAwesome
-                                {
-                                    TextSize = 25,
-                                    Icon = FontAwesome.fa_osu_chevron_down_o,
-                                },
-                                new OsuSpriteText
-                                {
-                                    TextSize = 25,
-                                    Text = @"osu!direct",
-                                },
-                            },
-                        },
-                        tabStrip = new Box
-                        {
-                            Anchor = Anchor.BottomLeft,
-                            Origin = Anchor.BottomLeft,
-                            Width = 282, //todo: make this actually match the tab control's width instead of hardcoding
-                            Height = 1,
-                        },
-                        Tabs = new DirectTabControl
-                        {
-                            Anchor = Anchor.BottomLeft,
-                            Origin = Anchor.BottomLeft,
-                            RelativeSizeAxes = Axes.X,
-                        },
-                    },
-                },
-            };
-
             Tabs.Current.Value = DirectTab.Search;
             Tabs.Current.TriggerChange();
         }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            tabStrip.Colour = colours.Green;
-        }
-
-        private class DirectTabControl : OsuTabControl<DirectTab>
-        {
-            protected override TabItem<DirectTab> CreateTabItem(DirectTab value) => new DirectTabItem(value);
-
-            public DirectTabControl()
-            {
-                Height = 25;
-                AccentColour = Color4.White;
-            }
-
-            private class DirectTabItem : OsuTabItem
-            {
-                public DirectTabItem(DirectTab value) : base(value)
-                {
-                    Text.TextSize = 15;
-                }
-            }
-        }
     }
 
     public enum DirectTab

osu.Game/Overlays/DirectOverlay.cs

@@ -7,28 +7,33 @@ using OpenTK;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Sprites;
-using osu.Framework.Input;
 using osu.Game.Database;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Backgrounds;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Overlays.Direct;
+using osu.Game.Overlays.Browse;
+using OpenTK.Graphics;
+using System.ComponentModel;
 
 using Container = osu.Framework.Graphics.Containers.Container;
 
 namespace osu.Game.Overlays
 {
-    public class DirectOverlay : WaveOverlayContainer
+    public class DirectOverlay : BrowseOverlay<DirectTab,DirectSortCritera>
     {
-        public static readonly int WIDTH_PADDING = 80;
         private const float panel_padding = 10f;
 
-        private readonly FilterControl filter;
         private readonly FillFlowContainer resultCountsContainer;
         private readonly OsuSpriteText resultCountsText;
         private readonly FillFlowContainer<DirectPanel> panels;
 
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"485e74");
+        protected override Color4 TrianglesColourLight => OsuColour.FromHex(@"465b71");
+        protected override Color4 TrianglesColourDark => OsuColour.FromHex(@"3f5265");
+
+        protected override BrowseHeader<DirectTab> CreateHeader() => new Header();
+        protected override BrowseFilterControl<DirectSortCritera> CreateFilterControl() => new FilterControl();
+
         private IEnumerable<BeatmapSetInfo> beatmapSets;
         public IEnumerable<BeatmapSetInfo> BeatmapSets
         {
@@ -38,7 +43,7 @@ namespace osu.Game.Overlays
                 if (beatmapSets?.Equals(value) ?? false) return;
                 beatmapSets = value;
 
-                recreatePanels(filter.DisplayStyle.Value);
+                recreatePanels((Filter as FilterControl).DisplayStyleControl.DisplayStyle.Value); //todo: potential nullref
             }
         }
 
@@ -66,96 +71,39 @@ namespace osu.Game.Overlays
             ThirdWaveColour = OsuColour.FromHex(@"005774");
             FourthWaveColour = OsuColour.FromHex(@"003a4e");
 
-            Header header;
+            ScrollFlow.Children = new Drawable[]
-            Children = new Drawable[]
             {
-                new Box
+                resultCountsContainer = new FillFlowContainer
                 {
-                    RelativeSizeAxes = Axes.Both,
+                    AutoSizeAxes = Axes.Both,
-                    Colour = OsuColour.FromHex(@"485e74"),
+                    Direction = FillDirection.Horizontal,
-                },
+                    Margin = new MarginPadding { Top = 5 },
-                new Container
+                    Children = new Drawable[]
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    Children = new[]
                     {
-                        new Triangles
+                        new OsuSpriteText
                         {
-                            RelativeSizeAxes = Axes.Both,
+                            Text = "Found ",
-                            TriangleScale = 5,
+                            TextSize = 15,
-                            ColourLight = OsuColour.FromHex(@"465b71"),
-                            ColourDark = OsuColour.FromHex(@"3f5265"),
                         },
-                    },
+                        resultCountsText = new OsuSpriteText
-                },
-                new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Top = Header.HEIGHT + FilterControl.HEIGHT },
-                    Children = new[]
-                    {
-                        new ScrollContainer
                         {
-                            RelativeSizeAxes = Axes.Both,
+                            TextSize = 15,
-                            ScrollDraggerVisible = false,
+                            Font = @"Exo2.0-Bold",
-                            Children = new Drawable[]
-                            {
-                                new FillFlowContainer
-                                {
-                                    RelativeSizeAxes = Axes.X,
-                                    AutoSizeAxes = Axes.Y,
-                                    Direction = FillDirection.Vertical,
-                                    Children = new Drawable[]
-                                    {
-                                        resultCountsContainer = new FillFlowContainer
-                                        {
-                                            AutoSizeAxes = Axes.Both,
-                                            Direction = FillDirection.Horizontal,
-                                            Margin = new MarginPadding { Left = WIDTH_PADDING, Top = 6 },
-                                            Children = new Drawable[]
-                                            {
-                                                new OsuSpriteText
-                                                {
-                                                    Text = "Found ",
-                                                    TextSize = 15,
-                                                },
-                                                resultCountsText = new OsuSpriteText
-                                                {
-                                                    TextSize = 15,
-                                                    Font = @"Exo2.0-Bold",
-                                                },
-                                            }
-                                        },
-                                        panels = new FillFlowContainer<DirectPanel>
-                                        {
-                                            RelativeSizeAxes = Axes.X,
-                                            AutoSizeAxes = Axes.Y,
-                                            Padding = new MarginPadding { Top = panel_padding, Bottom = panel_padding, Left = WIDTH_PADDING, Right = WIDTH_PADDING },
-                                            Spacing = new Vector2(panel_padding),
-                                        },
-                                    },
-                                },
-                            },
                         },
-                    },
+                    }
                 },
-                filter = new FilterControl
+                panels = new FillFlowContainer<DirectPanel>
-                {
-                    RelativeSizeAxes = Axes.X,
-                    Margin = new MarginPadding { Top = Header.HEIGHT },
-                },
-                header = new Header
                 {
                     RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Spacing = new Vector2(panel_padding),
+                    Margin = new MarginPadding { Top = 10 },
                 },
             };
 
-            header.Tabs.Current.ValueChanged += tab => { if (tab != DirectTab.Search) filter.Search.Current.Value = string.Empty; };
+            Header.Tabs.Current.ValueChanged += tab => { if (tab != DirectTab.Search) Filter.Search.Text = string.Empty; };
-
+            Filter.Search.Current.ValueChanged += text => { if (text != string.Empty) Header.Tabs.Current.Value = DirectTab.Search; };
-            filter.Search.Exit = Hide;
+            (Filter as FilterControl).DisplayStyleControl.DisplayStyle.ValueChanged += recreatePanels; //todo: potential nullref
-            filter.Search.Current.ValueChanged += text => { if (text != string.Empty) header.Tabs.Current.Value = DirectTab.Search; };
-            filter.DisplayStyle.ValueChanged += recreatePanels;
 
             updateResultCounts();
         }
@@ -187,26 +135,6 @@ namespace osu.Game.Overlays
             panels.Children = BeatmapSets.Select(b => displayStyle == PanelDisplayStyle.Grid ? (DirectPanel)new DirectGridPanel(b) { Width = 400 } : new DirectListPanel(b));
         }
 
-        protected override bool OnFocus(InputState state)
-        {
-            filter.Search.TriggerFocus();
-            return false;
-        }
-
-        protected override void PopIn()
-        {
-            base.PopIn();
-
-            filter.Search.HoldFocus = true;
-        }
-
-        protected override void PopOut()
-        {
-            base.PopOut();
-
-            filter.Search.HoldFocus = false;
-        }
-
         public class ResultCounts
         {
             public readonly int Artists;
@@ -220,11 +148,5 @@ namespace osu.Game.Overlays
                 Tags = tags;
             }
         }
-
-        public enum PanelDisplayStyle
-        {
-            Grid,
-            List,
-        }
     }
 }

osu.Game/Overlays/Social/FilterControl.cs

@@ -0,0 +1,15 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK.Graphics;
+using osu.Game.Graphics;
+using osu.Game.Overlays.Browse;
+
+namespace osu.Game.Overlays.Social
+{
+    public class FilterControl : BrowseFilterControl<SocialSortCriteria>
+    {
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"47253a");
+        protected override SocialSortCriteria DefaultTab => SocialSortCriteria.Name;
+    }
+}

osu.Game/Overlays/Social/Header.cs

@@ -0,0 +1,51 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Game.Overlays.Browse;
+using OpenTK.Graphics;
+using osu.Framework.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
+using osu.Framework.Allocation;
+
+namespace osu.Game.Overlays.Social
+{
+    public class Header : BrowseHeader<SocialTab>
+    {
+        private OsuSpriteText browser;
+
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"672b51");
+        protected override float TabStripWidth => 438;
+        protected override SocialTab DefaultTab => SocialTab.OnlinePlayers;
+
+        protected override Drawable CreateHeaderText()
+        {
+            return new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Both,
+                Direction = FillDirection.Horizontal,
+                Children = new[]
+                {
+                    new OsuSpriteText
+                    {
+                        Text = "social ",
+                        TextSize = 25,
+                    },
+                    browser = new OsuSpriteText
+                    {
+                        Text = "browser",
+                        TextSize = 25,
+                        Font = @"Exo2.0-Light",
+                    },
+                },
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            browser.Colour = colours.Pink;
+        }
+    }
+}

osu.Game/Overlays/SocialOverlay.cs

@@ -0,0 +1,44 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System.ComponentModel;
+using OpenTK.Graphics;
+using osu.Game.Graphics;
+using osu.Game.Overlays.Browse;
+using osu.Game.Overlays.Social;
+
+namespace osu.Game.Overlays
+{
+    public class SocialOverlay : BrowseOverlay<SocialTab, SocialSortCriteria>
+    {
+        protected override Color4 BackgroundColour => OsuColour.FromHex(@"60284b");
+        protected override Color4 TrianglesColourLight => OsuColour.FromHex(@"672b51");
+        protected override Color4 TrianglesColourDark => OsuColour.FromHex(@"5c2648");
+
+        protected override BrowseFilterControl<SocialSortCriteria> CreateFilterControl() => new FilterControl();
+        protected override BrowseHeader<SocialTab> CreateHeader() => new Header();
+    }
+
+    public enum SocialTab
+    {
+        [Description("Online Players")]
+        OnlinePlayers,
+        [Description("Online Friends")]
+        OnlineFriends,
+        [Description("Online Team Members")]
+        OnlineTeamMembers,
+        [Description("Chat Channels")]
+        ChatChannels,
+    }
+
+    public enum SocialSortCriteria
+    {
+        Name,
+        Rank,
+        Location,
+        [Description("Time Zone")]
+        TimeZone,
+        [Description("World Map")]
+        WorldMap,
+    }
+}

osu.Game/osu.Game.csproj

@@ -440,16 +440,24 @@
     <Compile Include="Overlays\DirectOverlay.cs" />
     <Compile Include="Overlays\Direct\FilterControl.cs" />
     <Compile Include="Overlays\Direct\Header.cs" />
-    <Compile Include="Overlays\Direct\SortTabControl.cs" />
     <Compile Include="Graphics\UserInterface\OsuEnumDropdown.cs" />
     <Compile Include="Overlays\Direct\DirectPanel.cs" />
     <Compile Include="Overlays\Direct\DirectGridPanel.cs" />
     <Compile Include="Overlays\Direct\DirectListPanel.cs" />
     <Compile Include="Database\OnlineWorkingBeatmap.cs" />
     <Compile Include="Database\BeatmapOnlineInfo.cs" />
-    <Compile Include="Overlays\Direct\SlimEnumDropdown.cs" />
     <Compile Include="Graphics\Containers\ReverseDepthFillFlowContainer.cs" />
     <Compile Include="Database\RankStatus.cs" />
+    <Compile Include="Overlays\Browse\BrowseHeader.cs" />
+    <Compile Include="Overlays\Browse\HeaderTabControl.cs" />
+    <Compile Include="Overlays\Social\FilterControl.cs" />
+    <Compile Include="Overlays\Social\Header.cs" />
+    <Compile Include="Overlays\Browse\BrowseFilterControl.cs" />
+    <Compile Include="Overlays\Browse\BrowseOverlay.cs" />
+    <Compile Include="Graphics\UserInterface\PageTabControl.cs" />
+    <Compile Include="Overlays\SocialOverlay.cs" />
+    <Compile Include="Overlays\Browse\SlimEnumDropdown.cs" />
+    <Compile Include="Overlays\Browse\DisplayStyleControl.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\osu-framework\osu.Framework\osu.Framework.csproj">