chore: auto expand row detail page's cell

Author: appflowy

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

@@ -47,13 +47,11 @@ class BlankCell extends StatelessWidget {
   }
 }
 
-abstract class GridCellWidget extends HoverWidget {
+abstract class GridCellWidget implements FlowyHoverWidget {
   @override
   final ValueNotifier<bool> onFocus = ValueNotifier<bool>(false);
 
   final GridCellRequestFocusNotifier requestFocus = GridCellRequestFocusNotifier();
-
-  GridCellWidget({Key? key}) : super(key: key);
 }
 
 class GridCellRequestFocusNotifier extends ChangeNotifier {

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

@@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'cell_builder.dart';
 
-class CheckboxCell extends GridCellWidget {
+class CheckboxCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   CheckboxCell({
     required this.cellContextBuilder,
@@ -41,7 +41,7 @@ class _CheckboxCellState extends State<CheckboxCell> {
               onPressed: () => context.read<CheckboxCellBloc>().add(const CheckboxCellEvent.select()),
               iconPadding: EdgeInsets.zero,
               icon: icon,
-              width: 23,
+              width: 20,
             ),
           );
         },

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

@@ -7,7 +7,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'cell_builder.dart';
 
-class NumberCell extends GridCellWidget {
+class NumberCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
 
   NumberCell({

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

@@ -20,7 +20,7 @@ class SelectOptionCellStyle extends GridCellStyle {
   });
 }
 
-class SingleSelectCell extends GridCellWidget {
+class SingleSelectCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final SelectOptionCellStyle? cellStyle;
 
@@ -74,7 +74,7 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
 }
 
 //----------------------------------------------------------------
-class MultiSelectCell extends GridCellWidget {
+class MultiSelectCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final SelectOptionCellStyle? cellStyle;
 
@@ -160,7 +160,7 @@ class _SelectOptionCell extends StatelessWidget {
           .toList();
       child = Align(
         alignment: Alignment.centerLeft,
-        child: Wrap(children: tags, spacing: 4, runSpacing: 4),
+        child: Wrap(children: tags, spacing: 4, runSpacing: 2),
       );
     }
 

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

@@ -13,7 +13,7 @@ class GridTextCellStyle extends GridCellStyle {
   });
 }
 
-class GridTextCell extends GridCellWidget {
+class GridTextCell extends StatefulWidget with GridCellWidget {
   final GridCellContextBuilder cellContextBuilder;
   late final GridTextCellStyle? cellStyle;
   GridTextCell({

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

@@ -71,10 +71,11 @@ class _RowDetailPageState extends State<RowDetailPage> {
         child: Column(
           children: [
             SizedBox(
-                height: 40,
-                child: Row(
-                  children: const [Spacer(), _CloseButton()],
-                )),
+              height: 40,
+              child: Row(
+                children: const [Spacer(), _CloseButton()],
+              ),
+            ),
             Expanded(child: _PropertyList(cellCache: widget.cellCache)),
           ],
         ),
@@ -153,24 +154,26 @@ class _RowDetailCell extends StatelessWidget {
       cellCache,
       style: _buildCellStyle(theme, gridCell.field.fieldType),
     );
-    return SizedBox(
-      height: 36,
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          SizedBox(
-            width: 150,
-            child: FieldCellButton(field: gridCell.field, onTap: () => _showFieldEditor(context)),
-          ),
-          const HSpace(10),
-          Expanded(
-            child: FlowyHover2(
-              child: cell,
-              contentPadding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+    return ConstrainedBox(
+      constraints: const BoxConstraints(minHeight: 40),
+      child: IntrinsicHeight(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 150,
+              child: FieldCellButton(field: gridCell.field, onTap: () => _showFieldEditor(context)),
             ),
-          ),
-        ],
+            const HSpace(10),
+            Expanded(
+              child: FlowyHover2(
+                child: cell,
+                contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

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

@@ -102,14 +102,14 @@ class FlowyHoverContainer extends StatelessWidget {
 }
 
 //
-abstract class HoverWidget extends StatefulWidget {
-  const HoverWidget({Key? key}) : super(key: key);
+abstract class FlowyHoverWidget extends Widget {
+  const FlowyHoverWidget({Key? key}) : super(key: key);
 
-  ValueNotifier<bool> get onFocus;
+  ValueNotifier<bool>? get onFocus;
 }
 
 class FlowyHover2 extends StatefulWidget {
-  final Widget child;
+  final FlowyHoverWidget child;
   final EdgeInsets contentPadding;
   const FlowyHover2({
     required this.child,
@@ -123,24 +123,30 @@ class FlowyHover2 extends StatefulWidget {
 
 class _FlowyHover2State extends State<FlowyHover2> {
   late FlowyHoverState _hoverState;
+  VoidCallback? _listenerFn;
 
   @override
   void initState() {
     _hoverState = FlowyHoverState();
 
-    if (widget.child is HoverWidget) {
-      final hoverWidget = widget.child as HoverWidget;
-      hoverWidget.onFocus.addListener(() {
-        _hoverState.onFocus = hoverWidget.onFocus.value;
-      });
+    listener() {
+      _hoverState.onFocus = widget.child.onFocus?.value ?? false;
     }
 
+    _listenerFn = listener;
+    widget.child.onFocus?.addListener(listener);
+
     super.initState();
   }
 
   @override
   void dispose() {
     _hoverState.dispose();
+
+    if (_listenerFn != null) {
+      widget.child.onFocus?.removeListener(_listenerFn!);
+      _listenerFn = null;
+    }
     super.dispose();
   }
 
@@ -179,10 +185,7 @@ class _HoverBackground extends StatelessWidget {
       builder: (context, state, child) {
         if (state.onHover || state.onFocus) {
           return FlowyHoverContainer(
-            style: HoverStyle(
-              borderRadius: Corners.s6Border,
-              hoverColor: theme.shader6,
-            ),
+            style: HoverStyle(borderRadius: Corners.s6Border, hoverColor: theme.shader6),
           );
         } else {
           return const SizedBox();

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -132,9 +132,12 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
       children.add(
         Align(
           alignment: Alignment.centerLeft,
-          child: Text(
-            widget.errorText,
-            style: widget.style,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 4),
+            child: Text(
+              widget.errorText,
+              style: widget.style,
+            ),
           ),
         ),
       );

frontend/rust-lib/flowy-grid/Flowy.toml

@@ -2,7 +2,7 @@
 proto_crates = [
     "src/event_map.rs",
     "src/services/field/type_options",
-    "src/services/entities",
+    "src/entities",
     "src/dart_notification.rs"
 ]
 event_files = ["src/event_map.rs"]

frontend/rust-lib/flowy-grid/src/services/entities/cell_entities.rs renamed to frontend/rust-lib/flowy-grid/src/entities/cell_entities.rs

@@ -1,4 +1,4 @@
-use crate::services::entities::{FieldIdentifier, FieldIdentifierPayload};
+use crate::entities::{FieldIdentifier, FieldIdentifierPayload};
 use flowy_derive::ProtoBuf;
 use flowy_error::ErrorCode;
 use flowy_grid_data_model::parser::NotEmptyStr;