From 9c44b30847afc2574da79ee0e49161daec5f78a3 Mon Sep 17 00:00:00 2001
From: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
Date: Thu, 19 Jan 2023 16:01:37 +0800
Subject: [PATCH] chore: grid field action sheet layout improvement (#1698)

* chore: grid action sheet layout improvement

* style: port away from list
---
 .../widgets/header/field_cell.dart            |   3 +-
 .../header/field_cell_action_sheet.dart       | 104 +++++++++---------
 2 files changed, 54 insertions(+), 53 deletions(-)

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
index 21ab461a48..d10f1c5759 100755
--- 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
@@ -44,7 +44,8 @@ class _GridFieldCellState extends State<GridFieldCell> {
         builder: (context, state) {
           final button = AppFlowyPopover(
             triggerActions: PopoverTriggerFlags.none,
-            constraints: BoxConstraints.loose(const Size(400, 240)),
+            constraints: const BoxConstraints(),
+            margin: EdgeInsets.zero,
             direction: PopoverDirection.bottomWithLeftAligned,
             controller: popoverController,
             popupBuilder: (BuildContext context) {
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
index 57f9f54e4d..bf0e655e69 100644
--- 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
@@ -12,6 +12,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:styled_widget/styled_widget.dart';
 
 import '../../layout/sizes.dart';
 
@@ -31,12 +32,15 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
   Widget build(BuildContext context) {
     if (_showFieldEditor) {
       final field = widget.cellContext.field;
-      return FieldEditor(
-        gridId: widget.cellContext.gridId,
-        fieldName: field.name,
-        typeOptionLoader: FieldTypeOptionLoader(
+      return SizedBox(
+        width: 400,
+        child: FieldEditor(
           gridId: widget.cellContext.gridId,
-          field: field,
+          fieldName: field.name,
+          typeOptionLoader: FieldTypeOptionLoader(
+            gridId: widget.cellContext.gridId,
+            field: field,
+          ),
         ),
       );
     }
@@ -44,25 +48,22 @@ class _GridFieldCellActionSheetState extends State<GridFieldCellActionSheet> {
       create: (context) =>
           getIt<FieldActionSheetBloc>(param1: widget.cellContext),
       child: IntrinsicWidth(
-        child: IntrinsicHeight(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              _EditFieldButton(
-                cellContext: widget.cellContext,
-                onTap: () {
-                  setState(() {
-                    _showFieldEditor = true;
-                  });
-                },
-              ),
-              VSpace(GridSize.typeOptionSeparatorHeight),
-              _FieldOperationList(widget.cellContext),
-            ],
-          ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _EditFieldButton(
+              cellContext: widget.cellContext,
+              onTap: () {
+                setState(() => _showFieldEditor = true);
+              },
+            ),
+            VSpace(GridSize.typeOptionSeparatorHeight),
+            _FieldOperationList(widget.cellContext),
+          ],
         ),
       ),
-    );
+    ).padding(all: 6.0);
   }
 }
 
@@ -92,43 +93,42 @@ class _EditFieldButton extends StatelessWidget {
 
 class _FieldOperationList extends StatelessWidget {
   final GridFieldCellContext fieldInfo;
-  final double cellWidth = 100;
-
   const _FieldOperationList(this.fieldInfo, {Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      width: cellWidth * 2,
-      child: Wrap(
-        children: buildCells(),
+    return Column(children: [
+      Flex(
+        direction: Axis.horizontal,
+        children: [
+          _actionCell(FieldAction.hide),
+          HSpace(GridSize.typeOptionSeparatorHeight),
+          _actionCell(FieldAction.duplicate),
+        ],
       ),
-    );
+      VSpace(GridSize.typeOptionSeparatorHeight),
+      Flex(
+        direction: Axis.horizontal,
+        children: [
+          _actionCell(FieldAction.delete),
+          HSpace(GridSize.typeOptionSeparatorHeight),
+          const Spacer(),
+        ],
+      ),
+    ]);
   }
 
-  List<Widget> buildCells() {
-    return FieldAction.values.map(
-      (action) {
-        bool enable = true;
-        switch (action) {
-          case FieldAction.delete:
-            enable = !fieldInfo.field.isPrimary;
-            break;
-          default:
-            break;
-        }
-
-        return SizedBox(
-          height: GridSize.popoverItemHeight,
-          width: cellWidth,
-          child: FieldActionCell(
-            fieldInfo: fieldInfo,
-            action: action,
-            enable: enable,
-          ),
-        );
-      },
-    ).toList();
+  Widget _actionCell(FieldAction action) {
+    return Flexible(
+      child: SizedBox(
+        height: GridSize.popoverItemHeight,
+        child: FieldActionCell(
+          fieldInfo: fieldInfo,
+          action: action,
+          enable: action != FieldAction.delete || !fieldInfo.field.isPrimary,
+        ),
+      ),
+    );
   }
 }