Add screen selection tabcontrol to the editor

osu.Game/Graphics/UserInterface/OsuTabControl.cs

@@ -59,7 +59,7 @@ public Color4 AccentColour
         public class OsuTabItem : TabItem<T>, IHasAccentColour
         {
             protected readonly SpriteText Text;
-            private readonly Box box;
+            protected readonly Box Bar;
 
             private Color4 accentColour;
             public Color4 AccentColour
@@ -77,13 +77,13 @@ public Color4 AccentColour
 
             private void fadeActive()
             {
-                box.FadeIn(transition_length, Easing.OutQuint);
+                Bar.FadeIn(transition_length, Easing.OutQuint);
                 Text.FadeColour(Color4.White, transition_length, Easing.OutQuint);
             }
 
             private void fadeInactive()
             {
-                box.FadeOut(transition_length, Easing.OutQuint);
+                Bar.FadeOut(transition_length, Easing.OutQuint);
                 Text.FadeColour(AccentColour, transition_length, Easing.OutQuint);
             }
 
@@ -123,7 +123,7 @@ public OsuTabItem(T value) : base(value)
                         TextSize = 14,
                         Font = @"Exo2.0-Bold", // Font should only turn bold when active?
                     },
-                    box = new Box
+                    Bar = new Box
                     {
                         RelativeSizeAxes = Axes.X,
                         Height = 1,

osu.Game/Screens/Edit/Editor.cs

@@ -32,16 +32,11 @@ public Editor()
                 Height = 40,
                 Children = new Drawable[]
                 {
-                    new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = OsuColour.FromHex("111")
-                    },
                     new EditorMenuBar
                     {
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
-                        X = 100,
+                        RelativeSizeAxes = Axes.Both,
                         Items = new[]
                         {
                             new EditorMenuBarItem("File")

osu.Game/Screens/Edit/Menus/EditorMenuBar.cs

@@ -19,8 +19,20 @@ public class EditorMenuBar : OsuMenu
         public EditorMenuBar()
             : base(Direction.Horizontal, true)
         {
-            ItemsContainer.Padding = new MarginPadding(0);
-            BackgroundColour = Color4.Transparent;
+            RelativeSizeAxes = Axes.X;
+
+            ItemsContainer.Padding = new MarginPadding { Left = 100 };
+            BackgroundColour = OsuColour.FromHex("111");
+
+            AddRangeInternal(new Drawable[]
+            {
+                new ScreenSelectionTabControl
+                {
+                    Anchor = Anchor.BottomRight,
+                    Origin = Anchor.BottomRight,
+                    X = -15
+                }
+            });
         }
 
         protected override Framework.Graphics.UserInterface.Menu CreateSubMenu() => new SubMenu();
@@ -29,52 +41,94 @@ public EditorMenuBar()
 
         private class DrawableEditorBarMenuItem : DrawableOsuMenuItem
         {
-            private Color4 openedForegroundColour;
-            private Color4 openedBackgroundColour;
+            private BackgroundBox background;
 
             public DrawableEditorBarMenuItem(MenuItem item)
                 : base(item)
             {
+                Anchor = Anchor.CentreLeft;
+                Origin = Anchor.CentreLeft;
+
+                StateChanged += stateChanged;
             }
 
             [BackgroundDependencyLoader]
             private void load(OsuColour colours)
             {
-                ForegroundColour = ForegroundColourHover = colours.BlueLight;
-                BackgroundColour = BackgroundColourHover = Color4.Transparent;
-                openedForegroundColour = Color4.White;
-                openedBackgroundColour = colours.Gray3;
+                ForegroundColour = colours.BlueLight;
+                BackgroundColour = Color4.Transparent;
+                ForegroundColourHover = Color4.White;
+                BackgroundColourHover = colours.Gray3;
+            }
+
+            public override void SetFlowDirection(Direction direction)
+            {
+                AutoSizeAxes = Axes.Both;
             }
 
             protected override void UpdateBackgroundColour()
             {
                 if (State == MenuItemState.Selected)
-                    Background.FadeColour(openedBackgroundColour);
+                    Background.FadeColour(BackgroundColourHover);
                 else
                     base.UpdateBackgroundColour();
             }
 
             protected override void UpdateForegroundColour()
             {
                 if (State == MenuItemState.Selected)
-                    Foreground.FadeColour(openedForegroundColour);
+                    Foreground.FadeColour(ForegroundColourHover);
                 else
                     base.UpdateForegroundColour();
             }
 
-            protected override Drawable CreateBackground() => new Container
+            private void stateChanged(MenuItemState newState)
             {
-                RelativeSizeAxes = Axes.Both,
-                Masking = true,
-                Child = new Container
+                if (newState == MenuItemState.Selected)
+                    background.Expand();
+                else
+                    background.Contract();
+            }
+
+            protected override Drawable CreateBackground() => background = new BackgroundBox();
+            protected override DrawableOsuMenuItem.TextContainer CreateTextContainer() => new TextContainer();
+
+            private new class TextContainer : DrawableOsuMenuItem.TextContainer
+            {
+                public TextContainer()
                 {
-                    RelativeSizeAxes = Axes.Both,
-                    Height = 2,
-                    Masking = true,
-                    CornerRadius = 4,
-                    Child = new Box { RelativeSizeAxes = Axes.Both }
+                    NormalText.TextSize = BoldText.TextSize = 14;
+                    NormalText.Margin = BoldText.Margin = new MarginPadding { Horizontal = 10, Vertical = MARGIN_VERTICAL };
                 }
-            };
+            }
+
+            private class BackgroundBox : CompositeDrawable
+            {
+                private readonly Container innerBackground;
+
+                public BackgroundBox()
+                {
+                    RelativeSizeAxes = Axes.Both;
+                    Masking = true;
+                    InternalChild = innerBackground = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Masking = true,
+                        CornerRadius = 4,
+                        Child = new Box { RelativeSizeAxes = Axes.Both }
+                    };
+                }
+
+                /// <summary>
+                /// Expands the background such that it doesn't show the bottom corners.
+                /// </summary>
+                public void Expand() => innerBackground.Height = 2;
+
+                /// <summary>
+                /// Contracts the background such that it shows the bottom corners.
+                /// </summary>
+                public void Contract() => innerBackground.Height = 1;
+            }
         }
 
         private class SubMenu : OsuMenu

osu.Game/Screens/Edit/Menus/ScreenSelectionTabControl.cs

@@ -0,0 +1,84 @@
+// 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.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+using OpenTK;
+
+namespace osu.Game.Screens.Edit.Menus
+{
+    public class ScreenSelectionTabControl : OsuTabControl<EditorScreenMode>
+    {
+        public ScreenSelectionTabControl()
+        {
+            AutoSizeAxes = Axes.X;
+            RelativeSizeAxes = Axes.Y;
+
+            TabContainer.RelativeSizeAxes &= ~Axes.X;
+            TabContainer.AutoSizeAxes = Axes.X;
+            TabContainer.Padding = new MarginPadding();
+
+            Add(new Box
+            {
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.BottomLeft,
+                RelativeSizeAxes = Axes.X,
+                Height = 1,
+                Colour = Color4.White.Opacity(0.2f),
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            AccentColour = colours.Yellow;
+        }
+
+        protected override Dropdown<EditorScreenMode> CreateDropdown() => null;
+
+        protected override TabItem<EditorScreenMode> CreateTabItem(EditorScreenMode value) => new TabItem(value);
+
+        private new class TabItem : OsuTabItem
+        {
+            private const float transition_length = 250;
+
+            public TabItem(EditorScreenMode value)
+                : base(value)
+            {
+                Text.Margin = new MarginPadding();
+                Text.Anchor = Anchor.CentreLeft;
+                Text.Origin = Anchor.CentreLeft;
+            }
+
+            protected override void OnActivated()
+            {
+                base.OnActivated();
+                Bar.ScaleTo(new Vector2(1, 5), transition_length, Easing.OutQuint);
+            }
+
+            protected override void OnDeactivated()
+            {
+                base.OnDeactivated();
+                Bar.ScaleTo(Vector2.One, transition_length, Easing.OutQuint);
+            }
+        }
+    }
+
+    public enum EditorScreenMode
+    {
+        [System.ComponentModel.Description("compose")]
+        Compose,
+        [System.ComponentModel.Description("design")]
+        Design,
+        [System.ComponentModel.Description("timing")]
+        Timing,
+        [System.ComponentModel.Description("song")]
+        SongSetup
+    }
+}