diff --git a/lib/src/message_actions_modal.dart b/lib/src/message_actions_modal.dart index b675a688..9562a797 100644 --- a/lib/src/message_actions_modal.dart +++ b/lib/src/message_actions_modal.dart @@ -96,6 +96,7 @@ class MessageActionsModal extends StatelessWidget { showUserAvatar: showUserAvatar, showTimestamp: false, translateUserAvatar: false, + showReactionPickerIndicator: true, showSendingIndicator: DisplayWidget.gone, shape: messageShape, ), diff --git a/lib/src/message_reactions_modal.dart b/lib/src/message_reactions_modal.dart index a8013fde..4ef35be2 100644 --- a/lib/src/message_reactions_modal.dart +++ b/lib/src/message_reactions_modal.dart @@ -89,6 +89,7 @@ class MessageReactionsModal extends StatelessWidget { translateUserAvatar: false, showSendingIndicator: DisplayWidget.gone, shape: messageShape, + showReactionPickerIndicator: true, ), ), SizedBox( diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 4378086f..e65da576 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -106,6 +106,9 @@ class MessageWidget extends StatefulWidget { /// The function called when tapping on a link final void Function(String) onLinkTap; + /// Used in [MessageReactionsModal] and [MessageActionsModal] + final bool showReactionPickerIndicator; + final List readList; /// If true show the users username next to the timestamp of the message @@ -131,6 +134,7 @@ class MessageWidget extends StatefulWidget { this.borderRadiusGeometry, this.attachmentBorderRadiusGeometry, this.onMentionTap, + this.showReactionPickerIndicator = false, this.showUserAvatar = DisplayWidget.show, this.showSendingIndicator = DisplayWidget.show, this.showReplyIndicator = true, @@ -251,39 +255,62 @@ class _MessageWidgetState extends State { ), portalAnchor: Alignment(-1.0, -1.0), childAnchor: Alignment(1, -1.0), - child: Padding( - padding: widget.showReactions - ? EdgeInsets.only( - top: widget.message.reactionCounts - ?.isNotEmpty == - true - ? 18 - : 0, - ) - : EdgeInsets.zero, - child: (widget.message.isDeleted && - widget.message.status != - MessageSendingStatus.FAILED_DELETE) - ? Transform( - alignment: Alignment.center, + child: Stack( + clipBehavior: Clip.none, + children: [ + Padding( + padding: widget.showReactions + ? EdgeInsets.only( + top: widget.message.reactionCounts + ?.isNotEmpty == + true + ? 18 + : 0, + ) + : EdgeInsets.zero, + child: (widget.message.isDeleted && + widget.message.status != + MessageSendingStatus + .FAILED_DELETE) + ? Transform( + alignment: Alignment.center, + transform: Matrix4.rotationY( + widget.reverse ? pi : 0), + child: DeletedMessage( + messageTheme: widget.messageTheme, + ), + ) + : Column( + crossAxisAlignment: + CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + ..._parseAttachments(context), + if (widget.message.text + .trim() + .isNotEmpty) + _buildTextBubble(context), + ], + ), + ), + if (widget.showReactionPickerIndicator) + Positioned( + right: 0, + top: -6, + child: Transform( transform: Matrix4.rotationY( widget.reverse ? pi : 0), - child: DeletedMessage( - messageTheme: widget.messageTheme, + child: CustomPaint( + painter: ReactionBubblePainter( + widget.messageTheme + .reactionsBackgroundColor, + widget.messageTheme + .reactionsBorderColor, + ), ), - ) - : Column( - crossAxisAlignment: - CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - ..._parseAttachments(context), - if (widget.message.text - .trim() - .isNotEmpty) - _buildTextBubble(context), - ], ), + ), + ], ), ), ), diff --git a/lib/src/reaction_picker.dart b/lib/src/reaction_picker.dart index 87487cde..bf4c4ed0 100644 --- a/lib/src/reaction_picker.dart +++ b/lib/src/reaction_picker.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:stream_chat_flutter/src/reaction_bubble.dart'; import '../stream_chat_flutter.dart'; @@ -22,59 +21,44 @@ class ReactionPicker extends StatelessWidget { @override Widget build(BuildContext context) { final reactionIcons = StreamChatTheme.of(context).reactionIcons; - return Stack( - fit: StackFit.passthrough, - children: [ - Material( - color: messageTheme.reactionsBackgroundColor, - clipBehavior: Clip.hardEdge, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(24), - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: reactionIcons.map((reactionIcon) { - final ownReactionIndex = message.ownReactions?.indexWhere( - (reaction) => reaction.type == reactionIcon.type) ?? - -1; - return IconButton( - iconSize: 24, - icon: Icon( - reactionIcon.iconData, - color: ownReactionIndex != -1 - ? StreamChatTheme.of(context).accentColor - : Theme.of(context).iconTheme.color.withOpacity(.5), - ), - onPressed: () { - if (ownReactionIndex != -1) { - removeReaction( - context, - message.ownReactions[ownReactionIndex], - ); - } else { - sendReaction( - context, - reactionIcon.type, - ); - } - }, - ); - }).toList(), - ), - ), - Positioned( - right: 14, - bottom: 0, - child: CustomPaint( - painter: ReactionBubblePainter( - messageTheme.reactionsBackgroundColor, - messageTheme.reactionsBorderColor, + return Material( + color: messageTheme.reactionsBackgroundColor, + clipBehavior: Clip.hardEdge, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(24), + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: reactionIcons.map((reactionIcon) { + final ownReactionIndex = message.ownReactions?.indexWhere( + (reaction) => reaction.type == reactionIcon.type) ?? + -1; + return IconButton( + iconSize: 24, + icon: Icon( + reactionIcon.iconData, + color: ownReactionIndex != -1 + ? StreamChatTheme.of(context).accentColor + : Theme.of(context).iconTheme.color.withOpacity(.5), ), - ), - ), - ], + onPressed: () { + if (ownReactionIndex != -1) { + removeReaction( + context, + message.ownReactions[ownReactionIndex], + ); + } else { + sendReaction( + context, + reactionIcon.type, + ); + } + }, + ); + }).toList(), + ), ); }