ui: Support edited/moved marker swipe animation.

PIG208 · PIG208 · commit 468a74f38ccb · 2024-07-29T17:25:36.000-04:00
This adds full support to the edited/moved marker feature by allowing the user to expand the edited/moved marker to show a helper text on a colored block in the background. The marker retracts as soon as the user releases the touch. Fixes zulip#171. Signed-off-by: Zixuan James Li <zixuan@zulip.com>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -483,5 +483,13 @@
   "notifSelfUser": "You",
   "@notifSelfUser": {
     "description": "Display name for the user themself, to show after replying in an Android notification"
+  },
+  "messageIsEdited": "Edited",
+  "@messageIsEdited": {
+    "description": "Text that appears on a marker next to an edited message."
+  },
+  "messageIsMoved": "Moved",
+  "@messageIsMoved": {
+    "description": "Text that appears on a marker next to a moved message."
   }
 }
diff --git a/lib/widgets/edit_state_marker.dart b/lib/widgets/edit_state_marker.dart
@@ -1,11 +1,15 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 
 import '../api/model/model.dart';
 import 'icons.dart';
 import 'message_list.dart';
 import 'text.dart';
 
-class EditStateMarker extends StatelessWidget {
+class EditStateMarker extends StatefulWidget {
   const EditStateMarker({
     super.key,
     required this.editState,
@@ -15,60 +19,163 @@ class EditStateMarker extends StatelessWidget {
   final MessageEditState editState;
   final List<Widget> children;
 
+  @override
+  State<StatefulWidget> createState() => _EditStateMarkerState();
+}
+
+class _EditStateMarkerState extends State<EditStateMarker> with TickerProviderStateMixin {
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      // The duration is only used when `_controller.reverse()` is called,
+      // i.e.: when the drag is released and the marker gets collapsed.
+      duration: const Duration(milliseconds: 200),
+      lowerBound: _EditStateMarkerPill.widthCollapsed,
+      upperBound: _EditStateMarkerPill.widthExpanded,
+      vsync: this)
+      ..addListener(() => setState((){}));
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  late AnimationController _controller;
+
+  void _handleDragUpdate(DragUpdateDetails details) {
+    _controller.value += details.delta.dx;
+  }
+
+  void _handleDragEnd(DragEndDetails details) {
+    _controller.reverse();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final hasMarker = editState != MessageEditState.none;
+    final hasMarker = widget.editState != MessageEditState.none;
 
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: localizedTextBaseline(context),
-      children: [
-        hasMarker
-          ? _EditStateMarkerPill(editState: editState)
-          : const SizedBox(width: _EditStateMarkerPill.widthCollapsed),
-        ...children,
-      ],
+    final content = LayoutBuilder(
+      builder: (context, constraints) => OverflowBox(
+        fit: OverflowBoxFit.deferToChild,
+        alignment: Alignment.topLeft,
+        maxWidth: double.infinity,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.baseline,
+          textBaseline: localizedTextBaseline(context),
+          children: [
+            hasMarker
+              ? _EditStateMarkerPill(
+                  editState: widget.editState,
+                  animation: _controller)
+                : const SizedBox(width: _EditStateMarkerPill.widthCollapsed),
+              SizedBox(
+                width: constraints.maxWidth - _EditStateMarkerPill.widthCollapsed,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.baseline,
+                  textBaseline: localizedTextBaseline(context),
+                  children: widget.children),
+              ),
+          ])),
     );
-  }
+
+    if (!hasMarker) return content;
+
+    return GestureDetector(
+      onHorizontalDragEnd: _handleDragEnd,
+      onHorizontalDragUpdate: _handleDragUpdate,
+      child: content,
+    );
+   }
 }
 
 class _EditStateMarkerPill extends StatelessWidget {
-  const _EditStateMarkerPill({required this.editState});
+  const _EditStateMarkerPill({required this.editState, required this.animation});
 
   final MessageEditState editState;
+  final Animation<double> animation;
 
   /// The minimum width of the marker.
-  // Currently, only the collapsed state of the marker has been implemented,
-  // where only the marker icon, not the marker text, is visible.
+  ///
+  /// This is when no drag has been performed on the message row
+  /// where only the moved/edited icon, not the text, is visible.
   static const double widthCollapsed = 16;
 
+  /// The maximum width of the marker.
+  ///
+  /// This is typically wider than the colored pill when the marker is fully
+  /// expanded. At that point only the blank space to the right of the colored
+  /// block will grow until the marker reaches this width.
+  static const double widthExpanded = 100;
+
+  double get _animationProgress => (animation.value - widthCollapsed) / widthExpanded;
+
   @override
   Widget build(BuildContext context) {
     final messageListTheme = MessageListTheme.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
 
     final IconData icon;
-    final Offset offset;
+    final String markerText;
     switch (editState) {
       case MessageEditState.none:
         assert(false);
         return const SizedBox(width: widthCollapsed);
       case MessageEditState.edited:
         icon = ZulipIcons.edited;
-        // These offsets are chosen ad hoc, but give a good vertical alignment
-        // of the icons with the first line of the message, when the message
-        // begins with a paragraph, at default text scaling.  See:
-        //   https://github.com/zulip/zulip-flutter/pull/762#issuecomment-2232041922
-        offset = const Offset(0, 2);
+        markerText = zulipLocalizations.messageIsEdited;
+        break;
       case MessageEditState.moved:
         icon = ZulipIcons.message_moved;
-        offset = const Offset(0, 3);
+        markerText = zulipLocalizations.messageIsMoved;
+        break;
     }
 
+    var marker = Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Flexible(
+          fit: FlexFit.loose,
+          child: Text(markerText,
+            overflow: TextOverflow.clip,
+            softWrap: false,
+            textAlign: TextAlign.center,
+            style: TextStyle(fontSize: 15, color: Color.lerp(
+              messageListTheme.editedMovedMarkerExpanded.withAlpha(0),
+              messageListTheme.editedMovedMarkerExpanded,
+              _animationProgress)))),
+        Transform.translate(
+          // This offset is chosen ad hoc, but give a good vertical alignment
+          // of the icons with the first line of the message, when the message
+          // begins with a paragraph, at default text scaling.  See:
+          //   https://github.com/zulip/zulip-flutter/pull/762#issuecomment-2232041922
+          offset: const Offset(0, 1),
+          child: Icon(icon, size: 16, color: Color.lerp(
+              messageListTheme.editedMovedMarkerCollapsed,
+              messageListTheme.editedMovedMarkerExpanded,
+              _animationProgress)),
+        ),
+      ],
+    );
+
     return ConstrainedBox(
-      constraints: const BoxConstraints(maxWidth: widthCollapsed),
-      child: Transform.translate(
-        offset: offset,
-        child: Icon(
-          icon, size: 16, color: messageListTheme.editedMovedMarkerCollapsed)));
+      constraints: BoxConstraints(maxWidth: animation.value),
+      child: Container(
+        margin: EdgeInsets.only(left: lerpDouble(0, 8, _animationProgress)!, right: lerpDouble(0, 3, _animationProgress)!),
+        clipBehavior: Clip.hardEdge,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(3),
+          color: Color.lerp(
+            messageListTheme.editedMovedMarkerBg.withAlpha(0),
+            messageListTheme.editedMovedMarkerBg,
+            _animationProgress)),
+        child: Padding(
+          padding: EdgeInsets.only(left: lerpDouble(0, 3, _animationProgress)!),
+          child: marker),
+      ),
+    );
   }
 }
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -31,6 +31,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Colors.black,
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 0.15).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
+      editedMovedMarkerBg: const Color(0xffddecf6),
+      editedMovedMarkerExpanded: const Color(0xff26516e),
       editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
       messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.2).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
@@ -59,6 +61,10 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
       dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
       // TODO(#95) need proper dark-theme color (this is ad hoc)
+      editedMovedMarkerBg: const Color(0xffddecf6),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
+      editedMovedMarkerExpanded: const Color(0xff26516e),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
       editedMovedMarkerCollapsed: const Color.fromARGB(128, 214, 202, 194),
       messageTimestamp: const HSLColor.fromAHSL(0.6, 0, 0, 1).toColor(),
       recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
@@ -84,6 +90,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.dateSeparator,
     required this.dateSeparatorText,
     required this.dmRecipientHeaderBg,
+    required this.editedMovedMarkerBg,
+    required this.editedMovedMarkerExpanded,
     required this.editedMovedMarkerCollapsed,
     required this.messageTimestamp,
     required this.recipientHeaderText,
@@ -109,6 +117,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color dateSeparator;
   final Color dateSeparatorText;
   final Color dmRecipientHeaderBg;
+  final Color editedMovedMarkerBg;
+  final Color editedMovedMarkerExpanded;
   final Color editedMovedMarkerCollapsed;
   final Color messageTimestamp;
   final Color recipientHeaderText;
@@ -124,7 +134,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   MessageListTheme copyWith({
     Color? dateSeparator,
     Color? dateSeparatorText,
-    Color? dmRecipientHeaderBg,
+    Color? editedMovedMarkerBg,
+    Color? editedMovedMarkerExpanded,
     Color? editedMovedMarkerCollapsed,
     Color? messageTimestamp,
     Color? recipientHeaderText,
@@ -140,6 +151,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dateSeparatorText: dateSeparatorText ?? this.dateSeparatorText,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
+      editedMovedMarkerBg: editedMovedMarkerBg ?? this.editedMovedMarkerBg,
+      editedMovedMarkerExpanded: editedMovedMarkerExpanded ?? this.editedMovedMarkerExpanded,
       editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
       messageTimestamp: messageTimestamp ?? this.messageTimestamp,
       recipientHeaderText: recipientHeaderText ?? this.recipientHeaderText,
@@ -162,6 +175,8 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
       dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
+      editedMovedMarkerBg: Color.lerp(editedMovedMarkerBg, other.editedMovedMarkerBg, t)!,
+      editedMovedMarkerExpanded: Color.lerp(editedMovedMarkerExpanded, other.editedMovedMarkerExpanded, t)!,
       editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,

Original file line number	Diff line number	Diff line change
`@@ -483,5 +483,13 @@`
`483`	`483`	`"notifSelfUser": "You",`
`484`	`484`	`"@notifSelfUser": {`
`485`	`485`	`"description": "Display name for the user themself, to show after replying in an Android notification"`
	`486`	`+ },`
	`487`	`+ "messageIsEdited": "Edited",`
	`488`	`+ "@messageIsEdited": {`
	`489`	`+ "description": "Text that appears on a marker next to an edited message."`
	`490`	`+ },`
	`491`	`+ "messageIsMoved": "Moved",`
	`492`	`+ "@messageIsMoved": {`
	`493`	`+ "description": "Text that appears on a marker next to a moved message."`
`486`	`494`	`}`
`487`	`495`	`}`