1
0
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:
Dean Herbert 2017-05-12 15:32:52 +09:00
parent 6ea65009c4
commit dbf60d24bf
4 changed files with 213 additions and 25 deletions

View File

@ -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");
}
}

View 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,
},
}
}
};
}
}
}
}

View File

@ -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;

View File

@ -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" />