Merge pull request ppy#18127 from jai-x/new-chat-drawable-channel

Update new chat overlay day separator colours and spacing
Lawtrohux · May 12, 2022 · 26c8516 · 26c8516
2 parents b712742 + a35c578
commit 26c8516
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 25 deletions.
diff --git a/osu.Game/Online/Chat/StandAloneChatDisplay.cs b/osu.Game/Online/Chat/StandAloneChatDisplay.cs
@@ -155,9 +155,8 @@ public class StandAloneDrawableChannel : DrawableChannel
         {
             public Func<Message, ChatLine> CreateChatLineAction;
 
-            protected override ChatLine CreateChatLine(Message m) => CreateChatLineAction(m);
-
-            protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new CustomDaySeparator(time);
+            [Resolved]
+            private OsuColour colours { get; set; }
 
             public StandAloneDrawableChannel(Channel channel)
                 : base(channel)
@@ -170,23 +169,16 @@ private void load()
                 ChatLineFlow.Padding = new MarginPadding { Horizontal = 0 };
             }
 
-            private class CustomDaySeparator : DaySeparator
-            {
-                public CustomDaySeparator(DateTimeOffset time)
-                    : base(time)
-                {
-                }
+            protected override ChatLine CreateChatLine(Message m) => CreateChatLineAction(m);
 
-                [BackgroundDependencyLoader]
-                private void load(OsuColour colours)
-                {
-                    Colour = colours.Yellow;
-                    TextSize = 14;
-                    LineHeight = 1;
-                    Padding = new MarginPadding { Horizontal = 10 };
-                    Margin = new MarginPadding { Vertical = 5 };
-                }
-            }
+            protected override Drawable CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
+            {
+                TextSize = 14,
+                Colour = colours.Yellow,
+                LineHeight = 1,
+                Padding = new MarginPadding { Horizontal = 10 },
+                Margin = new MarginPadding { Vertical = 5 },
+            };
         }
 
         protected class StandAloneMessage : ChatLine

diff --git a/osu.Game/Overlays/Chat/ChatOverlayDrawableChannel.cs b/osu.Game/Overlays/Chat/ChatOverlayDrawableChannel.cs
@@ -0,0 +1,109 @@
+// 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.
+
+#nullable enable
+
+using System;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Chat;
+
+namespace osu.Game.Overlays.Chat
+{
+    public class ChatOverlayDrawableChannel : DrawableChannel
+    {
+        public ChatOverlayDrawableChannel(Channel channel)
+            : base(channel)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            ChatLineFlow.Padding = new MarginPadding(0);
+        }
+
+        protected override Drawable CreateDaySeparator(DateTimeOffset time) => new ChatOverlayDaySeparator(time);
+
+        private class ChatOverlayDaySeparator : Container
+        {
+            private readonly DateTimeOffset time;
+
+            public ChatOverlayDaySeparator(DateTimeOffset time)
+            {
+                this.time = time;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                RelativeSizeAxes = Axes.X;
+                AutoSizeAxes = Axes.Y;
+                Padding = new MarginPadding { Horizontal = 15, Vertical = 20 };
+                Child = new GridContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    ColumnDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.Absolute, 200),
+                        new Dimension(GridSizeMode.Absolute, 15),
+                        new Dimension(),
+                    },
+                    Content = new[]
+                    {
+                        new[]
+                        {
+                            new GridContainer
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                ColumnDimensions = new[]
+                                {
+                                    new Dimension(),
+                                    new Dimension(GridSizeMode.Absolute, 15),
+                                    new Dimension(GridSizeMode.AutoSize),
+                                },
+                                Content = new[]
+                                {
+                                    new[]
+                                    {
+                                        new Circle
+                                        {
+                                            Anchor = Anchor.CentreRight,
+                                            Origin = Anchor.CentreRight,
+                                            Colour = colourProvider.Background5,
+                                            RelativeSizeAxes = Axes.X,
+                                            Height = 2,
+                                        },
+                                        Drawable.Empty(),
+                                        new OsuSpriteText
+                                        {
+                                            Anchor = Anchor.CentreRight,
+                                            Origin = Anchor.CentreRight,
+                                            Text = time.ToLocalTime().ToString("dd MMMM yyyy").ToUpper(),
+                                            Font = OsuFont.Torus.With(size: 15, weight: FontWeight.SemiBold),
+                                            Colour = colourProvider.Content1,
+                                        },
+                                    },
+                                },
+                            },
+                            Drawable.Empty(),
+                            new Circle
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Colour = colourProvider.Background5,
+                                RelativeSizeAxes = Axes.X,
+                                Height = 2,
+                            },
+                        },
+                    },
+                };
+            }
+        }
+    }
+}
diff --git a/osu.Game/Overlays/Chat/ChatTextBar.cs b/osu.Game/Overlays/Chat/ChatTextBar.cs
@@ -38,7 +38,7 @@ public class ChatTextBar : Container
         private Container searchIconContainer = null!;
         private ChatTextBox chatTextBox = null!;
 
-        private const float chatting_text_width = 240;
+        private const float chatting_text_width = 220;
         private const float search_icon_width = 40;
 
         [BackgroundDependencyLoader]

diff --git a/osu.Game/Overlays/Chat/DrawableChannel.cs b/osu.Game/Overlays/Chat/DrawableChannel.cs
@@ -121,10 +121,10 @@ protected override void Dispose(bool isDisposing)
 
         protected virtual ChatLine CreateChatLine(Message m) => new ChatLine(m);
 
-        protected virtual DaySeparator CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
+        protected virtual Drawable CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
         {
-            Margin = new MarginPadding { Vertical = 10 },
             Colour = colours.ChatBlue.Lighten(0.7f),
+            Margin = new MarginPadding { Vertical = 10 },
         };
 
         private void newMessagesArrived(IEnumerable<Message> newMessages) => Schedule(() =>

diff --git a/osu.Game/Overlays/ChatOverlayV2.cs b/osu.Game/Overlays/ChatOverlayV2.cs
@@ -37,7 +37,7 @@ public class ChatOverlayV2 : OsuFocusedOverlayContainer, INamedOverlayComponent
         private LoadingLayer loading = null!;
         private ChannelListing channelListing = null!;
         private ChatTextBar textBar = null!;
-        private Container<DrawableChannel> currentChannelContainer = null!;
+        private Container<ChatOverlayDrawableChannel> currentChannelContainer = null!;
 
         private readonly BindableFloat chatHeight = new BindableFloat();
 
@@ -117,7 +117,7 @@ private void load()
                             RelativeSizeAxes = Axes.Both,
                             Colour = colourProvider.Background4,
                         },
-                        currentChannelContainer = new Container<DrawableChannel>
+                        currentChannelContainer = new Container<ChatOverlayDrawableChannel>
                         {
                             RelativeSizeAxes = Axes.Both,
                         },
@@ -249,7 +249,7 @@ private void currentChannelChanged(ValueChangedEvent<Channel> channel)
                 textBar.ShowSearch.Value = false;
 
                 loading.Show();
-                LoadComponentAsync(new DrawableChannel(newChannel), loaded =>
+                LoadComponentAsync(new ChatOverlayDrawableChannel(newChannel), loaded =>
                 {
                     currentChannelContainer.Clear();
                     currentChannelContainer.Add(loaded);