Skip to content

Commit

Permalink
msglist: Use distinct background colors for DM messages.
Browse files Browse the repository at this point in the history 
This commit modifies DmMessage and its DateSeparator to use a
different background color from StreamMessage.

Fixes #681.
  • Loading branch information
@E-m-i-n-e-n-c-e
E-m-i-n-e-n-c-e committed Feb 6, 2025
1 parent fa4b9f3 commit 31151be
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 9 deletions.
23 changes: 20 additions & 3 deletions lib/widgets/message_list.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
static final light = MessageListTheme._(
dateSeparator: Colors.black,
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
dmMessageBgDefault: const HSLColor.fromAHSL(1, 45, 0.20, 0.96).toColor(),
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
Expand All @@ -55,6 +56,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
static final dark = MessageListTheme._(
dateSeparator: Colors.white,
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
dmMessageBgDefault: const HSLColor.fromAHSL(1, 46, 0.07, 0.16).toColor(),
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.85).toColor(),
recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
Expand All @@ -79,6 +81,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
MessageListTheme._({
required this.dateSeparator,
required this.dateSeparatorText,
required this.dmMessageBgDefault,
required this.dmRecipientHeaderBg,
required this.messageTimestamp,
required this.recipientHeaderText,
Expand All @@ -103,6 +106,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {

final Color dateSeparator;
final Color dateSeparatorText;
final Color dmMessageBgDefault;
final Color dmRecipientHeaderBg;
final Color messageTimestamp;
final Color recipientHeaderText;
Expand All @@ -118,6 +122,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
MessageListTheme copyWith({
Color? dateSeparator,
Color? dateSeparatorText,
Color? dmMessageBgDefault,
Color? dmRecipientHeaderBg,
Color? messageTimestamp,
Color? recipientHeaderText,
Expand All @@ -132,6 +137,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
return MessageListTheme._(
dateSeparator: dateSeparator ?? this.dateSeparator,
dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
dmMessageBgDefault: dmMessageBgDefault ?? this.dmMessageBgDefault,
dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
messageTimestamp: messageTimestamp ?? this.messageTimestamp,
recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
Expand All @@ -153,6 +159,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
return MessageListTheme._(
dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
dmMessageBgDefault: Color.lerp(dmMessageBgDefault, other.dmMessageBgDefault, t)!,
dmRecipientHeaderBg: Color.lerp(dmRecipientHeaderBg, other.dmRecipientHeaderBg, t)!,
messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
Expand All @@ -165,6 +172,13 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
unsubscribedStreamRecipientHeaderBg: Color.lerp(unsubscribedStreamRecipientHeaderBg, other.unsubscribedStreamRecipientHeaderBg, t)!,
);
}

Color getMessageBackgroundColor(Message message) {
return switch (message) {
StreamMessage() => streamMessageBgDefault,
DmMessage() => dmMessageBgDefault,
};
}
}

/// The interface for the state of a [MessageListPage].
Expand Down Expand Up @@ -916,8 +930,9 @@ class DateSeparator extends StatelessWidget {

final line = BorderSide(width: 0, color: messageListTheme.dateSeparator);

// TODO(#681) use different color for DM messages
return ColoredBox(color: messageListTheme.streamMessageBgDefault,
final backgroundColor = messageListTheme.getMessageBackgroundColor(message);

return ColoredBox(color: backgroundColor,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 2),
child: Row(children: [
Expand Down Expand Up @@ -958,13 +973,15 @@ class MessageItem extends StatelessWidget {
Widget build(BuildContext context) {
final message = item.message;
final messageListTheme = MessageListTheme.of(context);
final backgroundColor = messageListTheme.getMessageBackgroundColor(message);

return StickyHeaderItem(
allowOverflow: !item.isLastInBlock,
header: header,
child: _UnreadMarker(
isRead: message.flags.contains(MessageFlag.read),
child: ColoredBox(
color: messageListTheme.streamMessageBgDefault,
color: backgroundColor,
child: Column(children: [
MessageWithPossibleSender(item: item),
if (trailingWhitespace != null && item.isLastInBlock) SizedBox(height: trailingWhitespace!),
Expand Down
16 changes: 10 additions & 6 deletions test/widgets/message_list_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,10 +197,11 @@ void main() {
tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);

final message = eg.streamMessage();
await setupMessageListPage(tester, messages: [message]);
final streamMessage = eg.streamMessage();
final dmMessage = eg.dmMessage(from: eg.selfUser, to: [eg.otherUser]);
await setupMessageListPage(tester, messages: [streamMessage, dmMessage]);

Color backgroundColor() {
Color getBackgroundColor(Message message) {
final coloredBoxFinder = find.descendant(
of: find.byWidgetPredicate((w) => w is MessageItem && w.item.message.id == message.id),
matching: find.byType(ColoredBox),
Expand All @@ -209,17 +210,20 @@ void main() {
return widget.color;
}

check(backgroundColor()).isSameColorAs(MessageListTheme.light.streamMessageBgDefault);
check(getBackgroundColor(streamMessage)).isSameColorAs(MessageListTheme.light.streamMessageBgDefault);
check(getBackgroundColor(dmMessage)).isSameColorAs(MessageListTheme.light.dmMessageBgDefault);

tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark;
await tester.pump();

await tester.pump(kThemeAnimationDuration * 0.4);
final expectedLerped = MessageListTheme.light.lerp(MessageListTheme.dark, 0.4);
check(backgroundColor()).isSameColorAs(expectedLerped.streamMessageBgDefault);
check(getBackgroundColor(streamMessage)).isSameColorAs(expectedLerped.streamMessageBgDefault);
check(getBackgroundColor(dmMessage)).isSameColorAs(expectedLerped.dmMessageBgDefault);

await tester.pump(kThemeAnimationDuration * 0.6);
check(backgroundColor()).isSameColorAs(MessageListTheme.dark.streamMessageBgDefault);
check(getBackgroundColor(streamMessage)).isSameColorAs(MessageListTheme.dark.streamMessageBgDefault);
check(getBackgroundColor(dmMessage)).isSameColorAs(MessageListTheme.dark.dmMessageBgDefault);
});

group('fetch older messages on scroll', () {
Expand Down

0 comments on commit 31151be

Please sign in to comment.