Extract collapsible button container for card usage

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

@@ -8,11 +8,9 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 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.Framework.Localisation;
-using osu.Game.Beatmaps.Drawables.Cards.Buttons;
 using osu.Game.Beatmaps.Drawables.Cards.Statistics;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -24,7 +22,6 @@ using osu.Game.Overlays;
 using osu.Game.Overlays.BeatmapSet;
 using osuTK;
 using osu.Game.Resources.Localisation.Web;
-using DownloadButton = osu.Game.Beatmaps.Drawables.Cards.Buttons.DownloadButton;
 
 namespace osu.Game.Beatmaps.Drawables.Cards
 {
@@ -37,7 +34,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
         private const float width = 408;
         private const float height = 100;
-        private const float icon_area_width = 30;
 
         private readonly APIBeatmapSet beatmapSet;
         private readonly Bindable<BeatmapSetFavouriteState> favouriteState;
@@ -48,20 +44,13 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         private readonly BeatmapCardContent content;
 
         private BeatmapCardThumbnail thumbnail = null!;
+        private CollapsibleButtonContainer buttonContainer = null!;
 
-        private Container rightAreaBackground = null!;
-        private Container<BeatmapCardIconButton> rightAreaButtons = null!;
-
-        private Container mainContent = null!;
-        private BeatmapCardContentBackground mainContentBackground = null!;
         private FillFlowContainer<BeatmapCardStatistic> statisticsContainer = null!;
 
         private FillFlowContainer idleBottomContent = null!;
         private BeatmapCardDownloadProgressBar downloadProgressBar = null!;
 
-        [Resolved]
-        private OsuColour colours { get; set; } = null!;
-
         [Resolved]
         private OverlayColourProvider colourProvider { get; set; } = null!;
 
@@ -94,21 +83,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                     Children = new Drawable[]
                     {
                         downloadTracker,
-                        rightAreaBackground = new Container
-                        {
-                            RelativeSizeAxes = Axes.Y,
-                            Width = icon_area_width + 2 * CORNER_RADIUS,
-                            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,
-                                Colour = Colour4.White
-                            },
-                        },
                         thumbnail = new BeatmapCardThumbnail(beatmapSet)
                         {
                             Name = @"Left (icon) area",
@@ -122,61 +96,19 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                                 Spacing = new Vector2(1)
                             }
                         },
-                        new Container
+                        buttonContainer = new CollapsibleButtonContainer(beatmapSet)
                         {
-                            Name = @"Right (button) area",
-                            Width = 30,
-                            RelativeSizeAxes = Axes.Y,
-                            Origin = Anchor.TopRight,
-                            Anchor = Anchor.TopRight,
-                            Padding = new MarginPadding { Vertical = 17.5f },
-                            Child = rightAreaButtons = new Container<BeatmapCardIconButton>
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Children = new BeatmapCardIconButton[]
-                                {
-                                    new FavouriteButton(beatmapSet)
-                                    {
-                                        Current = favouriteState,
-                                        Anchor = Anchor.TopCentre,
-                                        Origin = Anchor.TopCentre
-                                    },
-                                    new DownloadButton(beatmapSet)
-                                    {
-                                        Anchor = Anchor.BottomCentre,
-                                        Origin = Anchor.BottomCentre,
-                                        State = { BindTarget = downloadTracker.State }
-                                    },
-                                    new GoToBeatmapButton(beatmapSet)
-                                    {
-                                        Anchor = Anchor.BottomCentre,
-                                        Origin = Anchor.BottomCentre,
-                                        State = { BindTarget = downloadTracker.State }
-                                    }
-                                }
-                            }
-                        },
-                        mainContent = new Container
-                        {
-                            Name = @"Main content",
                             X = height - CORNER_RADIUS,
-                            Height = height,
+                            Width = width - height + CORNER_RADIUS,
-                            CornerRadius = CORNER_RADIUS,
+                            FavouriteState = { BindTarget = favouriteState },
-                            Masking = true,
+                            ButtonsCollapsedWidth = CORNER_RADIUS,
+                            ButtonsExpandedWidth = 30,
+                            ButtonsPadding = new MarginPadding { Vertical = 17.5f },
                             Children = new Drawable[]
                             {
-                                mainContentBackground = new BeatmapCardContentBackground(beatmapSet)
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                },
                                 new FillFlowContainer
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    Padding = new MarginPadding
-                                    {
-                                        Horizontal = 10,
-                                        Vertical = 4
-                                    },
                                     Direction = FillDirection.Vertical,
                                     Children = new Drawable[]
                                     {
@@ -256,11 +188,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                                     AutoSizeAxes = Axes.Y,
                                     Anchor = Anchor.BottomLeft,
                                     Origin = Anchor.BottomLeft,
-                                    Padding = new MarginPadding
-                                    {
-                                        Horizontal = 10,
-                                        Vertical = 4
-                                    },
                                     Children = new Drawable[]
                                     {
                                         idleBottomContent = new FillFlowContainer
@@ -388,30 +315,15 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         {
             bool showDetails = IsHovered || Expanded.Value;
 
-            float targetWidth = width - height;
+            buttonContainer.ShowDetails.Value = showDetails;
-            if (showDetails)
-                targetWidth = targetWidth - icon_area_width + CORNER_RADIUS;
-
             thumbnail.Dimmed.Value = showDetails;
 
             // Scale value is intentionally chosen to fit in the spacing of listing displays, as to not overlap horizontally with adjacent cards.
             // This avoids depth issues where a hovered (scaled) card to the right of another card would be beneath the card to the left.
             content.ScaleTo(Expanded.Value ? 1.03f : 1, 500, Easing.OutQuint);
 
-            mainContent.ResizeWidthTo(targetWidth, TRANSITION_DURATION, Easing.OutQuint);
-            mainContentBackground.Dimmed.Value = showDetails;
-
             statisticsContainer.FadeTo(showDetails ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
 
-            rightAreaBackground.FadeColour(downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3, TRANSITION_DURATION, Easing.OutQuint);
-            rightAreaButtons.FadeTo(showDetails ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
-
-            foreach (var button in rightAreaButtons)
-            {
-                button.IdleColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Light1 : colourProvider.Background3;
-                button.HoverColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Content1 : colourProvider.Foreground1;
-            }
-
             bool showProgress = downloadTracker.State.Value == DownloadState.Downloading || downloadTracker.State.Value == DownloadState.Importing;
 
             idleBottomContent.FadeTo(showProgress ? 0 : 1, TRANSITION_DURATION, Easing.OutQuint);

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

@@ -7,11 +7,9 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 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.Framework.Localisation;
-using osu.Game.Beatmaps.Drawables.Cards.Buttons;
 using osu.Game.Beatmaps.Drawables.Cards.Statistics;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
@@ -23,7 +21,6 @@ using osu.Game.Overlays;
 using osu.Game.Overlays.BeatmapSet;
 using osuTK;
 using osu.Game.Resources.Localisation.Web;
-using DownloadButton = osu.Game.Beatmaps.Drawables.Cards.Buttons.DownloadButton;
 
 namespace osu.Game.Beatmaps.Drawables.Cards
 {
@@ -31,7 +28,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
     {
         private const float width = 475;
         private const float height = 140;
-        private const float icon_area_width = 30;
 
         public Bindable<bool> Expanded { get; } = new BindableBool();
 
@@ -44,20 +40,13 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         private readonly BeatmapCardContent content;
 
         private BeatmapCardThumbnail thumbnail = null!;
+        private CollapsibleButtonContainer buttonContainer = null!;
 
-        private Container rightAreaBackground = null!;
-        private Container<BeatmapCardIconButton> rightAreaButtons = null!;
-
-        private Container mainContent = null!;
-        private BeatmapCardContentBackground mainContentBackground = null!;
         private GridContainer statisticsContainer = null!;
 
         private FillFlowContainer idleBottomContent = null!;
         private BeatmapCardDownloadProgressBar downloadProgressBar = null!;
 
-        [Resolved]
-        private OsuColour colours { get; set; } = null!;
-
         [Resolved]
         private OverlayColourProvider colourProvider { get; set; } = null!;
 
@@ -88,21 +77,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                     Children = new Drawable[]
                     {
                         downloadTracker,
-                        rightAreaBackground = new Container
-                        {
-                            RelativeSizeAxes = Axes.Y,
-                            Width = icon_area_width + 2 * BeatmapCard.CORNER_RADIUS,
-                            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,
-                                Colour = Colour4.White
-                            },
-                        },
                         thumbnail = new BeatmapCardThumbnail(beatmapSet)
                         {
                             Name = @"Left (icon) area",
@@ -116,61 +90,19 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                                 Spacing = new Vector2(1)
                             }
                         },
-                        new Container
+                        buttonContainer = new CollapsibleButtonContainer(beatmapSet)
                         {
-                            Name = @"Right (button) area",
-                            Width = 30,
-                            RelativeSizeAxes = Axes.Y,
-                            Origin = Anchor.TopRight,
-                            Anchor = Anchor.TopRight,
-                            Padding = new MarginPadding { Vertical = 35 },
-                            Child = rightAreaButtons = new Container<BeatmapCardIconButton>
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Children = new BeatmapCardIconButton[]
-                                {
-                                    new FavouriteButton(beatmapSet)
-                                    {
-                                        Current = favouriteState,
-                                        Anchor = Anchor.TopCentre,
-                                        Origin = Anchor.TopCentre
-                                    },
-                                    new DownloadButton(beatmapSet)
-                                    {
-                                        Anchor = Anchor.BottomCentre,
-                                        Origin = Anchor.BottomCentre,
-                                        State = { BindTarget = downloadTracker.State }
-                                    },
-                                    new GoToBeatmapButton(beatmapSet)
-                                    {
-                                        Anchor = Anchor.BottomCentre,
-                                        Origin = Anchor.BottomCentre,
-                                        State = { BindTarget = downloadTracker.State }
-                                    }
-                                }
-                            }
-                        },
-                        mainContent = new Container
-                        {
-                            Name = @"Main content",
                             X = height - BeatmapCard.CORNER_RADIUS,
-                            Height = height,
+                            Width = width - height + BeatmapCard.CORNER_RADIUS,
-                            CornerRadius = BeatmapCard.CORNER_RADIUS,
+                            FavouriteState = { BindTarget = favouriteState },
-                            Masking = true,
+                            ButtonsCollapsedWidth = BeatmapCard.CORNER_RADIUS,
+                            ButtonsExpandedWidth = 30,
+                            ButtonsPadding = new MarginPadding { Vertical = 35 },
                             Children = new Drawable[]
                             {
-                                mainContentBackground = new BeatmapCardContentBackground(beatmapSet)
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                },
                                 new FillFlowContainer
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    Padding = new MarginPadding
-                                    {
-                                        Horizontal = 10,
-                                        Vertical = 4
-                                    },
                                     Direction = FillDirection.Vertical,
                                     Children = new Drawable[]
                                     {
@@ -248,11 +180,6 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                                     AutoSizeAxes = Axes.Y,
                                     Anchor = Anchor.BottomLeft,
                                     Origin = Anchor.BottomLeft,
-                                    Padding = new MarginPadding
-                                    {
-                                        Horizontal = 10,
-                                        Vertical = 4
-                                    },
                                     Children = new Drawable[]
                                     {
                                         idleBottomContent = new FillFlowContainer
@@ -414,28 +341,13 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         {
             bool showDetails = IsHovered || Expanded.Value;
 
-            float targetWidth = width - height;
+            buttonContainer.ShowDetails.Value = showDetails;
-            if (showDetails)
-                targetWidth = targetWidth - icon_area_width + BeatmapCard.CORNER_RADIUS;
-
             thumbnail.Dimmed.Value = showDetails;
 
             // Scale value is intentionally chosen to fit in the spacing of listing displays, as to not overlap horizontally with adjacent cards.
             // This avoids depth issues where a hovered (scaled) card to the right of another card would be beneath the card to the left.
             content.ScaleTo(Expanded.Value ? 1.03f : 1, 500, Easing.OutQuint);
 
-            mainContent.ResizeWidthTo(targetWidth, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            mainContentBackground.Dimmed.Value = showDetails;
-
-            rightAreaBackground.FadeColour(downloadTracker.State.Value == DownloadState.LocallyAvailable ? colours.Lime0 : colourProvider.Background3, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            rightAreaButtons.FadeTo(showDetails ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-
-            foreach (var button in rightAreaButtons)
-            {
-                button.IdleColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Light1 : colourProvider.Background3;
-                button.HoverColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Content1 : colourProvider.Foreground1;
-            }
-
             bool showProgress = downloadTracker.State.Value == DownloadState.Downloading || downloadTracker.State.Value == DownloadState.Importing;
 
             idleBottomContent.FadeTo(showProgress ? 0 : 1, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);

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

@@ -0,0 +1,184 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+#nullable enable
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps.Drawables.Cards.Buttons;
+using osu.Game.Graphics;
+using osu.Game.Online;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays;
+
+namespace osu.Game.Beatmaps.Drawables.Cards
+{
+    public class CollapsibleButtonContainer : Container
+    {
+        public Bindable<bool> ShowDetails = new Bindable<bool>();
+        public Bindable<BeatmapSetFavouriteState> FavouriteState = new Bindable<BeatmapSetFavouriteState>();
+
+        private readonly BeatmapDownloadTracker downloadTracker;
+
+        private float buttonsExpandedWidth;
+
+        public float ButtonsExpandedWidth
+        {
+            get => buttonsExpandedWidth;
+            set
+            {
+                buttonsExpandedWidth = value;
+                buttonArea.Width = value;
+                if (IsLoaded)
+                    updateState();
+            }
+        }
+
+        private float buttonsCollapsedWidth;
+
+        public float ButtonsCollapsedWidth
+        {
+            get => buttonsCollapsedWidth;
+            set
+            {
+                buttonsCollapsedWidth = value;
+                if (IsLoaded)
+                    updateState();
+            }
+        }
+
+        public MarginPadding ButtonsPadding
+        {
+            get => buttons.Padding;
+            set => buttons.Padding = value;
+        }
+
+        protected override Container<Drawable> Content => mainContent;
+
+        private readonly Container background;
+
+        private readonly Container buttonArea;
+        private readonly Container<BeatmapCardIconButton> buttons;
+
+        private readonly Container mainArea;
+        private readonly Container mainContent;
+
+        [Resolved]
+        private OsuColour colours { get; set; } = null!;
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; } = null!;
+
+        public CollapsibleButtonContainer(APIBeatmapSet beatmapSet)
+        {
+            downloadTracker = new BeatmapDownloadTracker(beatmapSet);
+
+            RelativeSizeAxes = Axes.Y;
+            Masking = true;
+            CornerRadius = BeatmapCard.CORNER_RADIUS;
+
+            InternalChildren = new Drawable[]
+            {
+                downloadTracker,
+                background = new Container
+                {
+                    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,
+                        Colour = Colour4.White
+                    },
+                },
+                buttonArea = new Container
+                {
+                    Name = @"Right (button) area",
+                    RelativeSizeAxes = Axes.Y,
+                    Origin = Anchor.TopRight,
+                    Anchor = Anchor.TopRight,
+                    Child = buttons = new Container<BeatmapCardIconButton>
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new BeatmapCardIconButton[]
+                        {
+                            new FavouriteButton(beatmapSet)
+                            {
+                                Current = FavouriteState,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre
+                            },
+                            new DownloadButton(beatmapSet)
+                            {
+                                Anchor = Anchor.BottomCentre,
+                                Origin = Anchor.BottomCentre,
+                                State = { BindTarget = downloadTracker.State }
+                            },
+                            new GoToBeatmapButton(beatmapSet)
+                            {
+                                Anchor = Anchor.BottomCentre,
+                                Origin = Anchor.BottomCentre,
+                                State = { BindTarget = downloadTracker.State }
+                            }
+                        }
+                    }
+                },
+                mainArea = new Container
+                {
+                    Name = @"Main content",
+                    RelativeSizeAxes = Axes.Y,
+                    CornerRadius = BeatmapCard.CORNER_RADIUS,
+                    Masking = true,
+                    Children = new Drawable[]
+                    {
+                        new BeatmapCardContentBackground(beatmapSet)
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Dimmed = { BindTarget = ShowDetails }
+                        },
+                        mainContent = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = 10,
+                                Vertical = 4
+                            },
+                        }
+                    }
+                }
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            downloadTracker.State.BindValueChanged(_ => updateState());
+            ShowDetails.BindValueChanged(_ => updateState(), true);
+            FinishTransforms(true);
+        }
+
+        private void updateState()
+        {
+            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);
+            buttons.FadeTo(ShowDetails.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+            foreach (var button in buttons)
+            {
+                button.IdleColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Light1 : colourProvider.Background3;
+                button.HoverColour = downloadTracker.State.Value != DownloadState.LocallyAvailable ? colourProvider.Content1 : colourProvider.Foreground1;
+            }
+        }
+    }
+}