Merge pull request #29137 from normalid-awa/feature/visual/chatline-background-altering

Alternate background colour of chat lines to better visually distinguish wrapped lines

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

@@ -40,6 +40,7 @@ namespace osu.Game.Tests.Visual.Online
                 Id = 3,
                 Username = "LocalUser"
             };
+
             string uuid = Guid.NewGuid().ToString();
             AddStep("add local echo message", () => channel.AddLocalEcho(new LocalEchoMessage
             {
@@ -83,5 +84,40 @@ namespace osu.Game.Tests.Visual.Online
             AddUntilStep("three day separators present", () => drawableChannel.ChildrenOfType<DaySeparator>().Count() == 3);
             AddAssert("last day separator is from correct day", () => drawableChannel.ChildrenOfType<DaySeparator>().Last().Date.Date == new DateTime(2022, 11, 22));
         }
+
+        [Test]
+        public void TestBackgroundAlternating()
+        {
+            var localUser = new APIUser
+            {
+                Id = 3,
+                Username = "LocalUser"
+            };
+
+            int messageCount = 1;
+
+            AddRepeatStep("add messages", () =>
+            {
+                channel.AddNewMessages(new Message(messageCount)
+                {
+                    Sender = localUser,
+                    Content = "Hi there all!",
+                    Timestamp = new DateTimeOffset(2022, 11, 21, 20, messageCount, 13, TimeSpan.Zero),
+                    Uuid = Guid.NewGuid().ToString(),
+                });
+                messageCount++;
+            }, 10);
+
+            AddUntilStep("10 message present", () => drawableChannel.ChildrenOfType<ChatLine>().Count() == 10);
+
+            int checkCount = 0;
+
+            AddRepeatStep("check background", () =>
+            {
+                // +1 because the day separator take one index
+                Assert.AreEqual((checkCount + 1) % 2 == 0, drawableChannel.ChildrenOfType<ChatLine>().ToList()[checkCount].AlternatingBackground);
+                checkCount++;
+            }, 10);
+        }
     }
 }

osu.Game/Overlays/Chat/ChatLine.cs

@@ -21,7 +21,6 @@ using osu.Game.Graphics.Sprites;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Online.Chat;
 using osuTK.Graphics;
-using Message = osu.Game.Online.Chat.Message;
 
 namespace osu.Game.Overlays.Chat
 {
@@ -69,6 +68,23 @@ namespace osu.Game.Overlays.Chat
 
         private Container? highlight;
 
+        private Drawable? background;
+
+        private bool alternatingBackground;
+
+        public bool AlternatingBackground
+        {
+            get => alternatingBackground;
+            set
+            {
+                if (alternatingBackground == value)
+                    return;
+
+                alternatingBackground = value;
+                updateBackground();
+            }
+        }
+
         /// <summary>
         /// The colour used to paint the author's username.
         /// </summary>
@@ -102,48 +118,73 @@ namespace osu.Game.Overlays.Chat
             configManager.BindWith(OsuSetting.Prefer24HourTime, prefer24HourTime);
             prefer24HourTime.BindValueChanged(_ => updateTimestamp());
 
-            InternalChild = new GridContainer
+            Padding = new MarginPadding { Right = 5 };
+
+            InternalChildren = new[]
             {
-                RelativeSizeAxes = Axes.X,
+                background = new Container
-                AutoSizeAxes = Axes.Y,
-                RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
-                ColumnDimensions = new[]
                 {
-                    new Dimension(GridSizeMode.AutoSize),
+                    Masking = true,
-                    new Dimension(GridSizeMode.Absolute, Spacing + UsernameWidth + Spacing),
+                    CornerRadius = 4,
-                    new Dimension(),
+                    Alpha = 0,
-                },
+                    RelativeSizeAxes = Axes.Both,
-                Content = new[]
+                    Blending = BlendingParameters.Additive,
-                {
+                    Child = new Box
-                    new Drawable[]
                     {
-                        drawableTimestamp = new OsuSpriteText
+                        Colour = Colour4.FromHex("#3b3234"),
-                        {
+                        RelativeSizeAxes = Axes.Both,
-                            Shadow = false,
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreLeft,
-                            Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
-                            AlwaysPresent = true,
-                        },
-                        drawableUsername = new DrawableChatUsername(message.Sender)
-                        {
-                            Width = UsernameWidth,
-                            FontSize = FontSize,
-                            AutoSizeAxes = Axes.Y,
-                            Origin = Anchor.TopRight,
-                            Anchor = Anchor.TopRight,
-                            Margin = new MarginPadding { Horizontal = Spacing },
-                            AccentColour = UsernameColour,
-                            Inverted = !string.IsNullOrEmpty(message.Sender.Colour),
-                        },
-                        drawableContentFlow = new LinkFlowContainer(styleMessageContent)
-                        {
-                            AutoSizeAxes = Axes.Y,
-                            RelativeSizeAxes = Axes.X,
-                        }
                     },
+                },
+                new GridContainer
+                {
+                    Padding = new MarginPadding
+                    {
+                        Horizontal = 2,
+                        Vertical = 2,
+                    },
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
+                    ColumnDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.AutoSize),
+                        new Dimension(GridSizeMode.Absolute, Spacing + UsernameWidth + Spacing),
+                        new Dimension(),
+                    },
+                    Content = new[]
+                    {
+                        new Drawable[]
+                        {
+                            drawableTimestamp = new OsuSpriteText
+                            {
+                                Shadow = false,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
+                                AlwaysPresent = true,
+                            },
+                            drawableUsername = new DrawableChatUsername(message.Sender)
+                            {
+                                Width = UsernameWidth,
+                                FontSize = FontSize,
+                                AutoSizeAxes = Axes.Y,
+                                Origin = Anchor.TopRight,
+                                Anchor = Anchor.TopRight,
+                                Margin = new MarginPadding { Horizontal = Spacing },
+                                AccentColour = UsernameColour,
+                                Inverted = !string.IsNullOrEmpty(message.Sender.Colour),
+                            },
+                            drawableContentFlow = new LinkFlowContainer(styleMessageContent)
+                            {
+                                AutoSizeAxes = Axes.Y,
+                                RelativeSizeAxes = Axes.X,
+                            }
+                        },
+                    }
                 }
             };
+
+            updateBackground();
         }
 
         protected override void LoadComplete()
@@ -258,5 +299,11 @@ namespace osu.Game.Overlays.Chat
             Color4Extensions.FromHex("812a96"),
             Color4Extensions.FromHex("992861"),
         };
+
+        private void updateBackground()
+        {
+            if (background != null)
+                background.Alpha = alternatingBackground ? 0.2f : 0;
+        }
     }
 }

osu.Game/Overlays/Chat/DrawableChannel.cs

@@ -84,6 +84,17 @@ namespace osu.Game.Overlays.Chat
             highlightedMessage.BindValueChanged(_ => processMessageHighlighting(), true);
         }
 
+        protected override void Update()
+        {
+            base.Update();
+
+            for (int i = 0; i < ChatLineFlow.Count; i++)
+            {
+                if (ChatLineFlow[i] is ChatLine chatline)
+                    chatline.AlternatingBackground = i % 2 == 0;
+            }
+        }
+
         /// <summary>
         /// Processes any pending message in <see cref="highlightedMessage"/>.
         /// </summary>