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/edit_state_marker.dart

@@ -1,12 +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 'text.dart';
 import 'theme.dart';
 
-class EditStateMarker extends StatelessWidget {
+class EditStateMarker extends StatefulWidget {
   const EditStateMarker({
     super.key,
     required this.message,
@@ -16,53 +19,163 @@ class EditStateMarker extends StatelessWidget {
   final Message message;
   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 = message.editState != MessageEditState.none;
+    final hasMarker = widget.message.editState != MessageEditState.none;
 
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: localizedTextBaseline(context),
-      children: [
-        hasMarker
-          ? _EditStateMarkerPill(editState: message.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.message.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 designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
 
     final IconData icon;
+    final String markerText;
     switch (editState) {
       case MessageEditState.none:
         assert(false);
         return const SizedBox(width: widthCollapsed);
       case MessageEditState.edited:
         icon = ZulipIcons.edited;
+        markerText = zulipLocalizations.messageIsEdited;
+        break;
       case MessageEditState.moved:
         icon = ZulipIcons.message_moved;
+        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: 14, color: Color.lerp(
+              designVariables.editedMovedMarkerCollapsed,
+              designVariables.editedMovedMarkerExpanded,
+              _animationProgress)),
+        ),
+      ],
+    );
+
     return ConstrainedBox(
-      constraints: const BoxConstraints(maxWidth: widthCollapsed),
-      child: Padding(
-        padding: const EdgeInsetsDirectional.only(start: 2),
-        child: Icon(icon, size: 14,
-          color: designVariables.editedMovedMarkerCollapsed)));
+      constraints: BoxConstraints(maxWidth: animation.value),
+      child: Container(
+        margin: EdgeInsets.only(left: lerpDouble(2, 10, _animationProgress)!, right: 0),
+        clipBehavior: Clip.hardEdge,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(3),
+          color: Color.lerp(
+            designVariables.editedMovedMarkerBg.withAlpha(0),
+            designVariables.editedMovedMarkerBg,
+            _animationProgress)),
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: lerpDouble(0, 3, _animationProgress)!),
+          child: marker),
+      ),
+    );
   }
 }

lib/widgets/theme.dart

@@ -85,6 +85,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     // TODO(#95) unchanged in dark theme?
     star = const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
     // TODO(#95) need dark-theme color
+    editedMovedMarkerBg = const Color(0xffddecf6),
+    // TODO(#95) need dark-theme color
+    editedMovedMarkerExpanded = const Color(0xff26516e),
+    // TODO(#95) need dark-theme color
     editedMovedMarkerCollapsed = const Color.fromARGB(128, 146, 167, 182);
 
   DesignVariables._({
@@ -95,6 +99,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.streamColorSwatches,
     required this.star,
+    required this.editedMovedMarkerBg,
+    required this.editedMovedMarkerExpanded,
     required this.editedMovedMarkerCollapsed,
   });
 
@@ -119,6 +125,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color star;
+  final Color editedMovedMarkerBg;
+  final Color editedMovedMarkerExpanded;
   final Color editedMovedMarkerCollapsed;
 
   @override
@@ -130,6 +138,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     StreamColorSwatches? streamColorSwatches,
     Color? star,
+    Color? editedMovedMarkerBg,
+    Color? editedMovedMarkerExpanded,
     Color? editedMovedMarkerCollapsed,
   }) {
     return DesignVariables._(
@@ -140,6 +150,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       streamColorSwatches: streamColorSwatches ?? this.streamColorSwatches,
       star: star ?? this.star,
+      editedMovedMarkerBg: editedMovedMarkerBg ?? this.editedMovedMarkerBg,
+      editedMovedMarkerExpanded: editedMovedMarkerExpanded ?? this.editedMovedMarkerExpanded,
       editedMovedMarkerCollapsed: editedMovedMarkerCollapsed ?? this.editedMovedMarkerCollapsed,
     );
   }
@@ -157,6 +169,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: Color.lerp(title, other.title, t)!,
       streamColorSwatches: StreamColorSwatches.lerp(streamColorSwatches, other.streamColorSwatches, t),
       star: Color.lerp(star, other.star, t)!,
+      editedMovedMarkerBg: Color.lerp(editedMovedMarkerBg, other.editedMovedMarkerBg, t)!,
+      editedMovedMarkerExpanded: Color.lerp(editedMovedMarkerExpanded, other.editedMovedMarkerExpanded, t)!,
       editedMovedMarkerCollapsed: Color.lerp(editedMovedMarkerCollapsed, other.editedMovedMarkerCollapsed, t)!,
     );
   }