Skip to content

Commit 58e9a25

Browse files
renefloorrenefloor
committed
refactor message theme to separate incoming and outgoing
1 parent 236ff7c commit 58e9a25

File tree

7 files changed

+379
-329
lines changed

7 files changed

+379
-329
lines changed

‎packages/stream_core_flutter/lib/src/components/message_composer/attachment/message_composer_attachment_link_preview.dart‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@ class MessageComposerAttachmentLinkPreview extends StatelessWidget {
2121

2222
@override
2323
Widget build(BuildContext context) {
24-
final messageTheme = context.streamMessageTheme;
25-
final messageDefaults = MessageThemeDefaults(context: context).data;
26-
final backgroundColor = messageTheme.backgroundOutgoing ?? messageDefaults.backgroundOutgoing;
27-
final textColor = messageTheme.textOutgoing ?? messageDefaults.textOutgoing;
24+
final messageTheme = context.streamMessageTheme.mergeWithDefaults(context);
25+
final backgroundColor = messageTheme.outgoing?.backgroundColor;
26+
final textColor = messageTheme.outgoing?.textColor;
2827

2928
final titleStyle = context.streamTextTheme.metadataEmphasis.copyWith(color: textColor);
3029
final bodyStyle = context.streamTextTheme.metadataDefault.copyWith(color: textColor);

‎packages/stream_core_flutter/lib/src/components/message_composer/attachment/message_composer_attachment_reply.dart‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,16 @@ class MessageComposerAttachmentReply extends StatelessWidget {
2222

2323
@override
2424
Widget build(BuildContext context) {
25-
final messageTheme = context.streamMessageTheme;
26-
final messageDefaults = MessageThemeDefaults(context: context).data;
27-
final indicatorColor = switch (style) {
28-
ReplyStyle.incoming => messageTheme.replyIndicatorIncoming ?? messageDefaults.replyIndicatorIncoming!,
29-
ReplyStyle.outgoing => messageTheme.replyIndicatorOutgoing ?? messageDefaults.replyIndicatorOutgoing!,
30-
};
31-
final backgroundColor = switch (style) {
32-
ReplyStyle.incoming => messageTheme.backgroundIncoming ?? messageDefaults.backgroundIncoming,
33-
ReplyStyle.outgoing => messageTheme.backgroundOutgoing ?? messageDefaults.backgroundOutgoing,
25+
final messageTheme = context.streamMessageTheme.mergeWithDefaults(context);
26+
final messageStyle = switch (style) {
27+
ReplyStyle.incoming => messageTheme.incoming,
28+
ReplyStyle.outgoing => messageTheme.outgoing,
3429
};
3530

31+
final indicatorColor = messageStyle?.replyIndicatorColor;
32+
final backgroundColor = messageStyle?.backgroundColor;
33+
final textColor = messageStyle?.textColor;
34+
3635
final spacing = context.streamSpacing;
3736
return Stack(
3837
children: [
@@ -61,14 +60,19 @@ class MessageComposerAttachmentReply extends StatelessWidget {
6160
mainAxisSize: MainAxisSize.min,
6261
crossAxisAlignment: CrossAxisAlignment.start,
6362
children: [
64-
Text(title, style: context.streamTextTheme.metadataEmphasis),
63+
Text(title, style: context.streamTextTheme.metadataEmphasis.copyWith(color: textColor)),
6564
Row(
6665
children: [
6766
if (image != null) ...[
6867
Icon(context.streamIcons.camera1, size: 12),
6968
SizedBox(width: spacing.xxs),
7069
],
71-
Expanded(child: Text(subtitle, style: context.streamTextTheme.metadataDefault)),
70+
Expanded(
71+
child: Text(
72+
subtitle,
73+
style: context.streamTextTheme.metadataDefault.copyWith(color: textColor),
74+
),
75+
),
7276
],
7377
),
7478
],

‎packages/stream_core_flutter/lib/src/components/message_composer/message_composer.dart‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -128,32 +128,3 @@ class InputThemeDefaults {
128128
borderColor: _colorScheme.borderDefault,
129129
);
130130
}
131-
132-
class MessageThemeDefaults {
133-
MessageThemeDefaults({required this.context}) : _colorScheme = context.streamColorScheme;
134-
135-
final BuildContext context;
136-
final StreamColorScheme _colorScheme;
137-
138-
StreamMessageThemeData get data => StreamMessageThemeData(
139-
backgroundIncoming: _colorScheme.backgroundSurface,
140-
backgroundOutgoing: _colorScheme.brand.shade100,
141-
backgroundAttachmentIncoming: _colorScheme.backgroundSurfaceStrong,
142-
backgroundAttachmentOutgoing: _colorScheme.brand.shade150,
143-
backgroundTypingIndicator: _colorScheme.accentNeutral,
144-
textIncoming: _colorScheme.textPrimary,
145-
textOutgoing: _colorScheme.brand.shade900,
146-
textUsername: _colorScheme.textSecondary,
147-
textTimestamp: _colorScheme.textTertiary,
148-
textMention: _colorScheme.textLink,
149-
textLink: _colorScheme.textLink,
150-
textReaction: _colorScheme.textSecondary,
151-
textSystem: _colorScheme.textSecondary,
152-
borderIncoming: _colorScheme.borderSubtle,
153-
borderOutgoing: _colorScheme.brand.shade100,
154-
borderOnChatIncoming: _colorScheme.borderOnSurface,
155-
borderOnChatOutgoing: _colorScheme.brand.shade300,
156-
replyIndicatorIncoming: _colorScheme.borderOnSurface,
157-
replyIndicatorOutgoing: _colorScheme.brand.shade400,
158-
);
159-
}

‎packages/stream_core_flutter/lib/src/theme.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ export 'factory/stream_component_factory.dart';
33
export 'theme/components/stream_avatar_theme.dart';
44
export 'theme/components/stream_badge_count_theme.dart';
55
export 'theme/components/stream_button_theme.dart';
6+
export 'theme/components/stream_input_theme.dart';
7+
export 'theme/components/stream_message_theme.dart';
68
export 'theme/components/stream_online_indicator_theme.dart';
79

810
export 'theme/primitives/stream_colors.dart';

‎packages/stream_core_flutter/lib/src/theme/components/stream_message_theme.dart‎

Lines changed: 98 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -32,66 +32,104 @@ class StreamMessageTheme extends InheritedTheme {
3232
@immutable
3333
class StreamMessageThemeData with _$StreamMessageThemeData {
3434
const StreamMessageThemeData({
35-
this.backgroundIncoming,
36-
this.backgroundOutgoing,
37-
this.backgroundAttachmentIncoming,
38-
this.backgroundAttachmentOutgoing,
39-
this.backgroundTypingIndicator,
40-
this.textIncoming,
41-
this.textOutgoing,
42-
this.textUsername,
43-
this.textTimestamp,
44-
this.textMention,
45-
this.textLink,
46-
this.textReaction,
47-
this.textSystem,
48-
this.borderIncoming,
49-
this.borderOutgoing,
50-
this.borderOnChatIncoming,
51-
this.borderOnChatOutgoing,
52-
this.threadConnectorIncoming,
53-
this.threadConnectorOutgoing,
54-
this.progressTrackIncoming,
55-
this.progressTrackOutgoing,
56-
this.progressFillIncoming,
57-
this.progressFillOutgoing,
58-
this.replyIndicatorIncoming,
59-
this.replyIndicatorOutgoing,
60-
this.waveFormBar,
61-
this.waveFormBarPlaying,
35+
this.incoming,
36+
this.outgoing,
6237
});
6338

64-
final Color? backgroundIncoming;
65-
final Color? backgroundOutgoing;
66-
final Color? backgroundAttachmentIncoming;
67-
final Color? backgroundAttachmentOutgoing;
68-
final Color? backgroundTypingIndicator;
69-
70-
final Color? textIncoming;
71-
final Color? textOutgoing;
72-
final Color? textUsername;
73-
final Color? textTimestamp;
74-
final Color? textMention;
75-
final Color? textLink;
76-
final Color? textReaction;
77-
final Color? textSystem;
78-
79-
final Color? borderIncoming;
80-
final Color? borderOutgoing;
81-
final Color? borderOnChatIncoming;
82-
final Color? borderOnChatOutgoing;
83-
84-
final Color? threadConnectorIncoming;
85-
final Color? threadConnectorOutgoing;
86-
87-
final Color? progressTrackIncoming;
88-
final Color? progressTrackOutgoing;
89-
final Color? progressFillIncoming;
90-
final Color? progressFillOutgoing;
91-
92-
final Color? replyIndicatorIncoming;
93-
final Color? replyIndicatorOutgoing;
94-
95-
final Color? waveFormBar;
96-
final Color? waveFormBarPlaying;
39+
final StreamThemeMessageStyle? incoming;
40+
final StreamThemeMessageStyle? outgoing;
41+
42+
StreamMessageThemeData mergeWithDefaults(BuildContext context) {
43+
final defaults = _MessageThemeDefaults(context: context);
44+
return StreamMessageThemeData(incoming: defaults.incoming, outgoing: defaults.outgoing).merge(this);
45+
}
46+
}
47+
48+
@themeGen
49+
@immutable
50+
class StreamThemeMessageStyle with _$StreamThemeMessageStyle {
51+
const StreamThemeMessageStyle({
52+
this.backgroundColor,
53+
this.backgroundAttachmentColor,
54+
this.backgroundTypingIndicatorColor,
55+
this.textColor,
56+
this.textUsernameColor,
57+
this.textTimestampColor,
58+
this.textMentionColor,
59+
this.textLinkColor,
60+
this.textReactionColor,
61+
this.textSystemColor,
62+
this.borderColor,
63+
this.borderOnChatColor,
64+
this.threadConnectorColor,
65+
this.progressTrackColor,
66+
this.progressFillColor,
67+
this.replyIndicatorColor,
68+
this.waveFormBarColor,
69+
this.waveFormBarPlayingColor,
70+
});
71+
72+
final Color? backgroundColor;
73+
final Color? backgroundAttachmentColor;
74+
final Color? backgroundTypingIndicatorColor;
75+
76+
final Color? textColor;
77+
final Color? textUsernameColor;
78+
final Color? textTimestampColor;
79+
final Color? textMentionColor;
80+
final Color? textLinkColor;
81+
final Color? textReactionColor;
82+
final Color? textSystemColor;
83+
84+
final Color? borderColor;
85+
final Color? borderOnChatColor;
86+
87+
final Color? threadConnectorColor;
88+
89+
final Color? progressTrackColor;
90+
final Color? progressFillColor;
91+
92+
final Color? replyIndicatorColor;
93+
94+
final Color? waveFormBarColor;
95+
final Color? waveFormBarPlayingColor;
96+
}
97+
98+
class _MessageThemeDefaults {
99+
_MessageThemeDefaults({required this.context}) : _colorScheme = context.streamColorScheme;
100+
101+
final BuildContext context;
102+
final StreamColorScheme _colorScheme;
103+
104+
StreamThemeMessageStyle get incoming => StreamThemeMessageStyle(
105+
backgroundColor: _colorScheme.backgroundSurface,
106+
backgroundAttachmentColor: _colorScheme.backgroundSurfaceStrong,
107+
backgroundTypingIndicatorColor: _colorScheme.accentNeutral,
108+
textColor: _colorScheme.textPrimary,
109+
textUsernameColor: _colorScheme.textSecondary,
110+
textTimestampColor: _colorScheme.textTertiary,
111+
textMentionColor: _colorScheme.textLink,
112+
textLinkColor: _colorScheme.textLink,
113+
textReactionColor: _colorScheme.textSecondary,
114+
textSystemColor: _colorScheme.textSecondary,
115+
borderColor: _colorScheme.borderSubtle,
116+
borderOnChatColor: _colorScheme.borderOnSurface,
117+
replyIndicatorColor: _colorScheme.borderOnSurface,
118+
);
119+
120+
StreamThemeMessageStyle get outgoing => StreamThemeMessageStyle(
121+
backgroundColor: _colorScheme.brand.shade100,
122+
backgroundAttachmentColor: _colorScheme.brand.shade150,
123+
backgroundTypingIndicatorColor: _colorScheme.accentNeutral,
124+
textColor: _colorScheme.brand.shade900,
125+
textUsernameColor: _colorScheme.textSecondary,
126+
textTimestampColor: _colorScheme.textTertiary,
127+
textMentionColor: _colorScheme.textLink,
128+
textLinkColor: _colorScheme.textLink,
129+
textReactionColor: _colorScheme.textSecondary,
130+
textSystemColor: _colorScheme.textSecondary,
131+
borderColor: _colorScheme.brand.shade100,
132+
borderOnChatColor: _colorScheme.brand.shade300,
133+
replyIndicatorColor: _colorScheme.brand.shade400,
134+
);
97135
}

0 commit comments

Comments
 (0)