Channel selection overlay

osu.Game/Online/Chat/Channel.cs

@@ -5,6 +5,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using Newtonsoft.Json;
+using osu.Framework.Configuration;
 using osu.Framework.Lists;
 
 namespace osu.Game.Online.Chat
@@ -25,7 +26,7 @@ public class Channel
 
         public readonly SortedList<Message> Messages = new SortedList<Message>(Comparer<Message>.Default);
 
-        //internal bool Joined;
+        public Bindable<bool> Joined = new Bindable<bool>();
 
         public bool ReadOnly => Name != "#lazer";
 

osu.Game/Overlays/Chat/ChannelListItem.cs

@@ -0,0 +1,174 @@
+// 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;
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+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, IFilterable
+    {
+        private const float width_padding = 5;
+        private const float channel_width = 150;
+        private const float text_size = 15;
+        private const float transition_duration = 100;
+
+        private readonly Channel channel;
+
+        private readonly OsuSpriteText topic;
+        private readonly TextAwesome joinedCheckmark;
+
+        private Color4? joinedColour;
+        private Color4? topicColour;
+
+        public string[] FilterTerms => new[] { channel.Name };
+        public bool MatchingCurrentFilter
+        {
+            set
+            {
+                FadeTo(value ? 1f : 0f, 100);
+            }
+        }
+
+        public Action<Channel> OnRequestJoin;
+        public Action<Channel> OnRequestLeave;
+
+        public ChannelListItem(Channel channel)
+        {
+            this.channel = channel;
+
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Action = () => { (channel.Joined ? OnRequestLeave : OnRequestJoin)?.Invoke(channel); };
+
+            Children = new Drawable[]
+            {
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Horizontal,
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            Children = new[]
+                            {
+                                joinedCheckmark = new TextAwesome
+                                {
+                                    Anchor = Anchor.TopRight,
+                                    Origin = Anchor.TopRight,
+                                    Icon = FontAwesome.fa_check_circle,
+                                    TextSize = text_size,
+                                    Shadow = false,
+                                    Margin = new MarginPadding { Right = 10f },
+                                    Alpha = 0f,
+                                },
+                            },
+                        },
+                        new Container
+                        {
+                            Width = channel_width,
+                            AutoSizeAxes = Axes.Y,
+                            Children = new[]
+                            {
+                                new OsuSpriteText
+                                {
+                                    Text = channel.ToString(),
+                                    TextSize = text_size,
+                                    Font = @"Exo2.0-Bold",
+                                    Shadow = false,
+                                },
+                            },
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Width = 0.7f,
+                            AutoSizeAxes = Axes.Y,
+                            Margin = new MarginPadding { Left = width_padding },
+                            Children = new[]
+                            {
+                                topic = new OsuSpriteText
+                                {
+                                    Text = channel.Topic,
+                                    TextSize = text_size,
+                                    Font = @"Exo2.0-SemiBold",
+                                    Shadow = false,
+                                    Alpha = 0.8f,
+                                },
+                            },
+                        },
+                        new FillFlowContainer
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Margin = new MarginPadding { Left = width_padding },
+                            Spacing = new Vector2(3f, 0f),
+                            Children = new Drawable[]
+                            {
+                                new TextAwesome
+                                {
+                                    Icon = FontAwesome.fa_user,
+                                    TextSize = text_size - 2,
+                                    Shadow = false,
+                                    Margin = new MarginPadding { Top = 1 },
+                                },
+                                new OsuSpriteText
+                                {
+                                    Text = @"0",
+                                    TextSize = text_size,
+                                    Font = @"Exo2.0-SemiBold",
+                                    Shadow = false,
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+
+            channel.Joined.ValueChanged += updateColour;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            topicColour = colours.Gray9;
+            joinedColour = colours.Blue;
+
+            updateColour(channel.Joined);
+        }
+
+        protected override void Dispose(bool isDisposing)
+        {
+            if(channel != null) channel.Joined.ValueChanged -= updateColour;
+            base.Dispose(isDisposing);
+        }
+
+        private void updateColour(bool joined)
+        {
+            if (joined)
+            {
+                joinedCheckmark.FadeTo(1f, transition_duration);
+                topic.FadeTo(0.8f, transition_duration);
+                topic.FadeColour(Color4.White, transition_duration);
+                FadeColour(joinedColour ?? Color4.White, transition_duration);
+            }
+            else
+            {
+                joinedCheckmark.FadeTo(0f, transition_duration);
+                topic.FadeTo(1f, transition_duration);
+                topic.FadeColour(topicColour ?? Color4.White, transition_duration);
+                FadeColour(Color4.White, transition_duration);
+            }
+        }
+    }
+}

osu.Game/Overlays/Chat/ChannelSection.cs

@@ -0,0 +1,63 @@
+// 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, IHasFilterableChildren
+    {
+        private readonly OsuSpriteText header;
+
+        public readonly FillFlowContainer<ChannelListItem> ChannelFlow;
+
+        public IEnumerable<IFilterable> FilterableChildren => ChannelFlow.Children;
+        public string[] FilterTerms => new[] { Header };
+        public bool MatchingCurrentFilter
+        {
+            set
+            {
+                FadeTo(value ? 1f : 0f, 100);
+            }
+        }
+
+        public string Header
+        {
+            get { return header.Text; }
+            set { header.Text = value.ToUpper(); }
+        }
+
+        public IEnumerable<Channel> Channels
+        {
+            set { ChannelFlow.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",
+                },
+                ChannelFlow = new FillFlowContainer<ChannelListItem>
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Margin = new MarginPadding { Top = 25 },
+                    Spacing = new Vector2(0f, 5f),
+                },
+            };
+        }
+    }
+}