Merge pull request ppy#29201 from peppy/chat-less-username-truncation

Adjust chat sizing to better fit long usernames

osu.Game.Tests/Visual/Online/TestSceneDrawableChannel.cs

@@ -6,6 +6,7 @@
 using NUnit.Framework;
 using osu.Framework.Graphics;
 using osu.Framework.Testing;
+using osu.Framework.Utils;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Online.Chat;
 using osu.Game.Overlays.Chat;
@@ -88,19 +89,17 @@ public void TestDaySeparators()
  [Test]
  public void TestBackgroundAlternating()
  {
- var localUser = new APIUser
- {
- Id = 3,
- Username = "LocalUser"
- };
-
  int messageCount = 1;
 
  AddRepeatStep("add messages", () =>
  {
  channel.AddNewMessages(new Message(messageCount)
  {
- Sender = localUser,
+ Sender = new APIUser
+ {
+ Id = 3,
+ Username = "LocalUser " + RNG.Next(0, int.MaxValue - 100).ToString("N")
+ },
  Content = "Hi there all!",
  Timestamp = new DateTimeOffset(2022, 11, 21, 20, messageCount, 13, TimeSpan.Zero),
  Uuid = Guid.NewGuid().ToString(),

osu.Game/Online/Chat/StandAloneChatDisplay.cs

@@ -178,7 +178,7 @@ public StandAloneDrawableChannel(Channel channel)
 
  protected partial class StandAloneDaySeparator : DaySeparator
  {
- protected override float TextSize => 14;
+ protected override float TextSize => 13;
  protected override float LineHeight => 1;
  protected override float Spacing => 5;
  protected override float DateAlign => 125;
@@ -198,9 +198,9 @@ private void load(OsuColour colours)
 
  protected partial class StandAloneMessage : ChatLine
  {
- protected override float FontSize => 15;
+ protected override float FontSize => 13;
  protected override float Spacing => 5;
- protected override float UsernameWidth => 75;
+ protected override float UsernameWidth => 90;
 
  public StandAloneMessage(Message message)
  : base(message)

osu.Game/Overlays/Chat/ChatLine.cs

@@ -20,6 +20,7 @@
 using osu.Game.Graphics.Sprites;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Online.Chat;
+using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Chat
@@ -46,11 +47,11 @@ public Message Message
 
  public IReadOnlyCollection<Drawable> DrawableContentFlow => drawableContentFlow;
 
- protected virtual float FontSize => 14;
+ protected virtual float FontSize => 12;
 
  protected virtual float Spacing => 15;
 
- protected virtual float UsernameWidth => 130;
+ protected virtual float UsernameWidth => 150;
 
  [Resolved]
  private ChannelManager? chatManager { get; set; }
@@ -71,6 +72,24 @@ public Message Message
  private Drawable? background;
 
  private bool alternatingBackground;
+ private bool requiresTimestamp = true;
+
+ public bool RequiresTimestamp
+ {
+ get => requiresTimestamp;
+ set
+ {
+ if (requiresTimestamp == value)
+ return;
+
+ requiresTimestamp = value;
+
+ if (!IsLoaded)
+ return;
+
+ updateMessageContent();
+ }
+ }
 
  public bool AlternatingBackground
  {
@@ -147,7 +166,7 @@ private void load(OsuConfigManager configManager)
  RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
  ColumnDimensions = new[]
  {
- new Dimension(GridSizeMode.AutoSize),
+ new Dimension(GridSizeMode.Absolute, 45),
  new Dimension(GridSizeMode.Absolute, Spacing + UsernameWidth + Spacing),
  new Dimension(),
  },
@@ -158,9 +177,10 @@ private void load(OsuConfigManager configManager)
  drawableTimestamp = new OsuSpriteText
  {
  Shadow = false,
- Anchor = Anchor.CentreLeft,
- Origin = Anchor.CentreLeft,
- Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
+ Anchor = Anchor.TopLeft,
+ Origin = Anchor.TopLeft,
+ Spacing = new Vector2(-1, 0),
+ Font = OsuFont.GetFont(size: FontSize, weight: FontWeight.SemiBold, fixedWidth: true),
  AlwaysPresent = true,
  },
  drawableUsername = new DrawableChatUsername(message.Sender)
@@ -244,9 +264,17 @@ private void styleMessageContent(SpriteText text)
  private void updateMessageContent()
  {
  this.FadeTo(message is LocalEchoMessage ? 0.4f : 1.0f, 500, Easing.OutQuint);
- drawableTimestamp.FadeTo(message is LocalEchoMessage ? 0 : 1, 500, Easing.OutQuint);
 
- updateTimestamp();
+ if (requiresTimestamp && !(message is LocalEchoMessage))
+ {
+ drawableTimestamp.Show();
+ updateTimestamp();
+ }
+ else
+ {
+ drawableTimestamp.Hide();
+ }
+
  drawableUsername.Text = $@"{message.Sender.Username}";
 
  // remove non-existent channels from the link list
@@ -258,7 +286,7 @@ private void updateMessageContent()
 
  private void updateTimestamp()
  {
- drawableTimestamp.Text = message.Timestamp.LocalDateTime.ToLocalisableString(prefer24HourTime.Value ? @"HH:mm:ss" : @"hh:mm:ss tt");
+ drawableTimestamp.Text = message.Timestamp.LocalDateTime.ToLocalisableString(prefer24HourTime.Value ? @"HH:mm" : @"hh:mm tt");
  }
 
  private static readonly Color4[] default_username_colours =

osu.Game/Overlays/Chat/DaySeparator.cs

@@ -14,7 +14,7 @@ namespace osu.Game.Overlays.Chat
 {
  public partial class DaySeparator : Container
  {
- protected virtual float TextSize => 15;
+ protected virtual float TextSize => 13;
 
  protected virtual float LineHeight => 2;
 

osu.Game/Overlays/Chat/DrawableChannel.cs

@@ -61,7 +61,7 @@ private void load()
  Padding = new MarginPadding { Bottom = 5 },
  Child = ChatLineFlow = new FillFlowContainer
  {
- Padding = new MarginPadding { Horizontal = 10 },
+ Padding = new MarginPadding { Left = 3, Right = 10 },
  RelativeSizeAxes = Axes.X,
  AutoSizeAxes = Axes.Y,
  Direction = FillDirection.Vertical,
@@ -88,10 +88,18 @@ protected override void Update()
  {
  base.Update();
 
+ long? lastMinutes = null;
+
  for (int i = 0; i < ChatLineFlow.Count; i++)
  {
  if (ChatLineFlow[i] is ChatLine chatline)
+ {
+ long minutes = chatline.Message.Timestamp.ToUnixTimeSeconds() / 60;
+
  chatline.AlternatingBackground = i % 2 == 0;
+ chatline.RequiresTimestamp = minutes != lastMinutes;
+ lastMinutes = minutes;
+ }
  }
  }