Merge pull request #28653 from peppy/featured-artist-even-more-visible

Update beatmap listing filter overlay to better imply selected filters

osu.Game/Overlays/BeatmapListing/BeatmapSearchGeneralFilterRow.cs

@@ -56,8 +56,6 @@ namespace osu.Game.Overlays.BeatmapListing
             [Resolved(canBeNull: true)]
             private IDialogOverlay dialogOverlay { get; set; }
 
-            protected override Color4 GetStateColour() => colours.Orange1;
-
             protected override void LoadComplete()
             {
                 base.LoadComplete();
@@ -65,6 +63,9 @@ namespace osu.Game.Overlays.BeatmapListing
                 disclaimerShown = sessionStatics.GetBindable<bool>(Static.FeaturedArtistDisclaimerShownOnce);
             }
 
+            protected override Color4 ColourNormal => colours.Orange1;
+            protected override Color4 ColourActive => colours.Orange2;
+
             protected override bool OnClick(ClickEvent e)
             {
                 if (!disclaimerShown.Value && dialogOverlay != null)

osu.Game/Overlays/BeatmapListing/BeatmapSearchMultipleSelectionFilterRow.cs

@@ -1,21 +1,23 @@
 // 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 disable
-
 using System;
 using System.Collections.Generic;
 using System.Collections.Specialized;
 using System.Linq;
-using JetBrains.Annotations;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 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.Graphics;
 using osuTK;
+using osuTK.Graphics;
+using FontWeight = osu.Game.Graphics.FontWeight;
 
 namespace osu.Game.Overlays.BeatmapListing
 {
@@ -24,7 +26,7 @@ namespace osu.Game.Overlays.BeatmapListing
     {
         public new readonly BindableList<T> Current = new BindableList<T>();
 
-        private MultipleSelectionFilter filter;
+        private MultipleSelectionFilter filter = null!;
 
         public BeatmapSearchMultipleSelectionFilterRow(LocalisableString header)
             : base(header)
@@ -42,7 +44,6 @@ namespace osu.Game.Overlays.BeatmapListing
         /// <summary>
         /// Creates a filter control that can be used to simultaneously select multiple values of type <typeparamref name="T"/>.
         /// </summary>
-        [NotNull]
         protected virtual MultipleSelectionFilter CreateMultipleSelectionFilter() => new MultipleSelectionFilter();
 
         protected partial class MultipleSelectionFilter : FillFlowContainer<MultipleSelectionFilterTabItem>
@@ -54,7 +55,7 @@ namespace osu.Game.Overlays.BeatmapListing
             {
                 RelativeSizeAxes = Axes.X;
                 AutoSizeAxes = Axes.Y;
-                Spacing = new Vector2(10, 0);
+                Spacing = new Vector2(10, 5);
 
                 AddRange(GetValues().Select(CreateTabItem));
             }
@@ -69,7 +70,7 @@ namespace osu.Game.Overlays.BeatmapListing
                 Current.BindCollectionChanged(currentChanged, true);
             }
 
-            private void currentChanged(object sender, NotifyCollectionChangedEventArgs e)
+            private void currentChanged(object? sender, NotifyCollectionChangedEventArgs e)
             {
                 foreach (var c in Children)
                     c.Active.Value = Current.Contains(c.Value);
@@ -99,30 +100,91 @@ namespace osu.Game.Overlays.BeatmapListing
 
         protected partial class MultipleSelectionFilterTabItem : FilterTabItem<T>
         {
-            private readonly Box selectedUnderline;
+            private Drawable activeContent = null!;
-
+            private Circle background = null!;
-            protected override bool HighlightOnHoverWhenActive => true;
 
             public MultipleSelectionFilterTabItem(T value)
                 : base(value)
             {
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                AutoSizeDuration = 100;
+                AutoSizeEasing = Easing.OutQuint;
+
                 // This doesn't match any actual design, but should make it easier for the user to understand
                 // that filters are applied until we settle on a final design.
-                AddInternal(selectedUnderline = new Box
+                AddInternal(activeContent = new Container
                 {
                     Depth = float.MaxValue,
-                    RelativeSizeAxes = Axes.X,
+                    RelativeSizeAxes = Axes.Both,
-                    Height = 1.5f,
+                    Alpha = 0,
-                    Anchor = Anchor.BottomLeft,
+                    Padding = new MarginPadding
-                    Origin = Anchor.CentreLeft,
+                    {
+                        Left = -16,
+                        Right = -4,
+                        Vertical = -2
+                    },
+                    Children = new Drawable[]
+                    {
+                        background = new Circle
+                        {
+                            Colour = Color4.White,
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        new SpriteIcon
+                        {
+                            Icon = FontAwesome.Solid.TimesCircle,
+                            Size = new Vector2(10),
+                            Colour = ColourProvider.Background4,
+                            Position = new Vector2(3, 0.5f),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                        }
+                    }
                 });
             }
 
+            protected override Color4 ColourActive => ColourProvider.Light1;
+
+            public override bool ReceivePositionalInputAt(Vector2 screenSpacePos)
+            {
+                return Active.Value
+                    ? background.ReceivePositionalInputAt(screenSpacePos)
+                    : base.ReceivePositionalInputAt(screenSpacePos);
+            }
+
             protected override void UpdateState()
             {
-                base.UpdateState();
+                Color4 colour = Active.Value ? ColourActive : ColourNormal;
-                selectedUnderline.FadeTo(Active.Value ? 1 : 0, 200, Easing.OutQuint);
+
-                selectedUnderline.FadeColour(IsHovered ? ColourProvider.Content2 : GetStateColour(), 200, Easing.OutQuint);
+                if (IsHovered)
+                    colour = Active.Value ? colour.Darken(0.2f) : colour.Lighten(0.2f);
+
+                if (Active.Value)
+                {
+                    // This just allows enough spacing for adjacent tab items to show the "x".
+                    Padding = new MarginPadding { Left = 12 };
+
+                    activeContent.FadeIn(200, Easing.OutQuint);
+                    background.FadeColour(colour, 200, Easing.OutQuint);
+
+                    // flipping colours
+                    Text.FadeColour(ColourProvider.Background4, 200, Easing.OutQuint);
+                    Text.Font = Text.Font.With(weight: FontWeight.SemiBold);
+                }
+                else
+                {
+                    Padding = new MarginPadding();
+
+                    activeContent.FadeOut();
+
+                    background.FadeColour(colour, 200, Easing.OutQuint);
+                    Text.FadeColour(colour, 200, Easing.OutQuint);
+                    Text.Font = Text.Font.With(weight: FontWeight.Regular);
+                }
             }
 
             protected override bool OnClick(ClickEvent e)

osu.Game/Overlays/BeatmapListing/FilterTabItem.cs

@@ -8,6 +8,7 @@ using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
 using osu.Framework.Extensions;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
@@ -24,7 +25,7 @@ namespace osu.Game.Overlays.BeatmapListing
         [Resolved]
         protected OverlayColourProvider ColourProvider { get; private set; }
 
-        private OsuSpriteText text;
+        protected OsuSpriteText Text;
 
         protected Sample SelectSample { get; private set; } = null!;
 
@@ -39,7 +40,7 @@ namespace osu.Game.Overlays.BeatmapListing
             AutoSizeAxes = Axes.Both;
             AddRangeInternal(new Drawable[]
             {
-                text = new OsuSpriteText
+                Text = new OsuSpriteText
                 {
                     Font = OsuFont.GetFont(size: 13, weight: FontWeight.Regular),
                     Text = LabelFor(Value)
@@ -84,16 +85,18 @@ namespace osu.Game.Overlays.BeatmapListing
         /// </summary>
         protected virtual LocalisableString LabelFor(T value) => (value as Enum)?.GetLocalisableDescription() ?? value.ToString();
 
-        protected virtual bool HighlightOnHoverWhenActive => false;
+        protected virtual Color4 ColourActive => ColourProvider.Content1;
+        protected virtual Color4 ColourNormal => ColourProvider.Light2;
 
         protected virtual void UpdateState()
         {
-            bool highlightHover = IsHovered && (!Active.Value || HighlightOnHoverWhenActive);
+            Color4 colour = Active.Value ? ColourActive : ColourNormal;
 
-            text.FadeColour(highlightHover ? ColourProvider.Content2 : GetStateColour(), 200, Easing.OutQuint);
+            if (IsHovered)
-            text.Font = text.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Regular);
+                colour = colour.Lighten(0.2f);
+
+            Text.FadeColour(colour, 200, Easing.OutQuint);
+            Text.Font = Text.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Regular);
         }
-
-        protected virtual Color4 GetStateColour() => Active.Value ? ColourProvider.Content1 : ColourProvider.Light2;
     }
 }