Merge pull request #17894 from peppy/sheared-overlay-container

Split out the base design of sheared overlay into its own abstract class

osu.Game.Tests/Visual/UserInterface/TestSceneShearedOverlayHeader.cs

@@ -10,19 +10,19 @@ using osu.Game.Overlays;
 namespace osu.Game.Tests.Visual.UserInterface
 {
     [TestFixture]
-    public class TestScenePopupScreenTitle : OsuTestScene
+    public class TestSceneShearedOverlayHeader : OsuTestScene
     {
         [Cached]
         private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
 
         [Test]
-        public void TestPopupScreenTitle()
+        public void TestShearedOverlayHeader()
         {
             AddStep("create content", () =>
             {
-                Child = new PopupScreenTitle
+                Child = new ShearedOverlayHeader
                 {
-                    Title = "Popup Screen Title",
+                    Title = "Sheared overlay header",
                     Description = string.Join(" ", Enumerable.Repeat("This is a description.", 20)),
                     Close = () => { }
                 };
@@ -34,9 +34,9 @@ namespace osu.Game.Tests.Visual.UserInterface
         {
             AddStep("create content", () =>
             {
-                Child = new PopupScreenTitle
+                Child = new ShearedOverlayHeader
                 {
-                    Title = "Popup Screen Title",
+                    Title = "Sheared overlay header",
                     Description = "This is a description."
                 };
             });

osu.Game/Graphics/UserInterface/ShearedOverlayHeader.cs

@@ -19,8 +19,10 @@ using osuTK;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class PopupScreenTitle : CompositeDrawable
+    public class ShearedOverlayHeader : CompositeDrawable
     {
+        public const float HEIGHT = main_area_height + 2 * corner_radius;
+
         public LocalisableString Title
         {
             set => titleSpriteText.Text = value;
@@ -48,7 +50,7 @@ namespace osu.Game.Graphics.UserInterface
         private readonly OsuTextFlowContainer descriptionText;
         private readonly IconButton closeButton;
 
-        public PopupScreenTitle()
+        public ShearedOverlayHeader()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
@@ -67,7 +69,7 @@ namespace osu.Game.Graphics.UserInterface
                     underlayContainer = new Container
                     {
                         RelativeSizeAxes = Axes.X,
-                        Height = main_area_height + 2 * corner_radius,
+                        Height = HEIGHT,
                         CornerRadius = corner_radius,
                         Masking = true,
                         BorderThickness = 2,

osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs

@@ -58,7 +58,7 @@ namespace osu.Game.Overlays.Mods
                 AutoSizeAxes = Axes.X,
                 Masking = true,
                 CornerRadius = ModPanel.CORNER_RADIUS,
-                Shear = new Vector2(ModPanel.SHEAR_X, 0),
+                Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0),
                 Children = new Drawable[]
                 {
                     underlayBackground = new Box
@@ -98,7 +98,7 @@ namespace osu.Game.Overlays.Mods
                                             Anchor = Anchor.Centre,
                                             Origin = Anchor.Centre,
                                             Margin = new MarginPadding { Horizontal = 18 },
-                                            Shear = new Vector2(-ModPanel.SHEAR_X, 0),
+                                            Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
                                             Text = "Difficulty Multiplier",
                                             Font = OsuFont.Default.With(size: 17, weight: FontWeight.SemiBold)
                                         }
@@ -109,7 +109,7 @@ namespace osu.Game.Overlays.Mods
                                     AutoSizeAxes = Axes.Both,
                                     Anchor = Anchor.Centre,
                                     Origin = Anchor.Centre,
-                                    Shear = new Vector2(-ModPanel.SHEAR_X, 0),
+                                    Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
                                     Direction = FillDirection.Horizontal,
                                     Spacing = new Vector2(2, 0),
                                     Children = new Drawable[]

osu.Game/Overlays/Mods/ModColumn.cs

@@ -79,7 +79,7 @@ namespace osu.Game.Overlays.Mods
 
             Width = 320;
             RelativeSizeAxes = Axes.Y;
-            Shear = new Vector2(ModPanel.SHEAR_X, 0);
+            Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0);
 
             Container controlContainer;
             InternalChildren = new Drawable[]
@@ -113,7 +113,7 @@ namespace osu.Game.Overlays.Mods
                                     AutoSizeAxes = Axes.Y,
                                     Anchor = Anchor.CentreLeft,
                                     Origin = Anchor.CentreLeft,
-                                    Shear = new Vector2(-ModPanel.SHEAR_X, 0),
+                                    Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
                                     Padding = new MarginPadding
                                     {
                                         Horizontal = 17,
@@ -193,7 +193,7 @@ namespace osu.Game.Overlays.Mods
                     Scale = new Vector2(0.8f),
                     RelativeSizeAxes = Axes.X,
                     LabelText = "Enable All",
-                    Shear = new Vector2(-ModPanel.SHEAR_X, 0)
+                    Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0)
                 });
                 panelFlow.Padding = new MarginPadding
                 {
@@ -260,7 +260,7 @@ namespace osu.Game.Overlays.Mods
 
             var panels = newMods.Select(mod => new ModPanel(mod)
             {
-                Shear = new Vector2(-ModPanel.SHEAR_X, 0)
+                Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0)
             });
 
             Task? loadTask;

osu.Game/Overlays/Mods/ModPanel.cs

@@ -42,7 +42,6 @@ namespace osu.Game.Overlays.Mods
 
         protected const double TRANSITION_DURATION = 150;
 
-        public const float SHEAR_X = 0.2f;
         public const float CORNER_RADIUS = 7;
 
         protected const float HEIGHT = 42;
@@ -67,7 +66,7 @@ namespace osu.Game.Overlays.Mods
             Content.Masking = true;
             Content.CornerRadius = CORNER_RADIUS;
             Content.BorderThickness = 2;
-            Content.Shear = new Vector2(SHEAR_X, 0);
+            Content.Shear = new Vector2(ShearedOverlayContainer.SHEAR, 0);
 
             Children = new Drawable[]
             {
@@ -83,7 +82,7 @@ namespace osu.Game.Overlays.Mods
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
                         Active = { BindTarget = Active },
-                        Shear = new Vector2(-SHEAR_X, 0),
+                        Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
                         Scale = new Vector2(HEIGHT / ModSwitchSmall.DEFAULT_SIZE)
                     }
                 },
@@ -116,10 +115,10 @@ namespace osu.Game.Overlays.Mods
                                     {
                                         Text = mod.Name,
                                         Font = OsuFont.TorusAlternate.With(size: 18, weight: FontWeight.SemiBold),
-                                        Shear = new Vector2(-SHEAR_X, 0),
+                                        Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0),
                                         Margin = new MarginPadding
                                         {
-                                            Left = -18 * SHEAR_X
+                                            Left = -18 * ShearedOverlayContainer.SHEAR
                                         }
                                     },
                                     new OsuSpriteText
@@ -128,7 +127,7 @@ namespace osu.Game.Overlays.Mods
                                         Font = OsuFont.Default.With(size: 12),
                                         RelativeSizeAxes = Axes.X,
                                         Truncate = true,
-                                        Shear = new Vector2(-SHEAR_X, 0)
+                                        Shear = new Vector2(-ShearedOverlayContainer.SHEAR, 0)
                                     }
                                 }
                             }

osu.Game/Overlays/Mods/ModSelectScreen.cs

@@ -9,7 +9,6 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Framework.Layout;
 using osu.Game.Configuration;
@@ -21,158 +20,32 @@ using osuTK.Input;
 
 namespace osu.Game.Overlays.Mods
 {
-    public class ModSelectScreen : OsuFocusedOverlayContainer
+    public class ModSelectScreen : ShearedOverlayContainer
     {
-        [Cached]
+        protected override OverlayColourScheme ColourScheme => OverlayColourScheme.Green;
-        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
 
         [Cached]
         public Bindable<IReadOnlyList<Mod>> SelectedMods { get; private set; } = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
 
-        protected override bool StartHidden => true;
-
         private readonly BindableBool customisationVisible = new BindableBool();
 
         private DifficultyMultiplierDisplay multiplierDisplay;
         private ModSettingsArea modSettingsArea;
         private FillFlowContainer<ModColumn> columnFlow;
-        private GridContainer grid;
-        private Container mainContent;
-
-        private PopupScreenTitle header;
-        private Container footer;
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            RelativeSizeAxes = Axes.Both;
+            Header.Title = "Mod Select";
-            RelativePositionAxes = Axes.Both;
+            Header.Description = "Mods provide different ways to enjoy gameplay. Some have an effect on the score you can achieve during ranked play. Others are just for fun.";
 
-            InternalChildren = new Drawable[]
+            AddRange(new Drawable[]
             {
-                mainContent = new Container
+                new ClickToReturnContainer
                 {
-                    Origin = Anchor.BottomCentre,
-                    Anchor = Anchor.BottomCentre,
                     RelativeSizeAxes = Axes.Both,
-                    Children = new Drawable[]
+                    HandleMouse = { BindTarget = customisationVisible },
-                    {
+                    OnClicked = () => customisationVisible.Value = false
-                        grid = new GridContainer
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            RowDimensions = new[]
-                            {
-                                new Dimension(GridSizeMode.AutoSize),
-                                new Dimension(GridSizeMode.AutoSize),
-                                new Dimension(),
-                                new Dimension(GridSizeMode.Absolute, 75),
-                            },
-                            Content = new[]
-                            {
-                                new Drawable[]
-                                {
-                                    header = new PopupScreenTitle
-                                    {
-                                        Anchor = Anchor.TopCentre,
-                                        Origin = Anchor.TopCentre,
-                                        Title = "Mod Select",
-                                        Description = "Mods provide different ways to enjoy gameplay. Some have an effect on the score you can achieve during ranked play. Others are just for fun.",
-                                        Close = Hide
-                                    }
-                                },
-                                new Drawable[]
-                                {
-                                    new Container
-                                    {
-                                        Anchor = Anchor.Centre,
-                                        Origin = Anchor.Centre,
-                                        AutoSizeAxes = Axes.X,
-                                        RelativePositionAxes = Axes.X,
-                                        X = 0.3f,
-                                        Height = DifficultyMultiplierDisplay.HEIGHT,
-                                        Margin = new MarginPadding
-                                        {
-                                            Horizontal = 100,
-                                            Vertical = 10
-                                        },
-                                        Child = multiplierDisplay = new DifficultyMultiplierDisplay
-                                        {
-                                            Anchor = Anchor.Centre,
-                                            Origin = Anchor.Centre
-                                        }
-                                    }
-                                },
-                                new Drawable[]
-                                {
-                                    new Container
-                                    {
-                                        Depth = float.MaxValue,
-                                        RelativeSizeAxes = Axes.Both,
-                                        RelativePositionAxes = Axes.Both,
-                                        Children = new Drawable[]
-                                        {
-                                            new OsuScrollContainer(Direction.Horizontal)
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Masking = false,
-                                                ClampExtension = 100,
-                                                ScrollbarOverlapsContent = false,
-                                                Child = columnFlow = new ModColumnContainer
-                                                {
-                                                    Direction = FillDirection.Horizontal,
-                                                    RelativeSizeAxes = Axes.Y,
-                                                    AutoSizeAxes = Axes.X,
-                                                    Spacing = new Vector2(10, 0),
-                                                    Margin = new MarginPadding { Right = 70 },
-                                                    Children = new[]
-                                                    {
-                                                        new ModColumn(ModType.DifficultyReduction, false, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P }),
-                                                        new ModColumn(ModType.DifficultyIncrease, false, new[] { Key.A, Key.S, Key.D, Key.F, Key.G, Key.H, Key.J, Key.K, Key.L }),
-                                                        new ModColumn(ModType.Automation, false, new[] { Key.Z, Key.X, Key.C, Key.V, Key.B, Key.N, Key.M }),
-                                                        new ModColumn(ModType.Conversion, false),
-                                                        new ModColumn(ModType.Fun, false)
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                },
-                                new[] { Empty() }
-                            }
-                        },
-                        footer = new Container
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            Anchor = Anchor.BottomCentre,
-                            Origin = Anchor.BottomCentre,
-                            Children = new Drawable[]
-                            {
-                                new Box
-                                {
-                                    RelativeSizeAxes = Axes.X,
-                                    Height = 50,
-                                    Anchor = Anchor.BottomCentre,
-                                    Origin = Anchor.BottomCentre,
-                                    Colour = colourProvider.Background5
-                                },
-                                new ShearedToggleButton(200)
-                                {
-                                    Anchor = Anchor.BottomLeft,
-                                    Origin = Anchor.BottomLeft,
-                                    Margin = new MarginPadding { Vertical = 14, Left = 70 },
-                                    Text = "Mod Customisation",
-                                    Active = { BindTarget = customisationVisible }
-                                }
-                            }
-                        },
-                        new ClickToReturnContainer
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            HandleMouse = { BindTarget = customisationVisible },
-                            OnClicked = () => customisationVisible.Value = false
-                        }
-                    }
                 },
                 modSettingsArea = new ModSettingsArea
                 {
@@ -180,9 +53,73 @@ namespace osu.Game.Overlays.Mods
                     Origin = Anchor.BottomCentre,
                     Height = 0
                 }
-            };
+            });
 
-            columnFlow.Shear = new Vector2(ModPanel.SHEAR_X, 0);
+            MainAreaContent.AddRange(new Drawable[]
+            {
+                new Container
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    AutoSizeAxes = Axes.X,
+                    Height = DifficultyMultiplierDisplay.HEIGHT,
+                    Margin = new MarginPadding
+                    {
+                        Horizontal = 100,
+                    },
+                    Child = multiplierDisplay = new DifficultyMultiplierDisplay
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre
+                    }
+                },
+                new Container
+                {
+                    Padding = new MarginPadding
+                    {
+                        Top = DifficultyMultiplierDisplay.HEIGHT + PADDING,
+                    },
+                    Depth = float.MaxValue,
+                    RelativeSizeAxes = Axes.Both,
+                    RelativePositionAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        new OsuScrollContainer(Direction.Horizontal)
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Masking = false,
+                            ClampExtension = 100,
+                            ScrollbarOverlapsContent = false,
+                            Child = columnFlow = new ModColumnContainer
+                            {
+                                Direction = FillDirection.Horizontal,
+                                Shear = new Vector2(SHEAR, 0),
+                                RelativeSizeAxes = Axes.Y,
+                                AutoSizeAxes = Axes.X,
+                                Spacing = new Vector2(10, 0),
+                                Margin = new MarginPadding { Right = 70 },
+                                Children = new[]
+                                {
+                                    new ModColumn(ModType.DifficultyReduction, false, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P }),
+                                    new ModColumn(ModType.DifficultyIncrease, false, new[] { Key.A, Key.S, Key.D, Key.F, Key.G, Key.H, Key.J, Key.K, Key.L }),
+                                    new ModColumn(ModType.Automation, false, new[] { Key.Z, Key.X, Key.C, Key.V, Key.B, Key.N, Key.M }),
+                                    new ModColumn(ModType.Conversion, false),
+                                    new ModColumn(ModType.Fun, false)
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+
+            Footer.Add(new ShearedToggleButton(200)
+            {
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.BottomLeft,
+                Margin = new MarginPadding { Vertical = PADDING, Left = 70 },
+                Text = "Mod Customisation",
+                Active = { BindTarget = customisationVisible }
+            });
         }
 
         protected override void LoadComplete()
@@ -247,12 +184,12 @@ namespace osu.Game.Overlays.Mods
         {
             const double transition_duration = 300;
 
-            grid.FadeColour(customisationVisible.Value ? Colour4.Gray : Colour4.White, transition_duration, Easing.InOutCubic);
+            MainAreaContent.FadeColour(customisationVisible.Value ? Colour4.Gray : Colour4.White, transition_duration, Easing.InOutCubic);
 
             float modAreaHeight = customisationVisible.Value ? ModSettingsArea.HEIGHT : 0;
 
             modSettingsArea.ResizeHeightTo(modAreaHeight, transition_duration, Easing.InOutCubic);
-            mainContent.TransformTo(nameof(Margin), new MarginPadding { Bottom = modAreaHeight }, transition_duration, Easing.InOutCubic);
+            TopLevelContent.MoveToY(-modAreaHeight, transition_duration, Easing.InOutCubic);
         }
 
         private bool selectionBindableSyncInProgress;
@@ -287,10 +224,6 @@ namespace osu.Game.Overlays.Mods
             const double fade_in_duration = 400;
 
             base.PopIn();
-            this.FadeIn(fade_in_duration, Easing.OutQuint);
-
-            header.MoveToY(0, fade_in_duration, Easing.OutQuint);
-            footer.MoveToY(0, fade_in_duration, Easing.OutQuint);
 
             multiplierDisplay
                 .Delay(fade_in_duration * 0.65f)
@@ -311,15 +244,11 @@ namespace osu.Game.Overlays.Mods
             const double fade_out_duration = 500;
 
             base.PopOut();
-            this.FadeOut(fade_out_duration, Easing.OutQuint);
 
             multiplierDisplay
                 .FadeOut(fade_out_duration / 2, Easing.OutQuint)
                 .ScaleTo(0.75f, fade_out_duration, Easing.OutQuint);
 
-            header.MoveToY(-header.DrawHeight, fade_out_duration, Easing.OutQuint);
-            footer.MoveToY(footer.DrawHeight, fade_out_duration, Easing.OutQuint);
-
             for (int i = 0; i < columnFlow.Count; i++)
             {
                 const float distance = 700;
@@ -355,7 +284,7 @@ namespace osu.Game.Overlays.Mods
                 {
                     Padding = new MarginPadding
                     {
-                        Left = DrawHeight * ModPanel.SHEAR_X,
+                        Left = DrawHeight * SHEAR,
                         Bottom = 10
                     };
 

osu.Game/Overlays/Mods/ShearedOverlayContainer.cs

@@ -0,0 +1,138 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Overlays.Mods
+{
+    /// <summary>
+    /// A sheared overlay which provides a header and footer and basic animations.
+    /// Exposes <see cref="TopLevelContent"/>, <see cref="MainAreaContent"/> and <see cref="Footer"/> as valid targets for content.
+    /// </summary>
+    public abstract class ShearedOverlayContainer : OsuFocusedOverlayContainer
+    {
+        protected const float PADDING = 14;
+
+        public const float SHEAR = 0.2f;
+
+        [Cached]
+        protected readonly OverlayColourProvider ColourProvider;
+
+        /// <summary>
+        /// The overlay's header.
+        /// </summary>
+        protected ShearedOverlayHeader Header { get; private set; }
+
+        /// <summary>
+        /// The overlay's footer.
+        /// </summary>
+        protected Container Footer { get; private set; }
+
+        /// <summary>
+        /// A container containing all content, including the header and footer.
+        /// May be used for overlay-wide animations.
+        /// </summary>
+        protected Container TopLevelContent { get; private set; }
+
+        /// <summary>
+        /// A container for content that is to be displayed between the header and footer.
+        /// </summary>
+        protected Container MainAreaContent { get; private set; }
+
+        /// <summary>
+        /// A container for content that is to be displayed inside the footer.
+        /// </summary>
+        protected Container FooterContent { get; private set; }
+
+        protected abstract OverlayColourScheme ColourScheme { get; }
+
+        protected override bool StartHidden => true;
+
+        protected override bool BlockNonPositionalInput => true;
+
+        protected ShearedOverlayContainer()
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            ColourProvider = new OverlayColourProvider(ColourScheme);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            const float footer_height = 50;
+
+            Child = TopLevelContent = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    Header = new ShearedOverlayHeader
+                    {
+                        Anchor = Anchor.TopCentre,
+                        Depth = float.MinValue,
+                        Origin = Anchor.TopCentre,
+                        Close = Hide
+                    },
+                    MainAreaContent = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Padding = new MarginPadding
+                        {
+                            Top = ShearedOverlayHeader.HEIGHT,
+                            Bottom = footer_height + PADDING,
+                        }
+                    },
+                    Footer = new Container
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        Depth = float.MinValue,
+                        Height = footer_height,
+                        Margin = new MarginPadding { Top = PADDING },
+                        Anchor = Anchor.BottomCentre,
+                        Origin = Anchor.BottomCentre,
+                        Children = new Drawable[]
+                        {
+                            new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = ColourProvider.Background5
+                            },
+                            FooterContent = new Container
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                            },
+                        }
+                    }
+                }
+            };
+        }
+
+        protected override void PopIn()
+        {
+            const double fade_in_duration = 400;
+
+            base.PopIn();
+            this.FadeIn(fade_in_duration, Easing.OutQuint);
+
+            Header.MoveToY(0, fade_in_duration, Easing.OutQuint);
+            Footer.MoveToY(0, fade_in_duration, Easing.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            const double fade_out_duration = 500;
+
+            base.PopOut();
+            this.FadeOut(fade_out_duration, Easing.OutQuint);
+
+            Header.MoveToY(-Header.DrawHeight, fade_out_duration, Easing.OutQuint);
+            Footer.MoveToY(Footer.DrawHeight, fade_out_duration, Easing.OutQuint);
+        }
+    }
+}