Merge pull request #21369 from goodtrailer/chat-profile-highlight-v2

Highlight `ChatLine` username on hover

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

@@ -130,11 +130,11 @@ namespace osu.Game.Tests.Visual.Online
 
                     Color4 textColour = isAction && hasBackground ? Color4Extensions.FromHex(newLine.Message.Sender.Colour) : Color4.White;
 
-                    var linkCompilers = newLine.ContentFlow.Where(d => d is DrawableLinkCompiler).ToList();
+                    var linkCompilers = newLine.DrawableContentFlow.Where(d => d is DrawableLinkCompiler).ToList();
                     var linkSprites = linkCompilers.SelectMany(comp => ((DrawableLinkCompiler)comp).Parts);
 
                     return linkSprites.All(d => d.Colour == linkColour)
-                           && newLine.ContentFlow.Except(linkSprites.Concat(linkCompilers)).All(d => d.Colour == textColour);
+                           && newLine.DrawableContentFlow.Except(linkSprites.Concat(linkCompilers)).All(d => d.Colour == textColour);
                 }
             }
         }

osu.Game/Online/Chat/StandAloneChatDisplay.cs

@@ -192,7 +192,7 @@ namespace osu.Game.Online.Chat
 
         protected partial class StandAloneMessage : ChatLine
         {
-            protected override float TextSize => 15;
+            protected override float FontSize => 15;
             protected override float Spacing => 5;
             protected override float UsernameWidth => 75;
 

osu.Game/Overlays/Chat/ChatLine.cs

@@ -1,7 +1,6 @@
 // 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 System;
 using System.Linq;
 using System.Collections.Generic;
 using osu.Framework.Allocation;
@@ -9,25 +8,20 @@ using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.UserInterface;
 using osu.Game.Configuration;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
-using osu.Game.Online.API;
-using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Online.Chat;
-using osuTK;
+using osu.Framework.Graphics.Sprites;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Chat
 {
     public partial class ChatLine : CompositeDrawable
     {
+        private Message message = null!;
+
         public Message Message
         {
             get => message;
@@ -44,49 +38,35 @@ namespace osu.Game.Overlays.Chat
             }
         }
 
-        public LinkFlowContainer ContentFlow { get; private set; } = null!;
+        public IReadOnlyCollection<Drawable> DrawableContentFlow => drawableContentFlow;
 
-        protected virtual float TextSize => 20;
+        protected virtual float FontSize => 20;
 
         protected virtual float Spacing => 15;
 
         protected virtual float UsernameWidth => 130;
 
-        private Color4 usernameColour;
-
-        private OsuSpriteText timestamp = null!;
-
-        private Message message = null!;
-
-        private OsuSpriteText username = null!;
-
-        private Container? highlight;
-
-        private readonly Bindable<bool> prefer24HourTime = new Bindable<bool>();
-
-        private bool senderHasColour => !string.IsNullOrEmpty(message.Sender.Colour);
-
-        private bool messageHasColour => Message.IsAction && senderHasColour;
-
         [Resolved]
         private ChannelManager? chatManager { get; set; }
 
         [Resolved]
-        private OsuColour colours { get; set; } = null!;
+        private OverlayColourProvider? colourProvider { get; set; }
+
+        private readonly OsuSpriteText drawableTimestamp;
+
+        private readonly DrawableUsername drawableUsername;
+
+        private readonly LinkFlowContainer drawableContentFlow;
+
+        private readonly Bindable<bool> prefer24HourTime = new Bindable<bool>();
+
+        private Container? highlight;
 
         public ChatLine(Message message)
         {
             Message = message;
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider? colourProvider, OsuConfigManager configManager)
-        {
-            usernameColour = senderHasColour
-                ? Color4Extensions.FromHex(message.Sender.Colour)
-                : username_colours[message.Sender.Id % username_colours.Length];
 
             InternalChild = new GridContainer
             {
@@ -103,30 +83,24 @@ namespace osu.Game.Overlays.Chat
                 {
                     new Drawable[]
                     {
-                        timestamp = new OsuSpriteText
+                        drawableTimestamp = new OsuSpriteText
                         {
                             Shadow = false,
                             Anchor = Anchor.CentreLeft,
                             Origin = Anchor.CentreLeft,
-                            Font = OsuFont.GetFont(size: TextSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
+                            Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
-                            Colour = colourProvider?.Background1 ?? Colour4.White,
                             AlwaysPresent = true,
                         },
-                        new MessageSender(message.Sender)
+                        drawableUsername = new DrawableUsername(message.Sender)
                         {
                             Width = UsernameWidth,
+                            FontSize = FontSize,
                             AutoSizeAxes = Axes.Y,
                             Origin = Anchor.TopRight,
                             Anchor = Anchor.TopRight,
-                            Child = createUsername(),
                             Margin = new MarginPadding { Horizontal = Spacing },
                         },
-                        ContentFlow = new LinkFlowContainer(t =>
+                        drawableContentFlow = new LinkFlowContainer(styleMessageContent)
-                        {
-                            t.Shadow = false;
-                            t.Font = t.Font.With(size: TextSize, italics: Message.IsAction);
-                            t.Colour = messageHasColour ? Color4Extensions.FromHex(message.Sender.Colour) : colourProvider?.Content1 ?? Colour4.White;
-                        })
                         {
                             AutoSizeAxes = Axes.Y,
                             RelativeSizeAxes = Axes.X,
@@ -134,18 +108,23 @@ namespace osu.Game.Overlays.Chat
                     },
                 }
             };
+        }
 
+        [BackgroundDependencyLoader]
+        private void load(OsuConfigManager configManager)
+        {
             configManager.BindWith(OsuSetting.Prefer24HourTime, prefer24HourTime);
+            prefer24HourTime.BindValueChanged(_ => updateTimestamp());
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
 
+            drawableTimestamp.Colour = colourProvider?.Background1 ?? Colour4.White;
+
             updateMessageContent();
             FinishTransforms(true);
-
-            prefer24HourTime.BindValueChanged(_ => updateTimestamp());
         }
 
         /// <summary>
@@ -160,7 +139,7 @@ namespace osu.Game.Overlays.Chat
                     CornerRadius = 2f,
                     Masking = true,
                     RelativeSizeAxes = Axes.Both,
-                    Colour = usernameColour.Darken(1f),
+                    Colour = drawableUsername.AccentColour.Darken(1f),
                     Depth = float.MaxValue,
                     Child = new Box { RelativeSizeAxes = Axes.Both }
                 });
@@ -170,166 +149,35 @@ namespace osu.Game.Overlays.Chat
             highlight.Expire();
         }
 
+        private void styleMessageContent(SpriteText text)
+        {
+            text.Shadow = false;
+            text.Font = text.Font.With(size: FontSize, italics: Message.IsAction);
+
+            bool messageHasColour = Message.IsAction && !string.IsNullOrEmpty(message.Sender.Colour);
+            text.Colour = messageHasColour ? Color4Extensions.FromHex(message.Sender.Colour) : colourProvider?.Content1 ?? Colour4.White;
+        }
+
         private void updateMessageContent()
         {
             this.FadeTo(message is LocalEchoMessage ? 0.4f : 1.0f, 500, Easing.OutQuint);
-            timestamp.FadeTo(message is LocalEchoMessage ? 0 : 1, 500, Easing.OutQuint);
+            drawableTimestamp.FadeTo(message is LocalEchoMessage ? 0 : 1, 500, Easing.OutQuint);
 
             updateTimestamp();
-            username.Text = $@"{message.Sender.Username}";
+            drawableUsername.Text = $@"{message.Sender.Username}";
 
             // remove non-existent channels from the link list
             message.Links.RemoveAll(link => link.Action == LinkAction.OpenChannel && chatManager?.AvailableChannels.Any(c => c.Name == link.Argument.ToString()) != true);
 
-            ContentFlow.Clear();
+            drawableContentFlow.Clear();
-            ContentFlow.AddLinks(message.DisplayContent, message.Links);
+            drawableContentFlow.AddLinks(message.DisplayContent, message.Links);
         }
 
         private void updateTimestamp()
         {
-            timestamp.Text = prefer24HourTime.Value
+            drawableTimestamp.Text = prefer24HourTime.Value
                 ? $@"{message.Timestamp.LocalDateTime:HH:mm:ss}"
                 : $@"{message.Timestamp.LocalDateTime:hh:mm:ss tt}";
         }
-
-        private Drawable createUsername()
-        {
-            username = new OsuSpriteText
-            {
-                Shadow = false,
-                Colour = senderHasColour ? colours.ChatBlue : usernameColour,
-                Truncate = true,
-                EllipsisString = "…",
-                Font = OsuFont.GetFont(size: TextSize, weight: FontWeight.Bold, italics: true),
-                Anchor = Anchor.TopRight,
-                Origin = Anchor.TopRight,
-                MaxWidth = UsernameWidth,
-            };
-
-            if (!senderHasColour)
-                return username;
-
-            // Background effect
-            return new Container
-            {
-                Anchor = Anchor.TopRight,
-                Origin = Anchor.TopRight,
-                AutoSizeAxes = Axes.Both,
-                Masking = true,
-                CornerRadius = 4,
-                EdgeEffect = new EdgeEffectParameters
-                {
-                    Roundness = 1,
-                    Radius = 1,
-                    Colour = Color4.Black.Opacity(0.3f),
-                    Offset = new Vector2(0, 1),
-                    Type = EdgeEffectType.Shadow,
-                },
-                Child = new Container
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Masking = true,
-                    CornerRadius = 4,
-                    Children = new Drawable[]
-                    {
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Colour = usernameColour,
-                        },
-                        new Container
-                        {
-                            AutoSizeAxes = Axes.Both,
-                            Padding = new MarginPadding { Left = 4, Right = 4, Bottom = 1, Top = -2 },
-                            Child = username
-                        }
-                    }
-                }
-            };
-        }
-
-        private partial class MessageSender : OsuClickableContainer, IHasContextMenu
-        {
-            private readonly APIUser sender;
-
-            private Action startChatAction = null!;
-
-            [Resolved]
-            private IAPIProvider api { get; set; } = null!;
-
-            public MessageSender(APIUser sender)
-            {
-                this.sender = sender;
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(UserProfileOverlay? profile, ChannelManager? chatManager, ChatOverlay? chatOverlay)
-            {
-                Action = () => profile?.ShowUser(sender);
-                startChatAction = () =>
-                {
-                    chatManager?.OpenPrivateChannel(sender);
-                    chatOverlay?.Show();
-                };
-            }
-
-            public MenuItem[] ContextMenuItems
-            {
-                get
-                {
-                    if (sender.Equals(APIUser.SYSTEM_USER))
-                        return Array.Empty<MenuItem>();
-
-                    List<MenuItem> items = new List<MenuItem>
-                    {
-                        new OsuMenuItem("View Profile", MenuItemType.Highlighted, Action)
-                    };
-
-                    if (!sender.Equals(api.LocalUser.Value))
-                        items.Add(new OsuMenuItem("Start Chat", MenuItemType.Standard, startChatAction));
-
-                    return items.ToArray();
-                }
-            }
-        }
-
-        private static readonly Color4[] username_colours =
-        {
-            Color4Extensions.FromHex("588c7e"),
-            Color4Extensions.FromHex("b2a367"),
-            Color4Extensions.FromHex("c98f65"),
-            Color4Extensions.FromHex("bc5151"),
-            Color4Extensions.FromHex("5c8bd6"),
-            Color4Extensions.FromHex("7f6ab7"),
-            Color4Extensions.FromHex("a368ad"),
-            Color4Extensions.FromHex("aa6880"),
-
-            Color4Extensions.FromHex("6fad9b"),
-            Color4Extensions.FromHex("f2e394"),
-            Color4Extensions.FromHex("f2ae72"),
-            Color4Extensions.FromHex("f98f8a"),
-            Color4Extensions.FromHex("7daef4"),
-            Color4Extensions.FromHex("a691f2"),
-            Color4Extensions.FromHex("c894d3"),
-            Color4Extensions.FromHex("d895b0"),
-
-            Color4Extensions.FromHex("53c4a1"),
-            Color4Extensions.FromHex("eace5c"),
-            Color4Extensions.FromHex("ea8c47"),
-            Color4Extensions.FromHex("fc4f4f"),
-            Color4Extensions.FromHex("3d94ea"),
-            Color4Extensions.FromHex("7760ea"),
-            Color4Extensions.FromHex("af52c6"),
-            Color4Extensions.FromHex("e25696"),
-
-            Color4Extensions.FromHex("677c66"),
-            Color4Extensions.FromHex("9b8732"),
-            Color4Extensions.FromHex("8c5129"),
-            Color4Extensions.FromHex("8c3030"),
-            Color4Extensions.FromHex("1f5d91"),
-            Color4Extensions.FromHex("4335a5"),
-            Color4Extensions.FromHex("812a96"),
-            Color4Extensions.FromHex("992861"),
-        };
     }
 }

osu.Game/Overlays/Chat/DrawableUsername.cs

@@ -0,0 +1,225 @@
+// 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 System;
+using System.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input.Events;
+using osu.Framework.Localisation;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Online.Chat;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Chat
+{
+    public partial class DrawableUsername : OsuClickableContainer, IHasContextMenu
+    {
+        public Color4 AccentColour { get; }
+
+        public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) =>
+            Child.ReceivePositionalInputAt(screenSpacePos);
+
+        public float FontSize
+        {
+            set => drawableText.Font = OsuFont.GetFont(size: value, weight: FontWeight.Bold, italics: true);
+        }
+
+        public LocalisableString Text
+        {
+            set => drawableText.Text = value;
+        }
+
+        public override float Width
+        {
+            get => base.Width;
+            set => base.Width = drawableText.MaxWidth = value;
+        }
+
+        [Resolved]
+        private IAPIProvider api { get; set; } = null!;
+
+        [Resolved]
+        private OsuColour colours { get; set; } = null!;
+
+        [Resolved(canBeNull: true)]
+        private ChannelManager? chatManager { get; set; }
+
+        [Resolved(canBeNull: true)]
+        private ChatOverlay? chatOverlay { get; set; }
+
+        [Resolved(canBeNull: true)]
+        private UserProfileOverlay? profileOverlay { get; set; }
+
+        private readonly APIUser user;
+        private readonly OsuSpriteText drawableText;
+
+        private readonly Drawable colouredDrawable;
+
+        public DrawableUsername(APIUser user)
+        {
+            this.user = user;
+
+            Action = openUserProfile;
+
+            drawableText = new OsuSpriteText
+            {
+                Shadow = false,
+                Truncate = true,
+                EllipsisString = "…",
+                Anchor = Anchor.TopRight,
+                Origin = Anchor.TopRight,
+            };
+
+            if (string.IsNullOrWhiteSpace(user.Colour))
+            {
+                AccentColour = default_colours[user.Id % default_colours.Length];
+
+                Child = colouredDrawable = drawableText;
+            }
+            else
+            {
+                AccentColour = Color4Extensions.FromHex(user.Colour);
+
+                Child = new Container
+                {
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    AutoSizeAxes = Axes.Both,
+                    Masking = true,
+                    CornerRadius = 4,
+                    EdgeEffect = new EdgeEffectParameters
+                    {
+                        Roundness = 1,
+                        Radius = 1,
+                        Colour = Color4.Black.Opacity(0.3f),
+                        Offset = new Vector2(0, 1),
+                        Type = EdgeEffectType.Shadow,
+                    },
+                    Child = new Container
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Masking = true,
+                        CornerRadius = 4,
+                        Children = new[]
+                        {
+                            colouredDrawable = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                            },
+                            new Container
+                            {
+                                AutoSizeAxes = Axes.Both,
+                                Padding = new MarginPadding { Left = 4, Right = 4, Bottom = 1, Top = -2 },
+                                Child = drawableText,
+                            }
+                        }
+                    }
+                };
+            }
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            drawableText.Colour = colours.ChatBlue;
+            colouredDrawable.Colour = AccentColour;
+        }
+
+        public MenuItem[] ContextMenuItems
+        {
+            get
+            {
+                if (user.Equals(APIUser.SYSTEM_USER))
+                    return Array.Empty<MenuItem>();
+
+                List<MenuItem> items = new List<MenuItem>
+                {
+                    new OsuMenuItem("View Profile", MenuItemType.Highlighted, openUserProfile)
+                };
+
+                if (!user.Equals(api.LocalUser.Value))
+                    items.Add(new OsuMenuItem("Start Chat", MenuItemType.Standard, openUserChannel));
+
+                return items.ToArray();
+            }
+        }
+
+        private void openUserChannel()
+        {
+            chatManager?.OpenPrivateChannel(user);
+            chatOverlay?.Show();
+        }
+
+        private void openUserProfile()
+        {
+            profileOverlay?.ShowUser(user);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            colouredDrawable.FadeColour(AccentColour.Lighten(0.6f), 30, Easing.OutQuint);
+
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            base.OnHoverLost(e);
+
+            colouredDrawable.FadeColour(AccentColour, 800, Easing.OutQuint);
+        }
+
+        private static readonly Color4[] default_colours =
+        {
+            Color4Extensions.FromHex("588c7e"),
+            Color4Extensions.FromHex("b2a367"),
+            Color4Extensions.FromHex("c98f65"),
+            Color4Extensions.FromHex("bc5151"),
+            Color4Extensions.FromHex("5c8bd6"),
+            Color4Extensions.FromHex("7f6ab7"),
+            Color4Extensions.FromHex("a368ad"),
+            Color4Extensions.FromHex("aa6880"),
+
+            Color4Extensions.FromHex("6fad9b"),
+            Color4Extensions.FromHex("f2e394"),
+            Color4Extensions.FromHex("f2ae72"),
+            Color4Extensions.FromHex("f98f8a"),
+            Color4Extensions.FromHex("7daef4"),
+            Color4Extensions.FromHex("a691f2"),
+            Color4Extensions.FromHex("c894d3"),
+            Color4Extensions.FromHex("d895b0"),
+
+            Color4Extensions.FromHex("53c4a1"),
+            Color4Extensions.FromHex("eace5c"),
+            Color4Extensions.FromHex("ea8c47"),
+            Color4Extensions.FromHex("fc4f4f"),
+            Color4Extensions.FromHex("3d94ea"),
+            Color4Extensions.FromHex("7760ea"),
+            Color4Extensions.FromHex("af52c6"),
+            Color4Extensions.FromHex("e25696"),
+
+            Color4Extensions.FromHex("677c66"),
+            Color4Extensions.FromHex("9b8732"),
+            Color4Extensions.FromHex("8c5129"),
+            Color4Extensions.FromHex("8c3030"),
+            Color4Extensions.FromHex("1f5d91"),
+            Color4Extensions.FromHex("4335a5"),
+            Color4Extensions.FromHex("812a96"),
+            Color4Extensions.FromHex("992861"),
+        };
+    }
+}