[PR #6507] [MERGED] feat: customize animation for popover #7428

New issue

Closed

opened 2026-03-23 23:19:34 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:19:34 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/6507
Author: @LucasXu0
Created: 10/8/2024
Status: ✅ Merged
Merged: 10/9/2024
Merged by: @LucasXu0

Base: main ← Head: popover_animation

📝 Commits (10+)

92a0270 feat: customize animation for popover
1b8bd37 chore: code refactor
9237fd6 feat: using popover direction calculate the popover animation translate direction
e0a6a7f feat: integrate the animated popover in appflowy_popover and popover_action
fa88dda fix: close popover assertion
129a9c4 chore: format code
10c24c5 chore: code refactor
d8203f3 feat: optimize the popover listener
e6e269a feat: clear popover when hot-reloading
bcc084c chore: refactor code

📊 Changes

26 files changed (+676 additions, -539 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart (+2 -1)
📝 frontend/appflowy_flutter/lib/main.dart (+3 -1)
📝 frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart (+22 -21)
📝 frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/select/select_option.dart (+24 -22)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart (+3 -4)
📝 frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart (+6 -0)
📝 frontend/appflowy_flutter/packages/appflowy_popover/analysis_options.yaml (+56 -0)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/analysis_options.yaml (+33 -2)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Flutter/AppFrameworkInfo.plist (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner.xcodeproj/project.pbxproj (+8 -5)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner/Info.plist (+2 -0)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/lib/example_button.dart (+43 -35)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/lib/main.dart (+61 -76)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/macos/Runner.xcodeproj/project.pbxproj (+6 -5)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_popover/example/pubspec.yaml (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_popover/lib/src/follower.dart (+5 -10)
📝 frontend/appflowy_flutter/packages/appflowy_popover/lib/src/layout.dart (+41 -140)

...and 6 more files

📄 Description

Feature Preview

For better visual effect, add fade and scale animation to the popover component.

support different animation type
support different animation direction

By default, the animation is disabled. Enable it by setting an animation duration.

https://github.com/user-attachments/assets/d02b0276-80ce-48d3-8d6d-02907977bf75

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/6507 **Author:** [@LucasXu0](https://github.com/LucasXu0) **Created:** 10/8/2024 **Status:** ✅ Merged **Merged:** 10/9/2024 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `popover_animation` --- ### 📝 Commits (10+) - [`92a0270`](https://github.com/AppFlowy-IO/AppFlowy/commit/92a0270a11c17042f798eb3c41b4353502cfe3b6) feat: customize animation for popover - [`1b8bd37`](https://github.com/AppFlowy-IO/AppFlowy/commit/1b8bd373dfc3cfd7a3799697fefa0b75c939fa62) chore: code refactor - [`9237fd6`](https://github.com/AppFlowy-IO/AppFlowy/commit/9237fd61241d41b5aef62d7abca44a5e52ab1f20) feat: using popover direction calculate the popover animation translate direction - [`e0a6a7f`](https://github.com/AppFlowy-IO/AppFlowy/commit/e0a6a7fbef26ce844754c2947b9f2e9f042639e4) feat: integrate the animated popover in appflowy_popover and popover_action - [`fa88dda`](https://github.com/AppFlowy-IO/AppFlowy/commit/fa88ddae43b02a65a63958a5aa0cd3f7362ce16a) fix: close popover assertion - [`129a9c4`](https://github.com/AppFlowy-IO/AppFlowy/commit/129a9c473b09dbf9f8b62abc2e6bea7f95ffe7ac) chore: format code - [`10c24c5`](https://github.com/AppFlowy-IO/AppFlowy/commit/10c24c5a351caf64d3dd10dd1ec451a4729a0bd4) chore: code refactor - [`d8203f3`](https://github.com/AppFlowy-IO/AppFlowy/commit/d8203f371025cc6268f0f45d80c035632a13ddcd) feat: optimize the popover listener - [`e6e269a`](https://github.com/AppFlowy-IO/AppFlowy/commit/e6e269a7daa9fd33dc01b54e15ee07b279ed3d68) feat: clear popover when hot-reloading - [`bcc084c`](https://github.com/AppFlowy-IO/AppFlowy/commit/bcc084cbfd2d2af7492ada9cba2f1a8f0bc69057) chore: refactor code ### 📊 Changes **26 files changed** (+676 additions, -539 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_icon_test.dart` (+2 -1) 📝 `frontend/appflowy_flutter/lib/main.dart` (+3 -1) 📝 `frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart` (+22 -21) 📝 `frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/select/select_option.dart` (+24 -22) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/widgets/date_picker/widgets/time_text_field.dart` (+3 -4) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart` (+6 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/analysis_options.yaml` (+56 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/analysis_options.yaml` (+33 -2) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Flutter/AppFrameworkInfo.plist` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner.xcodeproj/project.pbxproj` (+8 -5) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/ios/Runner/Info.plist` (+2 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/lib/example_button.dart` (+43 -35) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/lib/main.dart` (+61 -76) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/macos/Runner.xcodeproj/project.pbxproj` (+6 -5) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/example/pubspec.yaml` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/lib/src/follower.dart` (+5 -10) 📝 `frontend/appflowy_flutter/packages/appflowy_popover/lib/src/layout.dart` (+41 -140) _...and 6 more files_ </details> ### 📄 Description   ### Feature Preview For better visual effect, add fade and scale animation to the popover component. - [x] support different animation type - [x] support different animation direction > By default, the animation is disabled. Enable it by setting an animation duration. https://github.com/user-attachments/assets/d02b0276-80ce-48d3-8d6d-02907977bf75  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>