diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 18a49c95..0ca7ac16 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -106,19 +106,16 @@ class _MessageActionsModalState extends State { final roughSentenceSize = widget.message .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); + final fontSize = widget.messageTheme.messageTextStyle?.fontSize; + print('roughSentenceSize $roughSentenceSize'); print('roughMaxSize $roughMaxSize'); - final divFactor = widget.message.attachments.isNotEmpty - ? 1 - : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); - final streamChatThemeData = StreamChatTheme.of(context); final numberOfReactions = StreamChatConfiguration.of(context).reactionIcons.length; - final shiftFactor = - numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0; + final channel = StreamChannel.of(context).channel; final child = Center( @@ -139,9 +136,10 @@ class _MessageActionsModalState extends State { calculateReactionsHorizontalAlignmentValue( user, widget.message, - divFactor, - shiftFactor, constraints, + roughMaxSize, + fontSize, + numberOfReactions, ), 0, ), diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index 5cc804d1..813c3d25 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/src/message_widget/reactions/reaction_bubble.dart'; +import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// {@template streamMessageReactionsModal} @@ -45,19 +46,10 @@ class StreamMessageReactionsModal extends StatelessWidget { final hasReactionPermission = _userPermissions.contains(PermissionType.sendReaction); - final roughMaxSize = size.width * 2 / 3; - - final roughSentenceSize = - message.roughMessageSize(messageTheme.messageTextStyle?.fontSize); - final divFactor = message.attachments.isNotEmpty - ? 1 - : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); - + final fontSize = messageTheme.messageTextStyle?.fontSize; final numberOfReactions = StreamChatConfiguration.of(context).reactionIcons.length; - final shiftFactor = - numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0; final child = Center( child: SingleChildScrollView( @@ -69,20 +61,25 @@ class StreamMessageReactionsModal extends StatelessWidget { children: [ if ((showReactions ?? hasReactionPermission) && (message.status == MessageSendingStatus.sent)) - Align( - alignment: Alignment( - user!.id == message.user!.id - ? (divFactor >= 1.0 - ? -0.2 - shiftFactor - : (1.2 - divFactor)) - : (divFactor >= 1.0 - ? shiftFactor + 0.2 - : -(1.2 - divFactor)), - 0, - ), - child: StreamReactionPicker( - message: message, - ), + LayoutBuilder( + builder: (context, constraints) { + return Align( + alignment: Alignment( + calculateReactionsHorizontalAlignmentValue( + user, + message, + constraints, + roughMaxSize, + fontSize, + numberOfReactions, + ), + 0, + ), + child: StreamReactionPicker( + message: message, + ), + ); + }, ), const SizedBox(height: 10), IgnorePointer( diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index e6e81eb6..8abced3e 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -3,17 +3,25 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// Document here!! double calculateReactionsHorizontalAlignmentValue( - User? user, - Message message, - num divFactor, - double shiftFactor, - BoxConstraints constraints, - ) { + User? user, + Message message, + BoxConstraints constraints, + double maxSize, + double? fontSize, + int reactionsCount, +) { var result = 0.0; + final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0; final maxWidth = constraints.maxWidth; final maxHeight = constraints.maxHeight; + final roughSentenceSize = message.roughMessageSize(fontSize); + + final divFactor = message.attachments.isNotEmpty + ? 1 + : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); + print('INFO - max width: $maxWidth. ' 'maxHeight: $maxHeight ' 'shiftFactor: $shiftFactor ' @@ -48,6 +56,8 @@ double calculateReactionsHorizontalAlignmentValue( // Hacky!!! Needs improvement!!! if (result > 1.0) { return 1; + } else if (result < -1.0) { + return -1; } else { return result; }