fix message reaction modal

This commit is contained in:
Salvatore Giordano
2020-10-21 10:26:36 +02:00
parent cbd430fd72
commit 886b9faf37
+63 -61
View File
@@ -119,30 +119,26 @@ class MessageReactionsModal extends StatelessWidget {
), ),
), ),
Flexible( Flexible(
child: Padding( child: SingleChildScrollView(
padding: const EdgeInsets.only( child: Padding(
left: 16.0, padding: const EdgeInsets.only(
right: 16, left: 18,
bottom: 16, right: 18,
), bottom: 26,
child: GridView.builder( ),
shrinkWrap: true, child: Wrap(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( spacing: 16,
crossAxisCount: 4, runSpacing: 22,
crossAxisSpacing: 16, alignment: WrapAlignment.start,
childAspectRatio: 0.75, children:
mainAxisSpacing: 22, [...message.latestReactions, ...message.latestReactions]
.map((e) => _buildReaction(
e,
currentUser,
context,
))
.toList(),
), ),
itemCount: message.latestReactions.length,
itemBuilder: (context, i) {
final reaction = message.latestReactions[i];
return _buildReaction(
reaction,
currentUser,
context,
);
},
), ),
), ),
), ),
@@ -152,51 +148,57 @@ class MessageReactionsModal extends StatelessWidget {
); );
} }
Column _buildReaction( Widget _buildReaction(
Reaction reaction, Reaction reaction,
User currentUser, User currentUser,
BuildContext context, BuildContext context,
) { ) {
final isCurrentUser = reaction.user.id == currentUser.id; final isCurrentUser = reaction.user.id == currentUser.id;
return Column( return ConstrainedBox(
mainAxisSize: MainAxisSize.min, constraints: BoxConstraints.loose(Size(
mainAxisAlignment: MainAxisAlignment.start, 64,
crossAxisAlignment: CrossAxisAlignment.center, 98,
children: [ )),
Stack( child: Column(
children: [ mainAxisSize: MainAxisSize.min,
UserAvatar( mainAxisAlignment: MainAxisAlignment.start,
onTap: onUserAvatarTap, crossAxisAlignment: CrossAxisAlignment.center,
user: reaction.user, children: [
constraints: BoxConstraints.tightFor( Stack(
height: 64, children: [
width: 64, UserAvatar(
onTap: onUserAvatarTap,
user: reaction.user,
constraints: BoxConstraints.tightFor(
height: 64,
width: 64,
),
borderRadius: BorderRadius.circular(32),
), ),
borderRadius: BorderRadius.circular(32), Positioned(
), child: ReactionBubble(
Positioned( reactions: [reaction],
child: ReactionBubble( borderColor: isCurrentUser
reactions: [reaction], ? messageTheme.ownReactionsBorderColor
borderColor: isCurrentUser : messageTheme.otherReactionsBorderColor,
? messageTheme.ownReactionsBorderColor backgroundColor: isCurrentUser
: messageTheme.otherReactionsBorderColor, ? messageTheme.ownReactionsBackgroundColor
backgroundColor: isCurrentUser : messageTheme.otherReactionsBackgroundColor,
? messageTheme.ownReactionsBackgroundColor flipTail: !isCurrentUser,
: messageTheme.otherReactionsBackgroundColor, ),
flipTail: !isCurrentUser, bottom: 0,
left: isCurrentUser ? 0 : null,
right: isCurrentUser ? 0 : null,
), ),
bottom: 0, ],
left: isCurrentUser ? 0 : null, ),
right: isCurrentUser ? 0 : null, Text(
), reaction.user.name,
], style: Theme.of(context).textTheme.subtitle2,
), textAlign: TextAlign.center,
Text( ),
reaction.user.name, ],
style: Theme.of(context).textTheme.subtitle2, ),
textAlign: TextAlign.center,
),
],
); );
} }
} }