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

lib/widgets/edit_state_marker.dart

@@ -0,0 +1,181 @@
+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 StatefulWidget {
+  const EditStateMarker({
+    super.key,
+    required this.message,
+    required this.children,
+  });
+
+  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 = widget.message.editState != MessageEditState.none;
+
+    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, required this.animation});
+
+  final MessageEditState editState;
+  final Animation<double> animation;
+
+  /// The minimum width of the marker.
+  ///
+  /// 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: 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),
+      ),
+    );
+  }
+}