Merge pull request #15276 from bdach/update-beatmap-set-status-pill-appearance

Update beatmap set status pill appearance in line with new designs

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapSetOnlineStatusPill.cs

@@ -0,0 +1,53 @@
+// 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.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using NUnit.Framework;
+using osu.Framework.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.Drawables;
+using osu.Game.Overlays;
+using osu.Game.Tests.Visual.UserInterface;
+using osuTK;
+
+namespace osu.Game.Tests.Visual.Beatmaps
+{
+    public class TestSceneBeatmapSetOnlineStatusPill : ThemeComparisonTestScene
+    {
+        protected override Drawable CreateContent() => new FillFlowContainer
+        {
+            AutoSizeAxes = Axes.Both,
+            Anchor = Anchor.Centre,
+            Origin = Anchor.Centre,
+            Direction = FillDirection.Vertical,
+            Spacing = new Vector2(0, 10),
+            ChildrenEnumerable = Enum.GetValues(typeof(BeatmapSetOnlineStatus)).Cast<BeatmapSetOnlineStatus>().Select(status => new BeatmapSetOnlineStatusPill
+            {
+                AutoSizeAxes = Axes.Both,
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Status = status
+            })
+        };
+
+        private IEnumerable<BeatmapSetOnlineStatusPill> statusPills => this.ChildrenOfType<BeatmapSetOnlineStatusPill>();
+
+        [Test]
+        public void TestFixedWidth()
+        {
+            AddStep("create themed content", () => CreateThemedContent(OverlayColourScheme.Red));
+
+            AddStep("set fixed width", () => statusPills.ForEach(pill =>
+            {
+                pill.AutoSizeAxes = Axes.Y;
+                pill.Width = 90;
+            }));
+            AddStep("unset fixed width", () => statusPills.ForEach(pill => pill.AutoSizeAxes = Axes.Both));
+        }
+    }
+}

osu.Game/Beatmaps/Drawables/BeatmapSetOnlineStatusPill.cs

@@ -1,6 +1,9 @@
 // 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.Extensions;
 using osu.Framework.Extensions.LocalisationExtensions;
 using osu.Framework.Graphics;
@@ -8,15 +11,13 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
 using osuTK.Graphics;
 
 namespace osu.Game.Beatmaps.Drawables
 {
     public class BeatmapSetOnlineStatusPill : CircularContainer
     {
-        private readonly OsuSpriteText statusText;
-        private readonly Box background;
-
         private BeatmapSetOnlineStatus status;
 
         public BeatmapSetOnlineStatus Status
@@ -29,8 +30,8 @@ namespace osu.Game.Beatmaps.Drawables
 
                 status = value;
 
-                Alpha = value == BeatmapSetOnlineStatus.None ? 0 : 1;
+                if (IsLoaded)
-                statusText.Text = value.GetLocalisableDescription().ToUpper();
+                    updateState();
             }
         }
 
@@ -46,15 +47,17 @@ namespace osu.Game.Beatmaps.Drawables
             set => statusText.Padding = value;
         }
 
-        public Color4 BackgroundColour
+        private readonly OsuSpriteText statusText;
-        {
+        private readonly Box background;
-            get => background.Colour;
+
-            set => background.Colour = value;
+        [Resolved]
-        }
+        private OsuColour colours { get; set; } = null!;
+
+        [Resolved(CanBeNull = true)]
+        private OverlayColourProvider? colourProvider { get; set; }
 
         public BeatmapSetOnlineStatusPill()
         {
-            AutoSizeAxes = Axes.Both;
             Masking = true;
 
             Children = new Drawable[]
@@ -63,7 +66,6 @@ namespace osu.Game.Beatmaps.Drawables
                 {
                     RelativeSizeAxes = Axes.Both,
                     Colour = Color4.Black,
-                    Alpha = 0.5f,
                 },
                 statusText = new OsuSpriteText
                 {
@@ -74,6 +76,27 @@ namespace osu.Game.Beatmaps.Drawables
             };
 
             Status = BeatmapSetOnlineStatus.None;
+            TextPadding = new MarginPadding { Horizontal = 5, Bottom = 1 };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            updateState();
+        }
+
+        private void updateState()
+        {
+            Alpha = Status == BeatmapSetOnlineStatus.None ? 0 : 1;
+
+            statusText.Text = Status.GetLocalisableDescription().ToUpper();
+
+            if (colourProvider != null)
+                statusText.Colour = status == BeatmapSetOnlineStatus.Graveyard ? colourProvider.Background1 : colourProvider.Background3;
+            else
+                statusText.Colour = status == BeatmapSetOnlineStatus.Graveyard ? colours.GreySeafoamLight : Color4.Black;
+
+            background.Colour = OsuColour.ForBeatmapSetOnlineStatus(Status) ?? colourProvider?.Light1 ?? colours.GreySeafoamLighter;
         }
     }
 }

osu.Game/Graphics/OsuColour.cs

@@ -118,6 +118,42 @@ namespace osu.Game.Graphics
             }
         }
 
+        /// <summary>
+        /// Retrieves a colour for the given <see cref="BeatmapSetOnlineStatus"/>.
+        /// A <see langword="null"/> value indicates that a "background" shade from the local <see cref="OverlayColourProvider"/>
+        /// (or another fallback colour) should be used.
+        /// </summary>
+        /// <remarks>
+        /// Sourced from web: https://github.com/ppy/osu-web/blob/007eebb1916ed5cb6a7866d82d8011b1060a945e/resources/assets/less/layout.less#L36-L50
+        /// </remarks>
+        public static Color4? ForBeatmapSetOnlineStatus(BeatmapSetOnlineStatus status)
+        {
+            switch (status)
+            {
+                case BeatmapSetOnlineStatus.Ranked:
+                case BeatmapSetOnlineStatus.Approved:
+                    return Color4Extensions.FromHex(@"b3ff66");
+
+                case BeatmapSetOnlineStatus.Loved:
+                    return Color4Extensions.FromHex(@"ff66ab");
+
+                case BeatmapSetOnlineStatus.Qualified:
+                    return Color4Extensions.FromHex(@"66ccff");
+
+                case BeatmapSetOnlineStatus.Pending:
+                    return Color4Extensions.FromHex(@"ffd966");
+
+                case BeatmapSetOnlineStatus.WIP:
+                    return Color4Extensions.FromHex(@"ff9966");
+
+                case BeatmapSetOnlineStatus.Graveyard:
+                    return Color4.Black;
+
+                default:
+                    return null;
+            }
+        }
+
         /// <summary>
         /// Returns a foreground text colour that is supposed to contrast well with
         /// the supplied <paramref name="backgroundColour"/>.

osu.Game/Overlays/BeatmapListing/Panels/GridBeatmapPanel.cs

@@ -243,6 +243,7 @@ namespace osu.Game.Overlays.BeatmapListing.Panels
 
             statusContainer.Add(new BeatmapSetOnlineStatusPill
             {
+                AutoSizeAxes = Axes.Both,
                 TextSize = 12,
                 TextPadding = new MarginPadding { Horizontal = 10, Vertical = 5 },
                 Status = SetInfo.OnlineInfo?.Status ?? BeatmapSetOnlineStatus.None,

osu.Game/Overlays/BeatmapListing/Panels/ListBeatmapPanel.cs

@@ -257,6 +257,7 @@ namespace osu.Game.Overlays.BeatmapListing.Panels
 
             statusContainer.Add(new BeatmapSetOnlineStatusPill
             {
+                AutoSizeAxes = Axes.Both,
                 TextSize = 12,
                 TextPadding = new MarginPadding { Horizontal = 10, Vertical = 4 },
                 Status = SetInfo.OnlineInfo?.Status ?? BeatmapSetOnlineStatus.None,

osu.Game/Overlays/BeatmapSet/BeatmapSetHeaderContent.cs

@@ -198,6 +198,7 @@ namespace osu.Game.Overlays.BeatmapSet
                         {
                             onlineStatusPill = new BeatmapSetOnlineStatusPill
                             {
+                                AutoSizeAxes = Axes.Both,
                                 Anchor = Anchor.TopRight,
                                 Origin = Anchor.TopRight,
                                 TextSize = 14,
@@ -220,7 +221,6 @@ namespace osu.Game.Overlays.BeatmapSet
         private void load(OverlayColourProvider colourProvider)
         {
             coverGradient.Colour = ColourInfo.GradientVertical(colourProvider.Background6.Opacity(0.3f), colourProvider.Background6.Opacity(0.8f));
-            onlineStatusPill.BackgroundColour = colourProvider.Background6;
 
             State.BindValueChanged(_ => updateDownloadButtons());
 

osu.Game/Screens/Select/BeatmapInfoWedge.cs

@@ -257,6 +257,7 @@ namespace osu.Game.Screens.Select
                             },
                             StatusPill = new BeatmapSetOnlineStatusPill
                             {
+                                AutoSizeAxes = Axes.Both,
                                 Anchor = Anchor.TopRight,
                                 Origin = Anchor.TopRight,
                                 Shear = -wedged_container_shear,

osu.Game/Screens/Select/Carousel/SetPanelContent.cs

@@ -60,6 +60,7 @@ namespace osu.Game.Screens.Select.Carousel
                         {
                             new BeatmapSetOnlineStatusPill
                             {
+                                AutoSizeAxes = Axes.Both,
                                 Origin = Anchor.CentreLeft,
                                 Anchor = Anchor.CentreLeft,
                                 Margin = new MarginPadding { Right = 5 },