diff --git a/example/ios/Flutter/.last_build_id b/example/ios/Flutter/.last_build_id index 171fde31..661f8167 100644 --- a/example/ios/Flutter/.last_build_id +++ b/example/ios/Flutter/.last_build_id @@ -1 +1 @@ -0289cdadbd29bab804f275e3c5907d07 \ No newline at end of file +89eb023669fee58472de747080d78b5a \ No newline at end of file diff --git a/example/lib/main.dart b/example/lib/main.dart index 89ed9381..667b1e0f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -76,7 +76,7 @@ void main() async { await client.setUser( User(id: 'super-band-9', extraData: { - 'name': 'John Doe', + 'name': 'Jonathan Doe', }), 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A', ); diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 9a6554e6..cb0eca8e 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,6 +1,6 @@ name: example description: A new Flutter project. -version: 1.0.31+33 +version: 1.0.32+34 environment: sdk: ">=2.2.2 <3.0.0" diff --git a/lib/src/message_list_view.dart b/lib/src/message_list_view.dart index 87d79622..7c529f95 100644 --- a/lib/src/message_list_view.dart +++ b/lib/src/message_list_view.dart @@ -543,7 +543,7 @@ class _MessageListViewState extends State { topRight: Radius.circular(16), bottomRight: Radius.circular(16), ), - showUserAvatar: !isMyMessage + showUserAvatar: isMyMessage ? DisplayWidget.gone : (isNextUser ? DisplayWidget.hide : DisplayWidget.show), messageTheme: isMyMessage diff --git a/lib/src/message_reactions_modal.dart b/lib/src/message_reactions_modal.dart index 9d2a30bf..319b8acd 100644 --- a/lib/src/message_reactions_modal.dart +++ b/lib/src/message_reactions_modal.dart @@ -53,49 +53,54 @@ class MessageReactionsModal extends StatelessWidget { ), ), ), - Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - if (showReactions && - (message.status == MessageSendingStatus.SENT || - message.status == null)) - Center( - child: ReactionPicker( - message: message, + Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + if (showReactions && + (message.status == MessageSendingStatus.SENT || + message.status == null)) + Center( + child: ReactionPicker( + message: message, + messageTheme: messageTheme, + ), + ), + AbsorbPointer( + child: MessageWidget( + key: Key('MessageWidget'), + reverse: reverse, + message: message.copyWith( + text: message.text.length > 200 + ? '${message.text.substring(0, 200)}...' + : message.text, + attachments: message.attachments.length > 1 + ? [message.attachments[0]] + : message.attachments, + ), messageTheme: messageTheme, + showReactions: false, + showUsername: false, + showReplyIndicator: false, + showTimestamp: false, + showSendingIndicator: DisplayWidget.gone, + shape: messageShape, ), ), - AbsorbPointer( - child: MessageWidget( - key: Key('MessageWidget'), - reverse: reverse, - message: message.copyWith( - text: message.text.length > 200 - ? '${message.text.substring(0, 200)}...' - : message.text, - attachments: message.attachments.length > 1 - ? [message.attachments[0]] - : message.attachments, + SizedBox( + height: 16, + ), + if (message.latestReactions?.isNotEmpty == true) + Flexible( + child: Container( + constraints: BoxConstraints.loose(Size.fromHeight(400)), + child: _buildReactionCard(context), + ), ), - messageTheme: messageTheme, - showReactions: false, - showUsername: false, - showReplyIndicator: false, - showTimestamp: false, - showSendingIndicator: DisplayWidget.gone, - shape: messageShape, - ), - ), - SizedBox( - height: 16, - ), - if (message.latestReactions?.isNotEmpty == true) - Container( - constraints: BoxConstraints.loose(Size.fromHeight(400)), - child: _buildReactionCard(context), - ), - ], + ], + ), ), ], ); @@ -181,16 +186,14 @@ class MessageReactionsModal extends StatelessWidget { Positioned( child: Align( alignment: Alignment.centerLeft, - child: Container( - child: ReactionBubble( - reactions: [reaction], - borderColor: messageTheme.reactionsBorderColor, - backgroundColor: messageTheme.reactionsBackgroundColor, - flipTail: !isCurrentUser, - ), + child: ReactionBubble( + reactions: [reaction], + borderColor: messageTheme.reactionsBorderColor, + backgroundColor: messageTheme.reactionsBackgroundColor, + highlightOwnReactions: false, ), ), - bottom: 0, + bottom: 4, left: isCurrentUser ? 0 : null, right: isCurrentUser ? 0 : null, ), diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 9a2200c3..beff166a 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -240,7 +240,8 @@ class _MessageWidgetState extends State { ), Flexible( child: PortalEntry( - portal: ConstrainedBox( + portal: Container( + transform: Matrix4.translationValues(-16, 0, 0), child: _buildReactionIndicator(context), constraints: BoxConstraints(maxWidth: 22 * 6.0), ), @@ -399,16 +400,13 @@ class _MessageWidgetState extends State { !widget.message.isDeleted) ? GestureDetector( onTap: () => _showMessageReactionsModalBottomSheet(context), - child: Transform.translate( - offset: Offset(-16, 0), - child: ReactionBubble( - key: ValueKey('${widget.message.id}.reactions'), - reverse: widget.reverse, - flipTail: widget.reverse, - backgroundColor: widget.messageTheme.reactionsBackgroundColor, - borderColor: widget.messageTheme.reactionsBorderColor, - reactions: reactionsMap.values.toList(), - ), + child: ReactionBubble( + key: ValueKey('${widget.message.id}.reactions'), + reverse: widget.reverse, + flipTail: widget.reverse, + backgroundColor: widget.messageTheme.reactionsBackgroundColor, + borderColor: widget.messageTheme.reactionsBorderColor, + reactions: reactionsMap.values.toList(), ), ) : SizedBox(), diff --git a/lib/src/reaction_bubble.dart b/lib/src/reaction_bubble.dart index 9db6e112..03f415b0 100644 --- a/lib/src/reaction_bubble.dart +++ b/lib/src/reaction_bubble.dart @@ -13,6 +13,7 @@ class ReactionBubble extends StatelessWidget { @required this.backgroundColor, this.reverse = false, this.flipTail = false, + this.highlightOwnReactions = true, }) : super(key: key); final List reactions; @@ -20,6 +21,7 @@ class ReactionBubble extends StatelessWidget { final Color backgroundColor; final bool reverse; final bool flipTail; + final bool highlightOwnReactions; @override Widget build(BuildContext context) { @@ -31,9 +33,9 @@ class ReactionBubble extends StatelessWidget { alignment: Alignment.center, children: [ Transform.translate( - offset: Offset(reverse ? 5 : -5, 0), + offset: Offset(reverse ? 2 : -2, 0), child: Container( - padding: const EdgeInsets.symmetric(vertical: 6), + padding: const EdgeInsets.symmetric(vertical: 4), decoration: BoxDecoration( border: Border.all( color: borderColor, @@ -73,8 +75,8 @@ class ReactionBubble extends StatelessWidget { ), Positioned( bottom: 0, - left: reverse ? null : 16, - right: !reverse ? null : 16, + left: reverse ? null : 11, + right: !reverse ? null : 11, child: _buildReactionsTail(context), ), ], @@ -99,7 +101,8 @@ class ReactionBubble extends StatelessWidget { child: Icon( reactionIcon?.iconData ?? Icons.help_outline_rounded, size: 16, - color: reaction.user.id == StreamChat.of(context).user.id + color: (!highlightOwnReactions || + reaction.user.id == StreamChat.of(context).user.id) ? StreamChatTheme.of(context).accentColor : Colors.black.withOpacity(.5), ), @@ -107,13 +110,10 @@ class ReactionBubble extends StatelessWidget { } Widget _buildReactionsTail(BuildContext context) { - final tail = Transform.translate( - offset: Offset(-5, 0), - child: CustomPaint( - painter: ReactionBubblePainter( - backgroundColor, - borderColor, - ), + final tail = CustomPaint( + painter: ReactionBubblePainter( + backgroundColor, + borderColor, ), );