chore: replace Popover with Appflowy style popover and fix some bugs

appflowy · appflowy · commit bda16b136b39 · 2022-09-18T20:57:28.000+08:00
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart
@@ -3,6 +3,7 @@ import 'package:app_flowy/plugins/grid/application/field/field_service.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.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -29,7 +30,8 @@ class GridFieldCell extends StatelessWidget {
       },
       child: BlocBuilder<FieldCellBloc, FieldCellState>(
         builder: (context, state) {
-          final button = Popover(
+          final button = AppFlowyStylePopover(
+            constraints: BoxConstraints.loose(const Size(240, 840)),
             direction: PopoverDirection.bottomWithLeftAligned,
             triggerActions: PopoverTriggerActionFlags.click,
             offset: const Offset(0, 10),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell_action_sheet.dart
@@ -3,9 +3,9 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/header/field_editor.
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:app_flowy/workspace/presentation/widgets/dialogs.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.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -32,38 +32,32 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
   Widget build(BuildContext context) {
     if (_showFieldEditor) {
       final field = widget.cellContext.field;
-      return OverlayContainer(
-        constraints: BoxConstraints.loose(const Size(240, 200)),
-        child: FieldEditor(
+      return FieldEditor(
+        gridId: widget.cellContext.gridId,
+        fieldName: field.name,
+        typeOptionLoader: FieldTypeOptionLoader(
           gridId: widget.cellContext.gridId,
-          fieldName: field.name,
-          typeOptionLoader: FieldTypeOptionLoader(
-            gridId: widget.cellContext.gridId,
-            field: field,
-          ),
+          field: field,
         ),
       );
     }
     return BlocProvider(
       create: (context) =>
           getIt<FieldActionSheetBloc>(param1: widget.cellContext),
-      child: OverlayContainer(
-        constraints: BoxConstraints.loose(const Size(240, 200)),
-        child: SingleChildScrollView(
-          child: Column(
-            children: [
-              _EditFieldButton(
-                cellContext: widget.cellContext,
-                onTap: () {
-                  setState(() {
-                    _showFieldEditor = true;
-                  });
-                },
-              ),
-              const VSpace(6),
-              _FieldOperationList(widget.cellContext, () {}),
-            ],
-          ),
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            _EditFieldButton(
+              cellContext: widget.cellContext,
+              onTap: () {
+                setState(() {
+                  _showFieldEditor = true;
+                });
+              },
+            ),
+            const VSpace(6),
+            _FieldOperationList(widget.cellContext, () {}),
+          ],
         ),
       ),
     );
@@ -159,17 +153,22 @@ class FieldActionCell extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return FlowyButton(
-      text: FlowyText.medium(action.title(),
-          fontSize: 12, color: enable ? null : theme.shader4),
+      text: FlowyText.medium(
+        action.title(),
+        fontSize: 12,
+        color: enable ? null : theme.shader4,
+      ),
       hoverColor: theme.hover,
       onTap: () {
         if (enable) {
           action.run(context);
           onTap();
         }
       },
-      leftIcon: svgWidget(action.iconName(),
-          color: enable ? theme.iconColor : theme.disableIconColor),
+      leftIcon: svgWidget(
+        action.iconName(),
+        color: enable ? theme.iconColor : theme.disableIconColor,
+      ),
     );
   }
 }
@@ -216,6 +215,7 @@ extension _FieldActionExtension on FieldAction {
             .add(const FieldActionSheetEvent.duplicateField());
         break;
       case FieldAction.delete:
+        PopoverContainer.of(context).close();
         NavigatorAlertDialog(
           title: LocaleKeys.grid_field_deleteFieldPromptMessage.tr(),
           confirm: () {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
@@ -70,6 +70,7 @@ class _FieldEditorState extends State<FieldEditor> {
               ),
               const VSpace(10),
               _FieldNameTextField(popoverMutex: popoverMutex),
+              const VSpace(10),
               ..._addDeleteFieldButton(state),
               _FieldTypeOptionCell(popoverMutex: popoverMutex),
             ],
@@ -84,7 +85,6 @@ class _FieldEditorState extends State<FieldEditor> {
       return [];
     }
     return [
-      const VSpace(10),
       _DeleteFieldButton(
         popoverMutex: popoverMutex,
         onDeleted: () {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_type_list.dart
@@ -47,10 +47,6 @@ class FieldTypeList extends StatelessWidget with FlowyOverlayDelegate {
       ),
     );
   }
-
-  static String identifier() {
-    return (FieldTypeList).toString();
-  }
 }
 
 class FieldTypeCell extends StatelessWidget {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/date.dart
@@ -75,7 +75,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
             context
                 .read<DateTypeOptionBloc>()
                 .add(DateTypeOptionEvent.didSelectDateFormat(format));
-            PopoverContainer.of(popoverContext).closeAll();
+            PopoverContainer.of(popoverContext).close();
           },
         );
       },
@@ -97,7 +97,7 @@ class DateTypeOptionWidget extends TypeOptionWidget {
             context
                 .read<DateTypeOptionBloc>()
                 .add(DateTypeOptionEvent.didSelectTimeFormat(format));
-            PopoverContainer.of(popoverContext).closeAll();
+            PopoverContainer.of(popoverContext).close();
           },
         );
       },
@@ -201,12 +201,10 @@ class DateFormatList extends StatelessWidget {
   Widget build(BuildContext context) {
     final cells = DateFormat.values.map((format) {
       return DateFormatCell(
-          dateFormat: format,
-          onSelected: (format) {
-            onSelected(format);
-            FlowyOverlay.of(context).remove(DateFormatList.identifier());
-          },
-          isSelected: selectedFormat == format);
+        dateFormat: format,
+        onSelected: onSelected,
+        isSelected: selectedFormat == format,
+      );
     }).toList();
 
     return SizedBox(
@@ -224,10 +222,6 @@ class DateFormatList extends StatelessWidget {
       ),
     );
   }
-
-  static String identifier() {
-    return (DateFormatList).toString();
-  }
 }
 
 class DateFormatCell extends StatelessWidget {
@@ -291,12 +285,10 @@ class TimeFormatList extends StatelessWidget {
   Widget build(BuildContext context) {
     final cells = TimeFormat.values.map((format) {
       return TimeFormatCell(
-          isSelected: format == selectedFormat,
-          timeFormat: format,
-          onSelected: (format) {
-            onSelected(format);
-            FlowyOverlay.of(context).remove(TimeFormatList.identifier());
-          });
+        isSelected: format == selectedFormat,
+        timeFormat: format,
+        onSelected: onSelected,
+      );
     }).toList();
 
     return SizedBox(
@@ -314,10 +306,6 @@ class TimeFormatList extends StatelessWidget {
       ),
     );
   }
-
-  static String identifier() {
-    return (TimeFormatList).toString();
-  }
 }
 
 class TimeFormatCell extends StatelessWidget {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/number.dart
@@ -82,7 +82,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
                     context
                         .read<NumberTypeOptionBloc>()
                         .add(NumberTypeOptionEvent.didSelectFormat(format));
-                    PopoverContainer.of(popoverContext).closeAll();
+                    PopoverContainer.of(popoverContext).close();
                   },
                   selectedFormat: state.typeOption.format,
                 );
@@ -145,10 +145,6 @@ class NumberFormatList extends StatelessWidget {
       ),
     );
   }
-
-  static String identifier() {
-    return (NumberFormatList).toString();
-  }
 }
 
 class NumberFormatCell extends StatelessWidget {
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart
@@ -207,13 +207,13 @@ class _OptionCellState extends State<_OptionCell> {
             context
                 .read<SelectOptionTypeOptionBloc>()
                 .add(SelectOptionTypeOptionEvent.deleteOption(widget.option));
-            PopoverContainer.of(popoverContext).closeAll();
+            PopoverContainer.of(popoverContext).close();
           },
           onUpdated: (updatedOption) {
             context
                 .read<SelectOptionTypeOptionBloc>()
                 .add(SelectOptionTypeOptionEvent.updateOption(updatedOption));
-            PopoverContainer.of(popoverContext).closeAll();
+            PopoverContainer.of(popoverContext).close();
           },
           key: ValueKey(widget.option.id),
         );
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/grid_property.dart
@@ -131,8 +131,10 @@ class _GridPropertyCell extends StatelessWidget {
         return FieldEditor(
           gridId: gridId,
           fieldName: fieldContext.name,
-          typeOptionLoader:
-              FieldTypeOptionLoader(gridId: gridId, field: fieldContext.field),
+          typeOptionLoader: FieldTypeOptionLoader(
+            gridId: gridId,
+            field: fieldContext.field,
+          ),
         );
       },
     );

Original file line number	Diff line number	Diff line change
`@@ -47,10 +47,6 @@ class FieldTypeList extends StatelessWidget with FlowyOverlayDelegate {`
`47`	`47`	`),`
`48`	`48`	`);`
`49`	`49`	`}`
`50`		`-`
`51`		`- static String identifier() {`
`52`		`- return (FieldTypeList).toString();`
`53`		`- }`
`54`	`50`	`}`
`55`	`51`
`56`	`52`	`class FieldTypeCell extends StatelessWidget {`