Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alternate background colour of chat lines to better visually distinguish wrapped lines #29137

Merged
merged 12 commits into from
Jul 30, 2024
Merged

Alternate background colour of chat lines to better visually distinguish wrapped lines #29137

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c2711d0
Implement chatline background altering
normalid-awa Jul 27, 2024
7f4bfb2
Implement unit test
normalid-awa Jul 27, 2024
73a98b4
FIx code quality
normalid-awa Jul 27, 2024
4e44a6e
Clean up code
normalid-awa Jul 27, 2024
e58bdbb
Improve unit test
normalid-awa Jul 28, 2024
63757a7
Extract update background method
normalid-awa Jul 29, 2024
5ec46a7
Only create a new drawable object when the background is needed
normalid-awa Jul 29, 2024
997b3eb
Fix typos and visuals
peppy Jul 29, 2024
5bc02cc
Fix background alternating not updating on message removal
peppy Jul 29, 2024
1daeb7e
Rename typo in test naming
peppy Jul 29, 2024
bf10a91
Adjust colouring to work better across multiple usages
peppy Jul 30, 2024
fc78dc9
Adjust paddings to avoid scrollbar overlap
peppy Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions osu.Game.Tests/Visual/Online/TestSceneDrawableChannel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ public void TestDaySeparators()
Id = 3,
Username = "LocalUser"
};

string uuid = Guid.NewGuid().ToString();
AddStep("add local echo message", () => channel.AddLocalEcho(new LocalEchoMessage
{
Expand Down Expand Up @@ -83,5 +84,40 @@ public void TestDaySeparators()
AddUntilStep("three day separators present", () => drawableChannel.ChildrenOfType<DaySeparator>().Count() == 3);
AddAssert("last day separator is from correct day", () => drawableChannel.ChildrenOfType<DaySeparator>().Last().Date.Date == new DateTime(2022, 11, 22));
}

[Test]
public void TestBackgroundAltering()
{
var localUser = new APIUser
{
Id = 3,
Username = "LocalUser"
};

int messageCount = 1;

AddRepeatStep("add messages", () =>
{
channel.AddNewMessages(new Message(messageCount)
{
Sender = localUser,
Content = "Hi there all!",
Timestamp = new DateTimeOffset(2022, 11, 21, 20, messageCount, 13, TimeSpan.Zero),
Uuid = Guid.NewGuid().ToString(),
});
messageCount++;
}, 10);

AddUntilStep("10 message present", () => drawableChannel.ChildrenOfType<ChatLine>().Count() == 10);

int checkCount = 0;

AddRepeatStep("check background", () =>
{
// +1 because the day separator take one index
Assert.AreEqual((checkCount + 1) % 2 == 0, drawableChannel.ChildrenOfType<ChatLine>().ToList()[checkCount].AlternatingBackground);
checkCount++;
}, 10);
}
}
}
113 changes: 79 additions & 34 deletions osu.Game/Overlays/Chat/ChatLine.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
using osu.Game.Online.API.Requests.Responses;
using osu.Game.Online.Chat;
using osuTK.Graphics;
using Message = osu.Game.Online.Chat.Message;

namespace osu.Game.Overlays.Chat
{
Expand Down Expand Up @@ -69,6 +68,23 @@ public Message Message

private Container? highlight;

private Drawable? background;

private bool alternatingBackground;

public bool AlternatingBackground
{
get => alternatingBackground;
set
{
if (alternatingBackground == value)
return;

alternatingBackground = value;
updateBackground();
}
}

/// <summary>
/// The colour used to paint the author's username.
/// </summary>
Expand Down Expand Up @@ -102,48 +118,71 @@ private void load(OsuConfigManager configManager)
configManager.BindWith(OsuSetting.Prefer24HourTime, prefer24HourTime);
prefer24HourTime.BindValueChanged(_ => updateTimestamp());

InternalChild = new GridContainer
InternalChildren = new[]
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
ColumnDimensions = new[]
background = new Container
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.Absolute, Spacing + UsernameWidth + Spacing),
new Dimension(),
Masking = true,
Blending = BlendingParameters.Additive,
CornerRadius = 4,
Alpha = 0,
RelativeSizeAxes = Axes.Both,
Child = new Box
{
Colour = Color4.White,
RelativeSizeAxes = Axes.Both,
},
},
Content = new[]
new GridContainer
{
new Drawable[]
Margin = new MarginPadding
{
drawableTimestamp = new OsuSpriteText
{
Shadow = false,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
AlwaysPresent = true,
},
drawableUsername = new DrawableChatUsername(message.Sender)
Horizontal = 10,
Vertical = 1,
},
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.Absolute, Spacing + UsernameWidth + Spacing),
new Dimension(),
},
Content = new[]
{
new Drawable[]
{
Width = UsernameWidth,
FontSize = FontSize,
AutoSizeAxes = Axes.Y,
Origin = Anchor.TopRight,
Anchor = Anchor.TopRight,
Margin = new MarginPadding { Horizontal = Spacing },
AccentColour = UsernameColour,
Inverted = !string.IsNullOrEmpty(message.Sender.Colour),
drawableTimestamp = new OsuSpriteText
{
Shadow = false,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: FontSize * 0.75f, weight: FontWeight.SemiBold, fixedWidth: true),
AlwaysPresent = true,
},
drawableUsername = new DrawableChatUsername(message.Sender)
{
Width = UsernameWidth,
FontSize = FontSize,
AutoSizeAxes = Axes.Y,
Origin = Anchor.TopRight,
Anchor = Anchor.TopRight,
Margin = new MarginPadding { Horizontal = Spacing },
AccentColour = UsernameColour,
Inverted = !string.IsNullOrEmpty(message.Sender.Colour),
},
drawableContentFlow = new LinkFlowContainer(styleMessageContent)
{
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
}
},
drawableContentFlow = new LinkFlowContainer(styleMessageContent)
{
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
}
},
}
}
};

updateBackground();
}

protected override void LoadComplete()
Expand Down Expand Up @@ -258,5 +297,11 @@ private void updateTimestamp()
Color4Extensions.FromHex("812a96"),
Color4Extensions.FromHex("992861"),
};

private void updateBackground()
{
if (background != null)
background.Alpha = alternatingBackground ? 0.03f : 0;
}
}
}
11 changes: 11 additions & 0 deletions osu.Game/Overlays/Chat/DrawableChannel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@ protected override void LoadComplete()
highlightedMessage.BindValueChanged(_ => processMessageHighlighting(), true);
}

protected override void Update()
{
base.Update();

for (int i = 0; i < ChatLineFlow.Count; i++)
{
if (ChatLineFlow[i] is ChatLine chatline)
chatline.AlternatingBackground = i % 2 == 0;
}
}

/// <summary>
/// Processes any pending message in <see cref="highlightedMessage"/>.
/// </summary>
Expand Down
Loading