chore: Follow up animate in

This commit is contained in:
krille-chan 2023-12-26 21:10:58 +01:00
parent f07aba448d
commit 627f7b88d4
No known key found for this signature in database

View file

@ -122,183 +122,215 @@ class Message extends StatelessWidget {
: Theme.of(context).colorScheme.primaryContainer; : Theme.of(context).colorScheme.primaryContainer;
} }
final row = Row( final resetAnimateIn = this.resetAnimateIn;
crossAxisAlignment: CrossAxisAlignment.start, var animateIn = this.animateIn;
mainAxisAlignment: rowMainAxisAlignment,
children: [ final row = StatefulBuilder(
if (sameSender || ownMessage) builder: (context, setState) {
SizedBox( if (animateIn && resetAnimateIn != null) {
width: Avatar.defaultSize, WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
child: Center( animateIn = false;
child: SizedBox( setState(resetAnimateIn);
width: 16, });
height: 16, }
child: event.status == EventStatus.sending return AnimatedSlide(
? const CircularProgressIndicator.adaptive( offset: Offset(0, animateIn ? 1 : 0),
strokeWidth: 2, duration: FluffyThemes.animationDuration,
) curve: FluffyThemes.animationCurve,
: event.status == EventStatus.error child: Row(
? const Icon(Icons.error, color: Colors.red)
: null,
),
),
)
else
FutureBuilder<User?>(
future: event.fetchSenderUser(),
builder: (context, snapshot) {
final user = snapshot.data ?? event.senderFromMemoryOrFallback;
return Avatar(
mxContent: user.avatarUrl,
name: user.calcDisplayname(),
presenceUserId: user.stateKey,
onTap: () => onAvatarTab(event),
);
},
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisAlignment: rowMainAxisAlignment,
children: [ children: [
if (!sameSender) if (sameSender || ownMessage)
Padding( SizedBox(
padding: const EdgeInsets.only(left: 8.0, bottom: 4), width: Avatar.defaultSize,
child: ownMessage || event.room.isDirectChat child: Center(
? const SizedBox(height: 12) child: SizedBox(
: FutureBuilder<User?>( width: 16,
future: event.fetchSenderUser(), height: 16,
builder: (context, snapshot) { child: event.status == EventStatus.error
final displayname = ? const Icon(Icons.error, color: Colors.red)
snapshot.data?.calcDisplayname() ?? : null,
event.senderFromMemoryOrFallback
.calcDisplayname();
return Text(
displayname,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: (Theme.of(context).brightness ==
Brightness.light
? displayname.color
: displayname.lightColorText),
),
);
},
),
),
Container(
alignment: alignment,
padding: const EdgeInsets.only(left: 8),
child: Material(
color: noBubble ? Colors.transparent : color,
clipBehavior: Clip.antiAlias,
elevation: highlightMarker || selected ? 10 : 0,
shape: RoundedRectangleBorder(
borderRadius: borderRadius,
side: BorderSide(
width: highlightMarker || selected ? 1 : 0,
color: selected
? Theme.of(context).colorScheme.onBackground
: highlightMarker
? Theme.of(context).colorScheme.primary
: Colors.transparent,
), ),
), ),
child: Container( )
decoration: BoxDecoration( else
borderRadius: FutureBuilder<User?>(
BorderRadius.circular(AppConfig.borderRadius), future: event.fetchSenderUser(),
), builder: (context, snapshot) {
padding: noBubble || noPadding final user =
? EdgeInsets.zero snapshot.data ?? event.senderFromMemoryOrFallback;
: const EdgeInsets.symmetric( return Avatar(
horizontal: 16, mxContent: user.avatarUrl,
vertical: 8, name: user.calcDisplayname(),
presenceUserId: user.stateKey,
onTap: () => onAvatarTab(event),
);
},
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (!sameSender)
Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 4),
child: ownMessage || event.room.isDirectChat
? const SizedBox(height: 12)
: FutureBuilder<User?>(
future: event.fetchSenderUser(),
builder: (context, snapshot) {
final displayname =
snapshot.data?.calcDisplayname() ??
event.senderFromMemoryOrFallback
.calcDisplayname();
return Text(
displayname,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: (Theme.of(context).brightness ==
Brightness.light
? displayname.color
: displayname.lightColorText),
),
);
},
),
),
Container(
alignment: alignment,
padding: const EdgeInsets.only(left: 8),
child: AnimatedOpacity(
opacity: animateIn
? 0
: event.redacted ||
event.messageType ==
MessageTypes.BadEncrypted ||
event.status.isSending
? 0.5
: 1,
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
child: Material(
color: noBubble ? Colors.transparent : color,
clipBehavior: Clip.antiAlias,
elevation: highlightMarker || selected ? 10 : 0,
shape: RoundedRectangleBorder(
borderRadius: borderRadius,
side: BorderSide(
width: highlightMarker || selected ? 1 : 0,
color: selected
? Theme.of(context).colorScheme.onBackground
: highlightMarker
? Theme.of(context).colorScheme.primary
: Colors.transparent,
),
), ),
constraints: const BoxConstraints( child: Container(
maxWidth: FluffyThemes.columnWidth * 1.5, decoration: BoxDecoration(
), borderRadius:
child: Column( BorderRadius.circular(AppConfig.borderRadius),
mainAxisSize: MainAxisSize.min, ),
crossAxisAlignment: CrossAxisAlignment.start, padding: noBubble || noPadding
children: <Widget>[ ? EdgeInsets.zero
if (event.relationshipType == RelationshipTypes.reply) : const EdgeInsets.symmetric(
FutureBuilder<Event?>( horizontal: 16,
future: event.getReplyEvent(timeline), vertical: 8,
builder: (BuildContext context, snapshot) { ),
final replyEvent = snapshot.hasData constraints: const BoxConstraints(
? snapshot.data! maxWidth: FluffyThemes.columnWidth * 1.5,
: Event( ),
eventId: event.relationshipEventId!, child: Column(
content: { mainAxisSize: MainAxisSize.min,
'msgtype': 'm.text', crossAxisAlignment: CrossAxisAlignment.start,
'body': '...', children: <Widget>[
}, if (event.relationshipType ==
senderId: event.senderId, RelationshipTypes.reply)
type: 'm.room.message', FutureBuilder<Event?>(
room: event.room, future: event.getReplyEvent(timeline),
status: EventStatus.sent, builder: (BuildContext context, snapshot) {
originServerTs: DateTime.now(), final replyEvent = snapshot.hasData
); ? snapshot.data!
return Padding( : Event(
padding: const EdgeInsets.only(bottom: 4.0), eventId:
child: InkWell( event.relationshipEventId!,
borderRadius: ReplyContent.borderRadius, content: {
onTap: () => 'msgtype': 'm.text',
scrollToEventId(replyEvent.eventId), 'body': '...',
child: AbsorbPointer( },
child: ReplyContent( senderId: event.senderId,
replyEvent, type: 'm.room.message',
ownMessage: ownMessage, room: event.room,
timeline: timeline, status: EventStatus.sent,
originServerTs: DateTime.now(),
);
return Padding(
padding:
const EdgeInsets.only(bottom: 4.0),
child: InkWell(
borderRadius:
ReplyContent.borderRadius,
onTap: () => scrollToEventId(
replyEvent.eventId,
),
child: AbsorbPointer(
child: ReplyContent(
replyEvent,
ownMessage: ownMessage,
timeline: timeline,
),
),
),
);
},
),
MessageContent(
displayEvent,
textColor: textColor,
onInfoTab: onInfoTab,
borderRadius: borderRadius,
),
if (event.hasAggregatedEvents(
timeline,
RelationshipTypes.edit,
))
Padding(
padding: const EdgeInsets.only(
top: 4.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.edit_outlined,
color: textColor.withAlpha(164),
size: 14,
),
Text(
' - ${displayEvent.originServerTs.localizedTimeShort(context)}',
style: TextStyle(
color: textColor.withAlpha(164),
fontSize: 12,
),
),
],
), ),
), ),
),
);
},
),
MessageContent(
displayEvent,
textColor: textColor,
onInfoTab: onInfoTab,
borderRadius: borderRadius,
),
if (event.hasAggregatedEvents(
timeline,
RelationshipTypes.edit,
))
Padding(
padding: const EdgeInsets.only(
top: 4.0,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.edit_outlined,
color: textColor.withAlpha(164),
size: 14,
),
Text(
' - ${displayEvent.originServerTs.localizedTimeShort(context)}',
style: TextStyle(
color: textColor.withAlpha(164),
fontSize: 12,
),
),
], ],
), ),
), ),
], ),
),
), ),
), ],
), ),
), ),
], ],
), ),
), );
], },
); );
Widget container; Widget container;
if (event.hasAggregatedEvents(timeline, RelationshipTypes.reaction) || if (event.hasAggregatedEvents(timeline, RelationshipTypes.reaction) ||
@ -381,115 +413,93 @@ class Message extends StatelessWidget {
container = row; container = row;
} }
if (event.messageType == MessageTypes.BadEncrypted) {
container = Opacity(opacity: 0.4, child: container);
}
TapDownDetails? lastTapDownDetails; TapDownDetails? lastTapDownDetails;
final resetAnimateIn = this.resetAnimateIn;
var animateIn = this.animateIn;
return StatefulBuilder( return Center(
builder: (context, setState) { child: Swipeable(
if (animateIn && resetAnimateIn != null) { key: ValueKey(event.eventId),
WidgetsBinding.instance.addPostFrameCallback((timeStamp) { background: const Padding(
animateIn = false; padding: EdgeInsets.symmetric(horizontal: 12.0),
setState(resetAnimateIn);
});
}
return AnimatedSlide(
offset: Offset(0, animateIn ? 1 : 0),
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
child: Center( child: Center(
child: Swipeable( child: Icon(Icons.check_outlined),
key: ValueKey(event.eventId), ),
background: const Padding( ),
padding: EdgeInsets.symmetric(horizontal: 12.0), direction: SwipeDirection.endToStart,
child: Center( onSwipe: (_) => onSwipe(),
child: Icon(Icons.check_outlined), child: HoverBuilder(
), builder: (context, hovered) => GestureDetector(
), onTapDown: (details) {
direction: SwipeDirection.endToStart, lastTapDownDetails = details;
onSwipe: (_) => onSwipe(), },
child: HoverBuilder( onTap: () {
builder: (context, hovered) => GestureDetector( if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) {
onTapDown: (details) { return;
lastTapDownDetails = details; }
}, onSelect(event);
onTap: () { },
if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) { child: Stack(
return; children: [
} Container(
onSelect(event); constraints: const BoxConstraints(
}, maxWidth: FluffyThemes.columnWidth * 2.5,
child: Stack(
children: [
Container(
constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth * 2.5,
),
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: container,
),
if (hovered || selected)
Positioned(
left: ownMessage ? 4 : null,
right: ownMessage ? null : 4,
bottom: 4,
child: Material(
color: Theme.of(context)
.colorScheme
.surfaceVariant
.withOpacity(0.9),
elevation: Theme.of(context)
.appBarTheme
.scrolledUnderElevation ??
4,
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
shadowColor:
Theme.of(context).appBarTheme.shadowColor,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (hovered) ...[
IconButton(
icon: const Icon(
Icons.reply_outlined,
size: 16,
),
tooltip: L10n.of(context)!.reply,
onPressed: () => onSwipe(),
),
],
IconButton(
icon: Icon(
selected
? Icons.check_circle
: longPressSelect
? Icons.check_circle_outlined
: Icons.menu,
size: 16,
),
tooltip: L10n.of(context)!.select,
onPressed: () => onSelect(event),
),
],
),
),
),
],
), ),
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
vertical: 4.0,
),
child: container,
), ),
), if (hovered || selected)
Positioned(
left: ownMessage ? 4 : null,
right: ownMessage ? null : 4,
bottom: 4,
child: Material(
color: Theme.of(context)
.colorScheme
.surfaceVariant
.withOpacity(0.9),
elevation: Theme.of(context)
.appBarTheme
.scrolledUnderElevation ??
4,
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
shadowColor: Theme.of(context).appBarTheme.shadowColor,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (hovered) ...[
IconButton(
icon: const Icon(
Icons.reply_outlined,
size: 16,
),
tooltip: L10n.of(context)!.reply,
onPressed: () => onSwipe(),
),
],
IconButton(
icon: Icon(
selected
? Icons.check_circle
: longPressSelect
? Icons.check_circle_outlined
: Icons.menu,
size: 16,
),
tooltip: L10n.of(context)!.select,
onPressed: () => onSelect(event),
),
],
),
),
),
],
), ),
), ),
); ),
}, ),
); );
} }
} }