chore: edit field

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart

@@ -1,10 +1,7 @@
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
-import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show FieldType;
 import 'package:flutter/widgets.dart';
-import 'package:provider/provider.dart';
 import 'checkbox_cell.dart';
 import 'date_cell.dart';
 import 'number_cell.dart';
@@ -46,109 +43,4 @@ abstract class GridCellWidget extends HoverWidget {
   GridCellWidget({Key? key}) : super(key: key);
 }
 
-abstract class B {
-  ValueNotifier<bool> get onFocus;
-}
-
 abstract class GridCellStyle {}
-
-//
-abstract class HoverWidget extends StatefulWidget {
-  const HoverWidget({Key? key}) : super(key: key);
-
-  ValueNotifier<bool> get onFocus;
-}
-
-class FlowyHover2 extends StatefulWidget {
-  final HoverWidget child;
-  const FlowyHover2({required this.child, Key? key}) : super(key: key);
-
-  @override
-  State<FlowyHover2> createState() => _FlowyHover2State();
-}
-
-class _FlowyHover2State extends State<FlowyHover2> {
-  late FlowyHoverState _hoverState;
-
-  @override
-  void initState() {
-    _hoverState = FlowyHoverState();
-    widget.child.onFocus.addListener(() {
-      _hoverState.onFocus = widget.child.onFocus.value;
-    });
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    _hoverState.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ChangeNotifierProvider.value(
-      value: _hoverState,
-      child: MouseRegion(
-        cursor: SystemMouseCursors.click,
-        opaque: false,
-        onEnter: (p) => setState(() => _hoverState.onHover = true),
-        onExit: (p) => setState(() => _hoverState.onHover = false),
-        child: Stack(
-          fit: StackFit.expand,
-          alignment: AlignmentDirectional.center,
-          children: [
-            const _HoverBackground(),
-            widget.child,
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class _HoverBackground extends StatelessWidget {
-  const _HoverBackground({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
-    return Consumer<FlowyHoverState>(
-      builder: (context, state, child) {
-        if (state.onHover || state.onFocus) {
-          return FlowyHoverContainer(
-            style: HoverStyle(
-              borderRadius: Corners.s6Border,
-              hoverColor: theme.shader6,
-            ),
-          );
-        } else {
-          return const SizedBox();
-        }
-      },
-    );
-  }
-}
-
-class FlowyHoverState extends ChangeNotifier {
-  bool _onHover = false;
-  bool _onFocus = false;
-
-  set onHover(bool value) {
-    if (_onHover != value) {
-      _onHover = value;
-      notifyListeners();
-    }
-  }
-
-  bool get onHover => _onHover;
-
-  set onFocus(bool value) {
-    if (_onFocus != value) {
-      _onFocus = value;
-      notifyListeners();
-    }
-  }
-
-  bool get onFocus => _onFocus;
-}

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart

@@ -7,16 +7,9 @@ import 'cell_builder.dart';
 
 class GridTextCellStyle extends GridCellStyle {
   String? placeholder;
-  Color? hoverColor;
-  bool filled;
-  InputBorder? inputBorder;
-  EdgeInsets? contentPadding;
+
   GridTextCellStyle({
     this.placeholder,
-    this.hoverColor,
-    this.filled = false,
-    this.inputBorder,
-    this.contentPadding,
   });
 }
 
@@ -79,12 +72,9 @@ class _GridTextCellState extends State<GridTextCell> {
             maxLines: 1,
             style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
             decoration: InputDecoration(
-              contentPadding: widget.cellStyle?.contentPadding ?? EdgeInsets.zero,
-              border: widget.cellStyle?.inputBorder ?? InputBorder.none,
+              contentPadding: EdgeInsets.zero,
+              border: InputBorder.none,
               hintText: widget.cellStyle?.placeholder,
-              hoverColor: widget.cellStyle?.hoverColor ?? Colors.transparent,
-              filled: widget.cellStyle?.filled ?? false,
-              fillColor: Colors.transparent,
               isDense: true,
             ),
           );

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

@@ -1,7 +1,9 @@
+import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_detail_bloc.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/prelude.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
@@ -108,14 +110,29 @@ class _RowDetailCell extends StatelessWidget {
         children: [
           SizedBox(
             width: 150,
-            child: FieldCellButton(field: cellData.field, onTap: () {}),
+            child: FieldCellButton(field: cellData.field, onTap: () => _showFieldEditor(context)),
           ),
           const HSpace(10),
-          Expanded(child: FlowyHover2(child: cell)),
+          Expanded(
+            child: FlowyHover2(
+              child: cell,
+              contentPadding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+            ),
+          ),
         ],
       ),
     );
   }
+
+  void _showFieldEditor(BuildContext context) {
+    FieldEditor(
+      gridId: cellData.gridId,
+      fieldContextLoader: FieldContextLoaderAdaptor(
+        gridId: cellData.gridId,
+        field: cellData.field,
+      ),
+    ).show(context);
+  }
 }
 
 GridCellStyle? _buildCellStyle(AppTheme theme, FieldType fieldType) {
@@ -130,10 +147,7 @@ GridCellStyle? _buildCellStyle(AppTheme theme, FieldType fieldType) {
       return null;
     case FieldType.RichText:
       return GridTextCellStyle(
-        hoverColor: theme.shader6,
-        filled: true,
         placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
-        contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
       );
     case FieldType.SingleSelect:
       return null;

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

@@ -207,8 +207,14 @@ class FlowyOverlayState extends State<FlowyOverlay> {
 
       final reveredList = _overlayList.reversed.toList();
       final firstItem = reveredList.removeAt(0);
-      firstItem.delegate?.didRemove();
       _overlayList.remove(firstItem);
+      if (firstItem.delegate != null) {
+        firstItem.delegate!.didRemove();
+
+        if (firstItem.delegate!.asBarrier()) {
+          return;
+        }
+      }
 
       for (final element in reveredList) {
         if (element.delegate?.asBarrier() ?? false) {
@@ -286,27 +292,23 @@ class FlowyOverlayState extends State<FlowyOverlay> {
 
   @override
   Widget build(BuildContext context) {
-    final overlays = _overlayList.map((item) => item.widget);
-    List<Widget> children = <Widget>[widget.child];
-
-    Widget? child;
-    if (overlays.isNotEmpty) {
-      child = Container(
-        color: style.barrierColor,
-        child: GestureDetector(
-          behavior: HitTestBehavior.opaque,
-          onTap: _handleTapOnBackground,
-        ),
-      );
-
-      if (style.blur) {
-        child = BackdropFilter(
-          child: child,
-          filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
+    final overlays = _overlayList.map((item) {
+      var widget = item.widget;
+      if (item.delegate?.asBarrier() ?? false) {
+        widget = Container(
+          color: style.barrierColor,
+          child: GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onTap: _handleTapOnBackground,
+            child: widget,
+          ),
         );
       }
-    }
+      return widget;
+    }).toList();
 
+    List<Widget> children = <Widget>[widget.child];
+    Widget? child = _renderBackground(overlays);
     if (child != null) {
       children.add(child);
     }
@@ -335,4 +337,25 @@ class FlowyOverlayState extends State<FlowyOverlay> {
   void _handleTapOnBackground() {
     removeAll();
   }
+
+  Widget? _renderBackground(List<Widget> overlays) {
+    Widget? child;
+    if (overlays.isNotEmpty) {
+      child = Container(
+        color: style.barrierColor,
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: _handleTapOnBackground,
+        ),
+      );
+
+      if (style.blur) {
+        child = BackdropFilter(
+          child: child,
+          filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
+        );
+      }
+    }
+    return child;
+  }
 }

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart

@@ -110,7 +110,12 @@ abstract class HoverWidget extends StatefulWidget {
 
 class FlowyHover2 extends StatefulWidget {
   final HoverWidget child;
-  const FlowyHover2({required this.child, Key? key}) : super(key: key);
+  final EdgeInsets contentPadding;
+  const FlowyHover2({
+    required this.child,
+    this.contentPadding = EdgeInsets.zero,
+    Key? key,
+  }) : super(key: key);
 
   @override
   State<FlowyHover2> createState() => _FlowyHover2State();
@@ -144,11 +149,14 @@ class _FlowyHover2State extends State<FlowyHover2> {
         onEnter: (p) => setState(() => _hoverState.onHover = true),
         onExit: (p) => setState(() => _hoverState.onHover = false),
         child: Stack(
-          fit: StackFit.expand,
+          fit: StackFit.loose,
           alignment: AlignmentDirectional.center,
           children: [
             const _HoverBackground(),
-            widget.child,
+            Padding(
+              padding: widget.contentPadding,
+              child: widget.child,
+            ),
           ],
         ),
       ),