Skip to content

Commit 2cbd706

Browse files
chrisbobbechrisbobbe
committed
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 dcc8123.
1 parent 35d83f2 commit 2cbd706

File tree

3 files changed

+53
-55
lines changed

3 files changed

+53
-55
lines changed

‎lib/widgets/message_list.dart

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,56 +27,54 @@ import 'theme.dart';
2727

2828
/// Message-list styles that differ between light and dark themes.
2929
class MessageListTheme extends ThemeExtension<MessageListTheme> {
30-
MessageListTheme.light() :
31-
this._(
32-
dateSeparator: Colors.black,
33-
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
34-
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
35-
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
36-
recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
37-
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
38-
senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(),
39-
streamMessageBgDefault: Colors.white,
40-
streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3),
41-
42-
// From the Figma mockup at:
43-
// https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684
44-
// See discussion about design at:
45-
// https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008
46-
// (Web uses a left-to-right gradient from hsl(217deg 64% 59%) to transparent,
47-
// in both light and dark theme.)
48-
unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(),
49-
50-
unreadMarkerGap: Colors.white.withValues(alpha: 0.6),
51-
52-
// TODO(design) this seems ad-hoc; is there a better color?
53-
unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5),
54-
);
55-
56-
MessageListTheme.dark() :
57-
this._(
58-
dateSeparator: Colors.white,
59-
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
60-
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
61-
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.85).toColor(),
62-
recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
63-
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
64-
senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(),
65-
streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
66-
streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3),
67-
68-
// 0.75 opacity from here:
69-
// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=807-33998&m=dev
70-
// Discussion, some weeks after the discussion linked on the light variant:
71-
// https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663
72-
// where Vlad includes screenshots that look like they're from there.
73-
unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(),
74-
75-
unreadMarkerGap: Colors.transparent,
76-
77-
// TODO(design) this is ad-hoc and untested; is there a better color?
78-
unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a),
79-
);
30+
static final light = MessageListTheme._(
31+
dateSeparator: Colors.black,
32+
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
33+
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
34+
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
35+
recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
36+
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
37+
senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(),
38+
streamMessageBgDefault: Colors.white,
39+
streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3),
40+
41+
// From the Figma mockup at:
42+
// https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132-9684
43+
// See discussion about design at:
44+
// https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20unread.20marker/near/1658008
45+
// (Web uses a left-to-right gradient from hsl(217deg 64% 59%) to transparent,
46+
// in both light and dark theme.)
47+
unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(),
48+
49+
unreadMarkerGap: Colors.white.withValues(alpha: 0.6),
50+
51+
// TODO(design) this seems ad-hoc; is there a better color?
52+
unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5),
53+
);
54+
55+
static final dark = MessageListTheme._(
56+
dateSeparator: Colors.white,
57+
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
58+
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
59+
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.85).toColor(),
60+
recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
61+
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
62+
senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(),
63+
streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
64+
streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3),
65+
66+
// 0.75 opacity from here:
67+
// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=807-33998&m=dev
68+
// Discussion, some weeks after the discussion linked on the light variant:
69+
// https://github.com/zulip/zulip-flutter/pull/317#issuecomment-1784311663
70+
// where Vlad includes screenshots that look like they're from there.
71+
unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(),
72+
73+
unreadMarkerGap: Colors.transparent,
74+
75+
// TODO(design) this is ad-hoc and untested; is there a better color?
76+
unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a),
77+
);
8078

8179
MessageListTheme._({
8280
required this.dateSeparator,

‎lib/widgets/theme.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ ThemeData zulipThemeData(BuildContext context) {
3131
ContentTheme.light(context),
3232
designVariables,
3333
EmojiReactionTheme.light(),
34-
MessageListTheme.light(),
34+
MessageListTheme.light,
3535
];
3636
}
3737
case Brightness.dark: {
@@ -40,7 +40,7 @@ ThemeData zulipThemeData(BuildContext context) {
4040
ContentTheme.dark(context),
4141
designVariables,
4242
EmojiReactionTheme.dark(),
43-
MessageListTheme.dark(),
43+
MessageListTheme.dark,
4444
];
4545
}
4646
}

‎test/widgets/message_list_test.dart

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,17 +207,17 @@ void main() {
207207
return widget.color;
208208
}
209209

210-
check(backgroundColor()).isSameColorAs(MessageListTheme.light().streamMessageBgDefault);
210+
check(backgroundColor()).isSameColorAs(MessageListTheme.light.streamMessageBgDefault);
211211

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

215215
await tester.pump(kThemeAnimationDuration * 0.4);
216-
final expectedLerped = MessageListTheme.light().lerp(MessageListTheme.dark(), 0.4);
216+
final expectedLerped = MessageListTheme.light.lerp(MessageListTheme.dark, 0.4);
217217
check(backgroundColor()).isSameColorAs(expectedLerped.streamMessageBgDefault);
218218

219219
await tester.pump(kThemeAnimationDuration * 0.6);
220-
check(backgroundColor()).isSameColorAs(MessageListTheme.dark().streamMessageBgDefault);
220+
check(backgroundColor()).isSameColorAs(MessageListTheme.dark.streamMessageBgDefault);
221221
});
222222

223223
group('fetch older messages on scroll', () {

0 commit comments

Comments
 (0)