From c4a93cbc8540870d68405194318e0ad1c5eb01a7 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 14:21:57 +0900 Subject: [PATCH 1/6] Move drawable chat related classes to better namespace --- .../Chat/Drawables => Overlays/Chat}/ChatLine.cs | 14 +++++++++----- .../Drawables => Overlays/Chat}/DrawableChannel.cs | 3 ++- osu.Game/Overlays/ChatOverlay.cs | 3 ++- osu.Game/osu.Game.csproj | 4 ++-- 4 files changed, 15 insertions(+), 9 deletions(-) rename osu.Game/{Online/Chat/Drawables => Overlays/Chat}/ChatLine.cs (87%) rename osu.Game/{Online/Chat/Drawables => Overlays/Chat}/DrawableChannel.cs (94%) diff --git a/osu.Game/Online/Chat/Drawables/ChatLine.cs b/osu.Game/Overlays/Chat/ChatLine.cs similarity index 87% rename from osu.Game/Online/Chat/Drawables/ChatLine.cs rename to osu.Game/Overlays/Chat/ChatLine.cs index 6bfa25755f..d4063efbb5 100644 --- a/osu.Game/Online/Chat/Drawables/ChatLine.cs +++ b/osu.Game/Overlays/Chat/ChatLine.cs @@ -6,10 +6,11 @@ using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Primitives; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; +using osu.Game.Online.Chat; using OpenTK; using OpenTK.Graphics; -namespace osu.Game.Online.Chat.Drawables +namespace osu.Game.Overlays.Chat { public class ChatLine : Container { @@ -62,7 +63,10 @@ namespace osu.Game.Online.Chat.Drawables return username_colours[message.UserId % username_colours.Length]; } - private const float padding = 200; + public const float LEFT_PADDING = message_padding + padding * 2; + + private const float padding = 15; + private const float message_padding = 200; private const float text_size = 20; public ChatLine(Message message) @@ -72,13 +76,13 @@ namespace osu.Game.Online.Chat.Drawables RelativeSizeAxes = Axes.X; AutoSizeAxes = Axes.Y; - Padding = new MarginPadding { Left = 15, Right = 15 }; + Padding = new MarginPadding { Left = padding, Right = padding }; Children = new Drawable[] { new Container { - Size = new Vector2(padding, text_size), + Size = new Vector2(message_padding, text_size), Children = new Drawable[] { new OsuSpriteText @@ -106,7 +110,7 @@ namespace osu.Game.Online.Chat.Drawables { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, - Padding = new MarginPadding { Left = padding + 15 }, + Padding = new MarginPadding { Left = message_padding + padding }, Children = new Drawable[] { new OsuSpriteText diff --git a/osu.Game/Online/Chat/Drawables/DrawableChannel.cs b/osu.Game/Overlays/Chat/DrawableChannel.cs similarity index 94% rename from osu.Game/Online/Chat/Drawables/DrawableChannel.cs rename to osu.Game/Overlays/Chat/DrawableChannel.cs index d179f851b2..39dc1914ab 100644 --- a/osu.Game/Online/Chat/Drawables/DrawableChannel.cs +++ b/osu.Game/Overlays/Chat/DrawableChannel.cs @@ -7,8 +7,9 @@ using System.Linq; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Primitives; +using osu.Game.Online.Chat; -namespace osu.Game.Online.Chat.Drawables +namespace osu.Game.Overlays.Chat { public class DrawableChannel : Container { diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs index 3630ad0518..a9dc915c6b 100644 --- a/osu.Game/Overlays/ChatOverlay.cs +++ b/osu.Game/Overlays/ChatOverlay.cs @@ -16,13 +16,14 @@ using osu.Game.Graphics.Sprites; using osu.Game.Online.API; using osu.Game.Online.API.Requests; using osu.Game.Online.Chat; -using osu.Game.Online.Chat.Drawables; using osu.Game.Graphics.UserInterface; using osu.Framework.Graphics.Primitives; using osu.Framework.Graphics.UserInterface; using OpenTK.Graphics; using osu.Framework.Input; using osu.Game.Configuration; +using osu.Game.Graphics; +using osu.Game.Overlays.Chat; namespace osu.Game.Overlays { diff --git a/osu.Game/osu.Game.csproj b/osu.Game/osu.Game.csproj index fd15115fe2..313d003605 100644 --- a/osu.Game/osu.Game.csproj +++ b/osu.Game/osu.Game.csproj @@ -304,8 +304,8 @@ - - + + From 6ea65009c402f5517d7b8db5bc2def862631e727 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 14:22:11 +0900 Subject: [PATCH 2/6] Initial design update pass --- osu.Game/Overlays/ChatOverlay.cs | 89 ++++++++++++++++++++++---------- 1 file changed, 62 insertions(+), 27 deletions(-) diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs index a9dc915c6b..7f74750873 100644 --- a/osu.Game/Overlays/ChatOverlay.cs +++ b/osu.Game/Overlays/ChatOverlay.cs @@ -29,7 +29,7 @@ namespace osu.Game.Overlays { public class ChatOverlay : FocusedOverlayContainer, IOnlineComponent { - private const float textbox_height = 40; + private const float textbox_height = 60; private ScheduledDelegate messageRequest; @@ -43,6 +43,8 @@ namespace osu.Game.Overlays public const float DEFAULT_HEIGHT = 0.4f; + private const float tab_area_height = 50; + private GetMessagesRequest fetchReq; private readonly OsuTabControl channelTabs; @@ -57,45 +59,78 @@ namespace osu.Game.Overlays Anchor = Anchor.BottomLeft; Origin = Anchor.BottomLeft; + const float padding = 5; + Children = new Drawable[] { - channelTabs = new OsuTabControl + new Container { + Name = @"tabs area", RelativeSizeAxes = Axes.X, - Height = 20, - }, - new Box - { - Depth = float.MaxValue, - RelativeSizeAxes = Axes.Both, - Colour = Color4.Black, - Alpha = 0.9f, - }, - currentChannelContainer = new Container - { - RelativeSizeAxes = Axes.Both, - Padding = new MarginPadding { Top = 25, Bottom = textbox_height + 5 }, + 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 { - Anchor = Anchor.BottomLeft, - Origin = Anchor.BottomLeft, - RelativeSizeAxes = Axes.X, - Height = textbox_height, - Padding = new MarginPadding(5), + Name = @"chat area", + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding { Top = tab_area_height }, Children = new Drawable[] { - inputTextBox = new FocusedTextBox + new Box { RelativeSizeAxes = Axes.Both, - Height = 1, - PlaceholderText = "type your message", - Exit = () => State = Visibility.Hidden, - OnCommit = postMessage, - HoldFocus = true, + Colour = OsuColour.FromHex(@"17292e"), + }, + currentChannelContainer = new Container + { + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding + { + Top = padding, + Bottom = textbox_height + padding + }, + }, + new Container + { + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + RelativeSizeAxes = Axes.X, + Height = textbox_height, + Padding = new MarginPadding + { + Top = padding * 2, + Bottom = padding * 2, + Left = ChatLine.LEFT_PADDING + padding * 2, + Right = padding * 2, + }, + Children = new Drawable[] + { + inputTextBox = new FocusedTextBox + { + RelativeSizeAxes = Axes.Both, + Height = 1, + PlaceholderText = "type your message", + Exit = () => State = Visibility.Hidden, + OnCommit = postMessage, + HoldFocus = true, + } + } } } - } + }, }; channelTabs.Current.ValueChanged += newChannel => CurrentChannel = newChannel; From dbf60d24bf8aff079f418fed073806f9382716cc Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 15:32:52 +0900 Subject: [PATCH 3/6] Second design update pass. --- osu.Game/Graphics/OsuColour.cs | 2 + osu.Game/Overlays/Chat/ChatTabControl.cs | 182 +++++++++++++++++++++++ osu.Game/Overlays/ChatOverlay.cs | 53 +++---- osu.Game/osu.Game.csproj | 1 + 4 files changed, 213 insertions(+), 25 deletions(-) create mode 100644 osu.Game/Overlays/Chat/ChatTabControl.cs 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 @@ + From cf239f4d9cbffa7d57f3b6b014fbfe822ca350ef Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 19:03:21 +0900 Subject: [PATCH 4/6] Move chat into main content Also changes the way parallax is applied to OsuScreens game-wide. --- osu.Game/OsuGame.cs | 5 ++--- osu.Game/Screens/OsuScreen.cs | 4 ++++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/osu.Game/OsuGame.cs b/osu.Game/OsuGame.cs index ccead95ede..a84333df8c 100644 --- a/osu.Game/OsuGame.cs +++ b/osu.Game/OsuGame.cs @@ -160,7 +160,7 @@ namespace osu.Game }); //overlay elements - LoadComponentAsync(chat = new ChatOverlay { Depth = 0 }, overlayContent.Add); + LoadComponentAsync(chat = new ChatOverlay { Depth = -1 }, mainContent.Add); LoadComponentAsync(options = new OptionsOverlay { Depth = -1 }, overlayContent.Add); LoadComponentAsync(musicController = new MusicController { @@ -320,8 +320,7 @@ namespace osu.Game { base.UpdateAfterChildren(); - if (intro?.ChildScreen != null) - intro.ChildScreen.Padding = new MarginPadding { Top = Toolbar.Position.Y + Toolbar.DrawHeight }; + mainContent.Padding = new MarginPadding { Top = Toolbar.Position.Y + Toolbar.DrawHeight }; Cursor.State = currentScreen?.HasLocalCursorDisplayed == false ? Visibility.Visible : Visibility.Hidden; } diff --git a/osu.Game/Screens/OsuScreen.cs b/osu.Game/Screens/OsuScreen.cs index 0b3ecb4f5a..16bdd6132f 100644 --- a/osu.Game/Screens/OsuScreen.cs +++ b/osu.Game/Screens/OsuScreen.cs @@ -7,6 +7,7 @@ using osu.Framework.Screens; using osu.Game.Beatmaps; using osu.Game.Database; using osu.Game.Graphics.Containers; +using OpenTK; namespace osu.Game.Screens { @@ -96,6 +97,9 @@ namespace osu.Game.Screens } else if (bg != null) { + // this makes up for the fact our padding changes when the global toolbar is visible. + bg.Scale = new Vector2(1.06f); + AddInternal(new ParallaxContainer { Depth = float.MaxValue, From bc5bcfa66a5c737d62128e793a373bf04f8d741c Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 19:15:04 +0900 Subject: [PATCH 5/6] Make tab background opaque when chat is fullscreen --- osu.Game/Overlays/ChatOverlay.cs | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs index 812ab236e7..15f8586125 100644 --- a/osu.Game/Overlays/ChatOverlay.cs +++ b/osu.Game/Overlays/ChatOverlay.cs @@ -50,6 +50,7 @@ namespace osu.Game.Overlays private readonly ChatTabControl channelTabs; private readonly Box chatBackground; + private readonly Box tabBackground; private Bindable chatHeight; @@ -120,11 +121,10 @@ namespace osu.Game.Overlays Height = TAB_AREA_HEIGHT, Children = new Drawable[] { - new Box + tabBackground = new Box { RelativeSizeAxes = Axes.Both, Colour = Color4.Black, - Alpha = 0.8f, }, channelTabs = new ChatTabControl { @@ -196,7 +196,11 @@ namespace osu.Game.Overlays api.Register(this); chatHeight = config.GetBindable(OsuConfig.ChatDisplayHeight); - chatHeight.ValueChanged += h => Height = (float)h; + chatHeight.ValueChanged += h => + { + Height = (float)h; + tabBackground.FadeTo(Height == 1 ? 1 : 0.8f, 200); + }; chatHeight.TriggerChange(); chatBackground.Colour = colours.ChatBlue; From fec91d4de12f74398d6b3635d33c68d85e45aed8 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Fri, 12 May 2017 19:58:31 +0900 Subject: [PATCH 6/6] Update framework --- osu-framework | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu-framework b/osu-framework index fcf36739bc..e1ac6316aa 160000 --- a/osu-framework +++ b/osu-framework @@ -1 +1 @@ -Subproject commit fcf36739bc8a97b43a08ce0b29bd7c67ce1a3547 +Subproject commit e1ac6316aa3862efb8e79e585a7b4c901a4e1b3c