diff --git a/osu.Game/Overlays/OverlayColourProvider.cs b/osu.Game/Overlays/OverlayColourProvider.cs index 9f5583cf73bc..e7c1d8151804 100644 --- a/osu.Game/Overlays/OverlayColourProvider.cs +++ b/osu.Game/Overlays/OverlayColourProvider.cs @@ -33,6 +33,7 @@ public OverlayColourProvider(int hue) public Color4 Colour4 => getColour(0.4f, 0.3f); public Color4 Highlight1 => getColour(1, 0.7f); + public Color4 Highlight2 => getColour(0.5f, 0.45f); public Color4 Content1 => getColour(0.4f, 1); public Color4 Content2 => getColour(0.4f, 0.9f); public Color4 Light1 => getColour(0.4f, 0.8f); diff --git a/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs b/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs index ed4b46ab6484..2147d473a3cb 100644 --- a/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs +++ b/osu.Game/Screens/Ranking/UserTagControl.AddTagsPopover.cs @@ -10,16 +10,16 @@ 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.Framework.Testing; using osu.Game.Graphics; using osu.Game.Graphics.Containers; +using osu.Game.Graphics.Sprites; using osu.Game.Graphics.UserInterface; using osu.Game.Graphics.UserInterfaceV2; using osu.Game.Input.Bindings; -using osu.Game.Screens.Ranking.Statistics; +using osu.Game.Overlays; using osuTK; namespace osu.Game.Screens.Ranking @@ -37,6 +37,11 @@ private partial class AddTagsPopover : OsuPopover private CancellationTokenSource? loadCancellationTokenSource; + public AddTagsPopover() + : base(withPadding: false) + { + } + [BackgroundDependencyLoader] private void load() { @@ -46,6 +51,8 @@ private void load() Anchor.BottomCentre, }; + Content.Padding = new MarginPadding { Vertical = 20 }; + Children = new Drawable[] { new Container @@ -53,25 +60,29 @@ private void load() Size = new Vector2(400, 300), Children = new Drawable[] { - searchBox = new SearchTextBox + new Container { - HoldFocus = true, RelativeSizeAxes = Axes.X, - Depth = float.MinValue, + Padding = new MarginPadding { Horizontal = 20 }, + Child = searchBox = new SearchTextBox + { + HoldFocus = true, + RelativeSizeAxes = Axes.X, + Depth = float.MinValue, + }, }, new OsuScrollContainer { RelativeSizeAxes = Axes.X, Y = 40, Height = 260, - ScrollbarOverlapsContent = false, Child = searchContainer = new SearchContainer { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, - Padding = new MarginPadding { Right = 5, Bottom = 10 }, + Padding = new MarginPadding { Horizontal = 20 }, Direction = FillDirection.Vertical, - Spacing = new Vector2(10), + Spacing = new Vector2(2.5f), } } }, @@ -135,6 +146,8 @@ private partial class GroupFlow : FillFlowContainer, IFilterable { public IEnumerable FilterTerms { get; } + private readonly Circle circle; + public bool MatchingFilter { set => Alpha = value ? 1 : 0; @@ -150,20 +163,49 @@ public GroupFlow(string? name) RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; Direction = FillDirection.Vertical; - Spacing = new Vector2(5); + Spacing = new Vector2(2.5f); - Add(new StatisticItemHeader { Text = name ?? "uncategorised" }); + 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, + } + }, + }); FilterTerms = name == null ? [] : [name]; } + + [BackgroundDependencyLoader] + private void load(OverlayColourProvider colourProvider) + { + circle.Colour = colourProvider.Highlight1; + } } private partial class DrawableAddableTag : OsuAnimatedButton, IFilterable { public readonly UserTag Tag; - private Box votedBackground = null!; - private SpriteIcon votedIcon = null!; + private Box background = null!; private readonly Bindable voted = new Bindable(); private readonly BindableBool updating = new BindableBool(); @@ -177,6 +219,8 @@ public DrawableAddableTag(UserTag tag) RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; + Content.CornerRadius = 4; + ScaleOnMouseDown = 0.95f; voted.BindTo(Tag.Voted); @@ -184,62 +228,56 @@ public DrawableAddableTag(UserTag tag) } [Resolved] - private OsuColour colours { get; set; } = null!; + private OverlayColourProvider colourProvider { get; set; } = null!; [BackgroundDependencyLoader] private void load() { Content.AddRange(new Drawable[] { - new Box + background = new Box { RelativeSizeAxes = Axes.Both, - Colour = colours.Gray7, + Colour = colourProvider.Background3, Depth = float.MaxValue, }, - new Container - { - RelativeSizeAxes = Axes.Y, - Width = 30, - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - Depth = float.MaxValue, - Children = new Drawable[] - { - votedBackground = new Box - { - RelativeSizeAxes = Axes.Both, - }, - votedIcon = new SpriteIcon - { - Size = new Vector2(16), - Icon = FontAwesome.Solid.ThumbsUp, - Anchor = Anchor.Centre, - Origin = Anchor.Centre, - } - } - }, - new FillFlowContainer + new GridContainer { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, - Direction = FillDirection.Vertical, - Spacing = new Vector2(2), - Padding = new MarginPadding(5) { Right = 35 }, - Children = new Drawable[] + Padding = new MarginPadding { Horizontal = 10, Vertical = 5 }, + ColumnDimensions = new[] { - new OsuTextFlowContainer(t => t.Font = OsuFont.Default.With(weight: FontWeight.SemiBold)) + new Dimension(GridSizeMode.Absolute, 100), + new Dimension(GridSizeMode.Absolute, 10), + new Dimension(), + }, + RowDimensions = new[] + { + new Dimension(GridSizeMode.AutoSize), + }, + Content = new[] + { + new Drawable?[] { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Text = Tag.DisplayName, + new OsuTextFlowContainer(t => t.Font = OsuFont.Style.Caption1.With(weight: FontWeight.Bold)) + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Text = Tag.DisplayName, + }, + null, + new OsuTextFlowContainer(t => t.Font = OsuFont.Style.Caption2) + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Text = Tag.Description, + } }, - new OsuTextFlowContainer(t => t.Font = OsuFont.Default.With(size: 14)) - { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Text = Tag.Description, - } } }, loadingLayer = new LoadingLayer(dimBackground: true), @@ -264,8 +302,7 @@ protected override void LoadComplete() voted.BindValueChanged(_ => { - votedBackground.FadeColour(voted.Value ? colours.Lime2 : colours.Gray2, 250, Easing.OutQuint); - votedIcon.FadeColour(voted.Value ? Colour4.Black : Colour4.White, 250, Easing.OutQuint); + background.FadeColour(voted.Value ? colourProvider.Highlight2 : colourProvider.Background3, 250, Easing.OutQuint); }, true); FinishTransforms(true);