ui: Support edited/moved marker swipe animation.

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 <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -479,5 +479,13 @@
       "senderFullName": {"type": "String", "example": "Alice"},
       "numOthers": {"type": "int", "example": "4"}
     }
+  },
+  "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."
   }
 }

lib/widgets/swipable_message_row.dart

@@ -1,5 +1,8 @@
+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';
@@ -20,61 +23,167 @@ class SwipableMessageRow extends StatefulWidget {
   State<StatefulWidget> createState() => _SwipableMessageRowState();
 }
 
-class _SwipableMessageRowState extends State<SwipableMessageRow> {
+class _SwipableMessageRowState extends State<SwipableMessageRow> 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: _EditStateMarker.widthCollapsed,
+      upperBound: _EditStateMarker.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 = widget.message.editState != MessageEditState.none;
 
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: localizedTextBaseline(context),
-      children: [
-        hasMarker
-          ? _EditStateMarker(editState: widget.message.editState)
-          : const SizedBox(width: 16),
-        ...widget.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
+              ? _EditStateMarker(
+                  editState: widget.message.editState,
+                  animation: _controller)
+                : const SizedBox(width: 16),
+              SizedBox(
+                width: constraints.maxWidth - 16,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.baseline,
+                  textBaseline: localizedTextBaseline(context),
+                  children: widget.children),
+              ),
+          ])),
     );
-  }
+
+    if (!hasMarker) return content;
+
+    return GestureDetector(
+      onHorizontalDragEnd: _handleDragEnd,
+      onHorizontalDragUpdate: _handleDragUpdate,
+      child: content,
+    );
+   }
 }
 
 class _EditStateMarker extends StatelessWidget {
   /// 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;
+
   const _EditStateMarker({
     required MessageEditState editState,
-  }) : _editState = editState;
+    required Animation<double> animation,
+  }) : _editState = editState, _animation = animation;
 
   final MessageEditState _editState;
+  final Animation<double> _animation;
+
+  double get _animationProgress => (_animation.value - widthCollapsed) / widthExpanded;
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
 
     final IconData icon;
     final double iconSize;
+    final String markerText;
 
     switch (_editState) {
       case MessageEditState.none:
         return const SizedBox(width: widthCollapsed);
       case MessageEditState.edited:
         icon = ZulipIcons.edited;
         iconSize = 14;
+        markerText = zulipLocalizations.messageIsEdited;
         break;
       case MessageEditState.moved:
         icon = ZulipIcons.message_moved;
         iconSize = 8;
+        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(
+              designVariables.editedMovedMarkerExpanded.withAlpha(0),
+              designVariables.editedMovedMarkerExpanded,
+              _animationProgress)))),
+        SizedBox(width: lerpDouble(0, 5, _animationProgress)),
+        // To match the Figma design, we cannot make the collapsed width of the
+        // marker larger. We need to explicitly allow the icon to overflow.
+        OverflowBox(
+          fit: OverflowBoxFit.deferToChild,
+          maxWidth: 8,
+          child: Icon(icon, size: iconSize, color: Color.lerp(
+              designVariables.editedMovedMarkerCollapsed,
+              designVariables.editedMovedMarkerExpanded,
+              _animationProgress)),
+        ),
+      ],
+    );
+
     return ConstrainedBox(
-      constraints: const BoxConstraints(maxWidth: widthCollapsed),
-      child: Padding(
-        padding: const EdgeInsetsDirectional.only(start: 5, end: 3),
-        child: Icon(icon, size: iconSize,
-          color: designVariables.editedMovedMarkerCollapsed)));
+      constraints: BoxConstraints(maxWidth: _animation.value),
+      child: Container(
+        margin: EdgeInsetsDirectional.only(
+          start: lerpDouble(5, 13, _animationProgress)!, end: 3),
+        clipBehavior: Clip.hardEdge,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(3),
+          color: Color.lerp(
+            designVariables.editedMovedMarkerBg.withAlpha(0),
+            designVariables.editedMovedMarkerBg,
+            _animationProgress)),
+        child: Padding(
+          padding: EdgeInsetsDirectional.symmetric(
+            horizontal: lerpDouble(0, 3, _animationProgress)!),
+          child: marker),
+      ),
+    );
   }
 }