Prerequisite changes for song select v2 design work

osu.Game.Tests/Visual/SongSelectV2/SongSelectComponentsTestScene.cs

@@ -4,6 +4,7 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
 using osu.Framework.Testing;
 using osu.Game.Graphics.Cursor;
 using osu.Game.Overlays;
@@ -24,21 +25,27 @@ public abstract partial class SongSelectComponentsTestScene : OsuManualInputMana
         private Container? resizeContainer;
         private float relativeWidth;
 
+        protected virtual Anchor ComponentAnchor => Anchor.TopLeft;
+        protected virtual float InitialRelativeWidth => 0.5f;
+
         [BackgroundDependencyLoader]
         private void load()
         {
-            base.Content.Child = resizeContainer = new Container
+            base.Content.Child = new PopoverContainer
             {
-                RelativeSizeAxes = Axes.X,
-                AutoSizeAxes = Axes.Y,
-                Width = relativeWidth,
-                Children = new Drawable[]
+                RelativeSizeAxes = Axes.Both,
+                Child = resizeContainer = new Container
                 {
-                    Content
+                    Anchor = ComponentAnchor,
+                    Origin = ComponentAnchor,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Width = relativeWidth,
+                    Child = Content
                 }
             };
 
-            AddSliderStep("change relative width", 0, 1f, 1f, v =>
+            AddSliderStep("change relative width", 0, 1f, InitialRelativeWidth, v =>
             {
                 if (resizeContainer != null)
                     resizeContainer.Width = v;

osu.Game/Graphics/UserInterfaceV2/ShearedDropdown.cs

@@ -36,16 +36,6 @@ public ShearedDropdown(LocalisableString label)
             }
         }
 
-        protected override void Update()
-        {
-            base.Update();
-
-            var header = (ShearedDropdownHeader)Header;
-            var menu = (ShearedDropdownMenu)Menu;
-
-            menu.Padding = new MarginPadding { Left = header.LabelContainer.DrawWidth - 10f, Right = 6f };
-        }
-
         public bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
         {
             if (e.Repeat) return false;
@@ -62,16 +52,15 @@ public void OnReleased(KeyBindingReleaseEvent<GlobalAction> e)
 
         protected partial class ShearedDropdownMenu : OsuDropdown<T>.OsuDropdownMenu
         {
-            public new MarginPadding Padding
-            {
-                get => base.Padding;
-                set => base.Padding = value;
-            }
-
             public ShearedDropdownMenu()
             {
                 Shear = OsuGame.SHEAR;
                 Margin = new MarginPadding { Top = 5f };
+                Padding = new MarginPadding
+                {
+                    Left = -6f,
+                    Right = 6f
+                };
             }
 
             protected override DrawableDropdownMenuItem CreateDrawableDropdownMenuItem(MenuItem item) => new ShearedMenuItem(item)
@@ -92,8 +81,6 @@ public ShearedMenuItem(MenuItem item)
 
         public partial class ShearedDropdownHeader : DropdownHeader
         {
-            private const float corner_radius = 5f;
-
             private LocalisableString label;
 
             protected override LocalisableString Label
@@ -127,7 +114,7 @@ public LocalisableString LeftSideLabel
             public ShearedDropdownHeader()
             {
                 Shear = OsuGame.SHEAR;
-                CornerRadius = corner_radius;
+                CornerRadius = ShearedButton.CORNER_RADIUS;
                 Masking = true;
 
                 Foreground.Children = new Drawable[]
@@ -148,7 +135,8 @@ public ShearedDropdownHeader()
                             {
                                 LabelContainer = new Container
                                 {
-                                    CornerRadius = corner_radius,
+                                    Depth = float.MaxValue,
+                                    CornerRadius = ShearedButton.CORNER_RADIUS,
                                     Masking = true,
                                     AutoSizeAxes = Axes.Both,
                                     Children = new Drawable[]
@@ -159,8 +147,13 @@ public ShearedDropdownHeader()
                                         },
                                         labelText = new OsuSpriteText
                                         {
-                                            Margin = new MarginPadding { Horizontal = 10f, Vertical = 8f },
-                                            Font = OsuFont.Torus.With(size: 16.8f, weight: FontWeight.SemiBold),
+                                            Margin = new MarginPadding
+                                            {
+                                                Horizontal = 10f,
+                                                // Chosen specifically so the height of these dropdowns matches ShearedToggleButton (30).
+                                                Vertical = 7f
+                                            },
+                                            Font = OsuFont.Style.Body.With(weight: FontWeight.SemiBold),
                                             Shear = -OsuGame.SHEAR,
                                         },
                                     },
@@ -180,7 +173,7 @@ public ShearedDropdownHeader()
                                             Anchor = Anchor.CentreLeft,
                                             Origin = Anchor.CentreLeft,
                                             Padding = new MarginPadding { Right = 15f },
-                                            Font = OsuFont.Torus.With(size: 16.8f, weight: FontWeight.SemiBold),
+                                            Font = OsuFont.Style.Body,
                                             RelativeSizeAxes = Axes.X,
                                         },
                                         chevron = new SpriteIcon
@@ -197,8 +190,6 @@ public ShearedDropdownHeader()
                         }
                     },
                 };
-
-                AddInternal(LabelContainer.CreateProxy());
             }
 
             [BackgroundDependencyLoader]
@@ -223,7 +214,7 @@ protected override void Update()
                 searchBar.Padding = new MarginPadding { Left = LabelContainer.DrawWidth };
 
                 // By limiting the width we avoid this box showing up as an outline around the drawables that are on top of it.
-                Background.Padding = new MarginPadding { Left = LabelContainer.DrawWidth - corner_radius };
+                Background.Padding = new MarginPadding { Left = LabelContainer.DrawWidth - ShearedButton.CORNER_RADIUS };
             }
 
             protected override bool OnHover(HoverEvent e)

osu.Game/Screens/SelectV2/SongSelect.cs

@@ -22,6 +22,10 @@ public abstract partial class SongSelect : OsuScreen
     {
         private const float logo_scale = 0.4f;
 
+        public const float WEDGE_CONTENT_MARGIN = CORNER_RADIUS_HIDE_OFFSET + OsuGame.SCREEN_EDGE_MARGIN;
+        public const float CORNER_RADIUS_HIDE_OFFSET = 20f;
+        public const float ENTER_DURATION = 600;
+
         private readonly ModSelectOverlay modSelectOverlay = new ModSelectOverlay(OverlayColourScheme.Aquamarine)
         {
             ShowPresets = true,

osu.Game/Screens/SelectV2/WedgeBackground.cs

@@ -0,0 +1,54 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the MIT Licence.
+// 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.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+
+namespace osu.Game.Screens.SelectV2
+{
+    internal partial class WedgeBackground : CompositeDrawable
+    {
+        public float StartAlpha { get; init; } = 0.9f;
+
+        public float FinalAlpha { get; init; } = 0.6f;
+
+        public float WidthForGradient { get; init; } = 0.3f;
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Blending = BlendingParameters.Additive,
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 0.6f,
+                    Alpha = 0.5f,
+                    Colour = ColourInfo.GradientHorizontal(colourProvider.Background2, colourProvider.Background2.Opacity(0)),
+                },
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 1 - WidthForGradient,
+                    Colour = colourProvider.Background5.Opacity(StartAlpha),
+                },
+                new Box
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    RelativeSizeAxes = Axes.Both,
+                    Width = WidthForGradient,
+                    Colour = ColourInfo.GradientHorizontal(colourProvider.Background5.Opacity(StartAlpha), colourProvider.Background5.Opacity(FinalAlpha)),
+                },
+            };
+        }
+    }
+}