From 049873f6b5604647ea611046784d1985b9ea91f4 Mon Sep 17 00:00:00 2001 From: flustix Date: Sun, 10 Mar 2024 09:47:26 +0100 Subject: [PATCH] Replace dashboard user cards with the new design --- .../Online/TestDrawableUserCard.cs | 36 +++++ .../Online/Drawables/DrawableGroupBadge.cs | 45 ++++++ .../Online/Drawables/DrawableUserCard.cs | 124 ++++++++++++++++ .../Network/Tabs/DashboardOnlineTab.cs | 12 +- .../Overlay/Network/Tabs/Online/UserCard.cs | 132 ------------------ 5 files changed, 214 insertions(+), 135 deletions(-) create mode 100644 fluXis.Game.Tests/Online/TestDrawableUserCard.cs create mode 100644 fluXis.Game/Online/Drawables/DrawableGroupBadge.cs create mode 100644 fluXis.Game/Online/Drawables/DrawableUserCard.cs delete mode 100644 fluXis.Game/Overlay/Network/Tabs/Online/UserCard.cs diff --git a/fluXis.Game.Tests/Online/TestDrawableUserCard.cs b/fluXis.Game.Tests/Online/TestDrawableUserCard.cs new file mode 100644 index 00000000..2eb146f7 --- /dev/null +++ b/fluXis.Game.Tests/Online/TestDrawableUserCard.cs @@ -0,0 +1,36 @@ +using fluXis.Game.Online; +using fluXis.Game.Online.Drawables; +using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osuTK; + +namespace fluXis.Game.Tests.Online; + +public partial class TestDrawableUserCard : FluXisTestScene +{ + [BackgroundDependencyLoader] + private void load() + { + var flow = new FillFlowContainer + { + RelativeSizeAxes = Axes.Both, + Direction = FillDirection.Vertical, + Spacing = new Vector2(0, 10) + }; + + Add(flow); + + AddStep("Add uid 1", () => flow.Add(new DrawableUserCard(UserCache.GetUser(1)) + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre + })); + + AddStep("Add uid 2", () => flow.Add(new DrawableUserCard(UserCache.GetUser(2)) + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre + })); + } +} diff --git a/fluXis.Game/Online/Drawables/DrawableGroupBadge.cs b/fluXis.Game/Online/Drawables/DrawableGroupBadge.cs new file mode 100644 index 00000000..1166e4ea --- /dev/null +++ b/fluXis.Game/Online/Drawables/DrawableGroupBadge.cs @@ -0,0 +1,45 @@ +using fluXis.Game.Graphics.Sprites; +using fluXis.Game.Graphics.UserInterface.Color; +using fluXis.Shared.Components.Groups; +using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Shapes; +using osuTK; + +namespace fluXis.Game.Online.Drawables; + +public partial class DrawableGroupBadge : CircularContainer +{ + private IAPIGroup group { get; } + + public DrawableGroupBadge(IAPIGroup group) + { + this.group = group; + } + + [BackgroundDependencyLoader] + private void load() + { + Size = new Vector2(40, 16); + Masking = true; + + InternalChildren = new Drawable[] + { + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = FluXisColors.Background2, + Alpha = .8f + }, + new FluXisSpriteText + { + Text = group.Tag, + Colour = Colour4.FromHex(group.Color), + WebFontSize = 10, + Anchor = Anchor.Centre, + Origin = Anchor.Centre + } + }; + } +} diff --git a/fluXis.Game/Online/Drawables/DrawableUserCard.cs b/fluXis.Game/Online/Drawables/DrawableUserCard.cs new file mode 100644 index 00000000..b609bc01 --- /dev/null +++ b/fluXis.Game/Online/Drawables/DrawableUserCard.cs @@ -0,0 +1,124 @@ +using System.Linq; +using fluXis.Game.Graphics.Containers; +using fluXis.Game.Graphics.Drawables; +using fluXis.Game.Graphics.Sprites; +using fluXis.Game.Graphics.UserInterface.Color; +using fluXis.Game.Overlay.User; +using fluXis.Shared.Components.Users; +using JetBrains.Annotations; +using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Shapes; +using osu.Framework.Input.Events; +using osuTK; + +namespace fluXis.Game.Online.Drawables; + +public partial class DrawableUserCard : CompositeDrawable +{ + [CanBeNull] + [Resolved(CanBeNull = true)] + private UserProfileOverlay profile { get; set; } + + private APIUserShort user { get; } + + public DrawableUserCard(APIUserShort user) + { + this.user = user; + } + + [BackgroundDependencyLoader] + private void load() + { + Size = new Vector2(300, 80); + CornerRadius = 20; + Masking = true; + + InternalChildren = new Drawable[] + { + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = FluXisColors.Background4 + }, + new LoadWrapper + { + RelativeSizeAxes = Axes.Both, + LoadContent = () => new DrawableBanner(user) + { + RelativeSizeAxes = Axes.Both, + Anchor = Anchor.Centre, + Origin = Anchor.Centre + }, + OnComplete = banner => banner.FadeInFromZero(400) + }, + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = FluXisColors.Background2, + Alpha = 0.5f + }, + new FillFlowContainer + { + RelativeSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(10), + Children = new Drawable[] + { + new LoadWrapper + { + Size = new Vector2(80), + CornerRadius = 20, + Masking = true, + LoadContent = () => new DrawableAvatar(user) + { + RelativeSizeAxes = Axes.Both, + Anchor = Anchor.Centre, + Origin = Anchor.Centre + }, + OnComplete = avatar => avatar.FadeInFromZero(400) + }, + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Vertical, + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + Children = new Drawable[] + { + new FluXisSpriteText + { + Text = user.PreferredName, + WebFontSize = 20, + Shadow = true + }, + new FluXisSpriteText + { + Text = user.Username, + Alpha = string.IsNullOrWhiteSpace(user.DisplayName) ? 0 : .8f, + Margin = new MarginPadding { Top = -5 }, + WebFontSize = 12, + Shadow = true + }, + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5), + Alpha = user.Groups.Count != 0 ? 1 : 0, + ChildrenEnumerable = user.Groups.Select(group => new DrawableGroupBadge(group)) + } + } + } + } + } + }; + } + + protected override bool OnClick(ClickEvent e) + { + profile?.ShowUser(user.ID); + return true; + } +} diff --git a/fluXis.Game/Overlay/Network/Tabs/DashboardOnlineTab.cs b/fluXis.Game/Overlay/Network/Tabs/DashboardOnlineTab.cs index 6b2d8e01..cc06deb1 100644 --- a/fluXis.Game/Overlay/Network/Tabs/DashboardOnlineTab.cs +++ b/fluXis.Game/Overlay/Network/Tabs/DashboardOnlineTab.cs @@ -1,8 +1,8 @@ using System; using fluXis.Game.Graphics.Sprites; using fluXis.Game.Online.API.Requests.Users; +using fluXis.Game.Online.Drawables; using fluXis.Game.Online.Fluxel; -using fluXis.Game.Overlay.Network.Tabs.Online; using osu.Framework.Allocation; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; @@ -50,8 +50,14 @@ public override void Enter() { Schedule(() => { - if (!visible) return; - flow.Add(new UserCard(user)); + if (!visible) + return; + + flow.Add(new DrawableUserCard(user) + { + Anchor = Anchor.TopCentre, + Origin = Anchor.TopCentre + }); }); } } diff --git a/fluXis.Game/Overlay/Network/Tabs/Online/UserCard.cs b/fluXis.Game/Overlay/Network/Tabs/Online/UserCard.cs deleted file mode 100644 index cc5caada..00000000 --- a/fluXis.Game/Overlay/Network/Tabs/Online/UserCard.cs +++ /dev/null @@ -1,132 +0,0 @@ -using System.Linq; -using fluXis.Game.Graphics; -using fluXis.Game.Graphics.Drawables; -using fluXis.Game.Graphics.Sprites; -using fluXis.Game.Graphics.UserInterface.Color; -using fluXis.Game.Overlay.User; -using fluXis.Shared.Components.Users; -using osu.Framework.Allocation; -using osu.Framework.Graphics; -using osu.Framework.Graphics.Containers; -using osu.Framework.Graphics.Shapes; -using osu.Framework.Input.Events; -using osuTK; - -namespace fluXis.Game.Overlay.Network.Tabs.Online; - -public partial class UserCard : Container -{ - public APIUserShort User { get; } - - [Resolved] - private UserProfileOverlay profile { get; set; } - - private Container bannerContainer; - private Container avatarContainer; - - public UserCard(APIUserShort user) - { - User = user; - } - - [BackgroundDependencyLoader] - private void load() - { - Anchor = Origin = Anchor.TopCentre; - Size = new Vector2(250, 80); - CornerRadius = 20; - Masking = true; - - InternalChildren = new Drawable[] - { - bannerContainer = new Container - { - RelativeSizeAxes = Axes.Both, - }, - new Box - { - RelativeSizeAxes = Axes.Both, - Colour = Colour4.Black, - Alpha = .5f - }, - new FillFlowContainer - { - RelativeSizeAxes = Axes.Both, - Direction = FillDirection.Horizontal, - Spacing = new Vector2(10), - Padding = new MarginPadding(10), - Children = new Drawable[] - { - avatarContainer = new Container - { - Size = new Vector2(60), - CornerRadius = 10, - Masking = true, - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - EdgeEffect = FluXisStyles.ShadowSmall - }, - new FillFlowContainer - { - AutoSizeAxes = Axes.Both, - Direction = FillDirection.Vertical, - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - Children = new[] - { - new FluXisSpriteText - { - Text = string.IsNullOrEmpty(User.DisplayName) ? User.Username : User.DisplayName, - Shadow = true, - FontSize = 24 - }, - new FluXisSpriteText - { - Text = string.IsNullOrEmpty(User.DisplayName) ? "" : User.Username, - Shadow = true, - Colour = FluXisColors.Text2, - FontSize = 14 - }, - !User.Groups.Any() - ? Empty() - : new FluXisSpriteText - { - Text = User.Groups.First().Name, - Colour = Colour4.FromHex(User.Groups.First().Color), - Shadow = true, - FontSize = 16 - } - } - } - } - } - }; - } - - protected override void LoadComplete() - { - base.LoadComplete(); - - LoadComponentAsync(new DrawableBanner(User) - { - RelativeSizeAxes = Axes.Both, - FillMode = FillMode.Fill, - Anchor = Anchor.Centre, - Origin = Anchor.Centre - }, bannerContainer.Add); - - LoadComponentAsync(new DrawableAvatar(User) - { - RelativeSizeAxes = Axes.Both, - FillMode = FillMode.Fill, - Anchor = Anchor.Centre, - Origin = Anchor.Centre - }, avatarContainer.Add); - } - - protected override bool OnClick(ClickEvent e) - { - profile.ShowUser(User.ID); - return true; - } -}