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

align reaction picker bubbles

Browse Source
This commit is contained in:
Salvatore Giordano
2020-10-29 12:49:25 +01:00
parent 8424e3a972
commit daf028d805
4 changed files with 95 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/message_actions_modal.dart
+1
View File
@@ -96,6 +96,7 @@ class MessageActionsModal extends StatelessWidget {
showUserAvatar: showUserAvatar, showUserAvatar: showUserAvatar,
showTimestamp: false, showTimestamp: false,
translateUserAvatar: false, translateUserAvatar: false,
showReactionPickerIndicator: true,
showSendingIndicator: DisplayWidget.gone, showSendingIndicator: DisplayWidget.gone,
shape: messageShape, shape: messageShape,
), ),
lib/src/message_reactions_modal.dart
+1
View File
@@ -89,6 +89,7 @@ class MessageReactionsModal extends StatelessWidget {
translateUserAvatar: false, translateUserAvatar: false,
showSendingIndicator: DisplayWidget.gone, showSendingIndicator: DisplayWidget.gone,
shape: messageShape, shape: messageShape,
showReactionPickerIndicator: true,
), ),
), ),
SizedBox( SizedBox(
lib/src/message_widget.dart
+56 -29
View File
@@ -106,6 +106,9 @@ class MessageWidget extends StatefulWidget {
/// The function called when tapping on a link /// The function called when tapping on a link
final void Function(String) onLinkTap; final void Function(String) onLinkTap;
/// Used in [MessageReactionsModal] and [MessageActionsModal]
final bool showReactionPickerIndicator;
final List<Read> readList; final List<Read> readList;
/// If true show the users username next to the timestamp of the message /// If true show the users username next to the timestamp of the message
@@ -131,6 +134,7 @@ class MessageWidget extends StatefulWidget {
this.borderRadiusGeometry, this.borderRadiusGeometry,
this.attachmentBorderRadiusGeometry, this.attachmentBorderRadiusGeometry,
this.onMentionTap, this.onMentionTap,
this.showReactionPickerIndicator = false,
this.showUserAvatar = DisplayWidget.show, this.showUserAvatar = DisplayWidget.show,
this.showSendingIndicator = DisplayWidget.show, this.showSendingIndicator = DisplayWidget.show,
this.showReplyIndicator = true, this.showReplyIndicator = true,
@@ -251,39 +255,62 @@ class _MessageWidgetState extends State<MessageWidget> {
), ),
portalAnchor: Alignment(-1.0, -1.0), portalAnchor: Alignment(-1.0, -1.0),
childAnchor: Alignment(1, -1.0), childAnchor: Alignment(1, -1.0),
child: Padding( child: Stack(
padding: widget.showReactions clipBehavior: Clip.none,
? EdgeInsets.only( children: [
top: widget.message.reactionCounts Padding(
?.isNotEmpty == padding: widget.showReactions
true ? EdgeInsets.only(
? 18 top: widget.message.reactionCounts
: 0, ?.isNotEmpty ==
) true
: EdgeInsets.zero, ? 18
child: (widget.message.isDeleted && : 0,
widget.message.status != )
MessageSendingStatus.FAILED_DELETE) : EdgeInsets.zero,
? Transform( child: (widget.message.isDeleted &&
alignment: Alignment.center, 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: <Widget>[
..._parseAttachments(context),
if (widget.message.text
.trim()
.isNotEmpty)
_buildTextBubble(context),
],
),
),
if (widget.showReactionPickerIndicator)
Positioned(
right: 0,
top: -6,
child: Transform(
transform: Matrix4.rotationY( transform: Matrix4.rotationY(
widget.reverse ? pi : 0), widget.reverse ? pi : 0),
child: DeletedMessage( child: CustomPaint(
messageTheme: widget.messageTheme, painter: ReactionBubblePainter(
widget.messageTheme
.reactionsBackgroundColor,
widget.messageTheme
.reactionsBorderColor,
),
), ),
)
: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
..._parseAttachments(context),
if (widget.message.text
.trim()
.isNotEmpty)
_buildTextBubble(context),
],
), ),
),
],
), ),
), ),
), ),
lib/src/reaction_picker.dart
+37 -53
View File
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/reaction_bubble.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
@@ -22,59 +21,44 @@ class ReactionPicker extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final reactionIcons = StreamChatTheme.of(context).reactionIcons; final reactionIcons = StreamChatTheme.of(context).reactionIcons;
return Stack( return Material(
fit: StackFit.passthrough, color: messageTheme.reactionsBackgroundColor,
children: [ clipBehavior: Clip.hardEdge,
Material( shape: RoundedRectangleBorder(
color: messageTheme.reactionsBackgroundColor, borderRadius: BorderRadius.circular(24),
clipBehavior: Clip.hardEdge, ),
shape: RoundedRectangleBorder( child: Row(
borderRadius: BorderRadius.circular(24), crossAxisAlignment: CrossAxisAlignment.start,
), mainAxisAlignment: MainAxisAlignment.center,
child: Row( mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, children: reactionIcons.map((reactionIcon) {
mainAxisAlignment: MainAxisAlignment.center, final ownReactionIndex = message.ownReactions?.indexWhere(
mainAxisSize: MainAxisSize.min, (reaction) => reaction.type == reactionIcon.type) ??
children: reactionIcons.map((reactionIcon) { -1;
final ownReactionIndex = message.ownReactions?.indexWhere( return IconButton(
(reaction) => reaction.type == reactionIcon.type) ?? iconSize: 24,
-1; icon: Icon(
return IconButton( reactionIcon.iconData,
iconSize: 24, color: ownReactionIndex != -1
icon: Icon( ? StreamChatTheme.of(context).accentColor
reactionIcon.iconData, : Theme.of(context).iconTheme.color.withOpacity(.5),
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,
), ),
), onPressed: () {
), if (ownReactionIndex != -1) {
], removeReaction(
context,
message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
);
}).toList(),
),
); );
} }