1
0
mirror of https://github.com/ppy/osu.git synced 2024-09-22 07:27:25 +08:00

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

Update beatmap listing filter overlay to better imply selected filters
This commit is contained in:
Bartłomiej Dach 2024-06-28 09:50:21 +02:00 committed by GitHub
commit 007bd3973a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 94 additions and 28 deletions

View File

@ -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)

View File

@ -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;
protected override bool HighlightOnHoverWhenActive => true;
private Drawable activeContent = null!;
private Circle background = null!;
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,
Height = 1.5f,
Anchor = Anchor.BottomLeft,
Origin = Anchor.CentreLeft,
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Padding = new MarginPadding
{
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();
selectedUnderline.FadeTo(Active.Value ? 1 : 0, 200, Easing.OutQuint);
selectedUnderline.FadeColour(IsHovered ? ColourProvider.Content2 : GetStateColour(), 200, Easing.OutQuint);
Color4 colour = Active.Value ? ColourActive : ColourNormal;
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)

View File

@ -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);
text.Font = text.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Regular);
if (IsHovered)
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;
}
}