Merge pull request #11105 from Joehuu/mod-settings-fade-in/out

Add fade in/out animations to mod settings container

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

@@ -50,7 +50,7 @@ namespace osu.Game.Tests.Visual.UserInterface
             AddAssert("button enabled", () => modSelect.CustomiseButton.Enabled.Value);
             AddStep("open Customisation", () => modSelect.CustomiseButton.Click());
             AddStep("deselect mod", () => modSelect.SelectMod(testCustomisableMod));
-            AddAssert("controls hidden", () => modSelect.ModSettingsContainer.Alpha == 0);
+            AddAssert("controls hidden", () => modSelect.ModSettingsContainer.State.Value == Visibility.Hidden);
         }
 
         [Test]
@@ -72,11 +72,11 @@ namespace osu.Game.Tests.Visual.UserInterface
             createModSelect();
             openModSelect();
 
-            AddAssert("Customisation closed", () => modSelect.ModSettingsContainer.Alpha == 0);
+            AddAssert("Customisation closed", () => modSelect.ModSettingsContainer.State.Value == Visibility.Hidden);
             AddStep("select mod", () => modSelect.SelectMod(testCustomisableAutoOpenMod));
-            AddAssert("Customisation opened", () => modSelect.ModSettingsContainer.Alpha == 1);
+            AddAssert("Customisation opened", () => modSelect.ModSettingsContainer.State.Value == Visibility.Visible);
             AddStep("deselect mod", () => modSelect.SelectMod(testCustomisableAutoOpenMod));
-            AddAssert("Customisation closed", () => modSelect.ModSettingsContainer.Alpha == 0);
+            AddAssert("Customisation closed", () => modSelect.ModSettingsContainer.State.Value == Visibility.Hidden);
         }
 
         [Test]
@@ -123,7 +123,7 @@ namespace osu.Game.Tests.Visual.UserInterface
 
             AddStep("change mod settings menu width to full screen", () => modSelect.SetModSettingsWidth(1.0f));
             AddStep("select cm2", () => modSelect.SelectMod(testCustomisableAutoOpenMod));
-            AddAssert("Customisation opened", () => modSelect.ModSettingsContainer.Alpha == 1);
+            AddAssert("Customisation opened", () => modSelect.ModSettingsContainer.State.Value == Visibility.Visible);
             AddStep("hover over mod behind settings menu", () => InputManager.MoveMouseTo(modSelect.GetModButton(testCustomisableMod)));
             AddAssert("Mod is not considered hovered over", () => !modSelect.GetModButton(testCustomisableMod).IsHovered);
             AddStep("left click mod", () => InputManager.Click(MouseButton.Left));
@@ -153,7 +153,7 @@ namespace osu.Game.Tests.Visual.UserInterface
 
         private class TestModSelectOverlay : ModSelectOverlay
         {
-            public new Container ModSettingsContainer => base.ModSettingsContainer;
+            public new VisibilityContainer ModSettingsContainer => base.ModSettingsContainer;
             public new TriangleButton CustomiseButton => base.CustomiseButton;
 
             public bool ButtonsLoaded => ModSectionsContainer.Children.All(c => c.ModIconsLoaded);

osu.Game/Overlays/Mods/ModSelectOverlay.cs

@@ -158,37 +158,57 @@ namespace osu.Game.Overlays.Mods
                         },
                         new Drawable[]
                         {
-                            // Body
+                            new Container
-                            new OsuScrollContainer
                             {
-                                ScrollbarVisible = false,
-                                Origin = Anchor.TopCentre,
-                                Anchor = Anchor.TopCentre,
                                 RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding
+                                Children = new Drawable[]
                                 {
-                                    Vertical = 10,
+                                    // Body
-                                    Horizontal = OsuScreen.HORIZONTAL_OVERFLOW_PADDING
+                                    new OsuScrollContainer
-                                },
-                                Child = ModSectionsContainer = new FillFlowContainer<ModSection>
-                                {
-                                    Origin = Anchor.TopCentre,
-                                    Anchor = Anchor.TopCentre,
-                                    RelativeSizeAxes = Axes.X,
-                                    AutoSizeAxes = Axes.Y,
-                                    Spacing = new Vector2(0f, 10f),
-                                    Width = content_width,
-                                    LayoutDuration = 200,
-                                    LayoutEasing = Easing.OutQuint,
-                                    Children = new ModSection[]
                                     {
-                                        new DifficultyReductionSection { Action = modButtonPressed },
+                                        ScrollbarVisible = false,
-                                        new DifficultyIncreaseSection { Action = modButtonPressed },
+                                        Origin = Anchor.TopCentre,
-                                        new AutomationSection { Action = modButtonPressed },
+                                        Anchor = Anchor.TopCentre,
-                                        new ConversionSection { Action = modButtonPressed },
+                                        RelativeSizeAxes = Axes.Both,
-                                        new FunSection { Action = modButtonPressed },
+                                        Padding = new MarginPadding
-                                    }
+                                        {
-                                },
+                                            Vertical = 10,
+                                            Horizontal = OsuScreen.HORIZONTAL_OVERFLOW_PADDING
+                                        },
+                                        Children = new Drawable[]
+                                        {
+                                            ModSectionsContainer = new FillFlowContainer<ModSection>
+                                            {
+                                                Origin = Anchor.TopCentre,
+                                                Anchor = Anchor.TopCentre,
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Spacing = new Vector2(0f, 10f),
+                                                Width = content_width,
+                                                LayoutDuration = 200,
+                                                LayoutEasing = Easing.OutQuint,
+                                                Children = new ModSection[]
+                                                {
+                                                    new DifficultyReductionSection { Action = modButtonPressed },
+                                                    new DifficultyIncreaseSection { Action = modButtonPressed },
+                                                    new AutomationSection { Action = modButtonPressed },
+                                                    new ConversionSection { Action = modButtonPressed },
+                                                    new FunSection { Action = modButtonPressed },
+                                                }
+                                            },
+                                        }
+                                    },
+                                    ModSettingsContainer = new ModSettingsContainer
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Anchor = Anchor.BottomRight,
+                                        Origin = Anchor.BottomRight,
+                                        Width = 0.3f,
+                                        Alpha = 0,
+                                        Padding = new MarginPadding(30),
+                                        SelectedMods = { BindTarget = SelectedMods },
+                                    },
+                                }
                             },
                         },
                         new Drawable[]
@@ -237,7 +257,7 @@ namespace osu.Game.Overlays.Mods
                                             {
                                                 Width = 180,
                                                 Text = "Customisation",
-                                                Action = () => ModSettingsContainer.Alpha = ModSettingsContainer.Alpha == 1 ? 0 : 1,
+                                                Action = () => ModSettingsContainer.ToggleVisibility(),
                                                 Enabled = { Value = false },
                                                 Origin = Anchor.CentreLeft,
                                                 Anchor = Anchor.CentreLeft,
@@ -281,16 +301,6 @@ namespace osu.Game.Overlays.Mods
                         },
                     },
                 },
-                ModSettingsContainer = new ModSettingsContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Anchor = Anchor.BottomRight,
-                    Origin = Anchor.BottomRight,
-                    Width = 0.25f,
-                    Alpha = 0,
-                    X = -100,
-                    SelectedMods = { BindTarget = SelectedMods },
-                }
             };
 
             ((IBindable<bool>)CustomiseButton.Enabled).BindTo(ModSettingsContainer.HasSettingsForSelection);
@@ -430,7 +440,7 @@ namespace osu.Game.Overlays.Mods
 
                 DeselectTypes(selectedMod.IncompatibleMods, true);
 
-                if (selectedMod.RequiresConfiguration) ModSettingsContainer.Alpha = 1;
+                if (selectedMod.RequiresConfiguration) ModSettingsContainer.Show();
             }
             else
             {

osu.Game/Overlays/Mods/ModSettingsContainer.cs

@@ -17,7 +17,7 @@ using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Mods
 {
-    public class ModSettingsContainer : Container
+    public class ModSettingsContainer : VisibilityContainer
     {
         public readonly IBindable<IReadOnlyList<Mod>> SelectedMods = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
 
@@ -27,26 +27,40 @@ namespace osu.Game.Overlays.Mods
 
         private readonly FillFlowContainer<ModControlSection> modSettingsContent;
 
+        private readonly Container content;
+
+        private const double transition_duration = 400;
+
         public ModSettingsContainer()
         {
-            Children = new Drawable[]
+            RelativeSizeAxes = Axes.Both;
+
+            Child = content = new Container
             {
-                new Box
+                Masking = true,
+                CornerRadius = 10,
+                RelativeSizeAxes = Axes.Both,
+                RelativePositionAxes = Axes.Both,
+                X = 1,
+                Children = new Drawable[]
                 {
-                    RelativeSizeAxes = Axes.Both,
+                    new Box
-                    Colour = new Color4(0, 0, 0, 192)
-                },
-                new OsuScrollContainer
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Child = modSettingsContent = new FillFlowContainer<ModControlSection>
                     {
-                        Anchor = Anchor.TopCentre,
+                        RelativeSizeAxes = Axes.Both,
-                        Origin = Anchor.TopCentre,
+                        Colour = new Color4(0, 0, 0, 192)
-                        RelativeSizeAxes = Axes.X,
+                    },
-                        AutoSizeAxes = Axes.Y,
+                    new OsuScrollContainer
-                        Spacing = new Vector2(0f, 10f),
+                    {
-                        Padding = new MarginPadding(20),
+                        RelativeSizeAxes = Axes.Both,
+                        Child = modSettingsContent = new FillFlowContainer<ModControlSection>
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Spacing = new Vector2(0f, 10f),
+                            Padding = new MarginPadding(20),
+                        }
                     }
                 }
             };
@@ -80,5 +94,17 @@ namespace osu.Game.Overlays.Mods
 
         protected override bool OnMouseDown(MouseDownEvent e) => true;
         protected override bool OnHover(HoverEvent e) => true;
+
+        protected override void PopIn()
+        {
+            this.FadeIn(transition_duration, Easing.OutQuint);
+            content.MoveToX(0, transition_duration, Easing.OutQuint);
+        }
+
+        protected override void PopOut()
+        {
+            this.FadeOut(transition_duration, Easing.OutQuint);
+            content.MoveToX(1, transition_duration, Easing.OutQuint);
+        }
     }
 }