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:
commit
e42609f092
@ -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>();
|
||||
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 };
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -33,6 +33,6 @@ namespace osu.Game.Overlays.Rankings.Tables
|
||||
}
|
||||
};
|
||||
|
||||
protected override string HighlightedColumn() => @"Ranked Score";
|
||||
protected override string HighlightedColumn => @"Ranked Score";
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
{
|
||||
|
@ -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
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user