diff --git a/osu.Game/Graphics/OsuColour.cs b/osu.Game/Graphics/OsuColour.cs index b666442f19..3d83668d07 100644 --- a/osu.Game/Graphics/OsuColour.cs +++ b/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"); } } diff --git a/osu.Game/Overlays/Chat/ChatTabControl.cs b/osu.Game/Overlays/Chat/ChatTabControl.cs new file mode 100644 index 0000000000..c7e1382255 --- /dev/null +++ b/osu.Game/Overlays/Chat/ChatTabControl.cs @@ -0,0 +1,182 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// 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 + { + protected override TabItem 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 + { + 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, + }, + } + } + }; + } + } + } +} diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs index 7f74750873..812ab236e7 100644 --- a/osu.Game/Overlays/ChatOverlay.cs +++ b/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 channelTabs; + private readonly ChatTabControl channelTabs; + + private readonly Box chatBackground; private Bindable 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 - { - 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(OsuConfig.ChatDisplayHeight); chatHeight.ValueChanged += h => Height = (float)h; chatHeight.TriggerChange(); + + chatBackground.Colour = colours.ChatBlue; } private long? lastMessageId; diff --git a/osu.Game/osu.Game.csproj b/osu.Game/osu.Game.csproj index 313d003605..a738e7180b 100644 --- a/osu.Game/osu.Game.csproj +++ b/osu.Game/osu.Game.csproj @@ -75,6 +75,7 @@ +