talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): Fix message theme not applied correctly.

Browse Source 
Signed-off-by: xsahil03x <[email protected]>
This commit is contained in:
Sahil Kumar
2023-05-08 18:22:54 +05:30
committed by xsahil03x
parent 0f6f4fd0f4
commit e9769f1e97
7 changed files with 56 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stream_chat_flutter/lib/src/message_list_view/message_list_view.dart
+7 -5
View File
@@ -893,6 +893,11 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
final currentUserMember = final currentUserMember =
members.firstWhereOrNull((e) => e.user!.id == currentUser!.id); members.firstWhereOrNull((e) => e.user!.id == currentUser!.id);
final hasUrlAttachment =
message.attachments.any((it) => it.ogScrapeUrl != null);
final borderSide = isOnlyEmoji || hasUrlAttachment ? BorderSide.none : null;
final defaultMessageWidget = StreamMessageWidget( final defaultMessageWidget = StreamMessageWidget(
showReplyMessage: false, showReplyMessage: false,
showResendMessage: false, showResendMessage: false,
@@ -917,7 +922,7 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
vertical: 8, vertical: 8,
horizontal: isOnlyEmoji ? 0 : 16.0, horizontal: isOnlyEmoji ? 0 : 16.0,
), ),
borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null, borderSide: borderSide,
showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show, showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
messageTheme: isMyMessage messageTheme: isMyMessage
? _streamTheme.ownMessageTheme ? _streamTheme.ownMessageTheme
@@ -1096,10 +1101,7 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
final hasUrlAttachment = final hasUrlAttachment =
message.attachments.any((it) => it.ogScrapeUrl != null); message.attachments.any((it) => it.ogScrapeUrl != null);
final borderSide = final borderSide = isOnlyEmoji || hasUrlAttachment ? BorderSide.none : null;
isOnlyEmoji || hasUrlAttachment || (isMyMessage && !hasFileAttachment)
? BorderSide.none
: null;
final currentUser = StreamChat.of(context).currentUser; final currentUser = StreamChat.of(context).currentUser;
final members = StreamChannel.of(context).channel.state?.members ?? []; final members = StreamChannel.of(context).channel.state?.members ?? [];
packages/stream_chat_flutter/lib/src/message_widget/deleted_message.dart
+1 -4
View File
@@ -32,7 +32,6 @@ class StreamDeletedMessage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final chatThemeData = StreamChatTheme.of(context);
return Material( return Material(
color: messageTheme.messageBackgroundColor, color: messageTheme.messageBackgroundColor,
shape: shape ?? shape: shape ??
@@ -40,9 +39,7 @@ class StreamDeletedMessage extends StatelessWidget {
borderRadius: borderRadiusGeometry ?? BorderRadius.zero, borderRadius: borderRadiusGeometry ?? BorderRadius.zero,
side: borderSide ?? side: borderSide ??
BorderSide( BorderSide(
color: Theme.of(context).brightness == Brightness.dark color: messageTheme.messageBorderColor ?? Colors.transparent,
? chatThemeData.colorTheme.barsBg.withAlpha(24)
: chatThemeData.colorTheme.textHighEmphasis.withAlpha(24),
), ),
), ),
child: Padding( child: Padding(
packages/stream_chat_flutter/lib/src/message_widget/message_card.dart
+2 -1
View File
@@ -139,7 +139,8 @@ class _MessageCardState extends State<MessageCard> {
RoundedRectangleBorder( RoundedRectangleBorder(
side: widget.borderSide ?? side: widget.borderSide ??
BorderSide( BorderSide(
color: widget.messageTheme.messageBorderColor ?? Colors.grey, color: widget.messageTheme.messageBorderColor ??
Colors.transparent,
), ),
borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero, borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero,
), ),
packages/stream_chat_flutter/lib/src/message_widget/reactions/desktop_reactions_builder.dart
+36 -26
View File
@@ -163,23 +163,28 @@ class _DesktopReactionsBuilderState extends State<DesktopReactionsBuilder> {
onExit: (event) { onExit: (event) {
setState(() => _showReactionsPopup = !_showReactionsPopup); setState(() => _showReactionsPopup = !_showReactionsPopup);
}, },
child: Wrap( child: Padding(
children: [ padding: const EdgeInsets.symmetric(vertical: 2),
...reactionsList.map((reaction) { child: Wrap(
final reactionIcon = reactionIcons.firstWhereOrNull( spacing: 4,
(r) => r.type == reaction.type, runSpacing: 4,
); children: [
...reactionsList.map((reaction) {
final reactionIcon = reactionIcons.firstWhereOrNull(
(r) => r.type == reaction.type,
);
return _BottomReaction( return _BottomReaction(
reaction: reaction, reaction: reaction,
message: widget.message, message: widget.message,
borderSide: widget.borderSide, borderSide: widget.borderSide,
messageTheme: widget.messageTheme, messageTheme: widget.messageTheme,
reactionIcon: reactionIcon, reactionIcon: reactionIcon,
streamChatTheme: streamChatTheme, streamChatTheme: streamChatTheme,
); );
}).toList(), }).toList(),
], ],
),
), ),
), ),
); );
@@ -206,6 +211,9 @@ class _BottomReaction extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final userId = StreamChat.of(context).currentUser?.id; final userId = StreamChat.of(context).currentUser?.id;
final backgroundColor = messageTheme?.reactionsBackgroundColor;
return GestureDetector( return GestureDetector(
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
onTap: () { onTap: () {
@@ -225,33 +233,35 @@ class _BottomReaction extends StatelessWidget {
} }
}, },
child: Card( child: Card(
shape: StadiumBorder( margin: EdgeInsets.zero,
// Setting elevation as null when background color is transparent.
// This is done to avoid shadow when background color is transparent.
elevation: backgroundColor == Colors.transparent ? 0 : null,
shape: RoundedRectangleBorder(
side: borderSide ?? side: borderSide ??
BorderSide( BorderSide(
color: messageTheme?.messageBorderColor ?? Colors.grey, color: messageTheme?.reactionsBorderColor ?? Colors.transparent,
), ),
borderRadius: BorderRadius.circular(10),
), ),
color: messageTheme?.messageBackgroundColor, color: backgroundColor,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
horizontal: 6,
vertical: 2,
),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
ConstrainedBox( ConstrainedBox(
constraints: BoxConstraints.tight( constraints: BoxConstraints.tight(
const Size.square(16), const Size.square(14),
), ),
child: reactionIcon?.builder( child: reactionIcon?.builder(
context, context,
reaction.user?.id == userId, reaction.user?.id == userId,
16, 14,
) ?? ) ??
Icon( Icon(
Icons.help_outline_rounded, Icons.help_outline_rounded,
size: 16, size: 14,
color: reaction.user?.id == userId color: reaction.user?.id == userId
? streamChatTheme.colorTheme.accentPrimary ? streamChatTheme.colorTheme.accentPrimary
: streamChatTheme.colorTheme.textHighEmphasis : streamChatTheme.colorTheme.textHighEmphasis
packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart
+4 -3
View File
@@ -174,6 +174,7 @@ class StreamMessageReactionsModal extends StatelessWidget {
) { ) {
final isCurrentUser = reaction.user?.id == currentUser.id; final isCurrentUser = reaction.user?.id == currentUser.id;
final chatThemeData = StreamChatTheme.of(context); final chatThemeData = StreamChatTheme.of(context);
final reverse = !isCurrentUser;
return ConstrainedBox( return ConstrainedBox(
constraints: BoxConstraints.loose( constraints: BoxConstraints.loose(
const Size(64, 100), const Size(64, 100),
@@ -199,13 +200,14 @@ class StreamMessageReactionsModal extends StatelessWidget {
), ),
Positioned( Positioned(
bottom: 6, bottom: 6,
left: isCurrentUser ? -3 : null, left: !reverse ? -3 : null,
right: isCurrentUser ? -3 : null, right: reverse ? -3 : null,
child: Align( child: Align(
alignment: alignment:
reverse ? Alignment.centerRight : Alignment.centerLeft, reverse ? Alignment.centerRight : Alignment.centerLeft,
child: StreamReactionBubble( child: StreamReactionBubble(
reactions: [reaction], reactions: [reaction],
reverse: !reverse,
flipTail: !reverse, flipTail: !reverse,
borderColor: borderColor:
messageTheme.reactionsBorderColor ?? Colors.transparent, messageTheme.reactionsBorderColor ?? Colors.transparent,
@@ -213,7 +215,6 @@ class StreamMessageReactionsModal extends StatelessWidget {
Colors.transparent, Colors.transparent,
maskColor: chatThemeData.colorTheme.barsBg, maskColor: chatThemeData.colorTheme.barsBg,
tailCirclesSpacing: 1, tailCirclesSpacing: 1,
highlightOwnReactions: false,
), ),
), ),
), ),
packages/stream_chat_flutter/lib/src/theme/stream_chat_theme.dart
+4 -4
View File
@@ -184,11 +184,11 @@ class StreamChatThemeData {
createdAtStyle: createdAtStyle:
textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis), textTheme.footnote.copyWith(color: colorTheme.textLowEmphasis),
repliesStyle: textTheme.footnoteBold.copyWith(color: accentColor), repliesStyle: textTheme.footnoteBold.copyWith(color: accentColor),
messageBackgroundColor: colorTheme.disabled, messageBackgroundColor: colorTheme.borders,
messageBorderColor: colorTheme.borders,
reactionsBackgroundColor: colorTheme.barsBg, reactionsBackgroundColor: colorTheme.barsBg,
reactionsBorderColor: colorTheme.borders, reactionsBorderColor: colorTheme.borders,
reactionsMaskColor: colorTheme.appBg, reactionsMaskColor: colorTheme.appBg,
messageBorderColor: colorTheme.disabled,
avatarTheme: StreamAvatarThemeData( avatarTheme: StreamAvatarThemeData(
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
constraints: const BoxConstraints.tightFor( constraints: const BoxConstraints.tightFor(
@@ -207,8 +207,8 @@ class StreamChatThemeData {
textTheme.body.copyWith(fontWeight: FontWeight.w400), textTheme.body.copyWith(fontWeight: FontWeight.w400),
), ),
otherMessageTheme: StreamMessageThemeData( otherMessageTheme: StreamMessageThemeData(
reactionsBackgroundColor: colorTheme.disabled, reactionsBackgroundColor: colorTheme.borders,
reactionsBorderColor: colorTheme.barsBg, reactionsBorderColor: colorTheme.borders,
reactionsMaskColor: colorTheme.appBg, reactionsMaskColor: colorTheme.appBg,
messageTextStyle: textTheme.body, messageTextStyle: textTheme.body,
createdAtStyle: createdAtStyle:
packages/stream_chat_flutter/lib/src/utils/device_segmentation.dart
+2 -2
View File
@@ -4,7 +4,7 @@ import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
bool get isWeb => CurrentPlatform.isWeb; bool get isWeb => CurrentPlatform.isWeb;
/// Returns true if the app is running in a mobile device. /// Returns true if the app is running in a mobile device.
bool get isMobileDevice => CurrentPlatform.isIos || CurrentPlatform.isAndroid; bool get isMobileDevice => true;
/// Returns true if the app is running in a desktop device. /// Returns true if the app is running in a desktop device.
bool get isDesktopDevice => bool get isDesktopDevice =>
@@ -22,7 +22,7 @@ bool get isDesktopVideoPlayerSupported =>
bool get isMobileDeviceOrWeb => isWeb || isMobileDevice; bool get isMobileDeviceOrWeb => isWeb || isMobileDevice;
/// Returns true if the app is running in a desktop or web. /// Returns true if the app is running in a desktop or web.
bool get isDesktopDeviceOrWeb => isWeb || isDesktopDevice; bool get isDesktopDeviceOrWeb => false;
/// Returns true if the app is running in a flutter test environment. /// Returns true if the app is running in a flutter test environment.
bool get isTestEnvironment => CurrentPlatform.isFlutterTest; bool get isTestEnvironment => CurrentPlatform.isFlutterTest;