Merge pull request #18412 from peppy/editor-menu-new-design

Update editor menu area to new design language

osu.Game.Tests/Visual/Editing/TestSceneEditorMenuBar.cs

@@ -2,10 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using NUnit.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osu.Game.Screens.Edit.Components.Menus;
 
 namespace osu.Game.Tests.Visual.Editing
@@ -13,6 +15,9 @@ namespace osu.Game.Tests.Visual.Editing
     [TestFixture]
     public class TestSceneEditorMenuBar : OsuTestScene
     {
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
         public TestSceneEditorMenuBar()
         {
             Add(new Container

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

@@ -2,16 +2,13 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit.Components.Menus
 {
@@ -24,7 +21,12 @@ namespace osu.Game.Screens.Edit.Components.Menus
 
             MaskingContainer.CornerRadius = 0;
             ItemsContainer.Padding = new MarginPadding { Left = 100 };
-            BackgroundColour = Color4Extensions.FromHex("111");
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            BackgroundColour = colourProvider.Background3;
         }
 
         protected override Framework.Graphics.UserInterface.Menu CreateSubMenu() => new SubMenu();
@@ -33,29 +35,26 @@ namespace osu.Game.Screens.Edit.Components.Menus
 
         private class DrawableEditorBarMenuItem : DrawableOsuMenuItem
         {
-            private BackgroundBox background;
-
             public DrawableEditorBarMenuItem(MenuItem item)
                 : base(item)
             {
-                Anchor = Anchor.CentreLeft;
-                Origin = Anchor.CentreLeft;
-
-                StateChanged += stateChanged;
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colourProvider)
             {
-                ForegroundColour = colours.BlueLight;
+                ForegroundColour = colourProvider.Light3;
-                BackgroundColour = Color4.Transparent;
+                BackgroundColour = colourProvider.Background2;
-                ForegroundColourHover = Color4.White;
+                ForegroundColourHover = colourProvider.Content1;
-                BackgroundColourHover = colours.Gray3;
+                BackgroundColourHover = colourProvider.Background1;
             }
 
-            public override void SetFlowDirection(Direction direction)
+            protected override void LoadComplete()
             {
-                AutoSizeAxes = Axes.Both;
+                base.LoadComplete();
+
+                Foreground.Anchor = Anchor.CentreLeft;
+                Foreground.Origin = Anchor.CentreLeft;
             }
 
             protected override void UpdateBackgroundColour()
@@ -74,54 +73,16 @@ namespace osu.Game.Screens.Edit.Components.Menus
                     base.UpdateForegroundColour();
             }
 
-            private void stateChanged(MenuItemState newState)
-            {
-                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()
                 {
-                    NormalText.Font = NormalText.Font.With(size: 14);
+                    NormalText.Font = OsuFont.TorusAlternate;
-                    BoldText.Font = BoldText.Font.With(size: 14);
+                    BoldText.Font = OsuFont.TorusAlternate.With(weight: FontWeight.Bold);
-                    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
@@ -129,14 +90,15 @@ namespace osu.Game.Screens.Edit.Components.Menus
             public SubMenu()
                 : base(Direction.Vertical)
             {
-                OriginPosition = new Vector2(5, 1);
+                ItemsContainer.Padding = new MarginPadding();
-                ItemsContainer.Padding = new MarginPadding { Top = 5, Bottom = 5 };
+
+                MaskingContainer.CornerRadius = 0;
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load(OverlayColourProvider colourProvider)
             {
-                BackgroundColour = colours.Gray3;
+                BackgroundColour = colourProvider.Background2;
             }
 
             protected override Framework.Graphics.UserInterface.Menu CreateSubMenu() => new SubMenu();
@@ -147,9 +109,27 @@ namespace osu.Game.Screens.Edit.Components.Menus
                 {
                     case EditorMenuItemSpacer spacer:
                         return new DrawableSpacer(spacer);
+
+                    default:
+                        return new EditorMenuItem(item);
+                }
             }
 
-                return base.CreateDrawableMenuItem(item);
+            private class EditorMenuItem : DrawableOsuMenuItem
+            {
+                public EditorMenuItem(MenuItem item)
+                    : base(item)
+                {
+                }
+
+                [BackgroundDependencyLoader]
+                private void load(OverlayColourProvider colourProvider)
+                {
+                    BackgroundColour = colourProvider.Background2;
+                    BackgroundColourHover = colourProvider.Background1;
+
+                    Foreground.Padding = new MarginPadding { Vertical = 2 };
+                }
             }
 
             private class DrawableSpacer : DrawableOsuMenuItem
@@ -157,6 +137,7 @@ namespace osu.Game.Screens.Edit.Components.Menus
                 public DrawableSpacer(MenuItem item)
                     : base(item)
                 {
+                    Scale = new Vector2(1, 0.3f);
                 }
 
                 protected override bool OnHover(HoverEvent e) => true;

osu.Game/Screens/Edit/Components/Menus/EditorScreenSwitcherControl.cs

@@ -2,42 +2,38 @@
 // See the LICENCE file in the repository root for full licence text.
 
 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 osu.Game.Overlays;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Screens.Edit.Components.Menus
 {
-    public class ScreenSelectionTabControl : OsuTabControl<EditorScreenMode>
+    public class EditorScreenSwitcherControl : OsuTabControl<EditorScreenMode>
     {
-        public ScreenSelectionTabControl()
+        public EditorScreenSwitcherControl()
         {
             AutoSizeAxes = Axes.X;
             RelativeSizeAxes = Axes.Y;
 
             TabContainer.RelativeSizeAxes &= ~Axes.X;
             TabContainer.AutoSizeAxes = Axes.X;
-            TabContainer.Padding = new MarginPadding();
+            TabContainer.Padding = new MarginPadding(10);
-
-            AddInternal(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)
+        private void load(OverlayColourProvider colourProvider)
         {
-            AccentColour = colours.Yellow;
+            AccentColour = colourProvider.Light3;
+
+            AddInternal(new Box
+            {
+                RelativeSizeAxes = Axes.Both,
+                Colour = colourProvider.Background2,
+            });
         }
 
         protected override Dropdown<EditorScreenMode> CreateDropdown() => null;
@@ -54,6 +50,15 @@ namespace osu.Game.Screens.Edit.Components.Menus
                 Text.Margin = new MarginPadding();
                 Text.Anchor = Anchor.CentreLeft;
                 Text.Origin = Anchor.CentreLeft;
+
+                Text.Font = OsuFont.TorusAlternate;
+
+                Bar.Expire();
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
             }
 
             protected override void OnActivated()

osu.Game/Screens/Edit/Editor.cs

@@ -278,7 +278,7 @@ namespace osu.Game.Screens.Edit
                                     }
                                 }
                             },
-                            new ScreenSelectionTabControl
+                            new EditorScreenSwitcherControl
                             {
                                 Anchor = Anchor.BottomRight,
                                 Origin = Anchor.BottomRight,