fix: grid cell abnormal on click behaviour (#1278)

2024-08-30 18:12:39 +00:00 · 2022-10-14 13:39:40 +05:30 · 2022-10-14 13:39:40 +05:30 · f53c2567fc
commit f53c2567fc
parent c7bdd4bcc2
7 changed files with 71 additions and 44 deletions
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart
@ -1,4 +1,5 @@
 import 'package:flowy_infra/theme.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
@ -56,7 +57,6 @@ class CellContainer extends StatelessWidget {
            child: Container(
              constraints: BoxConstraints(maxWidth: width, minHeight: 46),
              decoration: _makeBoxDecoration(context, isFocus),
-              padding: GridSize.cellContentInsets,
              child: container,
            ),
          );
@ -92,8 +92,11 @@ class _GridCellEnterRegion extends StatelessWidget {
      builder: (context, onEnter, _) {
        List<Widget> children = [child];
        if (onEnter) {
-          children.add(CellAccessoryContainer(accessories: accessories)
-              .positioned(right: 0));
+          children.add(
+            CellAccessoryContainer(accessories: accessories).positioned(
+              right: GridSize.cellContentInsets.right,
+            ),
+          );
        }

        return MouseRegion(
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checkbox_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checkbox_cell.dart
@ -4,6 +4,7 @@ import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../layout/sizes.dart';
 import 'cell_builder.dart';

 class GridCheckboxCell extends GridCellWidget {
@ -40,13 +41,16 @@ class _CheckboxCellState extends GridCellState<GridCheckboxCell> {
              : svgWidget('editor/editor_uncheck');
          return Align(
            alignment: Alignment.centerLeft,
-            child: FlowyIconButton(
-              onPressed: () => context
-                  .read<CheckboxCellBloc>()
-                  .add(const CheckboxCellEvent.select()),
-              iconPadding: EdgeInsets.zero,
-              icon: icon,
-              width: 20,
+            child: Padding(
+              padding: GridSize.cellContentInsets,
+              child: FlowyIconButton(
+                onPressed: () => context
+                    .read<CheckboxCellBloc>()
+                    .add(const CheckboxCellEvent.select()),
+                iconPadding: EdgeInsets.zero,
+                icon: icon,
+                width: 20,
+              ),
            ),
          );
        },
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
@ -6,6 +6,7 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';

+import '../../../layout/sizes.dart';
 import '../cell_builder.dart';
 import 'date_editor.dart';

@ -75,7 +76,10 @@ class _DateCellState extends GridCellState<GridDateCell> {
                onTap: () => _popover.show(),
                child: Align(
                  alignment: alignment,
-                  child: FlowyText.medium(state.dateStr, fontSize: 12),
+                  child: Padding(
+                    padding: GridSize.cellContentInsets,
+                    child: FlowyText.medium(state.dateStr, fontSize: 12),
+                  ),
                ),
              ),
            ),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
@ -4,6 +4,7 @@ import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

+import '../../layout/sizes.dart';
 import 'cell_builder.dart';

 class GridNumberCell extends GridCellWidget {
@ -45,18 +46,21 @@ class _NumberCellState extends GridFocusNodeCellState<GridNumberCell> {
                _controller.text = contentFromState(state),
          ),
        ],
-        child: TextField(
-          controller: _controller,
-          focusNode: focusNode,
-          onEditingComplete: () => focusNode.unfocus(),
-          onSubmitted: (_) => focusNode.unfocus(),
-          maxLines: 1,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
-          textInputAction: TextInputAction.done,
-          decoration: const InputDecoration(
-            contentPadding: EdgeInsets.zero,
-            border: InputBorder.none,
-            isDense: true,
+        child: Padding(
+          padding: GridSize.cellContentInsets,
+          child: TextField(
+            controller: _controller,
+            focusNode: focusNode,
+            onEditingComplete: () => focusNode.unfocus(),
+            onSubmitted: (_) => focusNode.unfocus(),
+            maxLines: 1,
+            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            textInputAction: TextInputAction.done,
+            decoration: const InputDecoration(
+              contentPadding: EdgeInsets.zero,
+              border: InputBorder.none,
+              isDense: true,
+            ),
          ),
        ),
      ),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart
@ -11,6 +11,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

+import '../../../layout/sizes.dart';
 import '../cell_builder.dart';
 import 'extension.dart';
 import 'select_option_editor.dart';
@ -170,7 +171,10 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
      alignment: AlignmentDirectional.center,
      fit: StackFit.expand,
      children: [
-        _wrapPopover(child),
+        Padding(
+          padding: GridSize.cellContentInsets,
+          child: _wrapPopover(child),
+        ),
        InkWell(onTap: () => _popover.show()),
      ],
    );
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import '../../layout/sizes.dart';
 import 'cell_builder.dart';

 class GridTextCellStyle extends GridCellStyle {
@ -56,18 +57,21 @@ class _GridTextCellState extends GridFocusNodeCellState<GridTextCell> {
            _controller.text = state.content;
          }
        },
-        child: TextField(
-          controller: _controller,
-          focusNode: focusNode,
-          onChanged: (value) => focusChanged(),
-          onEditingComplete: () => focusNode.unfocus(),
-          maxLines: null,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
-          decoration: InputDecoration(
-            contentPadding: EdgeInsets.zero,
-            border: InputBorder.none,
-            hintText: widget.cellStyle?.placeholder,
-            isDense: true,
+        child: Padding(
+          padding: GridSize.cellContentInsets,
+          child: TextField(
+            controller: _controller,
+            focusNode: focusNode,
+            onChanged: (value) => focusChanged(),
+            onEditingComplete: () => focusNode.unfocus(),
+            maxLines: null,
+            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            decoration: InputDecoration(
+              contentPadding: EdgeInsets.zero,
+              border: InputBorder.none,
+              hintText: widget.cellStyle?.placeholder,
+              isDense: true,
+            ),
          ),
        ),
      ),
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
@ -12,6 +12,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import 'package:url_launcher/url_launcher.dart';
+import '../../../layout/sizes.dart';
 import '../cell_accessory.dart';
 import '../cell_builder.dart';
 import 'cell_editor.dart';
@ -115,14 +116,17 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
      value: _cellBloc,
      child: BlocBuilder<URLCellBloc, URLCellState>(
        builder: (context, state) {
-          final richText = RichText(
-            textAlign: TextAlign.left,
-            text: TextSpan(
-              text: state.content,
-              style: TextStyle(
-                color: theme.main2,
-                fontSize: 14,
-                decoration: TextDecoration.underline,
+          final richText = Padding(
+            padding: GridSize.cellContentInsets,
+            child: RichText(
+              textAlign: TextAlign.left,
+              text: TextSpan(
+                text: state.content,
+                style: TextStyle(
+                  color: theme.main2,
+                  fontSize: 14,
+                  decoration: TextDecoration.underline,
+                ),
              ),
            ),
          );