fix reactions overflowing the screen

This commit is contained in:
Salvatore Giordano
2020-10-27 16:15:50 +01:00
parent 58511e8f4b
commit e8411d3aa4
4 changed files with 71 additions and 63 deletions
+67 -60
View File
@@ -62,71 +62,78 @@ class MessageActionsModal extends StatelessWidget {
), ),
), ),
), ),
Column( Padding(
mainAxisAlignment: MainAxisAlignment.center, padding: const EdgeInsets.symmetric(vertical: 8.0),
crossAxisAlignment: CrossAxisAlignment.stretch, child: Column(
children: <Widget>[ mainAxisAlignment: MainAxisAlignment.center,
if (showReactions && crossAxisAlignment: CrossAxisAlignment.stretch,
(message.status == MessageSendingStatus.SENT || children: <Widget>[
message.status == null)) if (showReactions &&
Center( (message.status == MessageSendingStatus.SENT ||
child: ReactionPicker( message.status == null))
message: message, Center(
child: ReactionPicker(
message: message,
messageTheme: messageTheme,
),
),
IgnorePointer(
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, messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showReplyIndicator: false,
showTimestamp: false,
showSendingIndicator: DisplayWidget.gone,
shape: messageShape,
), ),
), ),
AbsorbPointer( SizedBox(
child: MessageWidget( height: 8,
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,
), ),
), Flexible(
SizedBox( child: Padding(
height: 8, padding: const EdgeInsets.symmetric(
), horizontal: 48.0,
Padding( ),
padding: const EdgeInsets.symmetric( child: Material(
horizontal: 48.0, clipBehavior: Clip.hardEdge,
), shape: RoundedRectangleBorder(
child: Material( borderRadius: BorderRadius.circular(16),
clipBehavior: Clip.hardEdge, ),
shape: RoundedRectangleBorder( child: SingleChildScrollView(
borderRadius: BorderRadius.circular(16), child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: ListTile.divideTiles(
context: context,
tiles: [
if (showReply &&
(message.status == MessageSendingStatus.SENT ||
message.status == null) &&
message.parentId == null)
_buildReplyButton(context),
if (showEditMessage) _buildEditMessage(context),
if (showDeleteMessage) _buildDeleteButton(context),
if (showCopyMessage) _buildCopyButton(context),
],
).toList(),
),
),
),
), ),
child: Column( )
crossAxisAlignment: CrossAxisAlignment.stretch, ],
children: ListTile.divideTiles( ),
context: context,
tiles: [
if (showReply &&
(message.status == MessageSendingStatus.SENT ||
message.status == null) &&
message.parentId == null)
_buildReplyButton(context),
if (showEditMessage) _buildEditMessage(context),
if (showDeleteMessage) _buildDeleteButton(context),
if (showCopyMessage) _buildCopyButton(context),
],
).toList(),
),
),
)
],
), ),
], ],
); );
+1 -1
View File
@@ -68,7 +68,7 @@ class MessageReactionsModal extends StatelessWidget {
messageTheme: messageTheme, messageTheme: messageTheme,
), ),
), ),
AbsorbPointer( IgnorePointer(
child: MessageWidget( child: MessageWidget(
key: Key('MessageWidget'), key: Key('MessageWidget'),
reverse: reverse, reverse: reverse,
+1 -1
View File
@@ -387,7 +387,7 @@ class _MessageWidgetState extends State<MessageWidget> {
) { ) {
final ownId = StreamChat.of(context).user.id; final ownId = StreamChat.of(context).user.id;
final reactionsMap = <String, Reaction>{}; final reactionsMap = <String, Reaction>{};
widget.message.latestReactions.forEach((element) { widget.message.latestReactions?.forEach((element) {
if (!reactionsMap.containsKey(element.type) || element.user.id == ownId) { if (!reactionsMap.containsKey(element.type) || element.user.id == ownId) {
reactionsMap[element.type] = element; reactionsMap[element.type] = element;
} }
+2 -1
View File
@@ -26,6 +26,7 @@ class ReactionBubble extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final reactionIcons = StreamChatTheme.of(context).reactionIcons; final reactionIcons = StreamChatTheme.of(context).reactionIcons;
final offset = reactions.length > 1 ? 16.0 : 2.0;
return Transform( return Transform(
transform: Matrix4.rotationY(reverse ? pi : 0), transform: Matrix4.rotationY(reverse ? pi : 0),
alignment: Alignment.center, alignment: Alignment.center,
@@ -33,7 +34,7 @@ class ReactionBubble extends StatelessWidget {
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
Transform.translate( Transform.translate(
offset: Offset(reverse ? 2 : -2, 0), offset: Offset(reverse ? offset : -offset, 0),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 4), padding: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(