Skip to content

Commit

Permalink
Merge pull request #28653 from peppy/featured-artist-even-more-visible
Browse files Browse the repository at this point in the history 
Update beatmap listing filter overlay to better imply selected filters
  • Loading branch information
@bdach
bdach authored Jun 28, 2024
2 parents 04c09b5 + 030bbf2 commit 007bd39
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 28 deletions.
5 changes: 3 additions & 2 deletions osu.Game/Overlays/BeatmapListing/BeatmapSearchGeneralFilterRow.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,16 @@ public FeaturedArtistsTabItem()
[Resolved(canBeNull: true)]
private IDialogOverlay dialogOverlay { get; set; }

protected override Color4 GetStateColour() => colours.Orange1;

protected override void LoadComplete()
{
base.LoadComplete();

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)
Expand Down
98 changes: 80 additions & 18 deletions osu.Game/Overlays/BeatmapListing/BeatmapSearchMultipleSelectionFilterRow.cs
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
// Copyright (c) ppy Pty Ltd <[email protected]>. 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
{
Expand All @@ -24,7 +26,7 @@ public partial class BeatmapSearchMultipleSelectionFilterRow<T> : BeatmapSearchF
{
public new readonly BindableList<T> Current = new BindableList<T>();

private MultipleSelectionFilter filter;
private MultipleSelectionFilter filter = null!;

public BeatmapSearchMultipleSelectionFilterRow(LocalisableString header)
: base(header)
Expand All @@ -42,7 +44,6 @@ private void load()
/// <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>
Expand All @@ -54,7 +55,7 @@ private void load()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Spacing = new Vector2(10, 0);
Spacing = new Vector2(10, 5);

AddRange(GetValues().Select(CreateTabItem));
}
Expand All @@ -69,7 +70,7 @@ protected override void LoadComplete()
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);
Expand Down Expand Up @@ -99,30 +100,91 @@ private void toggleItem(T value, bool active)

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)
Expand Down
19 changes: 11 additions & 8 deletions osu.Game/Overlays/BeatmapListing/FilterTabItem.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
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;
Expand All @@ -24,7 +25,7 @@ public partial class FilterTabItem<T> : TabItem<T>
[Resolved]
protected OverlayColourProvider ColourProvider { get; private set; }

private OsuSpriteText text;
protected OsuSpriteText Text;

protected Sample SelectSample { get; private set; } = null!;

Expand All @@ -39,7 +40,7 @@ private void load(AudioManager audio)
AutoSizeAxes = Axes.Both;
AddRangeInternal(new Drawable[]
{
text = new OsuSpriteText
Text = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 13, weight: FontWeight.Regular),
Text = LabelFor(Value)
Expand Down Expand Up @@ -84,16 +85,18 @@ protected override void OnHoverLost(HoverLostEvent e)
/// </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);

protected virtual Color4 GetStateColour() => Active.Value ? ColourProvider.Content1 : ColourProvider.Light2;
Text.FadeColour(colour, 200, Easing.OutQuint);
Text.Font = Text.Font.With(weight: Active.Value ? FontWeight.Bold : FontWeight.Regular);
}
}
}

0 comments on commit 007bd39

Please sign in to comment.