Tweak nano beatmap card UX further to meet expectations

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

@@ -149,8 +149,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                 };
                 c.Expanded.BindTarget = Expanded;
             });
-
-            Action = () => buttonContainer.TriggerClick();
         }
 
         private LocalisableString createArtistText()

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

@@ -8,6 +8,7 @@ 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.Configuration;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -17,10 +18,11 @@ using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays;
 using osu.Game.Resources.Localisation.Web;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Beatmaps.Drawables.Cards
 {
-    public partial class CollapsibleButtonContainerSlim : OsuClickableContainer
+    public partial class CollapsibleButtonContainerSlim : Container
     {
         public Bindable<bool> ShowDetails = new Bindable<bool>();
         public Bindable<BeatmapSetFavouriteState> FavouriteState = new Bindable<BeatmapSetFavouriteState>();
@@ -56,30 +58,15 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
         protected override Container<Drawable> Content => mainContent;
 
-        private readonly APIBeatmapSet beatmapSet;
-
         private readonly Container background;
 
-        private readonly Container buttonArea;
+        private readonly OsuClickableContainer buttonArea;
 
         private readonly Container mainArea;
         private readonly Container mainContent;
 
-        private readonly Container icons;
-        private readonly SpriteIcon downloadIcon;
-        private readonly LoadingSpinner spinner;
-        private readonly SpriteIcon goToBeatmapIcon;
-
         private const int icon_size = 12;
 
-        private Bindable<bool> preferNoVideo = null!;
-
-        [Resolved]
-        private BeatmapModelDownloader beatmaps { get; set; } = null!;
-
-        [Resolved]
-        private OsuGame? game { get; set; }
-
         [Resolved]
         private OsuColour colours { get; set; } = null!;
 
@@ -88,15 +75,13 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
         public CollapsibleButtonContainerSlim(APIBeatmapSet beatmapSet)
         {
-            this.beatmapSet = beatmapSet;
-
             downloadTracker = new BeatmapDownloadTracker(beatmapSet);
 
             RelativeSizeAxes = Axes.Y;
             Masking = true;
             CornerRadius = BeatmapCard.CORNER_RADIUS;
 
-            base.Content.AddRange(new Drawable[]
+            InternalChildren = new Drawable[]
             {
                 downloadTracker,
                 background = new Container
@@ -110,39 +95,10 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                         Colour = Colour4.White
                     },
                 },
-                buttonArea = new Container
+                buttonArea = new ButtonArea(beatmapSet)
                 {
                     Name = @"Right (button) area",
-                    RelativeSizeAxes = Axes.Y,
+                    State = { BindTarget = downloadTracker.State }
-                    Origin = Anchor.TopRight,
-                    Anchor = Anchor.TopRight,
-                    Child = icons = new Container
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Children = new Drawable[]
-                        {
-                            downloadIcon = new SpriteIcon
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Size = new Vector2(icon_size),
-                                Icon = FontAwesome.Solid.Download
-                            },
-                            spinner = new LoadingSpinner
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Size = new Vector2(icon_size)
-                            },
-                            goToBeatmapIcon = new SpriteIcon
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Size = new Vector2(icon_size),
-                                Icon = FontAwesome.Solid.AngleDoubleRight
-                            },
-                        }
-                    }
                 },
                 mainArea = new Container
                 {
@@ -168,23 +124,13 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                         }
                     }
                 }
-            });
+            };
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuConfigManager config)
-        {
-            preferNoVideo = config.GetBindable<bool>(OsuSetting.PreferNoVideo);
-
-            downloadIcon.Colour = spinner.Colour = colourProvider.Content1;
-            goToBeatmapIcon.Colour = colourProvider.Foreground1;
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
 
-            preferNoVideo.BindValueChanged(_ => updateState());
             downloadTracker.State.BindValueChanged(_ => updateState());
             ShowDetails.BindValueChanged(_ => updateState(), true);
             FinishTransforms(true);
@@ -195,22 +141,120 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             float targetWidth = Width - (ShowDetails.Value ? ButtonsExpandedWidth : ButtonsCollapsedWidth);
 
             mainArea.ResizeWidthTo(targetWidth, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-
+            background.FadeColour(downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            var backgroundColour = downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3;
+            buttonArea.FadeTo(ShowDetails.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            if (ShowDetails.Value)
-                backgroundColour = backgroundColour.Lighten(0.2f);
-
-            background.FadeColour(backgroundColour, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            icons.FadeTo(ShowDetails.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-
-            if (beatmapSet.Availability.DownloadDisabled)
-            {
-                Enabled.Value = false;
-                TooltipText = BeatmapsetsStrings.AvailabilityDisabled;
-                return;
         }
 
-            switch (downloadTracker.State.Value)
+        private partial class ButtonArea : OsuClickableContainer
+        {
+            public Bindable<DownloadState> State { get; } = new Bindable<DownloadState>();
+
+            private readonly APIBeatmapSet beatmapSet;
+
+            private Box hoverLayer = null!;
+            private SpriteIcon downloadIcon = null!;
+            private LoadingSpinner spinner = null!;
+            private SpriteIcon goToBeatmapIcon = null!;
+
+            private Bindable<bool> preferNoVideo = null!;
+
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            [Resolved]
+            private BeatmapModelDownloader beatmaps { get; set; } = null!;
+
+            [Resolved]
+            private OsuGame? game { get; set; }
+
+            public ButtonArea(APIBeatmapSet beatmapSet)
+            {
+                this.beatmapSet = beatmapSet;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuConfigManager config)
+            {
+                RelativeSizeAxes = Axes.Y;
+                Origin = Anchor.TopRight;
+                Anchor = Anchor.TopRight;
+                Child = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Padding = new MarginPadding { Left = -BeatmapCard.CORNER_RADIUS },
+                            Child = hoverLayer = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = Colour4.White.Opacity(0.1f),
+                                Blending = BlendingParameters.Additive
+                            }
+                        },
+                        downloadIcon = new SpriteIcon
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(icon_size),
+                            Icon = FontAwesome.Solid.Download
+                        },
+                        spinner = new LoadingSpinner
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(icon_size)
+                        },
+                        goToBeatmapIcon = new SpriteIcon
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(icon_size),
+                            Icon = FontAwesome.Solid.AngleDoubleRight
+                        },
+                    }
+                };
+
+                preferNoVideo = config.GetBindable<bool>(OsuSetting.PreferNoVideo);
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                State.BindValueChanged(_ => updateState(), true);
+                FinishTransforms(true);
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                updateState();
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                updateState();
+                base.OnHoverLost(e);
+            }
+
+            private void updateState()
+            {
+                hoverLayer.FadeTo(IsHovered ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+                downloadIcon.FadeTo(State.Value == DownloadState.NotDownloaded ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                downloadIcon.FadeColour(IsHovered ? colourProvider.Content1 : colourProvider.Light1, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+                spinner.FadeTo(State.Value == DownloadState.Downloading || State.Value == DownloadState.Importing ? 1 : 0,
+                    BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                spinner.FadeColour(IsHovered ? colourProvider.Content1 : colourProvider.Light1, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+                goToBeatmapIcon.FadeTo(State.Value == DownloadState.LocallyAvailable ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                goToBeatmapIcon.FadeColour(IsHovered ? colourProvider.Foreground1 : colourProvider.Background3, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+                switch (State.Value)
                 {
                     case DownloadState.NotDownloaded:
                         Action = () => beatmaps.Download(beatmapSet, preferNoVideo.Value);
@@ -225,12 +269,14 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                         break;
                 }
 
-            downloadIcon.FadeTo(downloadTracker.State.Value == DownloadState.NotDownloaded ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                if (beatmapSet.Availability.DownloadDisabled)
-            spinner.FadeTo(downloadTracker.State.Value == DownloadState.Downloading || downloadTracker.State.Value == DownloadState.Importing ? 1 : 0,
+                {
-                BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                    Enabled.Value = false;
-            goToBeatmapIcon.FadeTo(downloadTracker.State.Value == DownloadState.LocallyAvailable ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+                    TooltipText = BeatmapsetsStrings.AvailabilityDisabled;
+                    return;
+                }
 
-            if (downloadTracker.State.Value == DownloadState.NotDownloaded)
+                if (State.Value == DownloadState.NotDownloaded)
                 {
                     if (!beatmapSet.HasVideo)
                         TooltipText = BeatmapsetsStrings.PanelDownloadAll;
@@ -244,3 +290,4 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             }
         }
     }
+}