From 1ac5a4f9bccd737dd73ccc33f3f01de4e8c78d18 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Fri, 19 May 2023 19:20:26 +0530 Subject: [PATCH 1/3] feat(ui): add support for `StreamMessageThemeData.urlAttachmentTextMaxLine`. Signed-off-by: xsahil03x --- .../lib/src/attachment/url_attachment.dart | 49 +++++++++++++------ .../lib/src/theme/color_theme.dart | 2 +- .../lib/src/theme/message_theme.dart | 26 +++++++++- .../lib/src/theme/stream_chat_theme.dart | 22 +++------ 4 files changed, 68 insertions(+), 31 deletions(-) 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 5e9ca5dd..a628ee60 100644 --- a/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart +++ b/packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart @@ -91,7 +91,7 @@ class StreamUrlAttachment extends StatelessWidget { ), Positioned( left: 0, - bottom: -1, + bottom: 0, child: DecoratedBox( decoration: BoxDecoration( borderRadius: const BorderRadius.only( @@ -103,7 +103,8 @@ class StreamUrlAttachment extends StatelessWidget { padding: const EdgeInsets.only( top: 8, left: 8, - right: 8, + right: 12, + bottom: 4, ), child: Text( hostDisplayName, @@ -119,20 +120,40 @@ class StreamUrlAttachment extends StatelessWidget { padding: textPadding, child: Column( crossAxisAlignment: CrossAxisAlignment.start, - children: [ + children: [ if (urlAttachment.title != null) - Text( - urlAttachment.title!.trim(), - maxLines: messageTheme.urlAttachmentTitleMaxLine ?? 1, - overflow: TextOverflow.ellipsis, - style: messageTheme.urlAttachmentTitleStyle, - ), + Builder(builder: (context) { + final maxLines = messageTheme.urlAttachmentTitleMaxLine; + + TextOverflow? overflow; + if (maxLines != null && maxLines > 0) { + overflow = TextOverflow.ellipsis; + } + + return Text( + urlAttachment.title!.trim(), + maxLines: maxLines, + overflow: overflow, + style: messageTheme.urlAttachmentTitleStyle, + ); + }), if (urlAttachment.text != null) - Text( - urlAttachment.text!, - style: messageTheme.urlAttachmentTextStyle, - ), - ], + Builder(builder: (context) { + final maxLines = messageTheme.urlAttachmentTextMaxLine; + + TextOverflow? overflow; + if (maxLines != null && maxLines > 0) { + overflow = TextOverflow.ellipsis; + } + + return Text( + urlAttachment.text!, + maxLines: maxLines, + overflow: overflow, + style: messageTheme.urlAttachmentTextStyle, + ); + }), + ].insertBetween(const SizedBox(height: 4)), ), ), ], diff --git a/packages/stream_chat_flutter/lib/src/theme/color_theme.dart b/packages/stream_chat_flutter/lib/src/theme/color_theme.dart index 0babd24c..1d98b5aa 100644 --- a/packages/stream_chat_flutter/lib/src/theme/color_theme.dart +++ b/packages/stream_chat_flutter/lib/src/theme/color_theme.dart @@ -66,7 +66,7 @@ class StreamColorTheme { this.appBg = const Color(0xff070A0D), this.barsBg = const Color(0xff101418), this.linkBg = const Color(0xff00193D), - this.accentPrimary = const Color(0xff005FFF), + this.accentPrimary = const Color(0xff337eff), this.accentError = const Color(0xffFF3742), this.accentInfo = const Color(0xff20E070), this.borderTop = const Effect( 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 6ae2cf88..d1bb911a 100644 --- a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart +++ b/packages/stream_chat_flutter/lib/src/theme/message_theme.dart @@ -27,6 +27,7 @@ class StreamMessageThemeData with Diagnosticable { this.urlAttachmentTitleStyle, this.urlAttachmentTextStyle, this.urlAttachmentTitleMaxLine, + this.urlAttachmentTextMaxLine, }) : urlAttachmentBackgroundColor = urlAttachmentBackgroundColor ?? linkBackgroundColor; @@ -82,6 +83,9 @@ class StreamMessageThemeData with Diagnosticable { /// Max number of lines in Url link title. final int? urlAttachmentTitleMaxLine; + /// Max number of lines in Url link text. + final int? urlAttachmentTextMaxLine; + /// Copy with a theme StreamMessageThemeData copyWith({ TextStyle? messageTextStyle, @@ -102,6 +106,7 @@ class StreamMessageThemeData with Diagnosticable { TextStyle? urlAttachmentTitleStyle, TextStyle? urlAttachmentTextStyle, int? urlAttachmentTitleMaxLine, + int? urlAttachmentTextMaxLine, }) { return StreamMessageThemeData( messageTextStyle: messageTextStyle ?? this.messageTextStyle, @@ -128,6 +133,8 @@ class StreamMessageThemeData with Diagnosticable { urlAttachmentTextStyle ?? this.urlAttachmentTextStyle, urlAttachmentTitleMaxLine: urlAttachmentTitleMaxLine ?? this.urlAttachmentTitleMaxLine, + urlAttachmentTextMaxLine: + urlAttachmentTextMaxLine ?? this.urlAttachmentTextMaxLine, ); } @@ -178,6 +185,14 @@ class StreamMessageThemeData with Diagnosticable { b.urlAttachmentTitleStyle, t, ), + urlAttachmentTitleMaxLine: IntTween( + begin: a.urlAttachmentTitleMaxLine, + end: b.urlAttachmentTitleMaxLine, + ).lerp(t), + urlAttachmentTextMaxLine: IntTween( + begin: a.urlAttachmentTextMaxLine, + end: b.urlAttachmentTextMaxLine, + ).lerp(t), ); } @@ -206,6 +221,7 @@ class StreamMessageThemeData with Diagnosticable { urlAttachmentTitleStyle: other.urlAttachmentTitleStyle, urlAttachmentTextStyle: other.urlAttachmentTextStyle, urlAttachmentTitleMaxLine: other.urlAttachmentTitleMaxLine, + urlAttachmentTextMaxLine: other.urlAttachmentTextMaxLine, ); } @@ -229,7 +245,8 @@ class StreamMessageThemeData with Diagnosticable { urlAttachmentHostStyle == other.urlAttachmentHostStyle && urlAttachmentTitleStyle == other.urlAttachmentTitleStyle && urlAttachmentTextStyle == other.urlAttachmentTextStyle && - urlAttachmentTitleMaxLine == other.urlAttachmentTitleMaxLine; + urlAttachmentTitleMaxLine == other.urlAttachmentTitleMaxLine && + urlAttachmentTextMaxLine == other.urlAttachmentTextMaxLine; @override int get hashCode => @@ -248,7 +265,8 @@ class StreamMessageThemeData with Diagnosticable { urlAttachmentHostStyle.hashCode ^ urlAttachmentTitleStyle.hashCode ^ urlAttachmentTextStyle.hashCode ^ - urlAttachmentTitleMaxLine.hashCode; + urlAttachmentTitleMaxLine.hashCode ^ + urlAttachmentTextMaxLine.hashCode; @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { @@ -284,6 +302,10 @@ class StreamMessageThemeData with Diagnosticable { ..add(DiagnosticsProperty( 'urlAttachmentTitleMaxLine', urlAttachmentTitleMaxLine, + )) + ..add(DiagnosticsProperty( + 'urlAttachmentTextMaxLine', + urlAttachmentTextMaxLine, )); } } 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 04efaea6..e7449343 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 @@ -195,15 +195,12 @@ class StreamChatThemeData { width: 32, ), ), - messageLinksStyle: TextStyle( - color: accentColor, - ), + messageLinksStyle: TextStyle(color: accentColor), urlAttachmentBackgroundColor: colorTheme.linkBg, urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor), - urlAttachmentTitleStyle: - textTheme.body.copyWith(fontWeight: FontWeight.w700), - urlAttachmentTextStyle: - textTheme.body.copyWith(fontWeight: FontWeight.w400), + urlAttachmentTitleStyle: textTheme.footnoteBold, + urlAttachmentTextStyle: textTheme.footnote, + urlAttachmentTitleMaxLine: 1, ), otherMessageTheme: StreamMessageThemeData( reactionsBackgroundColor: colorTheme.borders, @@ -215,9 +212,7 @@ class StreamChatThemeData { messageAuthorStyle: textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis), repliesStyle: textTheme.footnoteBold.copyWith(color: accentColor), - messageLinksStyle: TextStyle( - color: accentColor, - ), + messageLinksStyle: TextStyle(color: accentColor), messageBackgroundColor: colorTheme.barsBg, messageBorderColor: colorTheme.borders, avatarTheme: StreamAvatarThemeData( @@ -229,10 +224,9 @@ class StreamChatThemeData { ), urlAttachmentBackgroundColor: colorTheme.linkBg, urlAttachmentHostStyle: textTheme.bodyBold.copyWith(color: accentColor), - urlAttachmentTitleStyle: - textTheme.body.copyWith(fontWeight: FontWeight.w700), - urlAttachmentTextStyle: - textTheme.body.copyWith(fontWeight: FontWeight.w400), + urlAttachmentTitleStyle: textTheme.footnoteBold, + urlAttachmentTextStyle: textTheme.footnote, + urlAttachmentTitleMaxLine: 1, ), messageInputTheme: StreamMessageInputThemeData( borderRadius: BorderRadius.circular(20), From 01a2a06a81ef459d66c252a14e38d39e79baf2ff Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Fri, 19 May 2023 19:22:46 +0530 Subject: [PATCH 2/3] chore: update CHANGELOG.md Signed-off-by: xsahil03x --- packages/stream_chat_flutter/CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index 1f83c14a..6a664e91 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/packages/stream_chat_flutter/CHANGELOG.md @@ -15,6 +15,11 @@ - [[#1544]](https://github.com/GetStream/stream-chat-flutter/issues/1544) Fixed error thrown when unable to fetch image/data in Message link preview. +✅ Added + +- Added support for `StreamMessageThemeData.urlAttachmentTextMaxLine` to specify the `.maxLines` for the url attachment + text. [#1543](https://github.com/GetStream/stream-chat-flutter/issues/1543) + ## 6.1.0 🐞 Fixed From 4cb85d15c4ad9432e43f703b9d7d0ee070d6c4d5 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Fri, 19 May 2023 21:52:49 +0530 Subject: [PATCH 3/3] chore: fix tests Signed-off-by: xsahil03x --- .../lib/src/theme/message_theme.dart | 20 +++++++++++-------- .../src/theme/message_input_theme_test.dart | 6 +++--- 2 files changed, 15 insertions(+), 11 deletions(-) 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 d1bb911a..6c35c5e3 100644 --- a/packages/stream_chat_flutter/lib/src/theme/message_theme.dart +++ b/packages/stream_chat_flutter/lib/src/theme/message_theme.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/src/theme/avatar_theme.dart'; @@ -185,14 +187,16 @@ class StreamMessageThemeData with Diagnosticable { b.urlAttachmentTitleStyle, t, ), - urlAttachmentTitleMaxLine: IntTween( - begin: a.urlAttachmentTitleMaxLine, - end: b.urlAttachmentTitleMaxLine, - ).lerp(t), - urlAttachmentTextMaxLine: IntTween( - begin: a.urlAttachmentTextMaxLine, - end: b.urlAttachmentTextMaxLine, - ).lerp(t), + urlAttachmentTitleMaxLine: lerpDouble( + a.urlAttachmentTitleMaxLine, + b.urlAttachmentTitleMaxLine, + t, + )?.round(), + urlAttachmentTextMaxLine: lerpDouble( + a.urlAttachmentTextMaxLine, + b.urlAttachmentTextMaxLine, + t, + )?.round(), ); } diff --git a/packages/stream_chat_flutter/test/src/theme/message_input_theme_test.dart b/packages/stream_chat_flutter/test/src/theme/message_input_theme_test.dart index 3c62baea..f267d388 100644 --- a/packages/stream_chat_flutter/test/src/theme/message_input_theme_test.dart +++ b/packages/stream_chat_flutter/test/src/theme/message_input_theme_test.dart @@ -69,11 +69,11 @@ final _messageInputThemeControlMidLerp = StreamMessageInputThemeData( borderRadius: BorderRadius.circular(20), sendAnimationDuration: const Duration(milliseconds: 300), inputBackgroundColor: const Color(0xff87898b), - actionButtonColor: const Color(0xff005fff), + actionButtonColor: const Color(0xff196eff), actionButtonIdleColor: const Color(0xff7a7a7a), - sendButtonColor: const Color(0xff005fff), + sendButtonColor: const Color(0xff196eff), sendButtonIdleColor: const Color(0xff848585), - expandButtonColor: const Color(0xff005fff), + expandButtonColor: const Color(0xff196eff), inputTextStyle: const TextStyle( color: Color(0xff7f7f7f), fontSize: 14,