Merge pull request #20743 from frenzibyte/improve-beatmap-card-buttons

Improve clickable area of beatmap card icon buttons

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapCardDownloadButton.cs

@@ -59,8 +59,9 @@ namespace osu.Game.Tests.Visual.Beatmaps
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
+                    Size = new Vector2(25f, 50f),
+                    Scale = new Vector2(2f),
                     State = { Value = DownloadState.NotDownloaded },
-                    Scale = new Vector2(2)
                 };
             });
         }

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapCardFavouriteButton.cs

@@ -37,7 +37,11 @@ namespace osu.Game.Tests.Visual.Beatmaps
                 beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value);
                 beatmapSetInfo.HasFavourited = favourited;
             });
-            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
+            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo)
+            {
+                Size = new Vector2(25f, 50f),
+                Scale = new Vector2(2f),
+            });
 
             assertCorrectIcon(favourited);
             AddAssert("correct tooltip text", () => button.TooltipText == (favourited ? BeatmapsetsStrings.ShowDetailsUnfavourite : BeatmapsetsStrings.ShowDetailsFavourite));
@@ -51,7 +55,11 @@ namespace osu.Game.Tests.Visual.Beatmaps
             BeatmapFavouriteAction? lastRequestAction = null;
 
             AddStep("create beatmap set", () => beatmapSetInfo = CreateAPIBeatmapSet(Ruleset.Value));
-            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo) { Scale = new Vector2(2) });
+            AddStep("create button", () => Child = button = new FavouriteButton(beatmapSetInfo)
+            {
+                Size = new Vector2(25f, 50f),
+                Scale = new Vector2(2f),
+            });
 
             assertCorrectIcon(false);
 

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

@@ -81,7 +81,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                             FavouriteState = { BindTarget = FavouriteState },
                             ButtonsCollapsedWidth = CORNER_RADIUS,
                             ButtonsExpandedWidth = 30,
-                            ButtonsPadding = new MarginPadding { Vertical = 35 },
                             Children = new Drawable[]
                             {
                                 new FillFlowContainer

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

@@ -82,7 +82,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                             FavouriteState = { BindTarget = FavouriteState },
                             ButtonsCollapsedWidth = CORNER_RADIUS,
                             ButtonsExpandedWidth = 30,
-                            ButtonsPadding = new MarginPadding { Vertical = 17.5f },
                             Children = new Drawable[]
                             {
                                 new FillFlowContainer

osu.Game/Beatmaps/Drawables/Cards/Buttons/BeatmapCardIconButton.cs

@@ -4,13 +4,16 @@
 #nullable disable
 
 using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
 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.Containers;
 using osu.Game.Overlays;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
 {
@@ -59,6 +62,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
         protected override Container<Drawable> Content => content;
 
         private readonly Container content;
+        private readonly Box hover;
 
         protected BeatmapCardIconButton()
         {
@@ -69,19 +73,27 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
             {
                 RelativeSizeAxes = Axes.Both,
                 Masking = true,
+                CornerRadius = BeatmapCard.CORNER_RADIUS,
+                Scale = new Vector2(0.8f),
                 Origin = Anchor.Centre,
                 Anchor = Anchor.Centre,
                 Children = new Drawable[]
                 {
+                    hover = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.White.Opacity(0.1f),
+                        Blending = BlendingParameters.Additive,
+                    },
                     Icon = new SpriteIcon
                     {
                         Origin = Anchor.Centre,
-                        Anchor = Anchor.Centre
+                        Anchor = Anchor.Centre,
-                    }
+                        Scale = new Vector2(1.2f),
+                    },
                 }
             });
 
-            Size = new Vector2(24);
             IconSize = 12;
         }
 
@@ -116,8 +128,9 @@ namespace osu.Game.Beatmaps.Drawables.Cards.Buttons
         {
             bool isHovered = IsHovered && Enabled.Value;
 
-            content.ScaleTo(isHovered ? 1.2f : 1, 500, Easing.OutQuint);
+            hover.FadeTo(isHovered ? 1f : 0f, 500, Easing.OutQuint);
-            content.FadeColour(isHovered ? HoverColour : IdleColour, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+            content.ScaleTo(isHovered ? 1 : 0.8f, 500, Easing.OutQuint);
+            Icon.FadeColour(isHovered ? HoverColour : IdleColour, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
         }
     }
 }

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

@@ -48,12 +48,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             }
         }
 
-        public MarginPadding ButtonsPadding
-        {
-            get => buttons.Padding;
-            set => buttons.Padding = value;
-        }
-
         protected override Container<Drawable> Content => mainContent;
 
         private readonly Container background;
@@ -86,9 +80,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                     RelativeSizeAxes = Axes.Both,
                     Anchor = Anchor.CentreRight,
                     Origin = Anchor.CentreRight,
-                    // workaround for masking artifacts at the top & bottom of card,
-                    // which become especially visible on downloaded beatmaps (when the icon area has a lime background).
-                    Padding = new MarginPadding { Vertical = 1 },
                     Child = new Box
                     {
                         RelativeSizeAxes = Axes.Both,
@@ -104,25 +95,34 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                     Child = buttons = new Container<BeatmapCardIconButton>
                     {
                         RelativeSizeAxes = Axes.Both,
+                        // Padding of 4 avoids touching the card borders when in the expanded (ie. showing difficulties) state.
+                        // Left override allows the buttons to visually be wider and look better.
+                        Padding = new MarginPadding(4) { Left = 2 },
                         Children = new BeatmapCardIconButton[]
                         {
                             new FavouriteButton(beatmapSet)
                             {
                                 Current = FavouriteState,
                                 Anchor = Anchor.TopCentre,
-                                Origin = Anchor.TopCentre
+                                Origin = Anchor.TopCentre,
+                                RelativeSizeAxes = Axes.Both,
+                                Height = 0.48f,
                             },
                             new DownloadButton(beatmapSet)
                             {
                                 Anchor = Anchor.BottomCentre,
                                 Origin = Anchor.BottomCentre,
-                                State = { BindTarget = downloadTracker.State }
+                                State = { BindTarget = downloadTracker.State },
+                                RelativeSizeAxes = Axes.Both,
+                                Height = 0.48f,
                             },
                             new GoToBeatmapButton(beatmapSet)
                             {
                                 Anchor = Anchor.BottomCentre,
                                 Origin = Anchor.BottomCentre,
-                                State = { BindTarget = downloadTracker.State }
+                                State = { BindTarget = downloadTracker.State },
+                                RelativeSizeAxes = Axes.Both,
+                                Height = 0.48f,
                             }
                         }
                     }