diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index 2a3c1e6c..a5ec731e 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/packages/stream_chat_flutter/CHANGELOG.md @@ -14,6 +14,8 @@ ✅ Added +- Added `MessageTheme.urlAttachmentHostStyle`, `MessageTheme.urlAttachmentTitleStyle`, and + `MessageTheme.urlAttachmentTextStyle` to customize the style of the url attachment. - Added `StreamMessageInput.ogPreviewFilter` to allow users to filter out the og preview links. [#1338](https://github.com/GetStream/stream-chat-flutter/issues/1338) @@ -29,6 +31,10 @@ return true; ), ``` + +🔄 Changed + +- Deprecated `MessageTheme.linkBackgroundColor` in favor of `MessageTheme.urlAttachmentBackgroundColor`. ## 6.0.0 diff --git a/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart b/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart index 10170bb1..a8ed00c6 100644 --- a/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart +++ b/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart @@ -36,8 +36,6 @@ class StreamUrlAttachment extends StatelessWidget { @override Widget build(BuildContext context) { - final chatThemeData = StreamChatTheme.of(context); - return ConstrainedBox( constraints: const BoxConstraints( maxWidth: 400, @@ -79,7 +77,7 @@ class StreamUrlAttachment extends StatelessWidget { borderRadius: const BorderRadius.only( topRight: Radius.circular(16), ), - color: messageTheme.linkBackgroundColor, + color: messageTheme.urlAttachmentBackgroundColor, ), child: Padding( padding: const EdgeInsets.only( @@ -89,9 +87,7 @@ class StreamUrlAttachment extends StatelessWidget { ), child: Text( hostDisplayName, - style: chatThemeData.textTheme.bodyBold.copyWith( - color: chatThemeData.colorTheme.accentPrimary, - ), + style: messageTheme.urlAttachmentHostStyle, ), ), ), @@ -109,14 +105,12 @@ class StreamUrlAttachment extends StatelessWidget { urlAttachment.title!.trim(), maxLines: messageTheme.urlAttachmentTitleMaxLine ?? 1, overflow: TextOverflow.ellipsis, - style: chatThemeData.textTheme.body - .copyWith(fontWeight: FontWeight.w700), + style: messageTheme.urlAttachmentTitleStyle, ), if (urlAttachment.text != null) Text( urlAttachment.text!, - style: chatThemeData.textTheme.body - .copyWith(fontWeight: FontWeight.w400), + style: messageTheme.urlAttachmentTextStyle, ), ], ), diff --git a/packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart b/packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart index 8de663e1..08152a58 100644 --- a/packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart @@ -205,7 +205,7 @@ class _QuotedMessage extends StatelessWidget { Color? _getBackgroundColor(BuildContext context) { if (_containsLinkAttachment) { - return messageTheme.linkBackgroundColor; + return messageTheme.urlAttachmentBackgroundColor; } return messageTheme.messageBackgroundColor; } diff --git a/packages/stream_chat_flutter/lib/src/message_widget/message_card.dart b/packages/stream_chat_flutter/lib/src/message_widget/message_card.dart index 2ad2cede..0f59d7fe 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/message_card.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/message_card.dart @@ -215,7 +215,7 @@ class _MessageCardState extends State { } if (widget.hasUrlAttachments) { - return widget.messageTheme.linkBackgroundColor; + return widget.messageTheme.urlAttachmentBackgroundColor; } if (widget.isOnlyEmoji) { diff --git a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart b/packages/stream_chat_flutter/lib/src/theme/message_theme.dart index d95ed7bb..6ae2cf88 100644 --- a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart +++ b/packages/stream_chat_flutter/lib/src/theme/message_theme.dart @@ -20,9 +20,15 @@ class StreamMessageThemeData with Diagnosticable { this.reactionsMaskColor, this.avatarTheme, this.createdAtStyle, - this.linkBackgroundColor, + @Deprecated('Use urlAttachmentBackgroundColor instead') + Color? linkBackgroundColor, + Color? urlAttachmentBackgroundColor, + this.urlAttachmentHostStyle, + this.urlAttachmentTitleStyle, + this.urlAttachmentTextStyle, this.urlAttachmentTitleMaxLine, - }); + }) : urlAttachmentBackgroundColor = + urlAttachmentBackgroundColor ?? linkBackgroundColor; /// Text style for message text final TextStyle? messageTextStyle; @@ -58,9 +64,22 @@ class StreamMessageThemeData with Diagnosticable { final StreamAvatarThemeData? avatarTheme; /// Background color for messages with url attachments. - final Color? linkBackgroundColor; + @Deprecated('Use urlAttachmentBackgroundColor instead') + Color? get linkBackgroundColor => urlAttachmentBackgroundColor; - /// Max number of lines in Url link title + /// Background color for messages with url attachments. + final Color? urlAttachmentBackgroundColor; + + /// Color for url attachment host. + final TextStyle? urlAttachmentHostStyle; + + /// Color for url attachment title. + final TextStyle? urlAttachmentTitleStyle; + + /// Color for url attachment text. + final TextStyle? urlAttachmentTextStyle; + + /// Max number of lines in Url link title. final int? urlAttachmentTitleMaxLine; /// Copy with a theme @@ -76,7 +95,12 @@ class StreamMessageThemeData with Diagnosticable { Color? reactionsBackgroundColor, Color? reactionsBorderColor, Color? reactionsMaskColor, - Color? linkBackgroundColor, + @Deprecated('Use urlAttachmentBackgroundColor instead') + Color? linkBackgroundColor, + Color? urlAttachmentBackgroundColor, + TextStyle? urlAttachmentHostStyle, + TextStyle? urlAttachmentTitleStyle, + TextStyle? urlAttachmentTextStyle, int? urlAttachmentTitleMaxLine, }) { return StreamMessageThemeData( @@ -93,7 +117,15 @@ class StreamMessageThemeData with Diagnosticable { reactionsBackgroundColor ?? this.reactionsBackgroundColor, reactionsBorderColor: reactionsBorderColor ?? this.reactionsBorderColor, reactionsMaskColor: reactionsMaskColor ?? this.reactionsMaskColor, - linkBackgroundColor: linkBackgroundColor ?? this.linkBackgroundColor, + urlAttachmentBackgroundColor: urlAttachmentBackgroundColor ?? + linkBackgroundColor ?? + this.urlAttachmentBackgroundColor, + urlAttachmentHostStyle: + urlAttachmentHostStyle ?? this.urlAttachmentHostStyle, + urlAttachmentTitleStyle: + urlAttachmentTitleStyle ?? this.urlAttachmentTitleStyle, + urlAttachmentTextStyle: + urlAttachmentTextStyle ?? this.urlAttachmentTextStyle, urlAttachmentTitleMaxLine: urlAttachmentTitleMaxLine ?? this.urlAttachmentTitleMaxLine, ); @@ -129,8 +161,23 @@ class StreamMessageThemeData with Diagnosticable { reactionsMaskColor: Color.lerp(a.reactionsMaskColor, b.reactionsMaskColor, t), repliesStyle: TextStyle.lerp(a.repliesStyle, b.repliesStyle, t), - linkBackgroundColor: - Color.lerp(a.linkBackgroundColor, b.linkBackgroundColor, t), + urlAttachmentBackgroundColor: Color.lerp( + a.urlAttachmentBackgroundColor, + b.urlAttachmentBackgroundColor, + t, + ), + urlAttachmentHostStyle: + TextStyle.lerp(a.urlAttachmentHostStyle, b.urlAttachmentHostStyle, t), + urlAttachmentTextStyle: TextStyle.lerp( + a.urlAttachmentTextStyle, + b.urlAttachmentTextStyle, + t, + ), + urlAttachmentTitleStyle: TextStyle.lerp( + a.urlAttachmentTitleStyle, + b.urlAttachmentTitleStyle, + t, + ), ); } @@ -154,7 +201,10 @@ class StreamMessageThemeData with Diagnosticable { reactionsBackgroundColor: other.reactionsBackgroundColor, reactionsBorderColor: other.reactionsBorderColor, reactionsMaskColor: other.reactionsMaskColor, - linkBackgroundColor: other.linkBackgroundColor, + urlAttachmentBackgroundColor: other.urlAttachmentBackgroundColor, + urlAttachmentHostStyle: other.urlAttachmentHostStyle, + urlAttachmentTitleStyle: other.urlAttachmentTitleStyle, + urlAttachmentTextStyle: other.urlAttachmentTextStyle, urlAttachmentTitleMaxLine: other.urlAttachmentTitleMaxLine, ); } @@ -175,7 +225,10 @@ class StreamMessageThemeData with Diagnosticable { reactionsBorderColor == other.reactionsBorderColor && reactionsMaskColor == other.reactionsMaskColor && avatarTheme == other.avatarTheme && - linkBackgroundColor == other.linkBackgroundColor && + urlAttachmentBackgroundColor == other.urlAttachmentBackgroundColor && + urlAttachmentHostStyle == other.urlAttachmentHostStyle && + urlAttachmentTitleStyle == other.urlAttachmentTitleStyle && + urlAttachmentTextStyle == other.urlAttachmentTextStyle && urlAttachmentTitleMaxLine == other.urlAttachmentTitleMaxLine; @override @@ -191,7 +244,10 @@ class StreamMessageThemeData with Diagnosticable { reactionsBorderColor.hashCode ^ reactionsMaskColor.hashCode ^ avatarTheme.hashCode ^ - linkBackgroundColor.hashCode ^ + urlAttachmentBackgroundColor.hashCode ^ + urlAttachmentHostStyle.hashCode ^ + urlAttachmentTitleStyle.hashCode ^ + urlAttachmentTextStyle.hashCode ^ urlAttachmentTitleMaxLine.hashCode; @override @@ -209,7 +265,22 @@ class StreamMessageThemeData with Diagnosticable { ..add(ColorProperty('reactionsBackgroundColor', reactionsBackgroundColor)) ..add(ColorProperty('reactionsBorderColor', reactionsBorderColor)) ..add(ColorProperty('reactionsMaskColor', reactionsMaskColor)) - ..add(ColorProperty('linkBackgroundColor', linkBackgroundColor)) + ..add(ColorProperty( + 'urlAttachmentBackgroundColor', + urlAttachmentBackgroundColor, + )) + ..add(DiagnosticsProperty( + 'urlAttachmentHostStyle', + urlAttachmentHostStyle, + )) + ..add(DiagnosticsProperty( + 'urlAttachmentTitleStyle', + urlAttachmentTitleStyle, + )) + ..add(DiagnosticsProperty( + 'urlAttachmentTextStyle', + urlAttachmentTextStyle, + )) ..add(DiagnosticsProperty( 'urlAttachmentTitleMaxLine', urlAttachmentTitleMaxLine, diff --git a/packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart b/packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart index 8021406f..01993efb 100644 --- a/packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart +++ b/packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart @@ -199,7 +199,12 @@ class StreamChatThemeData { messageLinksStyle: TextStyle( color: accentColor, ), - linkBackgroundColor: colorTheme.linkBg, + urlAttachmentBackgroundColor: colorTheme.linkBg, + urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor), + urlAttachmentTitleStyle: + textTheme.body.copyWith(fontWeight: FontWeight.w700), + urlAttachmentTextStyle: + textTheme.body.copyWith(fontWeight: FontWeight.w400), ), otherMessageTheme: StreamMessageThemeData( reactionsBackgroundColor: colorTheme.disabled, @@ -223,7 +228,12 @@ class StreamChatThemeData { width: 32, ), ), - linkBackgroundColor: colorTheme.linkBg, + urlAttachmentBackgroundColor: colorTheme.linkBg, + urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor), + urlAttachmentTitleStyle: + textTheme.body.copyWith(fontWeight: FontWeight.w700), + urlAttachmentTextStyle: + textTheme.body.copyWith(fontWeight: FontWeight.w400), ), messageInputTheme: StreamMessageInputThemeData( borderRadius: BorderRadius.circular(20), diff --git a/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart b/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart index 3b6c3a6f..246d9d90 100644 --- a/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart +++ b/packages/stream_chat_flutter/test/src/theme/message_theme_test.dart @@ -60,7 +60,7 @@ final _messageThemeControl = StreamMessageThemeData( messageLinksStyle: TextStyle( color: StreamColorTheme.light().accentPrimary, ), - linkBackgroundColor: StreamColorTheme.light().linkBg, + urlAttachmentBackgroundColor: StreamColorTheme.light().linkBg, ); final _messageThemeControlDark = StreamMessageThemeData( @@ -89,5 +89,5 @@ final _messageThemeControlDark = StreamMessageThemeData( messageLinksStyle: TextStyle( color: StreamColorTheme.dark().accentPrimary, ), - linkBackgroundColor: StreamColorTheme.dark().linkBg, + urlAttachmentBackgroundColor: StreamColorTheme.dark().linkBg, );