From 3fea8d5e62e709ce46bc480e32dc10b33c6c251f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= <dach.bartlomiej@gmail.com>
Date: Sun, 5 Dec 2021 15:48:02 +0100
Subject: [PATCH] Implement visual behaviour of expanded card state

---
 .../Beatmaps/Drawables/Cards/BeatmapCard.cs   | 15 +++++----
 .../Drawables/Cards/BeatmapCardDropdown.cs    | 33 +++++++++++++++++--
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs b/osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs
index 46ee9afb86..f0425794be 100644
--- a/osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs
+++ b/osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs
@@ -359,7 +359,8 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         {
             base.LoadComplete();
 
-            downloadTracker.State.BindValueChanged(_ => updateState(), true);
+            downloadTracker.State.BindValueChanged(_ => updateState());
+            Expanded.BindValueChanged(_ => updateState(), true);
             FinishTransforms(true);
         }
 
@@ -401,19 +402,21 @@ namespace osu.Game.Beatmaps.Drawables.Cards
 
         private void updateState()
         {
+            bool showDetails = IsHovered || Expanded.Value;
+
             float targetWidth = width - height;
-            if (IsHovered)
+            if (showDetails)
                 targetWidth = targetWidth - icon_area_width + CORNER_RADIUS;
 
-            thumbnail.Dimmed.Value = IsHovered;
+            thumbnail.Dimmed.Value = showDetails;
 
             mainContent.ResizeWidthTo(targetWidth, TRANSITION_DURATION, Easing.OutQuint);
-            mainContentBackground.Dimmed.Value = IsHovered;
+            mainContentBackground.Dimmed.Value = showDetails;
 
-            statisticsContainer.FadeTo(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
+            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(IsHovered ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
+            rightAreaButtons.FadeTo(showDetails ? 1 : 0, TRANSITION_DURATION, Easing.OutQuint);
 
             foreach (var button in rightAreaButtons)
             {
diff --git a/osu.Game/Beatmaps/Drawables/Cards/BeatmapCardDropdown.cs b/osu.Game/Beatmaps/Drawables/Cards/BeatmapCardDropdown.cs
index 29f12de947..877338ecb0 100644
--- a/osu.Game/Beatmaps/Drawables/Cards/BeatmapCardDropdown.cs
+++ b/osu.Game/Beatmaps/Drawables/Cards/BeatmapCardDropdown.cs
@@ -5,8 +5,10 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Beatmaps.Drawables.Cards
 {
@@ -25,15 +27,17 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         public Bindable<bool> Expanded { get; } = new BindableBool();
 
         private readonly Box background;
+        private readonly Container content;
         private readonly Container bodyContent;
         private readonly Container dropdownContent;
+        private readonly Container borderContainer;
 
         public BeatmapCardDropdown(float height)
         {
             RelativeSizeAxes = Axes.X;
             Height = height;
 
-            InternalChild = new Container
+            InternalChild = content = new Container
             {
                 RelativeSizeAxes = Axes.X,
                 AutoSizeAxes = Axes.Y,
@@ -59,6 +63,19 @@ namespace osu.Game.Beatmaps.Drawables.Cards
                         AutoSizeAxes = Axes.Y,
                         Margin = new MarginPadding { Top = height },
                         Alpha = 0
+                    },
+                    borderContainer = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        CornerRadius = BeatmapCard.CORNER_RADIUS,
+                        Masking = true,
+                        BorderThickness = 3,
+                        Child = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0,
+                            AlwaysPresent = true
+                        }
                     }
                 }
             };
@@ -68,18 +85,30 @@ namespace osu.Game.Beatmaps.Drawables.Cards
         private void load(OverlayColourProvider colourProvider)
         {
             background.Colour = colourProvider.Background2;
+            borderContainer.BorderColour = colourProvider.Highlight1;
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
-            Expanded.BindValueChanged(_ => updateState());
+            Expanded.BindValueChanged(_ => updateState(), true);
+            FinishTransforms(true);
         }
 
         private void updateState()
         {
             background.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
             dropdownContent.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+            borderContainer.FadeTo(Expanded.Value ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+
+            content.TweenEdgeEffectTo(new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Offset = new Vector2(0, 2),
+                Radius = 10,
+                Colour = Colour4.Black.Opacity(Expanded.Value ? 0.3f : 0f),
+                Hollow = true,
+            }, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
         }
     }
 }