Merge pull request #22200 from bdach/user-profile/update-design-basics

Update user profile appearance to closer match web
This commit is contained in:
Dean Herbert 2023-01-15 02:50:11 +09:00 committed by GitHub
commit efe6dae672
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 179 additions and 277 deletions

View File

@ -5,12 +5,12 @@ using osu.Game.Overlays.Profile.Sections.Kudosu;
using System.Collections.Generic;
using System;
using osu.Framework.Graphics.Containers;
using osu.Game.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics;
using osu.Game.Online.API.Requests.Responses;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Game.Overlays;
namespace osu.Game.Tests.Visual.Online
{
@ -18,6 +18,9 @@ namespace osu.Game.Tests.Visual.Online
{
private readonly Box background;
[Cached]
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Pink);
public TestSceneKudosuHistory()
{
FillFlowContainer<DrawableKudosuHistoryItem> content;
@ -42,9 +45,9 @@ namespace osu.Game.Tests.Visual.Online
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private void load()
{
background.Colour = colours.GreySeaFoam;
background.Colour = colourProvider.Background4;
}
private readonly IEnumerable<APIKudosuHistory> items = new[]

View File

@ -86,12 +86,21 @@ namespace osu.Game.Tests.Visual.Online
CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c1.jpg",
JoinDate = DateTimeOffset.Now.AddDays(-1),
LastVisit = DateTimeOffset.Now,
ProfileOrder = new[] { "me" },
Groups = new[]
{
new APIUserGroup { Colour = "#EB47D0", ShortName = "DEV", Name = "Developers" },
new APIUserGroup { Colour = "#A347EB", ShortName = "BN", Name = "Beatmap Nominators", Playmodes = new[] { "osu", "taiko" } }
},
ProfileOrder = new[]
{
@"me",
@"recent_activity",
@"beatmaps",
@"historical",
@"kudosu",
@"top_ranks",
@"medals"
},
Statistics = new UserStatistics
{
IsRanked = true,
@ -128,7 +137,12 @@ namespace osu.Game.Tests.Visual.Online
Title = "osu!volunteer",
Colour = "ff0000",
Achievements = Array.Empty<APIUserAchievement>(),
PlayMode = "osu"
PlayMode = "osu",
Kudosu = new APIUser.KudosuCount
{
Available = 10,
Total = 50
}
};
}
}

View File

@ -3,26 +3,18 @@
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Game.Online.API.Requests.Responses;
using osu.Game.Overlays.Profile.Header.Components;
using osu.Game.Resources.Localisation.Web;
using osuTK;
namespace osu.Game.Overlays.Profile.Header
{
public partial class CentreHeaderContainer : CompositeDrawable
{
public readonly BindableBool DetailsVisible = new BindableBool(true);
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
private OverlinedInfoContainer hiddenDetailGlobal = null!;
private OverlinedInfoContainer hiddenDetailCountry = null!;
public CentreHeaderContainer()
{
Height = 60;
@ -31,15 +23,12 @@ namespace osu.Game.Overlays.Profile.Header
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
Container<Drawable> hiddenDetailContainer;
Container<Drawable> expandedDetailContainer;
InternalChildren = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4
Colour = colourProvider.Background3
},
new FillFlowContainer
{
@ -66,20 +55,6 @@ namespace osu.Game.Overlays.Profile.Header
}
},
new Container
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
RelativeSizeAxes = Axes.Y,
Padding = new MarginPadding { Vertical = 10 },
Width = UserProfileOverlay.CONTENT_X_MARGIN,
Child = new ExpandDetailsButton
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
DetailsVisible = { BindTarget = DetailsVisible }
},
},
new Container
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
@ -94,7 +69,7 @@ namespace osu.Game.Overlays.Profile.Header
Size = new Vector2(40),
User = { BindTarget = User }
},
expandedDetailContainer = new Container
new Container
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
@ -107,47 +82,9 @@ namespace osu.Game.Overlays.Profile.Header
User = { BindTarget = User }
}
},
hiddenDetailContainer = new FillFlowContainer
{
Direction = FillDirection.Horizontal,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Width = 200,
AutoSizeAxes = Axes.Y,
Alpha = 0,
Spacing = new Vector2(10, 0),
Margin = new MarginPadding { Right = 50 },
Children = new[]
{
hiddenDetailGlobal = new OverlinedInfoContainer
{
Title = UsersStrings.ShowRankGlobalSimple,
LineColour = colourProvider.Highlight1
},
hiddenDetailCountry = new OverlinedInfoContainer
{
Title = UsersStrings.ShowRankCountrySimple,
LineColour = colourProvider.Highlight1
},
}
}
}
}
};
DetailsVisible.BindValueChanged(visible =>
{
hiddenDetailContainer.FadeTo(visible.NewValue ? 0 : 1, 200, Easing.OutQuint);
expandedDetailContainer.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint);
});
User.BindValueChanged(user => updateDisplay(user.NewValue?.User));
}
private void updateDisplay(APIUser? user)
{
hiddenDetailGlobal.Content = user?.Statistics?.GlobalRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
hiddenDetailCountry.Content = user?.Statistics?.CountryRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
}
}
}

View File

@ -1,19 +1,17 @@
// 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;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osuTK.Graphics;
namespace osu.Game.Overlays.Profile.Header.Components
{
public partial class OverlinedInfoContainer : CompositeDrawable
public partial class ProfileValueDisplay : CompositeDrawable
{
private readonly Circle line;
private readonly OsuSpriteText title;
private readonly OsuSpriteText content;
@ -27,12 +25,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
set => content.Text = value;
}
public Color4 LineColour
{
set => line.Colour = value;
}
public OverlinedInfoContainer(bool big = false, int minimumWidth = 60)
public ProfileValueDisplay(bool big = false, int minimumWidth = 60)
{
AutoSizeAxes = Axes.Both;
InternalChild = new FillFlowContainer
@ -41,19 +34,13 @@ namespace osu.Game.Overlays.Profile.Header.Components
AutoSizeAxes = Axes.Both,
Children = new Drawable[]
{
line = new Circle
{
RelativeSizeAxes = Axes.X,
Height = 2,
Margin = new MarginPadding { Bottom = 2 }
},
title = new OsuSpriteText
{
Font = OsuFont.GetFont(size: big ? 14 : 12, weight: FontWeight.Bold)
Font = OsuFont.GetFont(size: 12)
},
content = new OsuSpriteText
{
Font = OsuFont.GetFont(size: big ? 40 : 18, weight: FontWeight.Light)
Font = OsuFont.GetFont(size: big ? 30 : 20, weight: FontWeight.Light)
},
new Container // Add a minimum size to the FillFlowContainer
{
@ -62,5 +49,12 @@ namespace osu.Game.Overlays.Profile.Header.Components
}
};
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
title.Colour = colourProvider.Content1;
content.Colour = colourProvider.Content2;
}
}
}

View File

@ -11,15 +11,15 @@ using osu.Game.Resources.Localisation.Web;
namespace osu.Game.Overlays.Profile.Header.Components
{
public partial class OverlinedTotalPlayTime : CompositeDrawable, IHasTooltip
public partial class TotalPlayTime : CompositeDrawable, IHasTooltip
{
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
public LocalisableString TooltipText { get; set; }
private OverlinedInfoContainer info = null!;
private ProfileValueDisplay info = null!;
public OverlinedTotalPlayTime()
public TotalPlayTime()
{
AutoSizeAxes = Axes.Both;
@ -27,12 +27,11 @@ namespace osu.Game.Overlays.Profile.Header.Components
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
private void load()
{
InternalChild = info = new OverlinedInfoContainer
InternalChild = info = new ProfileValueDisplay(minimumWidth: 140)
{
Title = UsersStrings.ShowStatsPlayTime,
LineColour = colourProvider.Highlight1,
};
User.BindValueChanged(updateTime, true);

View File

@ -22,41 +22,16 @@ namespace osu.Game.Overlays.Profile.Header
public partial class DetailHeaderContainer : CompositeDrawable
{
private readonly Dictionary<ScoreRank, ScoreRankInfo> scoreRankInfos = new Dictionary<ScoreRank, ScoreRankInfo>();
private OverlinedInfoContainer medalInfo = null!;
private OverlinedInfoContainer ppInfo = null!;
private OverlinedInfoContainer detailGlobalRank = null!;
private OverlinedInfoContainer detailCountryRank = null!;
private FillFlowContainer? fillFlow;
private ProfileValueDisplay medalInfo = null!;
private ProfileValueDisplay ppInfo = null!;
private ProfileValueDisplay detailGlobalRank = null!;
private ProfileValueDisplay detailCountryRank = null!;
private RankGraph rankGraph = null!;
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
private bool expanded = true;
public bool Expanded
{
set
{
if (expanded == value) return;
expanded = value;
if (fillFlow == null) return;
fillFlow.ClearTransforms();
if (expanded)
fillFlow.AutoSizeAxes = Axes.Y;
else
{
fillFlow.AutoSizeAxes = Axes.None;
fillFlow.ResizeHeightTo(0, 200, Easing.OutQuint);
}
}
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider, OsuColour colours)
private void load(OverlayColourProvider colourProvider)
{
AutoSizeAxes = Axes.Y;
@ -69,18 +44,48 @@ namespace osu.Game.Overlays.Profile.Header
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background5,
},
fillFlow = new FillFlowContainer
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = expanded ? Axes.Y : Axes.None,
AutoSizeAxes = Axes.Y,
AutoSizeDuration = 200,
AutoSizeEasing = Easing.OutQuint,
Masking = true,
Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 20),
Spacing = new Vector2(0, 15),
Children = new Drawable[]
{
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(20),
Children = new Drawable[]
{
detailGlobalRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankGlobalSimple,
},
detailCountryRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankCountrySimple,
},
}
},
new Container
{
RelativeSizeAxes = Axes.X,
Height = 60,
Children = new Drawable[]
{
rankGraph = new RankGraph
{
RelativeSizeAxes = Axes.Both,
},
}
},
new Container
{
RelativeSizeAxes = Axes.X,
@ -96,19 +101,17 @@ namespace osu.Game.Overlays.Profile.Header
Spacing = new Vector2(10, 0),
Children = new Drawable[]
{
new OverlinedTotalPlayTime
{
User = { BindTarget = User }
},
medalInfo = new OverlinedInfoContainer
medalInfo = new ProfileValueDisplay
{
Title = UsersStrings.ShowStatsMedals,
LineColour = colours.GreenLight,
},
ppInfo = new OverlinedInfoContainer
ppInfo = new ProfileValueDisplay
{
Title = "pp",
LineColour = colours.Red,
},
new TotalPlayTime
{
User = { BindTarget = User }
},
}
},
@ -130,41 +133,6 @@ namespace osu.Game.Overlays.Profile.Header
}
}
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Right = 130 },
Children = new Drawable[]
{
rankGraph = new RankGraph
{
RelativeSizeAxes = Axes.Both,
},
new FillFlowContainer
{
AutoSizeAxes = Axes.Y,
Width = 130,
Anchor = Anchor.TopRight,
Direction = FillDirection.Vertical,
Padding = new MarginPadding { Horizontal = 10 },
Spacing = new Vector2(0, 20),
Children = new Drawable[]
{
detailGlobalRank = new OverlinedInfoContainer(true, 110)
{
Title = UsersStrings.ShowRankGlobalSimple,
LineColour = colourProvider.Highlight1,
},
detailCountryRank = new OverlinedInfoContainer(false, 110)
{
Title = UsersStrings.ShowRankCountrySimple,
LineColour = colourProvider.Highlight1,
},
}
}
}
},
}
},
};
@ -201,14 +169,14 @@ namespace osu.Game.Overlays.Profile.Header
InternalChild = new FillFlowContainer
{
AutoSizeAxes = Axes.Y,
Width = 56,
Width = 44,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new DrawableRank(rank)
{
RelativeSizeAxes = Axes.X,
Height = 30,
Height = 22,
},
rankCount = new OsuSpriteText
{

View File

@ -4,7 +4,6 @@
using System.Threading;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
@ -12,7 +11,6 @@ using osu.Framework.Graphics.Shapes;
using osu.Game.Online.API.Requests.Responses;
using osu.Game.Overlays.Profile.Header.Components;
using osuTK;
using osuTK.Graphics;
namespace osu.Game.Overlays.Profile.Header
{
@ -43,23 +41,16 @@ namespace osu.Game.Overlays.Profile.Header
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = new ColourInfo
{
TopLeft = Color4.Black.Opacity(0.2f),
TopRight = Color4.Black.Opacity(0.2f),
BottomLeft = Color4.Black.Opacity(0),
BottomRight = Color4.Black.Opacity(0)
}
},
Colour = ColourInfo.GradientVertical(Colour4.Black.Opacity(0.2f), Colour4.Black.Opacity(0))
}
},
badgeFlowContainer = new FillFlowContainer
{
Direction = FillDirection.Full,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Margin = new MarginPadding { Top = 5 },
Spacing = new Vector2(10, 10),
Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Top = 10 },
}
};
}

View File

@ -51,7 +51,7 @@ namespace osu.Game.Overlays.Profile.Header
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background5,
Colour = colourProvider.Background4,
},
new FillFlowContainer
{

View File

@ -39,8 +39,6 @@ namespace osu.Game.Overlays.Profile
// Haphazardly guaranteed by OverlayHeader constructor (see CreateBackground / CreateContent).
Debug.Assert(centreHeaderContainer != null);
Debug.Assert(detailHeaderContainer != null);
centreHeaderContainer.DetailsVisible.BindValueChanged(visible => detailHeaderContainer.Expanded = visible.NewValue, true);
}
protected override Drawable CreateBackground() =>
@ -75,7 +73,7 @@ namespace osu.Game.Overlays.Profile
RelativeSizeAxes = Axes.X,
User = { BindTarget = User },
},
centreHeaderContainer = new CentreHeaderContainer
new MedalHeaderContainer
{
RelativeSizeAxes = Axes.X,
User = { BindTarget = User },
@ -85,7 +83,7 @@ namespace osu.Game.Overlays.Profile
RelativeSizeAxes = Axes.X,
User = { BindTarget = User },
},
new MedalHeaderContainer
centreHeaderContainer = new CentreHeaderContainer
{
RelativeSizeAxes = Axes.X,
User = { BindTarget = User },

View File

@ -3,16 +3,15 @@
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Backgrounds;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osuTK;
namespace osu.Game.Overlays.Profile
{
@ -30,22 +29,29 @@ namespace osu.Game.Overlays.Profile
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
private const float outer_gutter_width = 10;
protected ProfileSection()
{
AutoSizeAxes = Axes.Y;
RelativeSizeAxes = Axes.X;
Masking = true;
CornerRadius = 10;
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Offset = new Vector2(0, 1),
Radius = 3,
Colour = Colour4.Black.Opacity(0.25f)
};
InternalChildren = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
new SectionTriangles
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
},
new FillFlowContainer
{
Direction = FillDirection.Vertical,
@ -58,8 +64,8 @@ namespace osu.Game.Overlays.Profile
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding
{
Horizontal = UserProfileOverlay.CONTENT_X_MARGIN,
Top = 15,
Horizontal = UserProfileOverlay.CONTENT_X_MARGIN - outer_gutter_width,
Top = 20,
Bottom = 20,
},
Children = new Drawable[]
@ -67,7 +73,7 @@ namespace osu.Game.Overlays.Profile
new OsuSpriteText
{
Text = Title,
Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
},
underscore = new Box
{
@ -88,7 +94,7 @@ namespace osu.Game.Overlays.Profile
RelativeSizeAxes = Axes.X,
Padding = new MarginPadding
{
Horizontal = UserProfileOverlay.CONTENT_X_MARGIN,
Horizontal = UserProfileOverlay.CONTENT_X_MARGIN - outer_gutter_width,
Bottom = 20
}
},
@ -100,43 +106,8 @@ namespace osu.Game.Overlays.Profile
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
background.Colour = colourProvider.Background5;
background.Colour = colourProvider.Background4;
underscore.Colour = colourProvider.Highlight1;
}
private partial class SectionTriangles : Container
{
private readonly Triangles triangles;
private readonly Box foreground;
public SectionTriangles()
{
RelativeSizeAxes = Axes.X;
Height = 100;
Masking = true;
Children = new Drawable[]
{
triangles = new Triangles
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
RelativeSizeAxes = Axes.Both,
TriangleScale = 3,
},
foreground = new Box
{
RelativeSizeAxes = Axes.Both,
}
};
}
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
triangles.ColourLight = colourProvider.Background4;
triangles.ColourDark = colourProvider.Background5.Darken(0.2f);
foreground.Colour = ColourInfo.GradientVertical(colourProvider.Background5, colourProvider.Background5.Opacity(0));
}
}
}
}

View File

@ -112,8 +112,8 @@ namespace osu.Game.Overlays.Profile.Sections.Historical
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
IdleColour = colourProvider.Background4;
HoverColour = colourProvider.Background3;
IdleColour = colourProvider.Background3;
HoverColour = colourProvider.Background2;
}
}

View File

@ -17,9 +17,6 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
{
private const int height = 25;
[Resolved]
private OsuColour colours { get; set; } = null!;
private readonly APIKudosuHistory historyItem;
private readonly LinkFlowContainer linkFlowContainer;
private readonly DrawableDate date;
@ -48,9 +45,9 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
}
[BackgroundDependencyLoader]
private void load()
private void load(OverlayColourProvider colourProvider)
{
date.Colour = colours.GreySeaFoamLighter;
date.Colour = colourProvider.Foreground1;
var formattedSource = MessageFormatter.FormatText(getString(historyItem));
linkFlowContainer.AddLinks(formattedSource.Text, formattedSource.Links);
}

View File

@ -65,8 +65,8 @@ namespace osu.Game.Overlays.Profile.Sections
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
IdleColour = colourProvider.Background3;
HoverColour = colourProvider.Background2;
IdleColour = colourProvider.Background2;
HoverColour = colourProvider.Background1;
}
protected override bool OnHover(HoverEvent e)

View File

@ -160,7 +160,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
Origin = Anchor.TopRight,
RelativeSizeAxes = Axes.Both,
Height = 0.5f,
Colour = colourProvider.Background4,
Colour = colourProvider.Background3,
Shear = new Vector2(-performance_background_shear, 0),
EdgeSmoothness = new Vector2(2, 0),
},
@ -172,7 +172,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
RelativePositionAxes = Axes.Y,
Height = -0.5f,
Position = new Vector2(0, 1),
Colour = colourProvider.Background4,
Colour = colourProvider.Background3,
Shear = new Vector2(performance_background_shear, 0),
EdgeSmoothness = new Vector2(2, 0),
},

View File

@ -12,7 +12,9 @@ using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Extensions;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osu.Game.Online;
using osu.Game.Online.API.Requests;
@ -42,7 +44,7 @@ namespace osu.Game.Overlays
[Resolved]
private RulesetStore rulesets { get; set; } = null!;
public const float CONTENT_X_MARGIN = 70;
public const float CONTENT_X_MARGIN = 50;
public UserProfileOverlay()
: base(OverlayColourScheme.Pink)
@ -59,7 +61,7 @@ namespace osu.Game.Overlays
protected override ProfileHeader CreateHeader() => new ProfileHeader();
protected override Color4 BackgroundColour => ColourProvider.Background6;
protected override Color4 BackgroundColour => ColourProvider.Background5;
public void ShowUser(IUser user, IRulesetInfo? ruleset = null)
{
@ -171,46 +173,72 @@ namespace osu.Game.Overlays
loadingLayer.Hide();
}
private partial class ProfileSectionTabControl : OverlayTabControl<ProfileSection>
private partial class ProfileSectionTabControl : OsuTabControl<ProfileSection>
{
private const float bar_height = 2;
public ProfileSectionTabControl()
{
TabContainer.RelativeSizeAxes &= ~Axes.X;
TabContainer.AutoSizeAxes |= Axes.X;
TabContainer.Anchor |= Anchor.x1;
TabContainer.Origin |= Anchor.x1;
Height = 36 + bar_height;
BarHeight = bar_height;
Height = 40;
Padding = new MarginPadding { Horizontal = CONTENT_X_MARGIN };
TabContainer.Spacing = new Vector2(20);
}
protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileSectionTabItem(value)
{
AccentColour = AccentColour,
};
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
AccentColour = colourProvider.Highlight1;
}
protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileSectionTabItem(value);
protected override bool OnClick(ClickEvent e) => true;
protected override bool OnHover(HoverEvent e) => true;
private partial class ProfileSectionTabItem : OverlayTabItem
private partial class ProfileSectionTabItem : TabItem<ProfileSection>
{
private OsuSpriteText text = null!;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
public ProfileSectionTabItem(ProfileSection value)
: base(value)
{
Text.Text = value.Title;
Text.Font = Text.Font.With(size: 16);
Text.Margin = new MarginPadding { Bottom = 10 + bar_height };
Bar.ExpandedSize = 10;
Bar.Margin = new MarginPadding { Bottom = bar_height };
}
[BackgroundDependencyLoader]
private void load()
{
AutoSizeAxes = Axes.Both;
Anchor = Anchor.CentreLeft;
Origin = Anchor.CentreLeft;
InternalChild = text = new OsuSpriteText
{
Text = Value.Title
};
updateState();
}
protected override void OnActivated() => updateState();
protected override void OnDeactivated() => updateState();
protected override bool OnHover(HoverEvent e)
{
updateState();
return true;
}
protected override void OnHoverLost(HoverLostEvent e) => updateState();
private void updateState()
{
text.Font = OsuFont.Default.With(size: 14, weight: Active.Value ? FontWeight.SemiBold : FontWeight.Regular);
Colour4 textColour;
if (IsHovered)
textColour = colourProvider.Light1;
else
textColour = Active.Value ? colourProvider.Content1 : colourProvider.Light2;
text.FadeColour(textColour, 300, Easing.OutQuint);
}
}
}
@ -231,7 +259,9 @@ namespace osu.Game.Overlays
Direction = FillDirection.Vertical,
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
Spacing = new Vector2(0, 20),
Spacing = new Vector2(0, 10),
Padding = new MarginPadding { Horizontal = 10 },
Margin = new MarginPadding { Bottom = 10 },
};
}
}