feat: use pop over for date selector

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart

@@ -1,7 +1,7 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/grid/application/cell/date_cal_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/field/type_option/type_option_context.dart';
-import 'package:app_flowy/startup/tasks/platform_service.dart';
+import 'package:appflowy_popover/popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
@@ -166,17 +166,14 @@ class _CellCalendarWidget extends StatelessWidget {
             );
           },
           onDaySelected: (selectedDay, focusedDay) {
-            _CalDateTimeSetting.hide(context);
             context
                 .read<DateCalBloc>()
                 .add(DateCalEvent.selectDay(selectedDay));
           },
           onFormatChanged: (format) {
-            _CalDateTimeSetting.hide(context);
             context.read<DateCalBloc>().add(DateCalEvent.setCalFormat(format));
           },
           onPageChanged: (focusedDay) {
-            _CalDateTimeSetting.hide(context);
             context
                 .read<DateCalBloc>()
                 .add(DateCalEvent.setFocusedDay(focusedDay));
@@ -244,7 +241,6 @@ class _TimeTextFieldState extends State<_TimeTextField> {
     if (widget.bloc.state.dateTypeOptionPB.includeTime) {
       _focusNode.addListener(() {
         if (mounted) {
-          _CalDateTimeSetting.hide(context);
           widget.bloc.add(DateCalEvent.setTime(_controller.text));
         }
       });
@@ -307,25 +303,31 @@ class _DateTypeOptionButton extends StatelessWidget {
     return BlocSelector<DateCalBloc, DateCalState, DateTypeOptionPB>(
       selector: (state) => state.dateTypeOptionPB,
       builder: (context, dateTypeOptionPB) {
-        return FlowyButton(
+        return Popover(
-          text: FlowyText.medium(title, fontSize: 12),
+          triggerActions:
-          hoverColor: theme.hover,
+              PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
-          margin: kMargin,
+          targetAnchor: Alignment.topRight,
-          onTap: () => _showTimeSetting(dateTypeOptionPB, context),
+          followerAnchor: Alignment.topLeft,
-          rightIcon: svgWidget("grid/more", color: theme.iconColor),
+          offset: const Offset(20, 0),
+          child: FlowyButton(
+            text: FlowyText.medium(title, fontSize: 12),
+            hoverColor: theme.hover,
+            margin: kMargin,
+            rightIcon: svgWidget("grid/more", color: theme.iconColor),
+          ),
+          popupBuilder: (BuildContext popContext) {
+            return OverlayContainer(
+              constraints: BoxConstraints.loose(const Size(140, 100)),
+              child: _CalDateTimeSetting(
+                dateTypeOptionPB: dateTypeOptionPB,
+                onEvent: (event) => context.read<DateCalBloc>().add(event),
+              ),
+            );
+          },
         );
       },
     );
   }
-
-  void _showTimeSetting(
-      DateTypeOptionPB dateTypeOptionPB, BuildContext context) {
-    final setting = _CalDateTimeSetting(
-      dateTypeOptionPB: dateTypeOptionPB,
-      onEvent: (event) => context.read<DateCalBloc>().add(event),
-    );
-    setting.show(context);
-  }
 }
 
 class _CalDateTimeSetting extends StatefulWidget {
@@ -337,53 +339,51 @@ class _CalDateTimeSetting extends StatefulWidget {
 
   @override
   State<_CalDateTimeSetting> createState() => _CalDateTimeSettingState();
-
-  static String identifier() {
-    return (_CalDateTimeSetting).toString();
-  }
-
-  void show(BuildContext context) {
-    hide(context);
-    FlowyOverlay.of(context).insertWithAnchor(
-      widget: OverlayContainer(
-        child: this,
-        constraints: BoxConstraints.loose(const Size(140, 100)),
-      ),
-      identifier: _CalDateTimeSetting.identifier(),
-      anchorContext: context,
-      anchorDirection: AnchorDirection.rightWithCenterAligned,
-      anchorOffset: const Offset(20, 0),
-    );
-  }
-
-  static void hide(BuildContext context) {
-    FlowyOverlay.of(context).remove(identifier());
-  }
 }
 
 class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
   String? overlayIdentifier;
+  final _popoverMutex = PopoverMutex();
 
   @override
   Widget build(BuildContext context) {
     List<Widget> children = [
-      DateFormatButton(onTap: () {
+      Popover(
-        final list = DateFormatList(
+        mutex: _popoverMutex,
-          selectedFormat: widget.dateTypeOptionPB.dateFormat,
+        triggerActions:
-          onSelected: (format) =>
+            PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
-              widget.onEvent(DateCalEvent.setDateFormat(format)),
+        child: const DateFormatButton(),
-        );
+        targetAnchor: Alignment.topRight,
-        _showOverlay(context, list);
+        followerAnchor: Alignment.topLeft,
-      }),
+        offset: const Offset(20, 0),
-      TimeFormatButton(
+        popupBuilder: (BuildContext context) {
-        timeFormat: widget.dateTypeOptionPB.timeFormat,
+          return OverlayContainer(
-        onTap: () {
+            constraints: BoxConstraints.loose(const Size(460, 440)),
-          final list = TimeFormatList(
+            child: DateFormatList(
-            selectedFormat: widget.dateTypeOptionPB.timeFormat,
+              selectedFormat: widget.dateTypeOptionPB.dateFormat,
-            onSelected: (format) =>
+              onSelected: (format) =>
-                widget.onEvent(DateCalEvent.setTimeFormat(format)),
+                  widget.onEvent(DateCalEvent.setDateFormat(format)),
+            ),
+          );
+        },
+      ),
+      Popover(
+        mutex: _popoverMutex,
+        triggerActions:
+            PopoverTriggerActionFlags.hover | PopoverTriggerActionFlags.click,
+        child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),
+        targetAnchor: Alignment.topRight,
+        followerAnchor: Alignment.topLeft,
+        offset: const Offset(20, 0),
+        popupBuilder: (BuildContext context) {
+          return OverlayContainer(
+            constraints: BoxConstraints.loose(const Size(460, 440)),
+            child: TimeFormatList(
+              selectedFormat: widget.dateTypeOptionPB.timeFormat,
+              onSelected: (format) =>
+                  widget.onEvent(DateCalEvent.setTimeFormat(format)),
+            ),
           );
-          _showOverlay(context, list);
         },
       ),
     ];

frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_toolbar.dart

@@ -1,5 +1,8 @@
+import 'package:appflowy_popover/popover.dart';
+import 'package:app_flowy/plugins/grid/application/setting/setting_bloc.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/extension.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
@@ -7,6 +10,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../../application/field/field_cache.dart';
 import '../../layout/sizes.dart';
+import 'grid_property.dart';
 import 'grid_setting.dart';
 
 class GridToolbarContext {
@@ -49,12 +53,42 @@ class _SettingButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    return FlowyIconButton(
+    return Popover(
-      hoverColor: theme.hover,
+      triggerActions: PopoverTriggerActionFlags.click,
-      width: 22,
+      targetAnchor: Alignment.bottomLeft,
-      onPressed: () => GridSettingList.show(context, settingContext),
+      followerAnchor: Alignment.topLeft,
-      icon:
+      offset: const Offset(0, 10),
-          svgWidget("grid/setting/setting").padding(horizontal: 3, vertical: 3),
+      child: FlowyIconButton(
+        width: 22,
+        hoverColor: theme.hover,
+        icon: svgWidget("grid/setting/setting")
+            .padding(horizontal: 3, vertical: 3),
+      ),
+      popupBuilder: (BuildContext context) {
+        return OverlayContainer(
+          constraints: BoxConstraints.loose(const Size(140, 400)),
+          child: GridSettingList(
+            settingContext: settingContext,
+            onAction: (action, settingContext) {
+              switch (action) {
+                case GridSettingAction.filter:
+                  break;
+                case GridSettingAction.sortBy:
+                  break;
+                case GridSettingAction.properties:
+                  GridPropertyList(
+                          gridId: settingContext.gridId,
+                          fieldCache: settingContext.fieldCache)
+                      .show(context);
+                  break;
+              }
+            },
+          ),
+        );
+      },
     );
+    // return FlowyIconButton(
+    //   onPressed: () => GridSettingList.show(context, settingContext),
+    // );
   }
 }