2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: Nicer reactions design with size animations

Browse source
This commit is contained in:
Krille 2024-03-13 14:24:00 +01:00
commit c028c69b2d
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
2 changed files with 44 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

23
lib/pages/chat/events/message.dart
View file

@ -396,15 +396,20 @@ class Message extends StatelessWidget {
), ),
), ),
row, row,
if (showReceiptsRow) AnimatedSize(
Padding( duration: FluffyThemes.animationDuration,
padding: EdgeInsets.only( curve: FluffyThemes.animationCurve,
top: 4.0, child: !showReceiptsRow
left: (ownMessage ? 0 : Avatar.defaultSize) + 12.0, ? const SizedBox.shrink()
right: 12.0, : Padding(
), padding: EdgeInsets.only(
child: MessageReactions(event, timeline), top: 4.0,
), left: (ownMessage ? 0 : Avatar.defaultSize) + 12.0,
right: ownMessage ? 0 : 12.0,
),
child: MessageReactions(event, timeline),
),
),
if (displayReadMarker) if (displayReadMarker)
Row( Row(
children: [ children: [

56
lib/pages/chat/events/message_reactions.dart
View file

@ -43,9 +43,11 @@ class MessageReactions extends StatelessWidget {
final reactionList = reactionMap.values.toList(); final reactionList = reactionMap.values.toList();
reactionList.sort((a, b) => b.count - a.count > 0 ? 1 : -1); reactionList.sort((a, b) => b.count - a.count > 0 ? 1 : -1);
final ownMessage = event.senderId == event.room.client.userID;
return Wrap( return Wrap(
spacing: 4.0, spacing: 4.0,
runSpacing: 4.0, runSpacing: 4.0,
alignment: ownMessage ? WrapAlignment.end : WrapAlignment.start,
children: [ children: [
...reactionList.map( ...reactionList.map(
(r) => _Reaction( (r) => _Reaction(
@ -77,8 +79,8 @@ class MessageReactions extends StatelessWidget {
), ),
if (allReactionEvents.any((e) => e.status.isSending)) if (allReactionEvents.any((e) => e.status.isSending))
const SizedBox( const SizedBox(
width: 28, width: 24,
height: 28, height: 24,
child: Padding( child: Padding(
padding: EdgeInsets.all(4.0), padding: EdgeInsets.all(4.0),
child: CircularProgressIndicator.adaptive(strokeWidth: 1), child: CircularProgressIndicator.adaptive(strokeWidth: 1),
@ -91,17 +93,17 @@ class MessageReactions extends StatelessWidget {
class _Reaction extends StatelessWidget { class _Reaction extends StatelessWidget {
final String? reactionKey; final String? reactionKey;
final int? count; final int count;
final bool? reacted; final bool? reacted;
final void Function()? onTap; final void Function()? onTap;
final void Function()? onLongPress; final void Function()? onLongPress;
const _Reaction({ const _Reaction({
this.reactionKey, required this.reactionKey,
this.count, required this.count,
this.reacted, required this.reacted,
this.onTap, required this.onTap,
this.onLongPress, required this.onLongPress,
}); });
@override @override
@ -109,7 +111,7 @@ class _Reaction extends StatelessWidget {
final textColor = Theme.of(context).brightness == Brightness.dark final textColor = Theme.of(context).brightness == Brightness.dark
? Colors.white ? Colors.white
: Colors.black; : Colors.black;
final color = Theme.of(context).scaffoldBackgroundColor; final color = Theme.of(context).colorScheme.background;
final fontSize = DefaultTextStyle.of(context).style.fontSize; final fontSize = DefaultTextStyle.of(context).style.fontSize;
Widget content; Widget content;
if (reactionKey!.startsWith('mxc://')) { if (reactionKey!.startsWith('mxc://')) {
@ -121,14 +123,16 @@ class _Reaction extends StatelessWidget {
width: 9999, width: 9999,
height: fontSize, height: fontSize,
), ),
const SizedBox(width: 4), if (count > 1) ...[
Text( const SizedBox(width: 4),
count.toString(), Text(
style: TextStyle( count.toString(),
color: textColor, style: TextStyle(
fontSize: DefaultTextStyle.of(context).style.fontSize, color: textColor,
fontSize: DefaultTextStyle.of(context).style.fontSize,
),
), ),
), ],
], ],
); );
} else { } else {
@ -137,7 +141,7 @@ class _Reaction extends StatelessWidget {
renderKey = renderKey.getRange(0, 9) + Characters('…'); renderKey = renderKey.getRange(0, 9) + Characters('…');
} }
content = Text( content = Text(
'$renderKey $count', renderKey.toString() + (count > 1 ? ' $count' : ''),
style: TextStyle( style: TextStyle(
color: textColor, color: textColor,
fontSize: DefaultTextStyle.of(context).style.fontSize, fontSize: DefaultTextStyle.of(context).style.fontSize,
@ -147,19 +151,19 @@ class _Reaction extends StatelessWidget {
return InkWell( return InkWell(
onTap: () => onTap != null ? onTap!() : null, onTap: () => onTap != null ? onTap!() : null,
onLongPress: () => onLongPress != null ? onLongPress!() : null, onLongPress: () => onLongPress != null ? onLongPress!() : null,
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, color: color,
border: reacted! border: Border.all(
? Border.all( width: 1,
width: 1, color: reacted!
color: Theme.of(context).colorScheme.primary, ? Theme.of(context).colorScheme.primary
) : Theme.of(context).colorScheme.primaryContainer,
: null, ),
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2),
), ),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 3), padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
child: content, child: content,
), ),
); );