1
0
mirror of https://github.com/ppy/osu.git synced 2025-01-28 16:12:57 +08:00

Initial layout, channels items

This commit is contained in:
DrabWeb 2017-05-20 18:06:25 -03:00
parent 82f2927f1a
commit 31890a1e01
3 changed files with 265 additions and 0 deletions

View File

@ -0,0 +1,143 @@
// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
// 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);
}
}
}

View File

@ -0,0 +1,120 @@
// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
// 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);
}
}
}

View File

@ -428,6 +428,8 @@
<Compile Include="Overlays\Music\PlaylistOverlay.cs" />
<Compile Include="Rulesets\Replays\IAutoGenerator.cs" />
<Compile Include="Rulesets\Replays\AutoGenerator.cs" />
<Compile Include="Overlays\Chat\ChannelSelectionOverlay.cs" />
<Compile Include="Overlays\Chat\ChannelListItem.cs" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="$(SolutionDir)\osu-framework\osu.Framework\osu.Framework.csproj">