Second design update pass.

osu.Game/Graphics/OsuColour.cs

@@ -85,5 +85,7 @@ namespace osu.Game.Graphics
         public readonly Color4 Red = FromHex(@"ed1121");
         public readonly Color4 RedDark = FromHex(@"ba0011");
         public readonly Color4 RedDarker = FromHex(@"870000");
+
+        public readonly Color4 ChatBlue = FromHex(@"17292e");
     }
 }

osu.Game/Overlays/Chat/ChatTabControl.cs

@@ -0,0 +1,182 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.Chat;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays.Chat
+{
+    public class ChatTabControl : OsuTabControl<Channel>
+    {
+        protected override TabItem<Channel> CreateTabItem(Channel value) => new ChannelTabItem(value);
+
+        private const float shear_width = 10;
+
+        public ChatTabControl()
+        {
+            TabContainer.Margin = new MarginPadding { Left = 50 };
+            TabContainer.Spacing = new Vector2(-shear_width, 0);
+            TabContainer.Masking = false;
+
+            AddInternal(new TextAwesome
+            {
+                Icon = FontAwesome.fa_comments,
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+                TextSize = 20,
+                Padding = new MarginPadding(10),
+            });
+        }
+
+        private class ChannelTabItem : TabItem<Channel>
+        {
+            private Color4 backgroundInactive;
+            private Color4 backgroundHover;
+            private Color4 backgroundActive;
+
+            private readonly SpriteText text;
+            private readonly Box box;
+            private readonly Box highlightBox;
+
+            public override bool Active
+            {
+                get { return base.Active; }
+                set
+                {
+                    if (Active == value) return;
+
+                    base.Active = value;
+                    updateState();
+                }
+            }
+
+            private void updateState()
+            {
+                if (Active)
+                    fadeActive();
+                else
+                    fadeInactive();
+            }
+
+            private const float transition_length = 400;
+
+            private void fadeActive()
+            {
+                ResizeTo(new Vector2(Width, 1.1f), transition_length, EasingTypes.OutQuint);
+
+                box.FadeColour(backgroundActive, transition_length, EasingTypes.OutQuint);
+                highlightBox.FadeIn(transition_length, EasingTypes.OutQuint);
+                text.Font = @"Exo2.0-Bold";
+            }
+
+            private void fadeInactive()
+            {
+                ResizeTo(new Vector2(Width, 1), transition_length, EasingTypes.OutQuint);
+
+                box.FadeColour(backgroundInactive, transition_length, EasingTypes.OutQuint);
+                highlightBox.FadeOut(transition_length, EasingTypes.OutQuint);
+                text.Font = @"Exo2.0-Regular";
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                if (!Active)
+                    box.FadeColour(backgroundHover, transition_length, EasingTypes.OutQuint);
+                return true;
+            }
+
+            protected override void OnHoverLost(InputState state)
+            {
+                updateState();
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                backgroundActive = colours.ChatBlue;
+                backgroundInactive = colours.Gray4;
+                backgroundHover = colours.Gray7;
+
+                highlightBox.Colour = colours.Yellow;
+
+                updateState();
+            }
+
+            public ChannelTabItem(Channel value) : base(value)
+            {
+                Width = 150;
+
+                RelativeSizeAxes = Axes.Y;
+
+                Anchor = Anchor.BottomLeft;
+                Origin = Anchor.BottomLeft;
+
+                Shear = new Vector2(shear_width / ChatOverlay.TAB_AREA_HEIGHT, 0);
+
+                Masking = true;
+                EdgeEffect = new EdgeEffect
+                {
+                    Type = EdgeEffectType.Shadow,
+                    Radius = 10,
+                    Colour = Color4.Black.Opacity(0.2f),
+                };
+
+                Children = new Drawable[]
+                {
+                    box = new Box
+                    {
+                        EdgeSmoothness = new Vector2(1, 0),
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    highlightBox = new Box
+                    {
+                        Width = 5,
+                        Alpha = 0,
+                        Anchor = Anchor.BottomRight,
+                        Origin = Anchor.BottomRight,
+                        EdgeSmoothness = new Vector2(1, 0),
+                        RelativeSizeAxes = Axes.Y,
+                    },
+                    new Container
+                    {
+                        Shear = new Vector2(-shear_width / ChatOverlay.TAB_AREA_HEIGHT, 0),
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new Drawable[]
+                        {
+                            new TextAwesome
+                            {
+                                Icon = FontAwesome.fa_hashtag,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Colour = Color4.Black,
+                                X = -10,
+                                Alpha = 0.2f,
+                                TextSize = ChatOverlay.TAB_AREA_HEIGHT,
+                            },
+                            text = new OsuSpriteText
+                            {
+                                Margin = new MarginPadding(5),
+                                Origin = Anchor.CentreLeft,
+                                Anchor = Anchor.CentreLeft,
+                                Text = value.ToString(),
+                                TextSize = 18,
+                            },
+                        }
+                    }
+                };
+            }
+        }
+    }
+}

osu.Game/Overlays/ChatOverlay.cs

@@ -43,11 +43,13 @@ namespace osu.Game.Overlays
 
         public const float DEFAULT_HEIGHT = 0.4f;
 
-        private const float tab_area_height = 50;
+        public const float TAB_AREA_HEIGHT = 50;
 
         private GetMessagesRequest fetchReq;
 
-        private readonly OsuTabControl<Channel> channelTabs;
+        private readonly ChatTabControl channelTabs;
+
+        private readonly Box chatBackground;
 
         private Bindable<double> chatHeight;
 
@@ -63,36 +65,16 @@ namespace osu.Game.Overlays
 
             Children = new Drawable[]
             {
-                new Container
-                {
-                    Name = @"tabs area",
-                    RelativeSizeAxes = Axes.X,
-                    Height = tab_area_height,
-                    Children = new Drawable[]
-                    {
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Colour = Color4.Black,
-                            Alpha = 0.8f,
-                        },
-                        channelTabs = new OsuTabControl<Channel>
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                        },
-                    }
-                },
                 new Container
                 {
                     Name = @"chat area",
                     RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Top = tab_area_height },
+                    Padding = new MarginPadding { Top = TAB_AREA_HEIGHT },
                     Children = new Drawable[]
                     {
-                        new Box
+                        chatBackground = new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Colour = OsuColour.FromHex(@"17292e"),
                         },
                         currentChannelContainer = new Container
                         {
@@ -131,6 +113,25 @@ namespace osu.Game.Overlays
                         }
                     }
                 },
+                new Container
+                {
+                    Name = @"tabs area",
+                    RelativeSizeAxes = Axes.X,
+                    Height = TAB_AREA_HEIGHT,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = Color4.Black,
+                            Alpha = 0.8f,
+                        },
+                        channelTabs = new ChatTabControl
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    }
+                },
             };
 
             channelTabs.Current.ValueChanged += newChannel => CurrentChannel = newChannel;
@@ -189,7 +190,7 @@ namespace osu.Game.Overlays
         }
 
         [BackgroundDependencyLoader]
-        private void load(APIAccess api, OsuConfigManager config)
+        private void load(APIAccess api, OsuConfigManager config, OsuColour colours)
         {
             this.api = api;
             api.Register(this);
@@ -197,6 +198,8 @@ namespace osu.Game.Overlays
             chatHeight = config.GetBindable<double>(OsuConfig.ChatDisplayHeight);
             chatHeight.ValueChanged += h => Height = (float)h;
             chatHeight.TriggerChange();
+
+            chatBackground.Colour = colours.ChatBlue;
         }
 
         private long? lastMessageId;

osu.Game/osu.Game.csproj

@@ -75,6 +75,7 @@
     <Compile Include="Beatmaps\Drawables\BeatmapBackgroundSprite.cs" />
     <Compile Include="Beatmaps\DifficultyCalculator.cs" />
     <Compile Include="Online\API\Requests\PostMessageRequest.cs" />
+    <Compile Include="Overlays\Chat\ChatTabControl.cs" />
     <Compile Include="Overlays\Music\FilterControl.cs" />
     <Compile Include="Overlays\Music\PlaylistItem.cs" />
     <Compile Include="Overlays\Music\PlaylistList.cs" />