mirror of
https://github.com/ppy/osu.git
synced 2025-02-20 23:23:30 +08:00
Second design update pass.
This commit is contained in:
parent
6ea65009c4
commit
dbf60d24bf
@ -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");
|
||||
}
|
||||
}
|
||||
|
182
osu.Game/Overlays/Chat/ChatTabControl.cs
Normal file
182
osu.Game/Overlays/Chat/ChatTabControl.cs
Normal file
@ -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,
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
@ -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" />
|
||||
|
Loading…
Reference in New Issue
Block a user