Merge pull request #1109 from AppFlowy-IO/fix/drag_grid_header_cell

fix: tap event conflict when dragging grid header cell

Author: appflowy

.githooks/commit-msg

@@ -45,7 +45,7 @@ test "" = "$(grep '^Signed-off-by: ' "$1" |
 if [ $? -ne 0 ]
 then
     printError "Please fix your commit message to match AppFlowy coding standards"
-    printError "https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides"
+    printError "https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/code-submission-guidelines#commit-message-guidelines"
     exit 1
 fi
 

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

@@ -65,7 +65,6 @@ class _SettingButtonState extends State<_SettingButton> {
     return AppFlowyPopover(
       controller: popoverController,
       constraints: BoxConstraints.loose(const Size(260, 400)),
-      triggerActions: PopoverTriggerFlags.click,
       child: FlowyIconButton(
         hoverColor: theme.hover,
         width: 22,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart

@@ -220,7 +220,6 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
       constraints: BoxConstraints.loose(const Size(300, 160)),
       controller: _popoverController,
       direction: PopoverDirection.bottomWithLeftAligned,
-      triggerActions: PopoverTriggerFlags.click,
       offset: const Offset(0, 20),
       child: svgWidget("editor/edit", color: theme.iconColor),
       popupBuilder: (BuildContext popoverContext) {

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

@@ -15,34 +15,47 @@ import 'field_type_extension.dart';
 
 import 'field_cell_action_sheet.dart';
 
-class GridFieldCell extends StatelessWidget {
+class GridFieldCell extends StatefulWidget {
   final GridFieldCellContext cellContext;
   const GridFieldCell({
     Key? key,
     required this.cellContext,
   }) : super(key: key);
 
+  @override
+  State<GridFieldCell> createState() => _GridFieldCellState();
+}
+
+class _GridFieldCellState extends State<GridFieldCell> {
+  late PopoverController popoverController;
+
+  @override
+  void initState() {
+    popoverController = PopoverController();
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) {
-        return FieldCellBloc(cellContext: cellContext);
+        return FieldCellBloc(cellContext: widget.cellContext);
       },
       child: BlocBuilder<FieldCellBloc, FieldCellState>(
         builder: (context, state) {
           final button = AppFlowyPopover(
+            triggerActions: PopoverTriggerFlags.none,
             constraints: BoxConstraints.loose(const Size(240, 840)),
             direction: PopoverDirection.bottomWithLeftAligned,
-            triggerActions: PopoverTriggerFlags.click,
-            offset: const Offset(0, 10),
+            controller: popoverController,
             popupBuilder: (BuildContext context) {
               return GridFieldCellActionSheet(
-                cellContext: cellContext,
+                cellContext: widget.cellContext,
               );
             },
             child: FieldCellButton(
-              field: cellContext.field,
-              onTap: () {},
+              field: widget.cellContext.field,
+              onTap: () => popoverController.show(),
             ),
           );
 

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

@@ -102,10 +102,8 @@ class _GridHeaderState extends State<_GridHeader> {
             .where((field) => field.visibility)
             .map((field) =>
                 GridFieldCellContext(gridId: widget.gridId, field: field.field))
-            .map((ctx) => GridFieldCell(
-                  key: _getKeyById(ctx.field.id),
-                  cellContext: ctx,
-                ))
+            .map((ctx) =>
+                GridFieldCell(key: _getKeyById(ctx.field.id), cellContext: ctx))
             .toList();
 
         return Container(
@@ -115,6 +113,7 @@ class _GridHeaderState extends State<_GridHeader> {
               crossAxisAlignment: CrossAxisAlignment.stretch,
               scrollController: ScrollController(),
               header: const _CellLeading(),
+              needsLongPressDraggable: false,
               footer: _CellTrailing(gridId: widget.gridId),
               onReorder: (int oldIndex, int newIndex) {
                 _onReorder(cells, oldIndex, context, newIndex);
@@ -177,7 +176,6 @@ class CreateFieldButton extends StatelessWidget {
     final theme = context.watch<AppTheme>();
 
     return AppFlowyPopover(
-      triggerActions: PopoverTriggerFlags.click,
       direction: PopoverDirection.bottomWithRightAligned,
       asBarrier: true,
       constraints: BoxConstraints.loose(const Size(240, 600)),

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

@@ -192,7 +192,6 @@ class _CreateFieldButtonState extends State<_CreateFieldButton> {
     return AppFlowyPopover(
       constraints: BoxConstraints.loose(const Size(240, 200)),
       controller: popoverController,
-      triggerActions: PopoverTriggerFlags.click,
       direction: PopoverDirection.topWithLeftAligned,
       onClose: widget.onClosed,
       child: Container(

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

@@ -118,7 +118,6 @@ class _GridPropertyCell extends StatelessWidget {
   Widget _editFieldButton(AppTheme theme, BuildContext context) {
     return AppFlowyPopover(
       mutex: popoverMutex,
-      triggerActions: PopoverTriggerFlags.click,
       offset: const Offset(20, 0),
       constraints: BoxConstraints.loose(const Size(240, 400)),
       child: FlowyButton(

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

@@ -1,4 +1,3 @@
-import 'package:appflowy_popover/appflowy_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';
@@ -55,7 +54,6 @@ class _SettingButton extends StatelessWidget {
     final theme = context.watch<AppTheme>();
     return AppFlowyPopover(
       constraints: BoxConstraints.loose(const Size(260, 400)),
-      triggerActions: PopoverTriggerFlags.click,
       offset: const Offset(0, 10),
       child: FlowyIconButton(
         width: 22,

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

@@ -17,8 +17,9 @@ class PopoverController {
 }
 
 class PopoverTriggerFlags {
-  static int click = 0x01;
-  static int hover = 0x02;
+  static const int none = 0x00;
+  static const int click = 0x01;
+  static const int hover = 0x02;
 }
 
 enum PopoverDirection {

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

@@ -20,9 +20,9 @@ class AppFlowyPopover extends StatelessWidget {
     required this.popupBuilder,
     this.direction = PopoverDirection.rightWithTopAligned,
     this.onClose,
-    this.constraints,
+    this.constraints = const BoxConstraints(maxWidth: 240, maxHeight: 600),
     this.mutex,
-    this.triggerActions = 0,
+    this.triggerActions = PopoverTriggerFlags.click,
     this.offset,
     this.controller,
     this.asBarrier = false,