Merge pull request #16525 from bdach/beatmap-listing-overflow-and-scrolling

Improve usability of expanded card content on beatmap listing

osu.Game.Tests/Visual/Online/TestSceneBeatmapListingOverlay.cs

@@ -8,6 +8,7 @@ using NUnit.Framework;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Testing;
 using osu.Game.Beatmaps.Drawables.Cards;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
@@ -292,6 +293,33 @@ namespace osu.Game.Tests.Visual.Online
             noPlaceholderShown();
         }
 
+        [Test]
+        public void TestExpandedCardContentNotClipped()
+        {
+            AddAssert("is visible", () => overlay.State.Value == Visibility.Visible);
+
+            AddStep("show result with many difficulties", () =>
+            {
+                var beatmapSet = CreateAPIBeatmapSet(Ruleset.Value);
+                beatmapSet.Beatmaps = Enumerable.Repeat(beatmapSet.Beatmaps.First(), 100).ToArray();
+                fetchFor(beatmapSet);
+            });
+            assertAllCardsOfType<BeatmapCardNormal>(1);
+
+            AddStep("hover extra info row", () =>
+            {
+                var difficultyArea = this.ChildrenOfType<BeatmapCardExtraInfoRow>().Single();
+                InputManager.MoveMouseTo(difficultyArea);
+            });
+            AddUntilStep("wait for expanded", () => this.ChildrenOfType<BeatmapCardNormal>().Single().Expanded.Value);
+            AddAssert("expanded content not clipped", () =>
+            {
+                var cardContainer = this.ChildrenOfType<ReverseChildIDFillFlowContainer<BeatmapCard>>().Single().Parent;
+                var expandedContent = this.ChildrenOfType<ExpandedContentScrollContainer>().Single();
+                return expandedContent.ScreenSpaceDrawQuad.GetVertices().ToArray().All(v => cardContainer.ScreenSpaceDrawQuad.Contains(v));
+            });
+        }
+
         private static int searchCount;
 
         private void fetchFor(params APIBeatmapSet[] beatmaps)

osu.Game/Beatmaps/Drawables/Cards/ExpandedContentScrollContainer.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using osu.Framework.Graphics;
 using osu.Framework.Input.Events;
 using osu.Framework.Utils;
 using osu.Game.Graphics.Containers;
@@ -12,16 +13,14 @@ namespace osu.Game.Beatmaps.Drawables.Cards
     {
         public const float HEIGHT = 200;
 
-        public ExpandedContentScrollContainer()
+        protected override ScrollbarContainer CreateScrollbar(Direction direction) => new ExpandedContentScrollbar(direction);
-        {
-            ScrollbarVisible = false;
-        }
 
         protected override void Update()
         {
             base.Update();
 
             Height = Math.Min(Content.DrawHeight, HEIGHT);
+            ScrollbarVisible = allowScroll;
         }
 
         private bool allowScroll => !Precision.AlmostEquals(DrawSize, Content.DrawSize);
@@ -57,5 +56,22 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
             return base.OnScroll(e);
         }
+
+        private class ExpandedContentScrollbar : OsuScrollbar
+        {
+            public ExpandedContentScrollbar(Direction scrollDir)
+                : base(scrollDir)
+            {
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                base.OnHover(e);
+                // do not handle hover, as handling hover would make the beatmap card's expanded content not-hovered
+                // and therefore cause it to hide when trying to drag the scroll bar.
+                // see: `BeatmapCardContent.dropdownContent` and its `Unhovered` handler.
+                return false;
+            }
+        }
     }
 }

osu.Game/Overlays/BeatmapListingOverlay.cs

@@ -187,8 +187,10 @@ namespace osu.Game.Overlays
                 Alpha = 0,
                 Margin = new MarginPadding
                 {
-                    Vertical = 15,
+                    Top = 15,
-                    Bottom = ExpandedContentScrollContainer.HEIGHT
+                    // the + 20 adjustment is roughly eyeballed in order to fit all of the expanded content height after it's scaled
+                    // as well as provide visual balance to the top margin.
+                    Bottom = ExpandedContentScrollContainer.HEIGHT + 20
                 },
                 ChildrenEnumerable = newCards
             };