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

@@ -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."
   }
 }

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 'text.dart';
 import 'theme.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 designVariables = DesignVariables.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(
+              designVariables.editedMovedMarkerExpanded.withAlpha(0),
+              designVariables.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(
+              designVariables.editedMovedMarkerCollapsed,
+              designVariables.editedMovedMarkerExpanded,
+              _animationProgress)),
+        ),
+      ],
+    );
+
     return ConstrainedBox(
-      constraints: const BoxConstraints(maxWidth: widthCollapsed),
-      child: Transform.translate(
-        offset: offset,
-        child: Icon(
-          icon, size: 16, color: designVariables.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(
+            designVariables.editedMovedMarkerBg.withAlpha(0),
+            designVariables.editedMovedMarkerBg,
+            _animationProgress)),
+        child: Padding(
+          padding: EdgeInsets.only(left: lerpDouble(0, 3, _animationProgress)!),
+          child: marker),
+      ),
+    );
   }
 }

lib/widgets/theme.dart

@@ -124,6 +124,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xff1a1a1a),
       streamColorSwatches: StreamColorSwatches.light,
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+      editedMovedMarkerBg: const Color(0xffddecf6),
+      editedMovedMarkerExpanded: const Color(0xff26516e),
       editedMovedMarkerCollapsed: const Color.fromARGB(128, 146, 167, 182),
     );
 
@@ -138,6 +140,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),
     );
 
@@ -149,6 +155,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.streamColorSwatches,
     required this.star,
+    required this.editedMovedMarkerBg,
+    required this.editedMovedMarkerExpanded,
     required this.editedMovedMarkerCollapsed,
   });
 
@@ -173,6 +181,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
@@ -184,6 +194,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     StreamColorSwatches? streamColorSwatches,
     Color? star,
+    Color? editedMovedMarkerBg,
+    Color? editedMovedMarkerExpanded,
     Color? editedMovedMarkerCollapsed,
   }) {
     return DesignVariables._(
@@ -194,6 +206,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,
     );
   }
@@ -211,6 +225,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)!,
     );
   }