mirror of
https://github.com/ppy/osu.git
synced 2025-02-21 05:53:20 +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:
commit
007bd3973a
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user