chore: make some overlay as barrier

Author: appflowy

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

@@ -339,36 +339,30 @@ class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
   @override
   Widget build(BuildContext context) {
     List<Widget> children = [
-      Popover(
+      AppFlowyPopover(
         mutex: _popoverMutex,
         asBarrier: true,
         triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
         offset: const Offset(20, 0),
         popupBuilder: (BuildContext context) {
-          return OverlayContainer(
-            constraints: BoxConstraints.loose(const Size(460, 440)),
-            child: DateFormatList(
-              selectedFormat: widget.dateTypeOptionPB.dateFormat,
-              onSelected: (format) =>
-                  widget.onEvent(DateCalEvent.setDateFormat(format)),
-            ),
+          return DateFormatList(
+            selectedFormat: widget.dateTypeOptionPB.dateFormat,
+            onSelected: (format) =>
+                widget.onEvent(DateCalEvent.setDateFormat(format)),
           );
         },
         child: const DateFormatButton(),
       ),
-      Popover(
+      AppFlowyPopover(
         mutex: _popoverMutex,
         asBarrier: true,
         triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
         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)),
-            ),
+          return TimeFormatList(
+            selectedFormat: widget.dateTypeOptionPB.timeFormat,
+            onSelected: (format) =>
+                widget.onEvent(DateCalEvent.setTimeFormat(format)),
           );
         },
         child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart

@@ -243,6 +243,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
     return AppFlowyPopover(
       controller: _popoverController,
       offset: const Offset(20, 0),
+      asBarrier: true,
       constraints: BoxConstraints.loose(const Size(200, 300)),
       mutex: widget.popoverMutex,
       child: SizedBox(

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_option_editor.dart

@@ -66,6 +66,7 @@ class FieldTypeOptionEditor extends StatelessWidget {
       height: GridSize.typeOptionItemHeight,
       child: AppFlowyPopover(
         constraints: BoxConstraints.loose(const Size(460, 440)),
+        asBarrier: true,
         triggerActions: PopoverTriggerFlags.click | PopoverTriggerFlags.hover,
         mutex: popoverMutex,
         offset: const Offset(20, 0),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart

@@ -179,7 +179,8 @@ class CreateFieldButton extends StatelessWidget {
     return AppFlowyPopover(
       triggerActions: PopoverTriggerFlags.click,
       direction: PopoverDirection.bottomWithRightAligned,
-      constraints: BoxConstraints.loose(const Size(240, 200)),
+      asBarrier: true,
+      constraints: BoxConstraints.loose(const Size(240, 600)),
       child: FlowyButton(
         text: FlowyText.medium(
           LocaleKeys.grid_field_newColumn.tr(),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart

@@ -184,6 +184,7 @@ class _OptionCellState extends State<_OptionCell> {
       controller: _popoverController,
       mutex: widget.popoverMutex,
       offset: const Offset(20, 0),
+      asBarrier: true,
       constraints: BoxConstraints.loose(const Size(460, 440)),
       child: SizedBox(
         height: GridSize.typeOptionItemHeight,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/row/row_detail.dart

@@ -274,7 +274,7 @@ class _RowDetailCellState extends State<_RowDetailCell> {
                 offset: const Offset(20, 0),
                 popupBuilder: (popoverContext) {
                   return OverlayContainer(
-                    constraints: BoxConstraints.loose(const Size(240, 200)),
+                    constraints: BoxConstraints.loose(const Size(240, 600)),
                     child: FieldEditor(
                       gridId: widget.cellId.gridId,
                       fieldName: widget.cellId.fieldContext.field.name,

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_stype_popover.dart

@@ -12,6 +12,7 @@ class AppFlowyPopover extends StatelessWidget {
   final void Function()? onClose;
   final PopoverMutex? mutex;
   final Offset? offset;
+  final bool asBarrier;
 
   const AppFlowyPopover({
     Key? key,
@@ -24,6 +25,7 @@ class AppFlowyPopover extends StatelessWidget {
     this.triggerActions = 0,
     this.offset,
     this.controller,
+    this.asBarrier = false,
   }) : super(key: key);
 
   @override
@@ -33,6 +35,7 @@ class AppFlowyPopover extends StatelessWidget {
       onClose: onClose,
       direction: direction,
       mutex: mutex,
+      asBarrier: asBarrier,
       triggerActions: triggerActions,
       popupBuilder: (context) {
         final child = popupBuilder(context);