Merge pull request #1023 from Tom94/custom-chat-colours

Use a background for custom-coloured users

osu.Game/Overlays/Chat/ChatLine.cs

@@ -8,6 +8,9 @@ using osu.Game.Graphics.Sprites;
 using osu.Game.Online.Chat;
 using OpenTK;
 using OpenTK.Graphics;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Allocation;
 
 namespace osu.Game.Overlays.Chat
 {
@@ -53,21 +56,14 @@ namespace osu.Game.Overlays.Chat
             OsuColour.FromHex("992861"),
         };
 
-        private Color4 getUsernameColour(Message message)
-        {
-            if (!string.IsNullOrEmpty(message.Sender?.Colour))
-                return OsuColour.FromHex(message.Sender.Colour);
-
-            //todo: use User instead of Message when user_id is correctly populated.
-            return username_colours[message.UserId % username_colours.Length];
-        }
-
         public const float LEFT_PADDING = message_padding + padding * 2;
 
         private const float padding = 15;
         private const float message_padding = 200;
         private const float text_size = 20;
 
+        private Color4 customUsernameColour;
+
         public ChatLine(Message message)
         {
             Message = message;
@@ -76,13 +72,67 @@ namespace osu.Game.Overlays.Chat
             AutoSizeAxes = Axes.Y;
 
             Padding = new MarginPadding { Left = padding, Right = padding };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            customUsernameColour = colours.ChatBlue;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            bool hasBackground = !string.IsNullOrEmpty(Message.Sender.Colour);
+            Drawable username = new OsuSpriteText
+            {
+                Origin = Anchor.TopRight,
+                Anchor = Anchor.TopRight,
+                Font = @"Exo2.0-BoldItalic",
+                Text = $@"{Message.Sender.Username}" + (hasBackground ? "" : ":"),
+                Colour = hasBackground ? customUsernameColour : username_colours[Message.UserId % username_colours.Length],
+                TextSize = text_size,
+            };
+
+            if (hasBackground)
+            {
+                // Background effect
+                username = username.WithEffect(new EdgeEffect
+                {
+                    CornerRadius = 4,
+                    Parameters = new EdgeEffectParameters
+                    {
+                        Radius = 1,
+                        Colour = OsuColour.FromHex(Message.Sender.Colour),
+                        Type = EdgeEffectType.Shadow,
+                    }
+                }, d =>
+                {
+                    d.Padding = new MarginPadding { Left = 3, Right = 3, Bottom = 1, Top = -3 };
+                    d.Y = 3;
+                })
+                // Drop shadow effect
+                .WithEffect(new EdgeEffect
+                {
+                    CornerRadius = 4,
+                    Parameters = new EdgeEffectParameters
+                    {
+                        Roundness = 1,
+                        Offset = new Vector2(0, 3),
+                        Radius = 3,
+                        Colour = Color4.Black.Opacity(0.3f),
+                        Type = EdgeEffectType.Shadow,
+                    }
+                });
+            }
 
             Children = new Drawable[]
             {
                 new Container
                 {
                     Size = new Vector2(message_padding, text_size),
-                    Children = new Drawable[]
+                    Children = new[]
                     {
                         new OsuSpriteText
                         {
@@ -94,15 +144,7 @@ namespace osu.Game.Overlays.Chat
                             TextSize = text_size * 0.75f,
                             Alpha = 0.4f,
                         },
-                        new OsuSpriteText
+                        username
-                        {
-                            Font = @"Exo2.0-BoldItalic",
-                            Text = $@"{Message.Sender.Username}:",
-                            Colour = getUsernameColour(Message),
-                            TextSize = text_size,
-                            Origin = Anchor.TopRight,
-                            Anchor = Anchor.TopRight,
-                        }
                     }
                 },
                 new Container

osu.Game/Overlays/Chat/DrawableChannel.cs

@@ -29,6 +29,9 @@ namespace osu.Game.Overlays.Chat
                 scroll = new OsuScrollContainer
                 {
                     RelativeSizeAxes = Axes.Both,
+                    // Some chat lines have effects that slightly protrude to the bottom,
+                    // which we do not want to mask away, hence the padding.
+                    Padding = new MarginPadding { Bottom = 5 },
                     Children = new Drawable[]
                     {
                         flow = new FillFlowContainer<ChatLine>

osu.Game/Overlays/ChatOverlay.cs

@@ -111,7 +111,7 @@ namespace osu.Game.Overlays
                                     RelativeSizeAxes = Axes.Both,
                                     Padding = new MarginPadding
                                     {
-                                        Bottom = textbox_height + padding
+                                        Bottom = textbox_height
                                     },
                                 },
                                 new Container