feat: use popover on overlay

frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart

@@ -49,7 +49,7 @@ class BoardSettingList extends StatelessWidget {
             previous.selectedAction != current.selectedAction,
         listener: (context, state) {
           state.selectedAction.foldLeft(null, (_, action) {
-            FlowyOverlay.of(context).remove(identifier());
+            // FlowyOverlay.of(context).remove(identifier());
             onAction(action, settingContext);
           });
         },
@@ -83,37 +83,6 @@ class BoardSettingList extends StatelessWidget {
       ),
     );
   }
-
-  static void show(BuildContext context, BoardSettingContext settingContext) {
-    final list = BoardSettingList(
-      settingContext: settingContext,
-      onAction: (action, settingContext) {
-        switch (action) {
-          case BoardSettingAction.properties:
-            GridPropertyList(
-                    gridId: settingContext.viewId,
-                    fieldCache: settingContext.fieldCache)
-                .show(context);
-            break;
-        }
-      },
-    );
-
-    FlowyOverlay.of(context).insertWithAnchor(
-      widget: OverlayContainer(
-        constraints: BoxConstraints.loose(const Size(140, 400)),
-        child: list,
-      ),
-      identifier: identifier(),
-      anchorContext: context,
-      anchorDirection: AnchorDirection.bottomRight,
-      style: FlowyOverlayStyle(blur: false),
-    );
-  }
-
-  static String identifier() {
-    return (BoardSettingList).toString();
-  }
 }
 
 class _SettingItem extends StatelessWidget {
@@ -166,3 +135,48 @@ extension _GridSettingExtension on BoardSettingAction {
     }
   }
 }
+
+class BoardSettingListPopover extends StatefulWidget {
+  final BoardSettingContext settingContext;
+
+  const BoardSettingListPopover({
+    Key? key,
+    required this.settingContext,
+  }) : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _BoardSettingListPopoverState();
+}
+
+class _BoardSettingListPopoverState extends State<BoardSettingListPopover> {
+  bool _showGridPropertyList = false;
+
+  @override
+  Widget build(BuildContext context) {
+    if (_showGridPropertyList) {
+      return OverlayContainer(
+        constraints: BoxConstraints.loose(const Size(260, 400)),
+        child: GridPropertyList(
+          gridId: widget.settingContext.viewId,
+          fieldCache: widget.settingContext.fieldCache,
+        ),
+      );
+    }
+
+    return OverlayContainer(
+      constraints: BoxConstraints.loose(const Size(140, 400)),
+      child: BoardSettingList(
+        settingContext: widget.settingContext,
+        onAction: (action, settingContext) {
+          switch (action) {
+            case BoardSettingAction.properties:
+              setState(() {
+                _showGridPropertyList = true;
+              });
+              break;
+          }
+        },
+      ),
+    );
+  }
+}

frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart

@@ -1,6 +1,8 @@
 import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
+import 'package:appflowy_popover/popover.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
@@ -47,14 +49,22 @@ class _SettingButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.read<AppTheme>();
-    return FlowyIconButton(
+    return Popover(
-      hoverColor: theme.hover,
+      triggerActions: PopoverTriggerActionFlags.click,
-      width: 22,
+      child: FlowyIconButton(
-      onPressed: () => BoardSettingList.show(context, settingContext),
+        hoverColor: theme.hover,
-      icon: Padding(
+        width: 22,
-        padding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 3.0),
+        onPressed: () {},
-        child: svgWidget("grid/setting/setting"),
+        icon: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 3.0),
+          child: svgWidget("grid/setting/setting"),
+        ),
       ),
+      popupBuilder: (BuildContext popoverContext) {
+        return BoardSettingListPopover(
+          settingContext: settingContext,
+        );
+      },
     );
   }
 }

frontend/app_flowy/packages/appflowy_popover/lib/popover.dart

@@ -91,7 +91,6 @@ class PopoverState extends State<Popover> {
   }
 
   showOverlay() {
-    debugPrint("show overlay");
     close();
 
     if (widget.mutex != null) {
@@ -159,7 +158,6 @@ class PopoverState extends State<Popover> {
 
   @override
   void deactivate() {
-    debugPrint("deactivate");
     close();
     super.deactivate();
   }