feat: add support for url attachment theming.

Signed-off-by: xsahil03x <[email protected]>
This commit is contained in:
Sahil Kumar
2023-04-26 17:50:06 +05:30
committed by xsahil03x
parent 5c7fc74c5b
commit 90c4dae5b1
7 changed files with 114 additions and 26 deletions
+11
View File
@@ -1,3 +1,14 @@
## Upcoming
✅ Added
- Added `MessageTheme.urlAttachmentHostStyle`, `MessageTheme.urlAttachmentTitleStyle`, and
`MessageTheme.urlAttachmentTextStyle` to customize the style of the url attachment.
🔄 Changed
- Deprecated `MessageTheme.linkBackgroundColor` in favor of `MessageTheme.urlAttachmentBackgroundColor`.
## 6.0.0
🐞 Fixed
@@ -79,7 +79,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 +89,7 @@ class StreamUrlAttachment extends StatelessWidget {
),
child: Text(
hostDisplayName,
style: chatThemeData.textTheme.bodyBold.copyWith(
color: chatThemeData.colorTheme.accentPrimary,
),
style: messageTheme.urlAttachmentHostStyle,
),
),
),
@@ -109,14 +107,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,
),
],
),
@@ -205,7 +205,7 @@ class _QuotedMessage extends StatelessWidget {
Color? _getBackgroundColor(BuildContext context) {
if (_containsLinkAttachment) {
return messageTheme.linkBackgroundColor;
return messageTheme.urlAttachmentBackgroundColor;
}
return messageTheme.messageBackgroundColor;
}
@@ -215,7 +215,7 @@ class _MessageCardState extends State<MessageCard> {
}
if (widget.hasUrlAttachments) {
return widget.messageTheme.linkBackgroundColor;
return widget.messageTheme.urlAttachmentBackgroundColor;
}
if (widget.isOnlyEmoji) {
@@ -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,
@@ -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),
@@ -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,
);