Merge pull request #29136 from Cai1Hsu/hover-open-mod-customise

Hover to expand mod customise panel

osu.Game.Tests/Visual/Multiplayer/TestSceneFreeModSelectOverlay.cs

@@ -61,7 +61,9 @@ namespace osu.Game.Tests.Visual.Multiplayer
 
             AddStep("select difficulty adjust", () => freeModSelectOverlay.SelectedMods.Value = new[] { new OsuModDifficultyAdjust() });
             AddWaitStep("wait some", 3);
-            AddAssert("customisation area not expanded", () => !this.ChildrenOfType<ModCustomisationPanel>().Single().Expanded.Value);
+            AddAssert("customisation area not expanded",
+                () => this.ChildrenOfType<ModCustomisationPanel>().Single().ExpandedState.Value,
+                () => Is.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed));
         }
 
         [Test]

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

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Linq;
 using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
@@ -10,6 +11,8 @@ using osu.Game.Overlays;
 using osu.Game.Overlays.Mods;
 using osu.Game.Rulesets.Mods;
 using osu.Game.Rulesets.Osu.Mods;
+using osuTK;
+using osuTK.Input;
 
 namespace osu.Game.Tests.Visual.UserInterface
 {
@@ -19,10 +22,15 @@ namespace osu.Game.Tests.Visual.UserInterface
         private readonly OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
 
         private ModCustomisationPanel panel = null!;
+        private ModCustomisationHeader header = null!;
+        private Container content = null!;
 
         [SetUp]
         public void SetUp() => Schedule(() =>
         {
+            SelectedMods.Value = Array.Empty<Mod>();
+            InputManager.MoveMouseTo(Vector2.One);
+
             Child = new Container
             {
                 RelativeSizeAxes = Axes.Both,
@@ -36,6 +44,9 @@ namespace osu.Game.Tests.Visual.UserInterface
                     SelectedMods = { BindTarget = SelectedMods },
                 }
             };
+
+            header = panel.Children.OfType<ModCustomisationHeader>().First();
+            content = panel.Children.OfType<Container>().First();
         });
 
         [Test]
@@ -44,23 +55,112 @@ namespace osu.Game.Tests.Visual.UserInterface
             AddStep("set DT", () =>
             {
                 SelectedMods.Value = new[] { new OsuModDoubleTime() };
-                panel.Enabled.Value = panel.Expanded.Value = true;
+                panel.Enabled.Value = true;
+                panel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Expanded;
             });
             AddStep("set DA", () =>
             {
                 SelectedMods.Value = new Mod[] { new OsuModDifficultyAdjust() };
-                panel.Enabled.Value = panel.Expanded.Value = true;
+                panel.Enabled.Value = true;
+                panel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Expanded;
             });
             AddStep("set FL+WU+DA+AD", () =>
             {
                 SelectedMods.Value = new Mod[] { new OsuModFlashlight(), new ModWindUp(), new OsuModDifficultyAdjust(), new OsuModApproachDifferent() };
-                panel.Enabled.Value = panel.Expanded.Value = true;
+                panel.Enabled.Value = true;
+                panel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Expanded;
             });
             AddStep("set empty", () =>
             {
                 SelectedMods.Value = Array.Empty<Mod>();
-                panel.Enabled.Value = panel.Expanded.Value = false;
+                panel.Enabled.Value = false;
+                panel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Collapsed;
             });
         }
+
+        [Test]
+        public void TestHoverDoesNotExpandWhenNoCustomisableMods()
+        {
+            AddStep("hover header", () => InputManager.MoveMouseTo(header));
+
+            checkExpanded(false);
+
+            AddStep("hover content", () => InputManager.MoveMouseTo(content));
+
+            checkExpanded(false);
+
+            AddStep("left from content", () => InputManager.MoveMouseTo(Vector2.One));
+        }
+
+        [Test]
+        public void TestHoverExpandsWithCustomisableMods()
+        {
+            AddStep("add customisable mod", () =>
+            {
+                SelectedMods.Value = new[] { new OsuModDoubleTime() };
+                panel.Enabled.Value = true;
+            });
+
+            AddStep("hover header", () => InputManager.MoveMouseTo(header));
+            checkExpanded(true);
+
+            AddStep("move to content", () => InputManager.MoveMouseTo(content));
+            checkExpanded(true);
+
+            AddStep("move away", () => InputManager.MoveMouseTo(Vector2.One));
+            checkExpanded(false);
+
+            AddStep("hover header", () => InputManager.MoveMouseTo(header));
+            checkExpanded(true);
+
+            AddStep("move away", () => InputManager.MoveMouseTo(Vector2.One));
+            checkExpanded(false);
+        }
+
+        [Test]
+        public void TestExpandedStatePersistsWhenClicked()
+        {
+            AddStep("add customisable mod", () =>
+            {
+                SelectedMods.Value = new[] { new OsuModDoubleTime() };
+                panel.Enabled.Value = true;
+            });
+
+            AddStep("hover header", () => InputManager.MoveMouseTo(header));
+            checkExpanded(true);
+
+            AddStep("click", () => InputManager.Click(MouseButton.Left));
+            checkExpanded(false);
+            AddStep("click", () => InputManager.Click(MouseButton.Left));
+            checkExpanded(true);
+
+            AddStep("move away", () => InputManager.MoveMouseTo(Vector2.One));
+            checkExpanded(true);
+
+            AddStep("click", () => InputManager.Click(MouseButton.Left));
+            checkExpanded(false);
+        }
+
+        [Test]
+        public void TestHoverExpandsAndCollapsesWhenHeaderClicked()
+        {
+            AddStep("add customisable mod", () =>
+            {
+                SelectedMods.Value = new[] { new OsuModDoubleTime() };
+                panel.Enabled.Value = true;
+            });
+
+            AddStep("hover header", () => InputManager.MoveMouseTo(header));
+            checkExpanded(true);
+
+            AddStep("click", () => InputManager.Click(MouseButton.Left));
+            checkExpanded(false);
+        }
+
+        private void checkExpanded(bool expanded)
+        {
+            AddUntilStep(expanded ? "is expanded" : "not expanded", () => panel.ExpandedState.Value,
+                () => expanded ? Is.Not.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed) : Is.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed));
+        }
     }
 }

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

@@ -57,6 +57,7 @@ namespace osu.Game.Tests.Visual.UserInterface
             AddStep("reset ruleset", () => Ruleset.Value = rulesetStore.GetRuleset(0));
             AddStep("reset mods", () => SelectedMods.SetDefault());
             AddStep("reset config", () => configManager.SetValue(OsuSetting.ModSelectTextSearchStartsActive, true));
+            AddStep("reset mouse", () => InputManager.MoveMouseTo(Vector2.One));
             AddStep("set beatmap", () => Beatmap.Value = CreateWorkingBeatmap(new OsuRuleset().RulesetInfo));
             AddStep("set up presets", () =>
             {
@@ -998,7 +999,9 @@ namespace osu.Game.Tests.Visual.UserInterface
             AddStep("press mouse", () => InputManager.PressButton(MouseButton.Left));
             AddAssert("search still not focused", () => !this.ChildrenOfType<ShearedSearchTextBox>().Single().HasFocus);
             AddStep("release mouse", () => InputManager.ReleaseButton(MouseButton.Left));
-            AddAssert("customisation panel closed by click", () => !this.ChildrenOfType<ModCustomisationPanel>().Single().Expanded.Value);
+            AddAssert("customisation panel closed by click",
+                () => this.ChildrenOfType<ModCustomisationPanel>().Single().ExpandedState.Value,
+                () => Is.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed));
 
             if (textSearchStartsActive)
                 AddAssert("search focused", () => this.ChildrenOfType<ShearedSearchTextBox>().Single().HasFocus);
@@ -1021,7 +1024,9 @@ namespace osu.Game.Tests.Visual.UserInterface
         private void assertCustomisationToggleState(bool disabled, bool active)
         {
             AddUntilStep($"customisation panel is {(disabled ? "" : "not ")}disabled", () => modSelectOverlay.ChildrenOfType<ModCustomisationPanel>().Single().Enabled.Value == !disabled);
-            AddAssert($"customisation panel is {(active ? "" : "not ")}active", () => modSelectOverlay.ChildrenOfType<ModCustomisationPanel>().Single().Expanded.Value == active);
+            AddAssert($"customisation panel is {(active ? "" : "not ")}active",
+                () => modSelectOverlay.ChildrenOfType<ModCustomisationPanel>().Single().ExpandedState.Value,
+                () => active ? Is.Not.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed) : Is.EqualTo(ModCustomisationPanel.ModCustomisationPanelState.Collapsed));
         }
 
         private T getSelectedMod<T>() where T : Mod => SelectedMods.Value.OfType<T>().Single();

osu.Game/Overlays/Mods/ModCustomisationHeader.cs

@@ -9,12 +9,14 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Localisation;
 using osuTK;
 using osuTK.Graphics;
+using static osu.Game.Overlays.Mods.ModCustomisationPanel;
 
 namespace osu.Game.Overlays.Mods
 {
@@ -29,11 +31,13 @@ namespace osu.Game.Overlays.Mods
 
         protected override IEnumerable<Drawable> EffectTargets => new[] { background };
 
-        public readonly BindableBool Expanded = new BindableBool();
+        public readonly Bindable<ModCustomisationPanelState> ExpandedState = new Bindable<ModCustomisationPanelState>(ModCustomisationPanelState.Collapsed);
 
-        public ModCustomisationHeader()
+        private readonly ModCustomisationPanel panel;
+
+        public ModCustomisationHeader(ModCustomisationPanel panel)
         {
-            Action = Expanded.Toggle;
+            this.panel = panel;
             Enabled.Value = false;
         }
 
@@ -102,10 +106,48 @@ namespace osu.Game.Overlays.Mods
                 }
             }, true);
 
-            Expanded.BindValueChanged(v =>
+            ExpandedState.BindValueChanged(v =>
             {
-                icon.ScaleTo(v.NewValue ? new Vector2(1, -1) : Vector2.One, 300, Easing.OutQuint);
+                icon.ScaleTo(v.NewValue > ModCustomisationPanelState.Collapsed ? new Vector2(1, -1) : Vector2.One, 300, Easing.OutQuint);
             }, true);
         }
+
+        protected override bool OnClick(ClickEvent e)
+        {
+            if (Enabled.Value)
+            {
+                ExpandedState.Value = ExpandedState.Value switch
+                {
+                    ModCustomisationPanelState.Collapsed => ModCustomisationPanelState.Expanded,
+                    _ => ModCustomisationPanelState.Collapsed
+                };
+            }
+
+            return base.OnClick(e);
+        }
+
+        private bool touchedThisFrame;
+
+        protected override bool OnTouchDown(TouchDownEvent e)
+        {
+            if (Enabled.Value)
+            {
+                touchedThisFrame = true;
+                Schedule(() => touchedThisFrame = false);
+            }
+
+            return base.OnTouchDown(e);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            if (Enabled.Value)
+            {
+                if (!touchedThisFrame && panel.ExpandedState.Value == ModCustomisationPanelState.Collapsed)
+                    panel.ExpandedState.Value = ModCustomisationPanelState.ExpandedByHover;
+            }
+
+            return base.OnHover(e);
+        }
     }
 }

osu.Game/Overlays/Mods/ModCustomisationPanel.cs

@@ -38,7 +38,7 @@ namespace osu.Game.Overlays.Mods
 
         public readonly BindableBool Enabled = new BindableBool();
 
-        public readonly BindableBool Expanded = new BindableBool();
+        public readonly Bindable<ModCustomisationPanelState> ExpandedState = new Bindable<ModCustomisationPanelState>();
 
         public Bindable<IReadOnlyList<Mod>> SelectedMods { get; } = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
 
@@ -46,9 +46,9 @@ namespace osu.Game.Overlays.Mods
 
         // Handle{Non}PositionalInput controls whether the panel should act as a blocking layer on the screen. only block when the panel is expanded.
         // These properties are used because they correctly handle blocking/unblocking hover when mouse is pointing at a drawable outside
-        // (returning Expanded.Value to OnHover or overriding Block{Non}PositionalInput doesn't work).
-        public override bool HandlePositionalInput => Expanded.Value;
-        public override bool HandleNonPositionalInput => Expanded.Value;
+        // (handling OnHover or overriding Block{Non}PositionalInput doesn't work).
+        public override bool HandlePositionalInput => ExpandedState.Value != ModCustomisationPanelState.Collapsed;
+        public override bool HandleNonPositionalInput => ExpandedState.Value != ModCustomisationPanelState.Collapsed;
 
         [BackgroundDependencyLoader]
         private void load()
@@ -57,15 +57,15 @@ namespace osu.Game.Overlays.Mods
 
             InternalChildren = new Drawable[]
             {
-                new ModCustomisationHeader
+                new ModCustomisationHeader(this)
                 {
                     Depth = float.MinValue,
                     RelativeSizeAxes = Axes.X,
                     Height = header_height,
                     Enabled = { BindTarget = Enabled },
-                    Expanded = { BindTarget = Expanded },
+                    ExpandedState = { BindTarget = ExpandedState },
                 },
-                content = new FocusGrabbingContainer
+                content = new FocusGrabbingContainer(this)
                 {
                     RelativeSizeAxes = Axes.X,
                     BorderColour = colourProvider.Dark3,
@@ -80,7 +80,7 @@ namespace osu.Game.Overlays.Mods
                         Roundness = 5f,
                         Colour = Color4.Black.Opacity(0.25f),
                     },
-                    Expanded = { BindTarget = Expanded },
+                    ExpandedState = { BindTarget = ExpandedState },
                     Children = new Drawable[]
                     {
                         new Box
@@ -122,7 +122,7 @@ namespace osu.Game.Overlays.Mods
                 this.FadeColour(OsuColour.Gray(e.NewValue ? 1f : 0.6f), 300, Easing.OutQuint);
             }, true);
 
-            Expanded.BindValueChanged(_ => updateDisplay(), true);
+            ExpandedState.BindValueChanged(_ => updateDisplay(), true);
             SelectedMods.BindValueChanged(_ => updateMods(), true);
 
             FinishTransforms(true);
@@ -134,7 +134,7 @@ namespace osu.Game.Overlays.Mods
 
         protected override bool OnClick(ClickEvent e)
         {
-            Expanded.Value = false;
+            ExpandedState.Value = ModCustomisationPanelState.Collapsed;
             return base.OnClick(e);
         }
 
@@ -147,7 +147,7 @@ namespace osu.Game.Overlays.Mods
             switch (e.Action)
             {
                 case GlobalAction.Back:
-                    Expanded.Value = false;
+                    ExpandedState.Value = ModCustomisationPanelState.Collapsed;
                     return true;
             }
 
@@ -162,7 +162,7 @@ namespace osu.Game.Overlays.Mods
         {
             content.ClearTransforms();
 
-            if (Expanded.Value)
+            if (ExpandedState.Value != ModCustomisationPanelState.Collapsed)
             {
                 content.AutoSizeDuration = 400;
                 content.AutoSizeEasing = Easing.OutQuint;
@@ -179,7 +179,7 @@ namespace osu.Game.Overlays.Mods
 
         private void updateMods()
         {
-            Expanded.Value = false;
+            ExpandedState.Value = ModCustomisationPanelState.Collapsed;
             sectionsFlow.Clear();
 
             // Importantly, the selected mods bindable is already ordered by the mod select overlay (following the order of mod columns and panels).
@@ -202,10 +202,35 @@ namespace osu.Game.Overlays.Mods
 
         private partial class FocusGrabbingContainer : InputBlockingContainer
         {
-            public IBindable<bool> Expanded { get; } = new BindableBool();
+            public readonly Bindable<ModCustomisationPanelState> ExpandedState = new Bindable<ModCustomisationPanelState>();
 
-            public override bool RequestsFocus => Expanded.Value;
-            public override bool AcceptsFocus => Expanded.Value;
+            public override bool RequestsFocus => panel.ExpandedState.Value != ModCustomisationPanelState.Collapsed;
+            public override bool AcceptsFocus => panel.ExpandedState.Value != ModCustomisationPanelState.Collapsed;
+
+            private readonly ModCustomisationPanel panel;
+
+            public FocusGrabbingContainer(ModCustomisationPanel panel)
+            {
+                this.panel = panel;
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                if (ExpandedState.Value is ModCustomisationPanelState.ExpandedByHover
+                    && !ReceivePositionalInputAt(e.ScreenSpaceMousePosition))
+                {
+                    ExpandedState.Value = ModCustomisationPanelState.Collapsed;
+                }
+
+                base.OnHoverLost(e);
+            }
+        }
+
+        public enum ModCustomisationPanelState
+        {
+            Collapsed = 0,
+            ExpandedByHover = 1,
+            Expanded = 2,
         }
     }
 }

osu.Game/Overlays/Mods/ModSelectOverlay.cs

@@ -237,7 +237,7 @@ namespace osu.Game.Overlays.Mods
                 ActiveMods.Value = ComputeActiveMods();
             }, true);
 
-            customisationPanel.Expanded.BindValueChanged(_ => updateCustomisationVisualState(), true);
+            customisationPanel.ExpandedState.BindValueChanged(_ => updateCustomisationVisualState(), true);
 
             SearchTextBox.Current.BindValueChanged(query =>
             {
@@ -368,18 +368,18 @@ namespace osu.Game.Overlays.Mods
                 customisationPanel.Enabled.Value = true;
 
                 if (anyModPendingConfiguration)
-                    customisationPanel.Expanded.Value = true;
+                    customisationPanel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Expanded;
             }
             else
             {
-                customisationPanel.Expanded.Value = false;
+                customisationPanel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Collapsed;
                 customisationPanel.Enabled.Value = false;
             }
         }
 
         private void updateCustomisationVisualState()
         {
-            if (customisationPanel.Expanded.Value)
+            if (customisationPanel.ExpandedState.Value != ModCustomisationPanel.ModCustomisationPanelState.Collapsed)
             {
                 columnScroll.FadeColour(OsuColour.Gray(0.5f), 400, Easing.OutQuint);
                 SearchTextBox.FadeColour(OsuColour.Gray(0.5f), 400, Easing.OutQuint);
@@ -544,7 +544,7 @@ namespace osu.Game.Overlays.Mods
                     nonFilteredColumnCount += 1;
             }
 
-            customisationPanel.Expanded.Value = false;
+            customisationPanel.ExpandedState.Value = ModCustomisationPanel.ModCustomisationPanelState.Collapsed;
         }
 
         #endregion
@@ -571,7 +571,7 @@ namespace osu.Game.Overlays.Mods
                 // wherein activating the binding will both change the contents of the search text box and deselect all mods.
                 case GlobalAction.DeselectAllMods:
                 {
-                    if (!SearchTextBox.HasFocus && !customisationPanel.Expanded.Value)
+                    if (!SearchTextBox.HasFocus && customisationPanel.ExpandedState.Value == ModCustomisationPanel.ModCustomisationPanelState.Collapsed)
                     {
                         DisplayedFooterContent?.DeselectAllModsButton?.TriggerClick();
                         return true;
@@ -637,7 +637,7 @@ namespace osu.Game.Overlays.Mods
             if (e.Repeat || e.Key != Key.Tab)
                 return false;
 
-            if (customisationPanel.Expanded.Value)
+            if (customisationPanel.ExpandedState.Value != ModCustomisationPanel.ModCustomisationPanelState.Collapsed)
                 return true;
 
             // TODO: should probably eventually support typical platform search shortcuts (`Ctrl-F`, `/`)