1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-14 16:52:54 +08:00

Merge pull request #8038 from thewildtree/adjust-rankings-overlay

Adjust rankings overlay elements to better match osu-web
This commit is contained in:
Dean Herbert 2021-07-07 20:24:11 +09:00 committed by GitHub
commit e42609f092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 109 additions and 69 deletions

View File

@ -1,4 +1,4 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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.
using osu.Framework.Allocation;
@ -17,7 +17,7 @@ namespace osu.Game.Overlays.Rankings
public class CountryFilter : CompositeDrawable, IHasCurrentValue<Country>
{
private const int duration = 200;
private const int height = 50;
private const int height = 70;
private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();

View File

@ -42,7 +42,7 @@ namespace osu.Game.Overlays.Rankings
InternalChild = content = new CircularContainer
{
Height = 25,
Height = 30,
AutoSizeDuration = duration,
AutoSizeEasing = Easing.OutQuint,
Masking = true,
@ -58,9 +58,9 @@ namespace osu.Game.Overlays.Rankings
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Margin = new MarginPadding { Horizontal = 10 },
Margin = new MarginPadding { Horizontal = 15 },
Direction = FillDirection.Horizontal,
Spacing = new Vector2(8, 0),
Spacing = new Vector2(15, 0),
Children = new Drawable[]
{
new FillFlowContainer
@ -70,14 +70,14 @@ namespace osu.Game.Overlays.Rankings
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(3, 0),
Spacing = new Vector2(5, 0),
Children = new Drawable[]
{
flag = new UpdateableFlag
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(22, 15)
Size = new Vector2(30, 20)
},
countryName = new OsuSpriteText
{
@ -148,7 +148,7 @@ namespace osu.Game.Overlays.Rankings
AutoSizeAxes = Axes.Both;
Add(icon = new SpriteIcon
{
Size = new Vector2(8),
Size = new Vector2(10),
Icon = FontAwesome.Solid.Times
});
}

View File

@ -15,6 +15,7 @@ using System;
using System.Collections.Generic;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Online.API.Requests;
using osu.Framework.Extensions.Color4Extensions;
namespace osu.Game.Overlays.Rankings
{
@ -46,6 +47,7 @@ namespace osu.Game.Overlays.Rankings
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
InternalChildren = new Drawable[]
{
background = new Box
@ -139,7 +141,7 @@ namespace osu.Game.Overlays.Rankings
{
AutoSizeAxes = Axes.Both;
Direction = FillDirection.Vertical;
Margin = new MarginPadding { Vertical = 10 };
Padding = new MarginPadding { Vertical = 15 };
Children = new Drawable[]
{
new OsuSpriteText
@ -150,11 +152,11 @@ namespace osu.Game.Overlays.Rankings
new Container
{
AutoSizeAxes = Axes.X,
Height = 20,
Height = 25,
Child = valueText = new OsuSpriteText
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: 20, weight: FontWeight.Light),
}
}
@ -174,11 +176,34 @@ namespace osu.Game.Overlays.Rankings
protected override DropdownMenu CreateMenu() => menu = base.CreateMenu().With(m => m.MaxHeight = 400);
protected override DropdownHeader CreateHeader() => new SpotlightsDropdownHeader();
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
// osu-web adds a 0.6 opacity container on top of the 0.5 base one when hovering, 0.8 on a single container here matches the resulting colour
AccentColour = colourProvider.Background6.Opacity(0.8f);
menu.BackgroundColour = colourProvider.Background5;
AccentColour = colourProvider.Background6;
Padding = new MarginPadding { Vertical = 20 };
}
private class SpotlightsDropdownHeader : OsuDropdownHeader
{
public SpotlightsDropdownHeader()
{
AutoSizeAxes = Axes.Y;
Text.Font = OsuFont.GetFont(size: 15);
Text.Padding = new MarginPadding { Vertical = 1.5f }; // osu-web line-height difference compensation
Foreground.Padding = new MarginPadding { Horizontal = 10, Vertical = 15 };
Margin = Icon.Margin = new MarginPadding(0);
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
BackgroundColour = colourProvider.Background6.Opacity(0.5f);
BackgroundColourHover = colourProvider.Background5;
}
}
}
}

View File

@ -1,15 +1,14 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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.
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using System;
using osu.Game.Users;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using System.Collections.Generic;
using osu.Framework.Allocation;
using osu.Game.Graphics.Containers;
namespace osu.Game.Overlays.Rankings.Tables
{
@ -62,35 +61,20 @@ namespace osu.Game.Overlays.Rankings.Tables
}
};
private class CountryName : OsuHoverContainer
private class CountryName : LinkFlowContainer
{
protected override IEnumerable<Drawable> EffectTargets => new[] { text };
[Resolved(canBeNull: true)]
private RankingsOverlay rankings { get; set; }
private readonly OsuSpriteText text;
private readonly Country country;
public CountryName(Country country)
: base(t => t.Font = OsuFont.GetFont(size: 12))
{
this.country = country;
AutoSizeAxes = Axes.X;
RelativeSizeAxes = Axes.Y;
TextAnchor = Anchor.CentreLeft;
AutoSizeAxes = Axes.Both;
Add(text = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12),
Text = country.FullName ?? string.Empty,
});
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
IdleColour = colourProvider.Light2;
HoverColour = colourProvider.Content2;
Action = () => rankings?.ShowCountry(country);
if (!string.IsNullOrEmpty(country.FullName))
AddLink(country.FullName, () => rankings?.ShowCountry(country));
}
}
}

View File

@ -1,4 +1,4 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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.
using osu.Framework.Graphics;
@ -20,7 +20,8 @@ namespace osu.Game.Overlays.Rankings.Tables
{
protected const int TEXT_SIZE = 12;
private const float horizontal_inset = 20;
private const float row_height = 25;
private const float row_height = 32;
private const float row_spacing = 3;
private const int items_per_page = 50;
private readonly int page;
@ -35,7 +36,7 @@ namespace osu.Game.Overlays.Rankings.Tables
AutoSizeAxes = Axes.Y;
Padding = new MarginPadding { Horizontal = horizontal_inset };
RowSize = new Dimension(GridSizeMode.Absolute, row_height);
RowSize = new Dimension(GridSizeMode.Absolute, row_height + row_spacing);
}
[BackgroundDependencyLoader]
@ -47,10 +48,11 @@ namespace osu.Game.Overlays.Rankings.Tables
{
RelativeSizeAxes = Axes.Both,
Depth = 1f,
Margin = new MarginPadding { Top = row_height }
Margin = new MarginPadding { Top = row_height + row_spacing },
Spacing = new Vector2(0, row_spacing),
});
rankings.ForEach(_ => backgroundFlow.Add(new TableRowBackground()));
rankings.ForEach(_ => backgroundFlow.Add(new TableRowBackground { Height = row_height }));
Columns = mainHeaders.Concat(CreateAdditionalHeaders()).ToArray();
Content = rankings.Select((s, i) => createContent((page - 1) * items_per_page + i, s)).ToArray().ToRectangular();
@ -68,13 +70,19 @@ namespace osu.Game.Overlays.Rankings.Tables
protected abstract Drawable[] CreateAdditionalContent(TModel item);
protected override Drawable CreateHeader(int index, TableColumn column) => new HeaderText(column?.Header ?? string.Empty, HighlightedColumn());
protected virtual string HighlightedColumn => @"Performance";
protected override Drawable CreateHeader(int index, TableColumn column)
{
var title = column?.Header ?? string.Empty;
return new HeaderText(title, title == HighlightedColumn);
}
protected abstract Country GetCountry(TModel item);
protected abstract Drawable CreateFlagContent(TModel item);
private OsuSpriteText createIndexDrawable(int index) => new OsuSpriteText
private OsuSpriteText createIndexDrawable(int index) => new RowText
{
Text = $"#{index + 1}",
Font = OsuFont.GetFont(size: TEXT_SIZE, weight: FontWeight.SemiBold)
@ -84,37 +92,36 @@ namespace osu.Game.Overlays.Rankings.Tables
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7, 0),
Spacing = new Vector2(10, 0),
Margin = new MarginPadding { Bottom = row_spacing },
Children = new[]
{
new UpdateableFlag(GetCountry(item))
{
Size = new Vector2(20, 13),
Size = new Vector2(30, 20),
ShowPlaceholderOnNull = false,
},
CreateFlagContent(item)
}
};
protected virtual string HighlightedColumn() => @"Performance";
private class HeaderText : OsuSpriteText
protected class HeaderText : OsuSpriteText
{
private readonly string highlighted;
private readonly bool isHighlighted;
public HeaderText(string text, string highlighted)
public HeaderText(string text, bool isHighlighted)
{
this.highlighted = highlighted;
this.isHighlighted = isHighlighted;
Text = text;
Font = OsuFont.GetFont(size: 12);
Margin = new MarginPadding { Horizontal = 10 };
Margin = new MarginPadding { Vertical = 5, Horizontal = 10 };
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
if (Text != highlighted)
if (!isHighlighted)
Colour = colourProvider.Foreground1;
}
}
@ -124,7 +131,7 @@ namespace osu.Game.Overlays.Rankings.Tables
public RowText()
{
Font = OsuFont.GetFont(size: TEXT_SIZE);
Margin = new MarginPadding { Horizontal = 10 };
Margin = new MarginPadding { Horizontal = 10, Bottom = row_spacing };
}
}

View File

@ -33,6 +33,6 @@ namespace osu.Game.Overlays.Rankings.Tables
}
};
protected override string HighlightedColumn() => @"Ranked Score";
protected override string HighlightedColumn => @"Ranked Score";
}
}

View File

@ -1,4 +1,4 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// 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.
using osu.Framework.Allocation;
@ -22,10 +22,10 @@ namespace osu.Game.Overlays.Rankings.Tables
public TableRowBackground()
{
RelativeSizeAxes = Axes.X;
Height = 25;
CornerRadius = 3;
CornerRadius = 4;
Masking = true;
MaskingSmoothness = 0.5f;
InternalChild = background = new Box
{

View File

@ -19,22 +19,32 @@ namespace osu.Game.Overlays.Rankings.Tables
{
}
protected virtual IEnumerable<string> GradeColumns => new List<string> { "SS", "S", "A" };
protected override TableColumn[] CreateAdditionalHeaders() => new[]
{
new TableColumn("Accuracy", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
new TableColumn("Play Count", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
}.Concat(CreateUniqueHeaders()).Concat(new[]
}.Concat(CreateUniqueHeaders())
.Concat(GradeColumns.Select(grade => new TableColumn(grade, Anchor.Centre, new Dimension(GridSizeMode.AutoSize))))
.ToArray();
protected override Drawable CreateHeader(int index, TableColumn column)
{
new TableColumn("SS", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
new TableColumn("S", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
new TableColumn("A", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
}).ToArray();
var title = column?.Header ?? string.Empty;
return new UserTableHeaderText(title, HighlightedColumn == title, GradeColumns.Contains(title));
}
protected sealed override Country GetCountry(UserStatistics item) => item.User.Country;
protected sealed override Drawable CreateFlagContent(UserStatistics item)
{
var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: TEXT_SIZE, italics: true)) { AutoSizeAxes = Axes.Both };
var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: TEXT_SIZE, italics: true))
{
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
TextAnchor = Anchor.CentreLeft
};
username.AddUserLink(item.User);
return username;
}
@ -53,5 +63,19 @@ namespace osu.Game.Overlays.Rankings.Tables
protected abstract TableColumn[] CreateUniqueHeaders();
protected abstract Drawable[] CreateUniqueContent(UserStatistics item);
private class UserTableHeaderText : HeaderText
{
public UserTableHeaderText(string text, bool isHighlighted, bool isGrade)
: base(text, isHighlighted)
{
Margin = new MarginPadding
{
// Grade columns have extra horizontal padding for readibility
Horizontal = isGrade ? 20 : 10,
Vertical = 5
};
}
}
}
}