Update new chat overlay day separator colours and spacing

Updates the `DaySeparator` component to have separately settable colours
for the text and the lines.

Updates existing overrides of the `DaySeparator` to use the new colour
setter.

Create new `ChatOverlayDrawableChannel` with adjusted spacing and new
`DaySeparator` colours.
This commit is contained in:
Jai Sharma 2022-05-06 22:56:35 +01:00
parent 404798395c
commit 9d62206176
5 changed files with 64 additions and 28 deletions

View File

@ -365,7 +365,7 @@ public void TextBoxRetainsFocus()
AddAssert("TextBox is focused", () => InputManager.FocusedDrawable == chatOverlayTextBox);
AddStep("Click listing", () => clickDrawable(chatOverlay.ChildrenOfType<ChannelListing>().Single()));
AddAssert("TextBox is focused", () => InputManager.FocusedDrawable == chatOverlayTextBox);
AddStep("Click drawable channel", () => clickDrawable(chatOverlay.ChildrenOfType<DrawableChannel>().Single()));
AddStep("Click drawable channel", () => clickDrawable(chatOverlay.ChildrenOfType<ChatOverlayDrawableChannel>().Single()));
AddAssert("TextBox is focused", () => InputManager.FocusedDrawable == chatOverlayTextBox);
AddStep("Click channel list", () => clickDrawable(chatOverlay.ChildrenOfType<ChannelList>().Single()));
AddAssert("TextBox is focused", () => InputManager.FocusedDrawable == chatOverlayTextBox);
@ -381,8 +381,8 @@ public void TextBoxRetainsFocus()
private Visibility loadingVisibility =>
chatOverlay.ChildrenOfType<LoadingLayer>().Single().State.Value;
private DrawableChannel currentDrawableChannel =>
chatOverlay.ChildrenOfType<Container<DrawableChannel>>().Single().Child;
private ChatOverlayDrawableChannel currentDrawableChannel =>
chatOverlay.ChildrenOfType<Container<ChatOverlayDrawableChannel>>().Single().Child;
private ChannelListItem getChannelListItem(Channel channel) =>
chatOverlay.ChildrenOfType<ChannelListItem>().Single(item => item.Channel == channel);

View File

@ -155,9 +155,7 @@ public class StandAloneDrawableChannel : DrawableChannel
{
public Func<Message, ChatLine> CreateChatLineAction;
protected override ChatLine CreateChatLine(Message m) => CreateChatLineAction(m);
protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new CustomDaySeparator(time);
private Colour4 daySepColour;
public StandAloneDrawableChannel(Channel channel)
: base(channel)
@ -165,28 +163,23 @@ public StandAloneDrawableChannel(Channel channel)
}
[BackgroundDependencyLoader]
private void load()
private void load(OsuColour colours)
{
ChatLineFlow.Padding = new MarginPadding { Horizontal = 0 };
daySepColour = colours.Yellow;
}
private class CustomDaySeparator : DaySeparator
protected override ChatLine CreateChatLine(Message m) => CreateChatLineAction(m);
protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
{
public CustomDaySeparator(DateTimeOffset time)
: base(time)
{
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Colour = colours.Yellow;
TextSize = 14;
LineHeight = 1;
Padding = new MarginPadding { Horizontal = 10 };
Margin = new MarginPadding { Vertical = 5 };
}
}
TextSize = 14,
TextColour = daySepColour,
LineHeight = 1,
LineColour = daySepColour,
Padding = new MarginPadding { Horizontal = 10 },
Margin = new MarginPadding { Vertical = 5 },
};
}
protected class StandAloneMessage : ChatLine

View File

@ -38,7 +38,7 @@ public class ChatTextBar : Container
private Container searchIconContainer = null!;
private ChatTextBox chatTextBox = null!;
private const float chatting_text_width = 240;
private const float chatting_text_width = 220;
private const float search_icon_width = 40;
[BackgroundDependencyLoader]

View File

@ -9,6 +9,7 @@
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
@ -123,8 +124,9 @@ protected override void Dispose(bool isDisposing)
protected virtual DaySeparator CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
{
TextColour = colours.ChatBlue.Lighten(0.7f),
LineColour = colours.ChatBlue.Lighten(0.7f),
Margin = new MarginPadding { Vertical = 10 },
Colour = colours.ChatBlue.Lighten(0.7f),
};
private void newMessagesArrived(IEnumerable<Message> newMessages) => Schedule(() =>
@ -212,6 +214,12 @@ public float TextSize
set => text.Font = text.Font.With(size: value);
}
public ColourInfo TextColour
{
get => text.Colour;
set => text.Colour = value;
}
private float lineHeight = 2;
public float LineHeight
@ -220,6 +228,14 @@ public float LineHeight
set => lineHeight = leftBox.Height = rightBox.Height = value;
}
private ColourInfo lineColour;
public ColourInfo LineColour
{
get => lineColour;
set => lineColour = leftBox.Colour = rightBox.Colour = value;
}
private readonly SpriteText text;
private readonly Box leftBox;
private readonly Box rightBox;

View File

@ -3,6 +3,7 @@
#nullable enable
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.Specialized;
@ -37,7 +38,7 @@ public class ChatOverlayV2 : OsuFocusedOverlayContainer, INamedOverlayComponent
private LoadingLayer loading = null!;
private ChannelListing channelListing = null!;
private ChatTextBar textBar = null!;
private Container<DrawableChannel> currentChannelContainer = null!;
private Container<ChatOverlayDrawableChannel> currentChannelContainer = null!;
private readonly BindableFloat chatHeight = new BindableFloat();
@ -120,7 +121,7 @@ private void load()
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4,
},
currentChannelContainer = new Container<DrawableChannel>
currentChannelContainer = new Container<ChatOverlayDrawableChannel>
{
RelativeSizeAxes = Axes.Both,
},
@ -268,7 +269,7 @@ private void currentChannelChanged(ValueChangedEvent<Channel> channel)
return;
}
LoadComponentAsync(new DrawableChannel(newChannel), loaded =>
LoadComponentAsync(new ChatOverlayDrawableChannel(newChannel), loaded =>
{
currentChannelContainer.Clear();
currentChannelContainer.Add(loaded);
@ -311,4 +312,30 @@ private void handleChatMessage(string message)
channelManager.PostMessage(message);
}
}
public class ChatOverlayDrawableChannel : DrawableChannel
{
private Colour4 daySepTextColour;
private Colour4 daySepLineColour;
public ChatOverlayDrawableChannel(Channel channel)
: base(channel)
{ }
[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
{
ChatLineFlow.Padding = new MarginPadding(0);
daySepTextColour = colourProvider.Content1;
daySepLineColour = colourProvider.Background5;
}
protected override DaySeparator CreateDaySeparator(DateTimeOffset time) => new DaySeparator(time)
{
TextColour = daySepTextColour,
LineColour = daySepLineColour,
Margin = new MarginPadding { Vertical = 10 },
Padding = new MarginPadding { Horizontal = 15 },
};
}
}