h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-02-21 03:02:54 +08:00
Code Issues Releases Wiki Activity

Update design for selected filters to better imply that they are selected

Browse Source
This commit is contained in:
Dean Herbert 2024-06-28 15:43:04 +09:00
parent c1bec7a7c3
commit fa1527f446
No known key found for this signature in database
2 changed files with 83 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
osu.Game/Overlays/BeatmapListing/BeatmapSearchMultipleSelectionFilterRow.cs
View File

@ -7,12 +7,17 @@ using System.Collections.Specialized;
using System.Linq;
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
{
@ -95,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(ColourForCurrentState, 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)

22
osu.Game/Overlays/BeatmapListing/FilterTabItem.cs
View File

@ -85,27 +85,17 @@ 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 Color4 ColourForCurrentState
{
get
{
Color4 colour = Active.Value ? ColourActive : ColourNormal;
if (IsHovered && (!Active.Value || HighlightOnHoverWhenActive))
colour = colour.Lighten(0.2f);
return colour;
}
}
protected virtual void UpdateState()
{
Text.FadeColour(ColourForCurrentState, 200, Easing.OutQuint);
Color4 colour = Active.Value ? ColourActive : ColourNormal;
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);
}
}