Add expanded/compact display modes for GameplayLeaderboard

osu.Game/Screens/Play/HUD/GameplayLeaderboard.cs

@@ -50,8 +50,6 @@ namespace osu.Game.Screens.Play.HUD
         {
             var drawable = new GameplayLeaderboardScore(user, isTracked)
             {
-                Anchor = Anchor.TopRight,
-                Origin = Anchor.TopRight,
                 Expanded = { BindTarget = Expanded },
             };
 

osu.Game/Screens/Play/HUD/GameplayLeaderboardScore.cs

@@ -20,16 +20,31 @@ namespace osu.Game.Screens.Play.HUD
 {
     public class GameplayLeaderboardScore : CompositeDrawable, ILeaderboardScore
     {
-        public const float EXTENDED_WIDTH = 255f;
+        public const float EXTENDED_WIDTH = regular_width + top_player_left_width_extension;
 
         private const float regular_width = 235f;
 
+        // a bit hand-wavy, but there's a lot of hard-coded paddings in each of the grid's internals.
+        private const float compact_width = 77.5f;
+
+        private const float top_player_left_width_extension = 20f;
+
         public const float PANEL_HEIGHT = 35f;
 
         public const float SHEAR_WIDTH = PANEL_HEIGHT * panel_shear;
 
         private const float panel_shear = 0.15f;
 
+        private const float rank_text_width = 35f;
+
+        private const float score_components_width = 85f;
+
+        private const float avatar_size = 25f;
+
+        private const double panel_transition_duration = 500;
+
+        private const double text_transition_duration = 200;
+
         public Bindable<bool> Expanded = new Bindable<bool>();
 
         private OsuSpriteText positionText, scoreText, accuracyText, comboText, usernameText;
@@ -65,8 +80,15 @@ namespace osu.Game.Screens.Play.HUD
         private readonly bool trackedPlayer;
 
         private Container mainFillContainer;
+
         private Box centralFill;
 
+        private Container backgroundPaddingAdjustContainer;
+
+        private GridContainer gridContainer;
+
+        private Container scoreComponents;
+
         /// <summary>
         /// Creates a new <see cref="GameplayLeaderboardScore"/>.
         /// </summary>
@@ -77,7 +99,8 @@ namespace osu.Game.Screens.Play.HUD
             User = user;
             this.trackedPlayer = trackedPlayer;
 
-            Size = new Vector2(EXTENDED_WIDTH, PANEL_HEIGHT);
+            AutoSizeAxes = Axes.X;
+            Height = PANEL_HEIGHT;
         }
 
         [BackgroundDependencyLoader]
@@ -86,33 +109,49 @@ namespace osu.Game.Screens.Play.HUD
             Container avatarContainer;
 
             InternalChildren = new Drawable[]
+            {
+                new Container
+                {
+                    AutoSizeAxes = Axes.X,
+                    RelativeSizeAxes = Axes.Y,
+                    Margin = new MarginPadding { Left = top_player_left_width_extension },
+                    Children = new Drawable[]
+                    {
+                        backgroundPaddingAdjustContainer = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Children = new Drawable[]
                             {
                                 mainFillContainer = new Container
                                 {
-                    Width = regular_width,
-                    RelativeSizeAxes = Axes.Y,
                                     Anchor = Anchor.TopRight,
                                     Origin = Anchor.TopRight,
+                                    RelativeSizeAxes = Axes.Both,
                                     Masking = true,
                                     CornerRadius = 5f,
                                     Shear = new Vector2(panel_shear, 0f),
-                    Child = new Box
+                                    Children = new Drawable[]
+                                    {
+                                        new Box
                                         {
                                             Alpha = 0.5f,
                                             RelativeSizeAxes = Axes.Both,
+                                        },
+                                    },
+                                },
                             }
                         },
-                new GridContainer
+                        gridContainer = new GridContainer
                         {
-                    Width = regular_width,
                             RelativeSizeAxes = Axes.Y,
+                            Width = compact_width, // will be updated by expanded state.
                             Anchor = Anchor.TopRight,
                             Origin = Anchor.TopRight,
                             ColumnDimensions = new[]
                             {
-                        new Dimension(GridSizeMode.Absolute, 35f),
+                                new Dimension(GridSizeMode.Absolute, rank_text_width),
                                 new Dimension(),
-                        new Dimension(GridSizeMode.Absolute, 85f),
+                                new Dimension(GridSizeMode.AutoSize, maxSize: score_components_width),
                             },
                             Content = new[]
                             {
@@ -164,7 +203,7 @@ namespace osu.Game.Screens.Play.HUD
                                                         Masking = true,
                                                         Anchor = Anchor.CentreLeft,
                                                         Origin = Anchor.CentreLeft,
-                                                Size = new Vector2(25f),
+                                                        Size = new Vector2(avatar_size),
                                                         Children = new Drawable[]
                                                         {
                                                             new Box
@@ -192,10 +231,12 @@ namespace osu.Game.Screens.Play.HUD
                                             },
                                         }
                                     },
-                            new Container
+                                    scoreComponents = new Container
                                     {
                                         Padding = new MarginPadding { Top = 2f, Right = 17.5f, Bottom = 5f },
-                                RelativeSizeAxes = Axes.Both,
+                                        AlwaysPresent = true, // required to smoothly animate autosize after hidden early.
+                                        Masking = true,
+                                        RelativeSizeAxes = Axes.Y,
                                         Anchor = Anchor.CentreLeft,
                                         Origin = Anchor.CentreLeft,
                                         Colour = Color4.White,
@@ -228,6 +269,8 @@ namespace osu.Game.Screens.Play.HUD
                                 }
                             }
                         }
+                    }
+                },
             };
 
             LoadComponentAsync(new DrawableAvatar(User), avatarContainer.Add);
@@ -243,18 +286,43 @@ namespace osu.Game.Screens.Play.HUD
             base.LoadComplete();
 
             updateState();
+            Expanded.BindValueChanged(changeExpandedState, true);
+
             FinishTransforms(true);
         }
 
-        private const double panel_transition_duration = 500;
+        private void changeExpandedState(ValueChangedEvent<bool> expanded)
+        {
+            scoreComponents.ClearTransforms();
+
+            if (expanded.NewValue)
+            {
+                gridContainer.ResizeWidthTo(regular_width, panel_transition_duration, Easing.OutQuint);
+
+                scoreComponents.ResizeWidthTo(score_components_width, panel_transition_duration, Easing.OutQuint);
+                scoreComponents.FadeIn(panel_transition_duration, Easing.OutQuint);
+
+                usernameText.FadeIn(panel_transition_duration, Easing.OutQuint);
+            }
+            else
+            {
+                gridContainer.ResizeWidthTo(compact_width, panel_transition_duration, Easing.OutQuint);
+
+                scoreComponents.ResizeWidthTo(0, panel_transition_duration, Easing.OutQuint);
+                scoreComponents.FadeOut(text_transition_duration, Easing.OutQuint);
+
+                usernameText.FadeOut(text_transition_duration, Easing.OutQuint);
+            }
+        }
 
         private void updateState()
         {
+            bool widthExtension = false;
+
             if (HasQuit.Value)
             {
                 // we will probably want to display this in a better way once we have a design.
                 // and also show states other than quit.
-                mainFillContainer.ResizeWidthTo(regular_width, panel_transition_duration, Easing.OutElastic);
                 panelColour = Color4.Gray;
                 textColour = Color4.White;
                 return;
@@ -262,22 +330,29 @@ namespace osu.Game.Screens.Play.HUD
 
             if (scorePosition == 1)
             {
-                mainFillContainer.ResizeWidthTo(EXTENDED_WIDTH, panel_transition_duration, Easing.OutElastic);
+                widthExtension = true;
                 panelColour = Color4Extensions.FromHex("7fcc33");
                 textColour = Color4.White;
             }
             else if (trackedPlayer)
             {
-                mainFillContainer.ResizeWidthTo(EXTENDED_WIDTH, panel_transition_duration, Easing.OutElastic);
+                widthExtension = true;
                 panelColour = Color4Extensions.FromHex("ffd966");
                 textColour = Color4Extensions.FromHex("2e576b");
             }
             else
             {
-                mainFillContainer.ResizeWidthTo(regular_width, panel_transition_duration, Easing.OutElastic);
                 panelColour = Color4Extensions.FromHex("3399cc");
                 textColour = Color4.White;
             }
+
+            this.TransformTo(nameof(SizeContainerLeftPadding), widthExtension ? -top_player_left_width_extension : 0, panel_transition_duration, Easing.OutElastic);
+        }
+
+        public float SizeContainerLeftPadding
+        {
+            get => backgroundPaddingAdjustContainer.Padding.Left;
+            set => backgroundPaddingAdjustContainer.Padding = new MarginPadding { Left = value };
         }
 
         private Color4 panelColour
@@ -289,8 +364,6 @@ namespace osu.Game.Screens.Play.HUD
             }
         }
 
-        private const double text_transition_duration = 200;
-
         private Color4 textColour
         {
             set