mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 09:05:10 +00:00
feat: Animate in new events in timeline
This commit is contained in:
parent
8f3f5cdb8b
commit
f07aba448d
3 changed files with 120 additions and 78 deletions
|
@ -304,6 +304,13 @@ class ChatController extends State<ChatPageWithRoom> {
|
||||||
|
|
||||||
Future<void>? loadTimelineFuture;
|
Future<void>? loadTimelineFuture;
|
||||||
|
|
||||||
|
int? animateInEventIndex;
|
||||||
|
|
||||||
|
void onInsert(int i) {
|
||||||
|
// setState will be called by updateView() anyway
|
||||||
|
animateInEventIndex = i;
|
||||||
|
}
|
||||||
|
|
||||||
Future<void> _getTimeline({
|
Future<void> _getTimeline({
|
||||||
String? eventContextId,
|
String? eventContextId,
|
||||||
}) async {
|
}) async {
|
||||||
|
@ -317,11 +324,15 @@ class ChatController extends State<ChatPageWithRoom> {
|
||||||
timeline = await room.getTimeline(
|
timeline = await room.getTimeline(
|
||||||
onUpdate: updateView,
|
onUpdate: updateView,
|
||||||
eventContextId: eventContextId,
|
eventContextId: eventContextId,
|
||||||
|
onInsert: onInsert,
|
||||||
);
|
);
|
||||||
} catch (e, s) {
|
} catch (e, s) {
|
||||||
Logs().w('Unable to load timeline on event ID $eventContextId', e, s);
|
Logs().w('Unable to load timeline on event ID $eventContextId', e, s);
|
||||||
if (!mounted) return;
|
if (!mounted) return;
|
||||||
timeline = await room.getTimeline(onUpdate: updateView);
|
timeline = await room.getTimeline(
|
||||||
|
onUpdate: updateView,
|
||||||
|
onInsert: onInsert,
|
||||||
|
);
|
||||||
if (!mounted) return;
|
if (!mounted) return;
|
||||||
if (e is TimeoutException || e is IOException) {
|
if (e is TimeoutException || e is IOException) {
|
||||||
_showScrollUpMaterialBanner(eventContextId!);
|
_showScrollUpMaterialBanner(eventContextId!);
|
||||||
|
|
|
@ -27,6 +27,7 @@ class ChatEventList extends StatelessWidget {
|
||||||
final events = controller.timeline!.events
|
final events = controller.timeline!.events
|
||||||
.where((event) => event.isVisibleInGui)
|
.where((event) => event.isVisibleInGui)
|
||||||
.toList();
|
.toList();
|
||||||
|
final animateInEventIndex = controller.animateInEventIndex;
|
||||||
|
|
||||||
// create a map of eventId --> index to greatly improve performance of
|
// create a map of eventId --> index to greatly improve performance of
|
||||||
// ListView's findChildIndexCallback
|
// ListView's findChildIndexCallback
|
||||||
|
@ -101,6 +102,8 @@ class ChatEventList extends StatelessWidget {
|
||||||
|
|
||||||
// The message at this index:
|
// The message at this index:
|
||||||
final event = events[i];
|
final event = events[i];
|
||||||
|
final animateIn = animateInEventIndex != null &&
|
||||||
|
event == controller.timeline!.events[animateInEventIndex];
|
||||||
|
|
||||||
return AutoScrollTag(
|
return AutoScrollTag(
|
||||||
key: ValueKey(event.eventId),
|
key: ValueKey(event.eventId),
|
||||||
|
@ -108,6 +111,10 @@ class ChatEventList extends StatelessWidget {
|
||||||
controller: controller.scrollController,
|
controller: controller.scrollController,
|
||||||
child: Message(
|
child: Message(
|
||||||
event,
|
event,
|
||||||
|
animateIn: animateIn,
|
||||||
|
resetAnimateIn: () {
|
||||||
|
controller.animateInEventIndex = null;
|
||||||
|
},
|
||||||
onSwipe: () => controller.replyAction(replyTo: event),
|
onSwipe: () => controller.replyAction(replyTo: event),
|
||||||
onInfoTab: controller.showEventInfo,
|
onInfoTab: controller.showEventInfo,
|
||||||
onAvatarTab: (Event event) => showAdaptiveBottomSheet(
|
onAvatarTab: (Event event) => showAdaptiveBottomSheet(
|
||||||
|
|
|
@ -32,6 +32,8 @@ class Message extends StatelessWidget {
|
||||||
final bool selected;
|
final bool selected;
|
||||||
final Timeline timeline;
|
final Timeline timeline;
|
||||||
final bool highlightMarker;
|
final bool highlightMarker;
|
||||||
|
final bool animateIn;
|
||||||
|
final void Function()? resetAnimateIn;
|
||||||
|
|
||||||
const Message(
|
const Message(
|
||||||
this.event, {
|
this.event, {
|
||||||
|
@ -46,6 +48,8 @@ class Message extends StatelessWidget {
|
||||||
this.selected = false,
|
this.selected = false,
|
||||||
required this.timeline,
|
required this.timeline,
|
||||||
this.highlightMarker = false,
|
this.highlightMarker = false,
|
||||||
|
this.animateIn = false,
|
||||||
|
this.resetAnimateIn,
|
||||||
super.key,
|
super.key,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -382,90 +386,110 @@ class Message extends StatelessWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
TapDownDetails? lastTapDownDetails;
|
TapDownDetails? lastTapDownDetails;
|
||||||
|
final resetAnimateIn = this.resetAnimateIn;
|
||||||
|
var animateIn = this.animateIn;
|
||||||
|
|
||||||
return Center(
|
return StatefulBuilder(
|
||||||
child: Swipeable(
|
builder: (context, setState) {
|
||||||
key: ValueKey(event.eventId),
|
if (animateIn && resetAnimateIn != null) {
|
||||||
background: const Padding(
|
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
|
||||||
padding: EdgeInsets.symmetric(horizontal: 12.0),
|
animateIn = false;
|
||||||
|
setState(resetAnimateIn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return AnimatedSlide(
|
||||||
|
offset: Offset(0, animateIn ? 1 : 0),
|
||||||
|
duration: FluffyThemes.animationDuration,
|
||||||
|
curve: FluffyThemes.animationCurve,
|
||||||
child: Center(
|
child: Center(
|
||||||
child: Icon(Icons.check_outlined),
|
child: Swipeable(
|
||||||
),
|
key: ValueKey(event.eventId),
|
||||||
),
|
background: const Padding(
|
||||||
direction: SwipeDirection.endToStart,
|
padding: EdgeInsets.symmetric(horizontal: 12.0),
|
||||||
onSwipe: (_) => onSwipe(),
|
child: Center(
|
||||||
child: HoverBuilder(
|
child: Icon(Icons.check_outlined),
|
||||||
builder: (context, hovered) => GestureDetector(
|
|
||||||
onTapDown: (details) {
|
|
||||||
lastTapDownDetails = details;
|
|
||||||
},
|
|
||||||
onTap: () {
|
|
||||||
if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) return;
|
|
||||||
onSelect(event);
|
|
||||||
},
|
|
||||||
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(
|
direction: SwipeDirection.endToStart,
|
||||||
left: ownMessage ? 4 : null,
|
onSwipe: (_) => onSwipe(),
|
||||||
right: ownMessage ? null : 4,
|
child: HoverBuilder(
|
||||||
bottom: 4,
|
builder: (context, hovered) => GestureDetector(
|
||||||
child: Material(
|
onTapDown: (details) {
|
||||||
color: Theme.of(context)
|
lastTapDownDetails = details;
|
||||||
.colorScheme
|
},
|
||||||
.surfaceVariant
|
onTap: () {
|
||||||
.withOpacity(0.9),
|
if (lastTapDownDetails?.kind == PointerDeviceKind.mouse) {
|
||||||
elevation: Theme.of(context)
|
return;
|
||||||
.appBarTheme
|
}
|
||||||
.scrolledUnderElevation ??
|
onSelect(event);
|
||||||
4,
|
},
|
||||||
borderRadius:
|
child: Stack(
|
||||||
BorderRadius.circular(AppConfig.borderRadius),
|
children: [
|
||||||
shadowColor: Theme.of(context).appBarTheme.shadowColor,
|
Container(
|
||||||
child: Row(
|
constraints: const BoxConstraints(
|
||||||
mainAxisSize: MainAxisSize.min,
|
maxWidth: FluffyThemes.columnWidth * 2.5,
|
||||||
children: [
|
),
|
||||||
if (hovered) ...[
|
padding: const EdgeInsets.symmetric(
|
||||||
IconButton(
|
horizontal: 8.0,
|
||||||
icon: const Icon(
|
vertical: 4.0,
|
||||||
Icons.reply_outlined,
|
),
|
||||||
size: 16,
|
child: container,
|
||||||
),
|
|
||||||
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),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
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),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
);
|
||||||
),
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue