1
0
mirror of https://github.com/ppy/osu.git synced 2025-01-12 16:43:00 +08:00

Improve fluidity states

This commit is contained in:
Joseph Madamba 2024-05-12 22:21:50 -07:00
parent e8967ff3c5
commit 736e15ab26

View File

@ -52,7 +52,11 @@ namespace osu.Game.Online.Leaderboards
private const float right_content_width = 180;
private const float grade_width = 40;
private const float username_min_width = 100;
private const float username_min_width = 125;
private const float statistics_regular_min_width = 175;
private const float statistics_compact_min_width = 100;
private const float rank_label_width = 65;
private const float rank_label_visibility_width_cutoff = rank_label_width + height + username_min_width + statistics_regular_min_width + right_content_width;
private readonly ScoreInfo score;
@ -101,9 +105,9 @@ namespace osu.Game.Online.Leaderboards
private Drawable scoreRank = null!;
private Box totalScoreBackground = null!;
private Container centreContent = null!;
private FillFlowContainer usernameAndFlagContainer = null!;
private FillFlowContainer statisticsContainer = null!;
private RankLabel rankLabel = null!;
private Container rankLabelOverlay = null!;
public ITooltip<ScoreInfo> GetCustomTooltip() => new LeaderboardScoreTooltip();
public virtual ScoreInfo TooltipContent => score;
@ -151,7 +155,7 @@ namespace osu.Game.Online.Leaderboards
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.Absolute, 65),
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.Absolute, right_content_width),
},
@ -159,8 +163,17 @@ namespace osu.Game.Online.Leaderboards
{
new Drawable[]
{
new RankLabel(rank) { Shear = -shear },
centreContent = createCentreContent(user),
new Container
{
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
Child = rankLabel = new RankLabel(rank)
{
Width = rank_label_width,
RelativeSizeAxes = Axes.Y,
},
},
createCentreContent(user),
createRightContent()
}
}
@ -214,7 +227,9 @@ namespace osu.Game.Online.Leaderboards
AutoSizeAxes = Axes.Both,
CornerRadius = corner_radius,
Masking = true,
Child = avatar = new DelayedLoadWrapper(
Children = new[]
{
avatar = new DelayedLoadWrapper(
innerAvatar = new ClickableAvatar(user)
{
Anchor = Anchor.Centre,
@ -227,8 +242,28 @@ namespace osu.Game.Online.Leaderboards
RelativeSizeAxes = Axes.None,
Size = new Vector2(height)
},
rankLabelOverlay = new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Colour4.Black.Opacity(0.5f),
},
usernameAndFlagContainer = new FillFlowContainer
new RankLabel(rank)
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
},
}
}
},
},
new FillFlowContainer
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
@ -279,7 +314,7 @@ namespace osu.Game.Online.Leaderboards
{
Name = @"Statistics container",
Padding = new MarginPadding { Right = 40 },
Spacing = new Vector2(25),
Spacing = new Vector2(25, 0),
Shear = -shear,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
@ -287,6 +322,8 @@ namespace osu.Game.Online.Leaderboards
Direction = FillDirection.Horizontal,
Children = statisticsLabels,
Alpha = 0,
LayoutEasing = Easing.OutQuint,
LayoutDuration = transition_duration,
}
}
}
@ -483,6 +520,11 @@ namespace osu.Game.Online.Leaderboards
foreground.FadeColour(IsHovered ? foregroundColour.Lighten(0.2f) : foregroundColour, transition_duration, Easing.OutQuint);
background.FadeColour(IsHovered ? backgroundColour.Lighten(0.2f) : backgroundColour, transition_duration, Easing.OutQuint);
totalScoreBackground.FadeColour(IsHovered ? lightenedGradient : totalScoreBackgroundGradient, transition_duration, Easing.OutQuint);
if (DrawWidth < rank_label_visibility_width_cutoff && IsHovered)
rankLabelOverlay.FadeIn(transition_duration, Easing.OutQuint);
else
rankLabelOverlay.FadeOut(transition_duration, Easing.OutQuint);
}
protected override bool OnInvalidate(Invalidation invalidation, InvalidationSource source)
@ -490,22 +532,27 @@ namespace osu.Game.Online.Leaderboards
Scheduler.AddOnce(() =>
{
// when width decreases
// - hide statistics, then
// - hide avatar, then
// - hide user and flag and show avatar again
// - hide rank and show rank overlay on avatar when hovered, then
// - compact statistics, then
// - hide statistics
if (centreContent.DrawWidth >= height + username_min_width || centreContent.DrawWidth < username_min_width)
avatar.FadeIn(transition_duration, Easing.OutQuint).MoveToX(0, transition_duration, Easing.OutQuint);
if (DrawWidth >= rank_label_visibility_width_cutoff)
rankLabel.FadeIn(transition_duration, Easing.OutQuint).MoveToX(0, transition_duration, Easing.OutQuint);
else
avatar.FadeOut(transition_duration, Easing.OutQuint).MoveToX(-avatar.DrawWidth, transition_duration, Easing.OutQuint);
rankLabel.FadeOut(transition_duration, Easing.OutQuint).MoveToX(-rankLabel.DrawWidth, transition_duration, Easing.OutQuint);
if (centreContent.DrawWidth >= username_min_width)
usernameAndFlagContainer.FadeIn(transition_duration, Easing.OutQuint).MoveToX(0, transition_duration, Easing.OutQuint);
else
usernameAndFlagContainer.FadeOut(transition_duration, Easing.OutQuint).MoveToX(usernameAndFlagContainer.DrawWidth, transition_duration, Easing.OutQuint);
if (centreContent.DrawWidth >= height + statisticsContainer.DrawWidth + username_min_width)
if (DrawWidth >= height + username_min_width + statistics_regular_min_width + right_content_width)
{
statisticsContainer.FadeIn(transition_duration, Easing.OutQuint).MoveToX(0, transition_duration, Easing.OutQuint);
statisticsContainer.Direction = FillDirection.Horizontal;
statisticsContainer.ScaleTo(1, transition_duration, Easing.OutQuint);
}
else if (DrawWidth >= height + username_min_width + statistics_compact_min_width + right_content_width)
{
statisticsContainer.FadeIn(transition_duration, Easing.OutQuint).MoveToX(0, transition_duration, Easing.OutQuint);
statisticsContainer.Direction = FillDirection.Vertical;
statisticsContainer.ScaleTo(0.8f, transition_duration, Easing.OutQuint);
}
else
statisticsContainer.FadeOut(transition_duration, Easing.OutQuint).MoveToX(statisticsContainer.DrawWidth, transition_duration, Easing.OutQuint);
});
@ -577,15 +624,14 @@ namespace osu.Game.Online.Leaderboards
{
public RankLabel(int? rank)
{
AutoSizeAxes = Axes.Both;
Anchor = Anchor.Centre;
Origin = Anchor.Centre;
if (rank >= 1000)
TooltipText = $"#{rank:N0}";
Child = new OsuSpriteText
{
Shear = -shear,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 20, weight: FontWeight.SemiBold, italics: true),
Text = rank == null ? "-" : rank.Value.FormatRank().Insert(0, "#")
};