Merge pull request #28947 from peppy/fix-playlist-item-panel

Fix various visuals of playlist beatmap panels

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

@@ -101,7 +101,7 @@ namespace osu.Game.Beatmaps.Drawables.Cards
             bool shouldDim = Dimmed.Value || playButton.Playing.Value;
 
             playButton.FadeTo(shouldDim ? 1 : 0, BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
-            background.FadeColour(colourProvider.Background6.Opacity(shouldDim ? 0.8f : 0f), BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
+            background.FadeColour(colourProvider.Background6.Opacity(shouldDim ? 0.6f : 0f), BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
         }
     }
 }

osu.Game/Screens/OnlinePlay/DrawableRoomPlaylistItem.cs

@@ -49,6 +49,8 @@ namespace osu.Game.Screens.OnlinePlay
 
         private const float icon_height = 34;
 
+        private const float border_thickness = 3;
+
         /// <summary>
         /// Invoked when this item requests to be deleted.
         /// </summary>
@@ -81,7 +83,7 @@ namespace osu.Game.Screens.OnlinePlay
         private IRulesetInfo ruleset;
         private Mod[] requiredMods = Array.Empty<Mod>();
 
-        private Container maskingContainer;
+        private Container borderContainer;
         private FillFlowContainer difficultyIconContainer;
         private LinkFlowContainer beatmapText;
         private LinkFlowContainer authorText;
@@ -134,7 +136,7 @@ namespace osu.Game.Screens.OnlinePlay
         [BackgroundDependencyLoader]
         private void load()
         {
-            maskingContainer.BorderColour = colours.Yellow;
+            borderContainer.BorderColour = colours.Yellow;
 
             ruleset = rulesets.GetRuleset(Item.RulesetID);
             var rulesetInstance = ruleset?.CreateInstance();
@@ -161,7 +163,7 @@ namespace osu.Game.Screens.OnlinePlay
                     return;
                 }
 
-                maskingContainer.BorderThickness = IsSelectedItem ? 5 : 0;
+                borderContainer.BorderThickness = IsSelectedItem ? border_thickness : 0;
             }, true);
 
             valid.BindValueChanged(_ => Scheduler.AddOnce(refresh));
@@ -278,8 +280,8 @@ namespace osu.Game.Screens.OnlinePlay
         {
             if (!valid.Value)
             {
-                maskingContainer.BorderThickness = 5;
+                borderContainer.BorderThickness = border_thickness;
-                maskingContainer.BorderColour = colours.Red;
+                borderContainer.BorderColour = colours.Red;
             }
 
             if (beatmap != null)
@@ -291,12 +293,14 @@ namespace osu.Game.Screens.OnlinePlay
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
                         Width = 60,
+                        Masking = true,
+                        CornerRadius = 10,
                         RelativeSizeAxes = Axes.Y,
                         Dimmed = { Value = IsHovered }
                     },
                     new DifficultyIcon(beatmap, ruleset, requiredMods)
                     {
-                        Size = new Vector2(icon_height),
+                        Size = new Vector2(24),
                         TooltipType = DifficultyIconTooltipType.Extended,
                         Anchor = Anchor.CentreLeft,
                         Origin = Anchor.CentreLeft,
@@ -346,20 +350,19 @@ namespace osu.Game.Screens.OnlinePlay
         {
             Action<SpriteText> fontParameters = s => s.Font = OsuFont.Default.With(size: 14, weight: FontWeight.SemiBold);
 
-            return maskingContainer = new Container
+            return new Container
             {
                 RelativeSizeAxes = Axes.X,
                 Height = HEIGHT,
+                Children = new Drawable[]
+                {
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
                         Masking = true,
                         CornerRadius = 10,
                         Children = new Drawable[]
                         {
-                    new Box // A transparent box that forces the border to be drawn if the panel background is opaque
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Alpha = 0,
-                        AlwaysPresent = true
-                    },
                             onScreenLoader,
                             panelBackground = new PanelBackground
                             {
@@ -396,6 +399,7 @@ namespace osu.Game.Screens.OnlinePlay
                                             AutoSizeAxes = Axes.Y,
                                             RelativeSizeAxes = Axes.X,
                                             Direction = FillDirection.Vertical,
+                                            Spacing = new Vector2(0, -2),
                                             Children = new Drawable[]
                                             {
                                                 beatmapText = new LinkFlowContainer(fontParameters)
@@ -476,6 +480,23 @@ namespace osu.Game.Screens.OnlinePlay
                                 }
                             },
                         },
+                    },
+                    borderContainer = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Masking = true,
+                        CornerRadius = 10,
+                        Children = new Drawable[]
+                        {
+                            new Box // A transparent box that forces the border to be drawn if the panel background is opaque
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Alpha = 0,
+                                AlwaysPresent = true
+                            },
+                        }
+                    }
+                }
             };
         }
 
@@ -509,6 +530,8 @@ namespace osu.Game.Screens.OnlinePlay
         {
             if (thumbnail != null)
                 thumbnail.Dimmed.Value = true;
+
+            panelBackground.FadeColour(OsuColour.Gray(0.7f), BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
             return base.OnHover(e);
         }
 
@@ -516,6 +539,8 @@ namespace osu.Game.Screens.OnlinePlay
         {
             if (thumbnail != null)
                 thumbnail.Dimmed.Value = false;
+
+            panelBackground.FadeColour(OsuColour.Gray(1f), BeatmapCard.TRANSITION_DURATION, Easing.OutQuint);
             base.OnHoverLost(e);
         }
 
@@ -642,7 +667,6 @@ namespace osu.Game.Screens.OnlinePlay
                     backgroundSprite = new UpdateableBeatmapBackgroundSprite
                     {
                         RelativeSizeAxes = Axes.Both,
-                        FillMode = FillMode.Fill,
                     },
                     new FillFlowContainer
                     {
@@ -651,7 +675,7 @@ namespace osu.Game.Screens.OnlinePlay
                         Direction = FillDirection.Horizontal,
                         // This makes the gradient not be perfectly horizontal, but diagonal at a ~40° angle
                         Shear = new Vector2(0.8f, 0),
-                        Alpha = 0.5f,
+                        Alpha = 0.6f,
                         Children = new[]
                         {
                             // The left half with no gradient applied