From 164c228b3418edf548c9ba04b191c8d7dcc5d84b Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 13 Jan 2025 11:15:00 -0800 Subject: [PATCH] msglist [nfc]: Make MessageListTheme.{light,dark} static final fields Instead of constructors. Nicer to compute each of these just once. Like we did for DesignVariables in dcc8123bb. --- lib/widgets/message_list.dart | 98 ++++++++++++++--------------- lib/widgets/theme.dart | 4 +- test/widgets/message_list_test.dart | 6 +- 3 files changed, 53 insertions(+), 55 deletions(-) diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart index c428524712..aa069c3720 100644 --- a/lib/widgets/message_list.dart +++ b/lib/widgets/message_list.dart @@ -27,56 +27,54 @@ import 'theme.dart'; /// Message-list styles that differ between light and dark themes. class MessageListTheme extends ThemeExtension { - MessageListTheme.light() : - this._( - dateSeparator: Colors.black, - dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).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(), - senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(), - senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(), - streamMessageBgDefault: Colors.white, - streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3), - - // From the Figma mockup at: - // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684 - // See discussion about design at: - // https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008 - // (Web uses a left-to-right gradient from hsl(217deg 64% 59%) to transparent, - // in both light and dark theme.) - unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(), - - unreadMarkerGap: Colors.white.withValues(alpha: 0.6), - - // TODO(design) this seems ad-hoc; is there a better color? - unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5), - ); - - MessageListTheme.dark() : - this._( - dateSeparator: Colors.white, - dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).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(), - senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(), - senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(), - streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(), - streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3), - - // 0.75 opacity from here: - // https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=807-33998&m=dev - // Discussion, some weeks after the discussion linked on the light variant: - // https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663 - // where Vlad includes screenshots that look like they're from there. - unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(), - - unreadMarkerGap: Colors.transparent, - - // TODO(design) this is ad-hoc and untested; is there a better color? - unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a), - ); + static final light = MessageListTheme._( + dateSeparator: Colors.black, + dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).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(), + senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(), + senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(), + streamMessageBgDefault: Colors.white, + streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3), + + // From the Figma mockup at: + // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684 + // See discussion about design at: + // https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008 + // (Web uses a left-to-right gradient from hsl(217deg 64% 59%) to transparent, + // in both light and dark theme.) + unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(), + + unreadMarkerGap: Colors.white.withValues(alpha: 0.6), + + // TODO(design) this seems ad-hoc; is there a better color? + unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5), + ); + + static final dark = MessageListTheme._( + dateSeparator: Colors.white, + dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).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(), + senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(), + senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(), + streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(), + streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3), + + // 0.75 opacity from here: + // https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=807-33998&m=dev + // Discussion, some weeks after the discussion linked on the light variant: + // https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663 + // where Vlad includes screenshots that look like they're from there. + unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(), + + unreadMarkerGap: Colors.transparent, + + // TODO(design) this is ad-hoc and untested; is there a better color? + unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a), + ); MessageListTheme._({ required this.dateSeparator, diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 0ce1d4cdb4..18e3f60c0b 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -31,7 +31,7 @@ ThemeData zulipThemeData(BuildContext context) { ContentTheme.light(context), designVariables, EmojiReactionTheme.light(), - MessageListTheme.light(), + MessageListTheme.light, ]; } case Brightness.dark: { @@ -40,7 +40,7 @@ ThemeData zulipThemeData(BuildContext context) { ContentTheme.dark(context), designVariables, EmojiReactionTheme.dark(), - MessageListTheme.dark(), + MessageListTheme.dark, ]; } } diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart index c220dc0e0c..aadb2ffc77 100644 --- a/test/widgets/message_list_test.dart +++ b/test/widgets/message_list_test.dart @@ -207,17 +207,17 @@ void main() { return widget.color; } - check(backgroundColor()).isSameColorAs(MessageListTheme.light().streamMessageBgDefault); + check(backgroundColor()).isSameColorAs(MessageListTheme.light.streamMessageBgDefault); tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark; await tester.pump(); await tester.pump(kThemeAnimationDuration * 0.4); - final expectedLerped = MessageListTheme.light().lerp(MessageListTheme.dark(), 0.4); + final expectedLerped = MessageListTheme.light.lerp(MessageListTheme.dark, 0.4); check(backgroundColor()).isSameColorAs(expectedLerped.streamMessageBgDefault); await tester.pump(kThemeAnimationDuration * 0.6); - check(backgroundColor()).isSameColorAs(MessageListTheme.dark().streamMessageBgDefault); + check(backgroundColor()).isSameColorAs(MessageListTheme.dark.streamMessageBgDefault); }); group('fetch older messages on scroll', () {