fix reactions ontap

This commit is contained in:
Salvatore Giordano
2020-10-27 10:32:22 +01:00
parent ba37258427
commit 58511e8f4b
7 changed files with 75 additions and 74 deletions
+1 -1
View File
@@ -1 +1 @@
0289cdadbd29bab804f275e3c5907d07 89eb023669fee58472de747080d78b5a
+1 -1
View File
@@ -76,7 +76,7 @@ void main() async {
await client.setUser( await client.setUser(
User(id: 'super-band-9', extraData: { User(id: 'super-band-9', extraData: {
'name': 'John Doe', 'name': 'Jonathan Doe',
}), }),
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A',
); );
+1 -1
View File
@@ -1,6 +1,6 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.0.31+33 version: 1.0.32+34
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
+1 -1
View File
@@ -543,7 +543,7 @@ class _MessageListViewState extends State<MessageListView> {
topRight: Radius.circular(16), topRight: Radius.circular(16),
bottomRight: Radius.circular(16), bottomRight: Radius.circular(16),
), ),
showUserAvatar: !isMyMessage showUserAvatar: isMyMessage
? DisplayWidget.gone ? DisplayWidget.gone
: (isNextUser ? DisplayWidget.hide : DisplayWidget.show), : (isNextUser ? DisplayWidget.hide : DisplayWidget.show),
messageTheme: isMyMessage messageTheme: isMyMessage
+50 -47
View File
@@ -53,49 +53,54 @@ class MessageReactionsModal 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,
),
),
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, messageTheme: messageTheme,
showReactions: false,
showUsername: false,
showReplyIndicator: false,
showTimestamp: false,
showSendingIndicator: DisplayWidget.gone,
shape: messageShape,
), ),
), ),
AbsorbPointer( SizedBox(
child: MessageWidget( height: 16,
key: Key('MessageWidget'), ),
reverse: reverse, if (message.latestReactions?.isNotEmpty == true)
message: message.copyWith( Flexible(
text: message.text.length > 200 child: Container(
? '${message.text.substring(0, 200)}...' constraints: BoxConstraints.loose(Size.fromHeight(400)),
: message.text, child: _buildReactionCard(context),
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,
),
),
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( Positioned(
child: Align( child: Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: Container( child: ReactionBubble(
child: ReactionBubble( reactions: [reaction],
reactions: [reaction], borderColor: messageTheme.reactionsBorderColor,
borderColor: messageTheme.reactionsBorderColor, backgroundColor: messageTheme.reactionsBackgroundColor,
backgroundColor: messageTheme.reactionsBackgroundColor, highlightOwnReactions: false,
flipTail: !isCurrentUser,
),
), ),
), ),
bottom: 0, bottom: 4,
left: isCurrentUser ? 0 : null, left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null, right: isCurrentUser ? 0 : null,
), ),
+9 -11
View File
@@ -240,7 +240,8 @@ class _MessageWidgetState extends State<MessageWidget> {
), ),
Flexible( Flexible(
child: PortalEntry( child: PortalEntry(
portal: ConstrainedBox( portal: Container(
transform: Matrix4.translationValues(-16, 0, 0),
child: _buildReactionIndicator(context), child: _buildReactionIndicator(context),
constraints: BoxConstraints(maxWidth: 22 * 6.0), constraints: BoxConstraints(maxWidth: 22 * 6.0),
), ),
@@ -399,16 +400,13 @@ class _MessageWidgetState extends State<MessageWidget> {
!widget.message.isDeleted) !widget.message.isDeleted)
? GestureDetector( ? GestureDetector(
onTap: () => _showMessageReactionsModalBottomSheet(context), onTap: () => _showMessageReactionsModalBottomSheet(context),
child: Transform.translate( child: ReactionBubble(
offset: Offset(-16, 0), key: ValueKey('${widget.message.id}.reactions'),
child: ReactionBubble( reverse: widget.reverse,
key: ValueKey('${widget.message.id}.reactions'), flipTail: widget.reverse,
reverse: widget.reverse, backgroundColor: widget.messageTheme.reactionsBackgroundColor,
flipTail: widget.reverse, borderColor: widget.messageTheme.reactionsBorderColor,
backgroundColor: widget.messageTheme.reactionsBackgroundColor, reactions: reactionsMap.values.toList(),
borderColor: widget.messageTheme.reactionsBorderColor,
reactions: reactionsMap.values.toList(),
),
), ),
) )
: SizedBox(), : SizedBox(),
+12 -12
View File
@@ -13,6 +13,7 @@ class ReactionBubble extends StatelessWidget {
@required this.backgroundColor, @required this.backgroundColor,
this.reverse = false, this.reverse = false,
this.flipTail = false, this.flipTail = false,
this.highlightOwnReactions = true,
}) : super(key: key); }) : super(key: key);
final List<Reaction> reactions; final List<Reaction> reactions;
@@ -20,6 +21,7 @@ class ReactionBubble extends StatelessWidget {
final Color backgroundColor; final Color backgroundColor;
final bool reverse; final bool reverse;
final bool flipTail; final bool flipTail;
final bool highlightOwnReactions;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -31,9 +33,9 @@ class ReactionBubble extends StatelessWidget {
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
Transform.translate( Transform.translate(
offset: Offset(reverse ? 5 : -5, 0), offset: Offset(reverse ? 2 : -2, 0),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(vertical: 6), padding: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all( border: Border.all(
color: borderColor, color: borderColor,
@@ -73,8 +75,8 @@ class ReactionBubble extends StatelessWidget {
), ),
Positioned( Positioned(
bottom: 0, bottom: 0,
left: reverse ? null : 16, left: reverse ? null : 11,
right: !reverse ? null : 16, right: !reverse ? null : 11,
child: _buildReactionsTail(context), child: _buildReactionsTail(context),
), ),
], ],
@@ -99,7 +101,8 @@ class ReactionBubble extends StatelessWidget {
child: Icon( child: Icon(
reactionIcon?.iconData ?? Icons.help_outline_rounded, reactionIcon?.iconData ?? Icons.help_outline_rounded,
size: 16, 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 ? StreamChatTheme.of(context).accentColor
: Colors.black.withOpacity(.5), : Colors.black.withOpacity(.5),
), ),
@@ -107,13 +110,10 @@ class ReactionBubble extends StatelessWidget {
} }
Widget _buildReactionsTail(BuildContext context) { Widget _buildReactionsTail(BuildContext context) {
final tail = Transform.translate( final tail = CustomPaint(
offset: Offset(-5, 0), painter: ReactionBubblePainter(
child: CustomPaint( backgroundColor,
painter: ReactionBubblePainter( borderColor,
backgroundColor,
borderColor,
),
), ),
); );