mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-09-11 19:17:43 +03:00
feat: mobile floating toolbar animation (#5170)
This commit is contained in:
parent
0b94e2b25d
commit
119fb03342
@ -330,28 +330,17 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
|
|||||||
editorState,
|
editorState,
|
||||||
selection,
|
selection,
|
||||||
),
|
),
|
||||||
child: Column(
|
child: MobileFloatingToolbar(
|
||||||
children: [
|
editorState: editorState,
|
||||||
Expanded(
|
editorScrollController: editorScrollController,
|
||||||
child: MobileFloatingToolbar(
|
toolbarBuilder: (context, anchor, closeToolbar) {
|
||||||
editorState: editorState,
|
return CustomMobileFloatingToolbar(
|
||||||
editorScrollController: editorScrollController,
|
editorState: editorState,
|
||||||
toolbarBuilder: (context, anchor, closeToolbar) {
|
anchor: anchor,
|
||||||
return AdaptiveTextSelectionToolbar.buttonItems(
|
closeToolbar: closeToolbar,
|
||||||
buttonItems: buildMobileFloatingToolbarItems(
|
);
|
||||||
editorState,
|
},
|
||||||
anchor,
|
child: editor,
|
||||||
closeToolbar,
|
|
||||||
),
|
|
||||||
anchors: TextSelectionToolbarAnchors(
|
|
||||||
primaryAnchor: anchor,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
child: editor,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
|
|||||||
import 'package:appflowy_editor/appflowy_editor.dart';
|
import 'package:appflowy_editor/appflowy_editor.dart';
|
||||||
import 'package:easy_localization/easy_localization.dart';
|
import 'package:easy_localization/easy_localization.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_animate/flutter_animate.dart';
|
||||||
|
|
||||||
List<ContextMenuButtonItem> buildMobileFloatingToolbarItems(
|
List<ContextMenuButtonItem> buildMobileFloatingToolbarItems(
|
||||||
EditorState editorState,
|
EditorState editorState,
|
||||||
@ -82,3 +83,41 @@ extension on EditorState {
|
|||||||
updateSelectionWithReason(selection);
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -53,11 +53,11 @@ packages:
|
|||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
path: "."
|
path: "."
|
||||||
ref: "6d12761"
|
ref: bcaa58e8554963083931272afcfc907f15b804cb
|
||||||
resolved-ref: "6d127619294060999522be904a3e72a59dc270ca"
|
resolved-ref: bcaa58e8554963083931272afcfc907f15b804cb
|
||||||
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
|
url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
|
||||||
source: git
|
source: git
|
||||||
version: "2.3.3"
|
version: "2.3.4"
|
||||||
appflowy_editor_plugins:
|
appflowy_editor_plugins:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
@ -561,6 +561,14 @@ packages:
|
|||||||
description: flutter
|
description: flutter
|
||||||
source: sdk
|
source: sdk
|
||||||
version: "0.0.0"
|
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:
|
flutter_bloc:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
@ -653,6 +661,14 @@ packages:
|
|||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.0.17"
|
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:
|
flutter_slidable:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
description:
|
||||||
|
@ -131,6 +131,7 @@ dependencies:
|
|||||||
sheet:
|
sheet:
|
||||||
file: ^7.0.0
|
file: ^7.0.0
|
||||||
avatar_stack: ^1.2.0
|
avatar_stack: ^1.2.0
|
||||||
|
flutter_animate: ^4.5.0
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_lints: ^3.0.1
|
flutter_lints: ^3.0.1
|
||||||
@ -167,7 +168,7 @@ dependency_overrides:
|
|||||||
appflowy_editor:
|
appflowy_editor:
|
||||||
git:
|
git:
|
||||||
url: https://github.com/AppFlowy-IO/appflowy-editor.git
|
url: https://github.com/AppFlowy-IO/appflowy-editor.git
|
||||||
ref: "6d12761"
|
ref: "bcaa58e8554963083931272afcfc907f15b804cb"
|
||||||
|
|
||||||
sheet:
|
sheet:
|
||||||
git:
|
git:
|
||||||
|
Loading…
Reference in New Issue
Block a user