From 31890a1e013cad367f6f4f77d3748ba0b6d4a57c Mon Sep 17 00:00:00 2001 From: DrabWeb Date: Sat, 20 May 2017 18:06:25 -0300 Subject: [PATCH] =?UTF-8?q?Initial=20layout,=C2=A0channels=20items?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- osu.Game/Overlays/Chat/ChannelListItem.cs | 143 ++++++++++++++++++ .../Overlays/Chat/ChannelSelectionOverlay.cs | 120 +++++++++++++++ osu.Game/osu.Game.csproj | 2 + 3 files changed, 265 insertions(+) create mode 100644 osu.Game/Overlays/Chat/ChannelListItem.cs create mode 100644 osu.Game/Overlays/Chat/ChannelSelectionOverlay.cs diff --git a/osu.Game/Overlays/Chat/ChannelListItem.cs b/osu.Game/Overlays/Chat/ChannelListItem.cs new file mode 100644 index 0000000000..f8a058c444 --- /dev/null +++ b/osu.Game/Overlays/Chat/ChannelListItem.cs @@ -0,0 +1,143 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +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; + +namespace osu.Game.Overlays.Chat +{ + public class ChannelListItem : ClickableContainer + { + private const float channel_width = 150; + private const float topic_width = 380; + private const float text_size = 15; + private const float transition_duration = 100; + + private readonly OsuSpriteText topic; + private readonly TextAwesome joinedCheckmark; + + private Color4? joinedColour; + private Color4? topicColour; + + private bool joined; + public bool Joined + { + get { return joined; } + set + { + if (value == joined) return; + joined = value; + + updateColour(); + } + } + + public ChannelListItem() + { + RelativeSizeAxes = Axes.X; + AutoSizeAxes = Axes.Y; + + Children = new Drawable[] + { + new FillFlowContainer + { + 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 + { + Children = new[] + { + joinedCheckmark = new TextAwesome + { + Anchor = Anchor.TopRight, + Origin = Anchor.TopRight, + Icon = FontAwesome.fa_check_circle, + TextSize = text_size, + Margin = new MarginPadding { Right = 10f }, + Alpha = 0f, + }, + }, + }, + new Container + { + Width = channel_width, + AutoSizeAxes = Axes.Y, + Children = new[] + { + new OsuSpriteText + { + Text = @"#osu!", + TextSize = text_size, + Font = @"Exo2.0-Bold", + }, + }, + }, + new Container + { + Width = topic_width, + AutoSizeAxes = Axes.Y, + Children = new[] + { + topic = new OsuSpriteText + { + Text = @"I dunno, the default channel I guess?", + TextSize = text_size, + Font = @"Exo2.0-SemiBold", + Alpha = 0.8f, + }, + }, + }, + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(3f, 0f), + Children = new Drawable[] + { + new TextAwesome + { + Icon = FontAwesome.fa_user, + TextSize = text_size - 2, + Margin = new MarginPadding { Top = 1 }, + }, + new OsuSpriteText + { + Text = @"543145", + TextSize = text_size, + Font = @"Exo2.0-SemiBold", + }, + }, + }, + }, + }, + }; + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) + { + topicColour = colours.Gray9; + joinedColour = colours.Blue; + + updateColour(); + } + + 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); + FadeColour(joined ? joinedColour ?? Color4.White : Color4.White, transition_duration); + } + } +} diff --git a/osu.Game/Overlays/Chat/ChannelSelectionOverlay.cs b/osu.Game/Overlays/Chat/ChannelSelectionOverlay.cs new file mode 100644 index 0000000000..217200ec44 --- /dev/null +++ b/osu.Game/Overlays/Chat/ChannelSelectionOverlay.cs @@ -0,0 +1,120 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +using OpenTK; +using OpenTK.Graphics; +using osu.Framework.Allocation; +using osu.Framework.Extensions.Color4Extensions; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Sprites; +using osu.Game.Graphics; +using osu.Game.Graphics.Sprites; +using osu.Game.Graphics.UserInterface; + +namespace osu.Game.Overlays.Chat +{ + public class ChannelSelectionOverlay : OverlayContainer + { + public static readonly float WIDTH_PADDING = 170; + + private readonly Box bg; + private readonly Box headerBg; + private readonly SearchTextBox search; + + public ChannelSelectionOverlay() + { + RelativeSizeAxes = Axes.X; + Children = new Drawable[] + { + new Container + { + RelativeSizeAxes = Axes.Both, + Masking = true, + EdgeEffect = new EdgeEffect + { + Type = EdgeEffectType.Shadow, + Colour = Color4.Black.Opacity(0.25f), + Radius = 5, + }, + Children = new[] + { + bg = new Box + { + RelativeSizeAxes = Axes.Both, + }, + }, + }, + new Container + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Children = new Drawable[] + { + headerBg = new Box + { + RelativeSizeAxes = Axes.Both, + }, + new FillFlowContainer + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Direction = FillDirection.Vertical, + Spacing = new Vector2(0f, 10f), + Padding = new MarginPadding { Top = 10f, Bottom = 10f, Left = WIDTH_PADDING, Right = WIDTH_PADDING }, + Children = new Drawable[] + { + new OsuSpriteText + { + Text = @"Chat Channels", + TextSize = 20, + }, + search = new HeaderSearchTextBox + { + RelativeSizeAxes = Axes.X, + PlaceholderText = @"Search", + }, + }, + }, + }, + }, + new ChannelListItem + { + Anchor = Anchor.Centre, + Origin = Anchor.BottomCentre, + Joined = false, + }, + new ChannelListItem + { + Anchor = Anchor.Centre, + Origin = Anchor.TopCentre, + Joined = true, + }, + }; + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) + { + bg.Colour = colours.Gray3; + headerBg.Colour = colours.Gray2.Opacity(0.75f); + } + + protected override void PopIn() + { + search.HoldFocus = true; + Schedule(() => search.TriggerFocus()); + } + + protected override void PopOut() + { + search.HoldFocus = false; + } + + private class HeaderSearchTextBox : SearchTextBox + { + protected override Color4 BackgroundFocused => Color4.Black.Opacity(0.2f); + protected override Color4 BackgroundUnfocused => Color4.Black.Opacity(0.2f); + } + } +} diff --git a/osu.Game/osu.Game.csproj b/osu.Game/osu.Game.csproj index ee906caa9b..89e32a478f 100644 --- a/osu.Game/osu.Game.csproj +++ b/osu.Game/osu.Game.csproj @@ -428,6 +428,8 @@ + +