Merge pull request #9610 from EVAST9919/friends_brick

Implement brick friends view for DashboardOverlay

osu.Game.Tests/Visual/Online/TestSceneUserPanel.cs

@@ -42,6 +42,19 @@ namespace osu.Game.Tests.Visual.Online
                 Spacing = new Vector2(10f),
                 Children = new Drawable[]
                 {
+                    new UserBrickPanel(new User
+                    {
+                        Username = @"flyte",
+                        Id = 3103765,
+                        CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c6.jpg"
+                    }),
+                    new UserBrickPanel(new User
+                    {
+                        Username = @"peppy",
+                        Id = 2,
+                        Colour = "99EB47",
+                        CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c3.jpg",
+                    }),
                     flyte = new UserGridPanel(new User
                     {
                         Username = @"flyte",

osu.Game/Overlays/Dashboard/Friends/FriendDisplay.cs

@@ -225,6 +225,9 @@ namespace osu.Game.Overlays.Dashboard.Friends
 
                 case OverlayPanelDisplayStyle.List:
                     return new UserListPanel(user);
+
+                case OverlayPanelDisplayStyle.Brick:
+                    return new UserBrickPanel(user);
             }
         }
 

osu.Game/Overlays/OverlayPanelDisplayStyleControl.cs

@@ -34,6 +34,10 @@ namespace osu.Game.Overlays
             {
                 Icon = FontAwesome.Solid.Bars
             });
+            AddTabItem(new PanelDisplayTabItem(OverlayPanelDisplayStyle.Brick)
+            {
+                Icon = FontAwesome.Solid.Th
+            });
         }
 
         protected override TabFillFlowContainer CreateTabFlow() => new TabFillFlowContainer
@@ -96,6 +100,7 @@ namespace osu.Game.Overlays
     public enum OverlayPanelDisplayStyle
     {
         Card,
-        List
+        List,
+        Brick
     }
 }

osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs

@@ -33,7 +33,7 @@ namespace osu.Game.Overlays.Settings.Sections.General
         [Resolved]
         private OsuColour colours { get; set; }
 
-        private UserPanel panel;
+        private UserGridPanel panel;
         private UserDropdown dropdown;
 
         /// <summary>

osu.Game/Users/ExtendedUserPanel.cs

@@ -0,0 +1,148 @@
+// 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 osuTK;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Users.Drawables;
+using osu.Framework.Input.Events;
+
+namespace osu.Game.Users
+{
+    public abstract class ExtendedUserPanel : UserPanel
+    {
+        public readonly Bindable<UserStatus> Status = new Bindable<UserStatus>();
+
+        public readonly IBindable<UserActivity> Activity = new Bindable<UserActivity>();
+
+        protected TextFlowContainer LastVisitMessage { get; private set; }
+
+        private SpriteIcon statusIcon;
+        private OsuSpriteText statusMessage;
+
+        protected ExtendedUserPanel(User user)
+            : base(user)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            BorderColour = ColourProvider?.Light1 ?? Colours.GreyVioletLighter;
+
+            Status.ValueChanged += status => displayStatus(status.NewValue, Activity.Value);
+            Activity.ValueChanged += activity => displayStatus(Status.Value, activity.NewValue);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            Status.TriggerChange();
+
+            // Colour should be applied immediately on first load.
+            statusIcon.FinishTransforms();
+        }
+
+        protected UpdateableAvatar CreateAvatar() => new UpdateableAvatar
+        {
+            User = User,
+            OpenOnClick = { Value = false }
+        };
+
+        protected UpdateableFlag CreateFlag() => new UpdateableFlag(User.Country)
+        {
+            Size = new Vector2(39, 26)
+        };
+
+        protected SpriteIcon CreateStatusIcon() => statusIcon = new SpriteIcon
+        {
+            Icon = FontAwesome.Regular.Circle,
+            Size = new Vector2(25)
+        };
+
+        protected FillFlowContainer CreateStatusMessage(bool rightAlignedChildren)
+        {
+            var statusContainer = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Both,
+                Direction = FillDirection.Vertical
+            };
+
+            var alignment = rightAlignedChildren ? Anchor.CentreRight : Anchor.CentreLeft;
+
+            statusContainer.Add(LastVisitMessage = new TextFlowContainer(t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)).With(text =>
+            {
+                text.Anchor = alignment;
+                text.Origin = alignment;
+                text.AutoSizeAxes = Axes.Both;
+                text.Alpha = 0;
+
+                if (User.LastVisit.HasValue)
+                {
+                    text.AddText(@"Last seen ");
+                    text.AddText(new DrawableDate(User.LastVisit.Value, italic: false)
+                    {
+                        Shadow = false
+                    });
+                }
+            }));
+
+            statusContainer.Add(statusMessage = new OsuSpriteText
+            {
+                Anchor = alignment,
+                Origin = alignment,
+                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
+            });
+
+            return statusContainer;
+        }
+
+        private void displayStatus(UserStatus status, UserActivity activity = null)
+        {
+            if (status != null)
+            {
+                LastVisitMessage.FadeTo(status is UserStatusOffline && User.LastVisit.HasValue ? 1 : 0);
+
+                // Set status message based on activity (if we have one) and status is not offline
+                if (activity != null && !(status is UserStatusOffline))
+                {
+                    statusMessage.Text = activity.Status;
+                    statusIcon.FadeColour(activity.GetAppropriateColour(Colours), 500, Easing.OutQuint);
+                    return;
+                }
+
+                // Otherwise use only status
+                statusMessage.Text = status.Message;
+                statusIcon.FadeColour(status.GetAppropriateColour(Colours), 500, Easing.OutQuint);
+
+                return;
+            }
+
+            // Fallback to web status if local one is null
+            if (User.IsOnline)
+            {
+                Status.Value = new UserStatusOnline();
+                return;
+            }
+
+            Status.Value = new UserStatusOffline();
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            BorderThickness = 2;
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            BorderThickness = 0;
+            base.OnHoverLost(e);
+        }
+    }
+}

osu.Game/Users/UserBrickPanel.cs

@@ -0,0 +1,65 @@
+// 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.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osuTK;
+
+namespace osu.Game.Users
+{
+    public class UserBrickPanel : UserPanel
+    {
+        public UserBrickPanel(User user)
+            : base(user)
+        {
+            AutoSizeAxes = Axes.Both;
+            CornerRadius = 6;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Background.FadeTo(0.2f);
+        }
+
+        protected override Drawable CreateLayout() => new FillFlowContainer
+        {
+            AutoSizeAxes = Axes.Both,
+            Direction = FillDirection.Horizontal,
+            Spacing = new Vector2(5, 0),
+            Margin = new MarginPadding
+            {
+                Horizontal = 10,
+                Vertical = 3,
+            },
+            Anchor = Anchor.Centre,
+            Origin = Anchor.Centre,
+            Children = new Drawable[]
+            {
+                new CircularContainer
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Masking = true,
+                    Width = 4,
+                    Height = 13,
+                    Child = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = string.IsNullOrEmpty(User.Colour) ? Color4Extensions.FromHex("0087ca") : Color4Extensions.FromHex(User.Colour)
+                    }
+                },
+                CreateUsername().With(u =>
+                {
+                    u.Anchor = Anchor.CentreLeft;
+                    u.Origin = Anchor.CentreLeft;
+                    u.Font = OsuFont.GetFont(size: 13, weight: FontWeight.Bold);
+                })
+            }
+        };
+    }
+}

osu.Game/Users/UserGridPanel.cs

@@ -9,7 +9,7 @@ using osuTK;
 
 namespace osu.Game.Users
 {
-    public class UserGridPanel : UserPanel
+    public class UserGridPanel : ExtendedUserPanel
     {
         private const int margin = 10;
 

osu.Game/Users/UserListPanel.cs

@@ -12,7 +12,7 @@ using osu.Game.Overlays.Profile.Header.Components;
 
 namespace osu.Game.Users
 {
-    public class UserListPanel : UserPanel
+    public class UserListPanel : ExtendedUserPanel
     {
         public UserListPanel(User user)
             : base(user)

osu.Game/Users/UserPanel.cs

@@ -2,9 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
-using osuTK;
 using osu.Framework.Allocation;
-using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -14,11 +12,8 @@ using osu.Game.Overlays;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics.Containers;
-using osu.Game.Users.Drawables;
 using JetBrains.Annotations;
-using osu.Framework.Input.Events;
 
 namespace osu.Game.Users
 {
@@ -26,21 +21,12 @@ namespace osu.Game.Users
     {
         public readonly User User;
 
-        public readonly Bindable<UserStatus> Status = new Bindable<UserStatus>();
-
-        public readonly IBindable<UserActivity> Activity = new Bindable<UserActivity>();
-
         public new Action Action;
 
         protected Action ViewProfile { get; private set; }
 
         protected DelayedLoadUnloadWrapper Background { get; private set; }
 
-        protected TextFlowContainer LastVisitMessage { get; private set; }
-
-        private SpriteIcon statusIcon;
-        private OsuSpriteText statusMessage;
-
         protected UserPanel(User user)
         {
             if (user == null)
@@ -53,23 +39,22 @@ namespace osu.Game.Users
         private UserProfileOverlay profileOverlay { get; set; }
 
         [Resolved(canBeNull: true)]
-        private OverlayColourProvider colourProvider { get; set; }
+        protected OverlayColourProvider ColourProvider { get; private set; }
 
         [Resolved]
-        private OsuColour colours { get; set; }
+        protected OsuColour Colours { get; private set; }
 
         [BackgroundDependencyLoader]
         private void load()
         {
             Masking = true;
-            BorderColour = colourProvider?.Light1 ?? colours.GreyVioletLighter;
 
             AddRange(new[]
             {
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = colourProvider?.Background5 ?? colours.Gray1
+                    Colour = ColourProvider?.Background5 ?? Colours.Gray1
                 },
                 Background = new DelayedLoadUnloadWrapper(() => new UserCoverBackground
                 {
@@ -86,9 +71,6 @@ namespace osu.Game.Users
                 CreateLayout()
             });
 
-            Status.ValueChanged += status => displayStatus(status.NewValue, Activity.Value);
-            Activity.ValueChanged += activity => displayStatus(Status.Value, activity.NewValue);
-
             base.Action = ViewProfile = () =>
             {
                 Action?.Invoke();
@@ -96,41 +78,9 @@ namespace osu.Game.Users
             };
         }
 
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-            Status.TriggerChange();
-
-            // Colour should be applied immediately on first load.
-            statusIcon.FinishTransforms();
-        }
-
-        protected override bool OnHover(HoverEvent e)
-        {
-            BorderThickness = 2;
-            return base.OnHover(e);
-        }
-
-        protected override void OnHoverLost(HoverLostEvent e)
-        {
-            BorderThickness = 0;
-            base.OnHoverLost(e);
-        }
-
         [NotNull]
         protected abstract Drawable CreateLayout();
 
-        protected UpdateableAvatar CreateAvatar() => new UpdateableAvatar
-        {
-            User = User,
-            OpenOnClick = { Value = false }
-        };
-
-        protected UpdateableFlag CreateFlag() => new UpdateableFlag(User.Country)
-        {
-            Size = new Vector2(39, 26)
-        };
-
         protected OsuSpriteText CreateUsername() => new OsuSpriteText
         {
             Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
@@ -138,80 +88,6 @@ namespace osu.Game.Users
             Text = User.Username,
         };
 
-        protected SpriteIcon CreateStatusIcon() => statusIcon = new SpriteIcon
-        {
-            Icon = FontAwesome.Regular.Circle,
-            Size = new Vector2(25)
-        };
-
-        protected FillFlowContainer CreateStatusMessage(bool rightAlignedChildren)
-        {
-            var statusContainer = new FillFlowContainer
-            {
-                AutoSizeAxes = Axes.Both,
-                Direction = FillDirection.Vertical
-            };
-
-            var alignment = rightAlignedChildren ? Anchor.CentreRight : Anchor.CentreLeft;
-
-            statusContainer.Add(LastVisitMessage = new TextFlowContainer(t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)).With(text =>
-            {
-                text.Anchor = alignment;
-                text.Origin = alignment;
-                text.AutoSizeAxes = Axes.Both;
-                text.Alpha = 0;
-
-                if (User.LastVisit.HasValue)
-                {
-                    text.AddText(@"Last seen ");
-                    text.AddText(new DrawableDate(User.LastVisit.Value, italic: false)
-                    {
-                        Shadow = false
-                    });
-                }
-            }));
-
-            statusContainer.Add(statusMessage = new OsuSpriteText
-            {
-                Anchor = alignment,
-                Origin = alignment,
-                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
-            });
-
-            return statusContainer;
-        }
-
-        private void displayStatus(UserStatus status, UserActivity activity = null)
-        {
-            if (status != null)
-            {
-                LastVisitMessage.FadeTo(status is UserStatusOffline && User.LastVisit.HasValue ? 1 : 0);
-
-                // Set status message based on activity (if we have one) and status is not offline
-                if (activity != null && !(status is UserStatusOffline))
-                {
-                    statusMessage.Text = activity.Status;
-                    statusIcon.FadeColour(activity.GetAppropriateColour(colours), 500, Easing.OutQuint);
-                    return;
-                }
-
-                // Otherwise use only status
-                statusMessage.Text = status.Message;
-                statusIcon.FadeColour(status.GetAppropriateColour(colours), 500, Easing.OutQuint);
-
-                return;
-            }
-
-            // Fallback to web status if local one is null
-            if (User.IsOnline)
-            {
-                Status.Value = new UserStatusOnline();
-                return;
-            }
-
-            Status.Value = new UserStatusOffline();
-        }
-
         public MenuItem[] ContextMenuItems => new MenuItem[]
         {
             new OsuMenuItem("View Profile", MenuItemType.Highlighted, ViewProfile),