Rework user beatmap tag picker to match web#36989
Rework user beatmap tag picker to match web#36989LiquidPL wants to merge 2 commits intoppy:masterfrom
Conversation
This commit brings the tag picker on the results screen in line with the one on the website's beatmap listing page. The main changes are: * moved scrollbar more to the right, 'outside' of the search container, so that the actual content is fully aligned with the search bar, * contents of a single tag container are arranged horizontally instead of vertically, * padding, spacing, and font sizes have been reduced in order to fit more tags on the screen (not particlarly sure on the font sizes), * components follow the colour provider of the parent screen (not that anything else on the results screen does), * removed the thumbs up icon in favor of changing colour of the entire tag drawable when selected.
| public Color4 Colour4 => getColour(0.4f, 0.3f); | ||
|
|
||
| public Color4 Highlight1 => getColour(1, 0.7f); | ||
| public Color4 Highlight2 => getColour(0.5f, 0.45f); |
There was a problem hiding this comment.
| Add(new FillFlowContainer | ||
| { | ||
| RelativeSizeAxes = Axes.X, | ||
| AutoSizeAxes = Axes.Y, | ||
| Direction = FillDirection.Horizontal, | ||
| Spacing = new Vector2(5, 0), | ||
| Margin = new MarginPadding { Vertical = 2.5f }, | ||
| Children = new Drawable[] | ||
| { | ||
| circle = new Circle | ||
| { | ||
| Anchor = Anchor.CentreLeft, | ||
| Origin = Anchor.CentreLeft, | ||
| Height = 12, | ||
| Width = 6, | ||
| }, | ||
| new OsuSpriteText | ||
| { | ||
| Anchor = Anchor.CentreLeft, | ||
| Origin = Anchor.CentreLeft, | ||
| Text = name ?? "uncategorized", | ||
| Font = OsuFont.Style.Heading2, | ||
| } | ||
| }, | ||
| }); |
There was a problem hiding this comment.
I've detached this from StatisticItemHeader since it's being used in a completely different context, and I didn't want to needlessly complicate it with customizing its font size.
Maybe it'll worth it to eventually do that, given that I've seen this type of header used on the new results screen as well.
There was a problem hiding this comment.
I much prefer ^C^V to weird twiddles on things that should never exist for sure. You're not going to hear a complaint about this from me.
bdach
added
type/cosmetic
|
|
||
| voted.BindValueChanged(_ => | ||
| { | ||
| votedBackground.FadeColour(voted.Value ? colours.Lime2 : colours.Gray2, 250, Easing.OutQuint); |
There was a problem hiding this comment.
I don't wanna be caught dead defending my dogshit programmer design but I also can't lie that this particular colour change bothers me a little.
The intent of using lime was to very unambiguously highlight the voted state. And it was also supposed to match the list of tags too, in a way that visually very unambiguously links the two:
You get two splotches of lime that correspond to each other.
Now, with only one of the two places adjusted, this visual association is severed and the result seems worse to me:
The obvious solution would be to apply the same colour to the tags as well, so I tried that and... it looks kinda sauceless..?
It's probably because it starts to encroach on the "add" button's colour and is not distinguished as much anymore.
This is where I would turn to a designer for help, but we don't have one, so I'm going to summon @peppy instead to play the role of benevolent UI/UX dictator.
There was a problem hiding this comment.
With all that in mind I'm not really sure if it was a good idea to get this design applied here. I guess it works better on the website, since there's no tag buttons to be tied with. This was a quick change intended to be used later when I add the picker on the beatmap listing overlay, so it's fine if it's skipped here for now (or at all, if those two pickers should have different layouts altogether).
There was a problem hiding this comment.
I think it's worthwhile to update this still because the current one in master has dogwater colour choices.
Maybe this?
Screen.Recording.2026-03-19.at.13.57.36.mov
diff --git a/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs b/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs
index 2147d473a3..db529bdebe 100644
--- a/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs
+++ b/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs
@@ -206,6 +206,7 @@ private partial class DrawableAddableTag : OsuAnimatedButton, IFilterable
public readonly UserTag Tag;
private Box background = null!;
+ private GridContainer grid = null!;
private readonly Bindable<bool> voted = new Bindable<bool>();
private readonly BindableBool updating = new BindableBool();
@@ -230,6 +231,9 @@ public DrawableAddableTag(UserTag tag)
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
+ [Resolved]
+ private OsuColour colours { get; set; } = null!;
+
[BackgroundDependencyLoader]
private void load()
{
@@ -241,7 +245,7 @@ private void load()
Colour = colourProvider.Background3,
Depth = float.MaxValue,
},
- new GridContainer
+ grid = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
@@ -302,7 +306,8 @@ protected override void LoadComplete()
voted.BindValueChanged(_ =>
{
- background.FadeColour(voted.Value ? colourProvider.Highlight2 : colourProvider.Background3, 250, Easing.OutQuint);
+ background.FadeColour(voted.Value ? colours.Lime2 : colourProvider.Background3, 250, Easing.OutQuint);
+ grid.FadeColour(voted.Value ? Colour4.Black : Colour4.White, 250, Easing.OutQuint);
}, true);
FinishTransforms(true);
There was a problem hiding this comment.
It could use a different colour for the activated state, the black text looks bad on lime especially with the added drop shadow. Also I feel that lime is standing out too much when so much of it is shown in the list, the highlight colour was much more toned down in comparison.
If anything I'd go for the second option, especially since web wants to go in that direction, and maybe try making the add button use a different more standout colour?
I've tried flipping it around and made the tag buttons use the highlight colour while the add button is lime:
If going in this direction I guess the tag buttons could also be changed to use OverlayColourProvider like that web PR.
There was a problem hiding this comment.
Alternatively the other option but with a less black colour (the beatmapset status pill component is using Background3 which looks pretty well on lime so I went with that):
2 participants
This commit brings the tag picker on the results screen in line with the one on the website's beatmap listing page. The main changes are:
I'm just not particularly confident about that tag group header component, but I can't come up with anything better, and I feel that this is an improvement already.