chore: add min height for row

RealWilliamHoo · Apr 30, 2022 · 371f753 · 371f753
1 parent 1ad7e0e
commit 371f753
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 99 deletions.
diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart
@@ -9,8 +9,8 @@ class GridSize {
   static double get leadingHeaderPadding => 50 * scale;
   static double get trailHeaderPadding => 140 * scale;
   static double get headerContainerPadding => 0 * scale;
-  static double get cellHPadding => 12 * scale;
-  static double get cellVPadding => 12 * scale;
+  static double get cellHPadding => 8 * scale;
+  static double get cellVPadding => 8 * scale;
   static double get typeOptionItemHeight => 32 * scale;
   static double get typeOptionSeparatorHeight => 6 * scale;
 

diff --git a/...tend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart b/...tend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
@@ -121,7 +121,7 @@ class CellContainer extends StatelessWidget {
             behavior: HitTestBehavior.translucent,
             onTap: () => child.requestFocus.notify(),
             child: Container(
-              constraints: BoxConstraints(maxWidth: width),
+              constraints: BoxConstraints(maxWidth: width, minHeight: 46),
               decoration: _makeBoxDecoration(context, isFocus),
               padding: GridSize.cellContentInsets,
               child: container,

diff --git a/...end/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart b/...end/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart
@@ -35,16 +35,13 @@ class _CheckboxCellState extends State<CheckboxCell> {
       child: BlocBuilder<CheckboxCellBloc, CheckboxCellState>(
         builder: (context, state) {
           final icon = state.isSelected ? svgWidget('editor/editor_check') : svgWidget('editor/editor_uncheck');
-          return SizedBox(
-            height: 20,
-            child: Align(
-              alignment: Alignment.centerLeft,
-              child: FlowyIconButton(
-                onPressed: () => context.read<CheckboxCellBloc>().add(const CheckboxCellEvent.select()),
-                iconPadding: EdgeInsets.zero,
-                icon: icon,
-                width: 23,
-              ),
+          return Align(
+            alignment: Alignment.centerLeft,
+            child: FlowyIconButton(
+              onPressed: () => context.read<CheckboxCellBloc>().add(const CheckboxCellEvent.select()),
+              iconPadding: EdgeInsets.zero,
+              icon: icon,
+              width: 23,
             ),
           );
         },

diff --git a/...b/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart b/...b/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart
@@ -5,6 +5,7 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 // ignore: unused_import
 import 'package:flowy_sdk/log.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -44,47 +45,27 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
 
   @override
   void initState() {
-    final cellContext = _buildCellContext();
+    final cellContext = widget.cellContextBuilder.build() as GridSelectOptionCellContext;
     _cellBloc = getIt<SelectionCellBloc>(param1: cellContext)..add(const SelectionCellEvent.initial());
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
-    // Log.trace("build widget $hashCode");
     return BlocProvider.value(
       value: _cellBloc,
       child: BlocBuilder<SelectionCellBloc, SelectionCellState>(
         builder: (context, state) {
-          List<Widget> children = [];
-          children.addAll(state.selectedOptions.map((option) => SelectOptionTag(option: option)).toList());
-
-          if (children.isEmpty && widget.cellStyle != null) {
-            children.add(FlowyText.medium(widget.cellStyle!.placeholder, fontSize: 14, color: theme.shader3));
-          }
-          return SizedBox.expand(
-            child: InkWell(
-              onTap: () {
-                widget.onFocus.value = true;
-                SelectOptionCellEditor.show(
-                  context,
-                  _buildCellContext(),
-                  () => widget.onFocus.value = false,
-                );
-              },
-              child: Center(child: Wrap(children: children)),
-            ),
-          );
+          return _SelectOptionCell(
+              selectOptions: state.selectedOptions,
+              cellStyle: widget.cellStyle,
+              onFocus: (value) => widget.onFocus.value = value,
+              cellContextBuilder: widget.cellContextBuilder);
         },
       ),
     );
   }
 
-  GridSelectOptionCellContext _buildCellContext() {
-    return widget.cellContextBuilder.build() as GridSelectOptionCellContext;
-  }
-
   @override
   Future<void> dispose() async {
     _cellBloc.close();
@@ -118,7 +99,7 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
 
   @override
   void initState() {
-    final cellContext = _buildCellContext();
+    final cellContext = widget.cellContextBuilder.build() as GridSelectOptionCellContext;
     _cellBloc = getIt<SelectionCellBloc>(param1: cellContext)..add(const SelectionCellEvent.initial());
     super.initState();
   }
@@ -129,25 +110,11 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
       value: _cellBloc,
       child: BlocBuilder<SelectionCellBloc, SelectionCellState>(
         builder: (context, state) {
-          List<Widget> children = state.selectedOptions.map((option) => SelectOptionTag(option: option)).toList();
-
-          if (children.isEmpty && widget.cellStyle != null) {
-            children.add(FlowyText.medium(widget.cellStyle!.placeholder, fontSize: 14));
-          }
-
-          return SizedBox.expand(
-            child: InkWell(
-              onTap: () {
-                widget.onFocus.value = true;
-                SelectOptionCellEditor.show(
-                  context,
-                  _buildCellContext(),
-                  () => widget.onFocus.value = false,
-                );
-              },
-              child: Wrap(children: children, spacing: 4, runSpacing: 4),
-            ),
-          );
+          return _SelectOptionCell(
+              selectOptions: state.selectedOptions,
+              cellStyle: widget.cellStyle,
+              onFocus: (value) => widget.onFocus.value = value,
+              cellContextBuilder: widget.cellContextBuilder);
         },
       ),
     );
@@ -158,8 +125,51 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
     _cellBloc.close();
     super.dispose();
   }
+}
+
+class _SelectOptionCell extends StatelessWidget {
+  final List<SelectOption> selectOptions;
+  final void Function(bool) onFocus;
+  final SelectOptionCellStyle? cellStyle;
+  final GridCellContextBuilder cellContextBuilder;
+  const _SelectOptionCell({
+    required this.selectOptions,
+    required this.onFocus,
+    required this.cellStyle,
+    required this.cellContextBuilder,
+    Key? key,
+  }) : super(key: key);
 
-  GridSelectOptionCellContext _buildCellContext() {
-    return widget.cellContextBuilder.build() as GridSelectOptionCellContext;
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    final Widget child;
+    if (selectOptions.isEmpty && cellStyle != null) {
+      child = Align(
+        alignment: Alignment.centerLeft,
+        child: FlowyText.medium(cellStyle!.placeholder, fontSize: 14, color: theme.shader3),
+      );
+    } else {
+      final tags = selectOptions.map((option) => SelectOptionTag(option: option)).toList();
+      child = Align(
+        alignment: Alignment.centerLeft,
+        child: Wrap(children: tags, spacing: 4, runSpacing: 4),
+      );
+    }
+
+    final cellContext = cellContextBuilder.build() as GridSelectOptionCellContext;
+    return Stack(
+      alignment: AlignmentDirectional.center,
+      fit: StackFit.expand,
+      children: [
+        child,
+        InkWell(
+          onTap: () {
+            onFocus(true);
+            SelectOptionCellEditor.show(context, cellContext, () => onFocus(false));
+          },
+        ),
+      ],
+    );
   }
 }
diff --git a/...workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart b/...workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart
@@ -184,41 +184,50 @@ class _SelectOptionCell extends StatelessWidget {
     final theme = context.watch<AppTheme>();
     return SizedBox(
       height: GridSize.typeOptionItemHeight,
-      child: InkWell(
-        onTap: () {
-          context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
-        },
-        child: FlowyHover(
-          style: HoverStyle(hoverColor: theme.hover),
-          builder: (_, onHover) {
-            List<Widget> children = [
-              SelectOptionTag(option: option, isSelected: isSelected),
-              const Spacer(),
-            ];
-
-            if (isSelected) {
-              children.add(svgWidget("grid/checkmark"));
-            }
-
-            if (onHover) {
-              children.add(FlowyIconButton(
-                width: 30,
-                onPressed: () => _showEditPannel(context),
-                iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
-                icon: svgWidget("editor/details", color: theme.iconColor),
-              ));
-            }
-
-            return Padding(
-              padding: const EdgeInsets.all(3.0),
-              child: Row(children: children),
-            );
-          },
-        ),
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          _body(theme, context),
+          InkWell(
+            onTap: () {
+              context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
+            },
+          ),
+        ],
       ),
     );
   }
 
+  FlowyHover _body(AppTheme theme, BuildContext context) {
+    return FlowyHover(
+      style: HoverStyle(hoverColor: theme.hover),
+      builder: (_, onHover) {
+        List<Widget> children = [
+          SelectOptionTag(option: option, isSelected: isSelected),
+          const Spacer(),
+        ];
+
+        if (isSelected) {
+          children.add(svgWidget("grid/checkmark"));
+        }
+
+        if (onHover) {
+          children.add(FlowyIconButton(
+            width: 30,
+            onPressed: () => _showEditPannel(context),
+            iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+            icon: svgWidget("editor/details", color: theme.iconColor),
+          ));
+        }
+
+        return Padding(
+          padding: const EdgeInsets.all(3.0),
+          child: Row(children: children),
+        );
+      },
+    );
+  }
+
   void _showEditPannel(BuildContext context) {
     final pannel = EditSelectOptionPannel(
       option: option,

diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart
@@ -205,13 +205,14 @@ class _CellExpander extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    return FlowyIconButton(
-      width: 30,
-      height: 24,
-      onPressed: onExpand,
-      iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
-      fillColor: theme.surface,
-      icon: svgWidget("grid/expander", color: theme.main1),
+    return FittedBox(
+      fit: BoxFit.contain,
+      child: FlowyIconButton(
+        onPressed: onExpand,
+        iconPadding: const EdgeInsets.fromLTRB(6, 6, 6, 6),
+        fillColor: theme.surface,
+        icon: svgWidget("grid/expander", color: theme.main1),
+      ),
     );
   }
 }