From 119fb033421f8fa31bb94a5b651f91a2947e7ee7 Mon Sep 17 00:00:00 2001
From: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
Date: Mon, 29 Apr 2024 10:33:57 +0800
Subject: [PATCH] feat: mobile floating toolbar animation (#5170)

---
 .../document/presentation/editor_page.dart    | 33 ++++++----------
 .../custom_mobile_floating_toolbar.dart       | 39 +++++++++++++++++++
 frontend/appflowy_flutter/pubspec.lock        | 22 +++++++++--
 frontend/appflowy_flutter/pubspec.yaml        |  3 +-
 4 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
index 42ca221a58..d8976d6e54 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@@ -330,28 +330,17 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
           editorState,
           selection,
         ),
-        child: Column(
-          children: [
-            Expanded(
-              child: MobileFloatingToolbar(
-                editorState: editorState,
-                editorScrollController: editorScrollController,
-                toolbarBuilder: (context, anchor, closeToolbar) {
-                  return AdaptiveTextSelectionToolbar.buttonItems(
-                    buttonItems: buildMobileFloatingToolbarItems(
-                      editorState,
-                      anchor,
-                      closeToolbar,
-                    ),
-                    anchors: TextSelectionToolbarAnchors(
-                      primaryAnchor: anchor,
-                    ),
-                  );
-                },
-                child: editor,
-              ),
-            ),
-          ],
+        child: MobileFloatingToolbar(
+          editorState: editorState,
+          editorScrollController: editorScrollController,
+          toolbarBuilder: (context, anchor, closeToolbar) {
+            return CustomMobileFloatingToolbar(
+              editorState: editorState,
+              anchor: anchor,
+              closeToolbar: closeToolbar,
+            );
+          },
+          child: editor,
         ),
       );
     }
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
index 5a8b99af5d..6b374f79f8 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
@@ -2,6 +2,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 
 List<ContextMenuButtonItem> buildMobileFloatingToolbarItems(
   EditorState editorState,
@@ -82,3 +83,41 @@ extension on EditorState {
     updateSelectionWithReason(selection);
   }
 }
+
+class CustomMobileFloatingToolbar extends StatelessWidget {
+  const CustomMobileFloatingToolbar({
+    super.key,
+    required this.editorState,
+    required this.anchor,
+    required this.closeToolbar,
+  });
+
+  final EditorState editorState;
+  final Offset anchor;
+  final VoidCallback closeToolbar;
+
+  @override
+  Widget build(BuildContext context) {
+    return Animate(
+      autoPlay: true,
+      effects: [
+        const FadeEffect(duration: SelectionOverlay.fadeDuration),
+        MoveEffect(
+          curve: Curves.easeOutCubic,
+          begin: const Offset(0, 16),
+          duration: 100.milliseconds,
+        ),
+      ],
+      child: AdaptiveTextSelectionToolbar.buttonItems(
+        buttonItems: buildMobileFloatingToolbarItems(
+          editorState,
+          anchor,
+          closeToolbar,
+        ),
+        anchors: TextSelectionToolbarAnchors(
+          primaryAnchor: anchor,
+        ),
+      ),
+    );
+  }
+}
diff --git a/frontend/appflowy_flutter/pubspec.lock b/frontend/appflowy_flutter/pubspec.lock
index cdcf3a3a1a..21f9f220ea 100644
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/frontend/appflowy_flutter/pubspec.lock
@@ -53,11 +53,11 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "6d12761"
-      resolved-ref: "6d127619294060999522be904a3e72a59dc270ca"
+      ref: bcaa58e8554963083931272afcfc907f15b804cb
+      resolved-ref: bcaa58e8554963083931272afcfc907f15b804cb
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
-    version: "2.3.3"
+    version: "2.3.4"
   appflowy_editor_plugins:
     dependency: "direct main"
     description:
@@ -561,6 +561,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: "direct main"
+    description:
+      name: flutter_animate
+      sha256: "7c8a6594a9252dad30cc2ef16e33270b6248c4dedc3b3d06c86c4f3f4dc05ae5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.0"
   flutter_bloc:
     dependency: "direct main"
     description:
@@ -653,6 +661,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.17"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "02750b545c01ff4d8e9bbe8f27a7731aa3778402506c67daa1de7f5fc3f4befe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.2"
   flutter_slidable:
     dependency: "direct main"
     description:
diff --git a/frontend/appflowy_flutter/pubspec.yaml b/frontend/appflowy_flutter/pubspec.yaml
index cac2c95376..283812ec68 100644
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/frontend/appflowy_flutter/pubspec.yaml
@@ -131,6 +131,7 @@ dependencies:
   sheet:
   file: ^7.0.0
   avatar_stack: ^1.2.0
+  flutter_animate: ^4.5.0
 
 dev_dependencies:
   flutter_lints: ^3.0.1
@@ -167,7 +168,7 @@ dependency_overrides:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "6d12761"
+      ref: "bcaa58e8554963083931272afcfc907f15b804cb"
 
   sheet:
     git: