Use Channels in ChannelListItems, ChannelSection, fix ChannelListItem being misaligned

osu.Game/Overlays/Chat/ChannelListItem.cs

@@ -8,11 +8,13 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Chat;
 
 namespace osu.Game.Overlays.Chat
 {
     public class ChannelListItem : ClickableContainer
     {
+        private const float width_padding = 5;
         private const float channel_width = 150;
         private const float topic_width = 380;
         private const float text_size = 15;
@@ -37,7 +39,7 @@ namespace osu.Game.Overlays.Chat
             }
         }
 
-        public ChannelListItem()
+        public ChannelListItem(Channel channel)
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
@@ -49,8 +51,6 @@ namespace osu.Game.Overlays.Chat
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
                     Direction = FillDirection.Horizontal,
-                    Spacing = new Vector2(5f, 0f),
-                    Padding = new MarginPadding { Left = ChannelSelectionOverlay.WIDTH_PADDING, Right = ChannelSelectionOverlay.WIDTH_PADDING },
                     Children = new Drawable[]
                     {
                         new Container
@@ -76,7 +76,7 @@ namespace osu.Game.Overlays.Chat
                             {
                                 new OsuSpriteText
                                 {
-                                    Text = @"#osu!",
+                                    Text = $@"#{channel.Name}",
                                     TextSize = text_size,
                                     Font = @"Exo2.0-Bold",
                                 },
@@ -86,11 +86,12 @@ namespace osu.Game.Overlays.Chat
                         {
                             Width = topic_width,
                             AutoSizeAxes = Axes.Y,
+                            Margin = new MarginPadding { Left = width_padding },
                             Children = new[]
                             {
                                 topic = new OsuSpriteText
                                 {
-                                    Text = @"I dunno, the default channel I guess?",
+                                    Text = channel.Topic,
                                     TextSize = text_size,
                                     Font = @"Exo2.0-SemiBold",
                                     Alpha = 0.8f,
@@ -101,6 +102,7 @@ namespace osu.Game.Overlays.Chat
                         {
                             AutoSizeAxes = Axes.Both,
                             Direction = FillDirection.Horizontal,
+                            Margin = new MarginPadding { Left = width_padding },
                             Spacing = new Vector2(3f, 0f),
                             Children = new Drawable[]
                             {
@@ -133,7 +135,7 @@ namespace osu.Game.Overlays.Chat
         }
 
         private void updateColour()
-        {
+        {
             joinedCheckmark.FadeTo(joined ? 1f : 0f, transition_duration);
             topic.FadeTo(joined ? 0.8f : 1f, transition_duration);
             topic.FadeColour(joined ? Color4.White : topicColour ?? Color4.White, transition_duration);

osu.Game/Overlays/Chat/ChannelSection.cs

@@ -0,0 +1,57 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System.Collections.Generic;
+using System.Linq;
+using OpenTK;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Chat;
+
+namespace osu.Game.Overlays.Chat
+{
+    public class ChannelSection : Container
+    {
+        private readonly FillFlowContainer<ChannelListItem> items;
+        private readonly OsuSpriteText header;
+
+        public string Header
+        {
+            set
+            {
+                header.Text = value;
+            }
+        }
+
+        public IEnumerable<Channel> Channels
+        {
+            set
+            {
+                items.Children = value.Select(c => new ChannelListItem(c));
+            }
+        }
+
+        public ChannelSection()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Children = new Drawable[]
+            {
+                header = new OsuSpriteText
+                {
+                    TextSize = 15,
+                    Font = @"Exo2.0-Bold",
+                },
+                items = new FillFlowContainer<ChannelListItem>
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Margin = new MarginPadding { Top = 25 },
+                    Spacing = new Vector2(0f, 5f),
+                },
+            };
+        }
+    }
+}

osu.Game/Overlays/Chat/ChannelSelectionOverlay.cs

@@ -11,6 +11,7 @@ using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.Chat;
 
 namespace osu.Game.Overlays.Chat
 {
@@ -78,17 +79,18 @@ namespace osu.Game.Overlays.Chat
                         },
                     },
                 },
-                new ChannelListItem
+                new ChannelSection
                 {
                     Anchor = Anchor.Centre,
-                    Origin = Anchor.BottomCentre,
+                    Origin = Anchor.Centre,
-                    Joined = false,
+                    Padding = new MarginPadding { Left = WIDTH_PADDING, Right = WIDTH_PADDING },
-                },
+                    Header = @"GENERAL CHANNELS",
-                new ChannelListItem
+                    Channels = new[]
-                {
+                    {
-                    Anchor = Anchor.Centre,
+                        new Channel { Name = @"announcements", Topic = @"Automated announcement of stuff going on in osu!" },
-                    Origin = Anchor.TopCentre,
+                        new Channel { Name = @"osu!", Topic = @"I dunno, the default channel I guess?" },
-                    Joined = true,
+                        new Channel { Name = @"lobby", Topic = @"Look for trouble here" },
+                    },
                 },
             };
         }

osu.Game/osu.Game.csproj

@@ -430,6 +430,7 @@
     <Compile Include="Rulesets\Replays\AutoGenerator.cs" />
     <Compile Include="Overlays\Chat\ChannelSelectionOverlay.cs" />
     <Compile Include="Overlays\Chat\ChannelListItem.cs" />
+    <Compile Include="Overlays\Chat\ChannelSection.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="$(SolutionDir)\osu-framework\osu.Framework\osu.Framework.csproj">