fix: remove extra padding in table on mobile (#6915)

AppFlowy-IO · Dec 3, 2024 · e32c584 · e32c584
1 parent 64e4416
commit e32c584
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 32 deletions.
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart
@@ -316,7 +316,17 @@ SimpleTableBlockComponentBuilder _buildSimpleTableBlockComponentBuilder(
   BuildContext context,
   BlockComponentConfiguration configuration,
 ) {
-  return SimpleTableBlockComponentBuilder(configuration: configuration);
+  final copiedConfiguration = configuration.copyWith(
+    padding: (node) {
+      final padding = configuration.padding(node);
+      if (UniversalPlatform.isDesktop) {
+        return padding;
+      } else {
+        return padding.copyWith(right: padding.left);
+      }
+    },
+  );
+  return SimpleTableBlockComponentBuilder(configuration: copiedConfiguration);
 }
 
 SimpleTableRowBlockComponentBuilder _buildSimpleTableRowBlockComponentBuilder(

diff --git a/...ugins/document/presentation/editor_plugins/simple_table/simple_table_block_component.dart b/...ugins/document/presentation/editor_plugins/simple_table/simple_table_block_component.dart
@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/simple_tab
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:universal_platform/universal_platform.dart';
 
 typedef SimpleTableColumnWidthMap = Map<String, double>;
 typedef SimpleTableRowAlignMap = Map<String, String>;
@@ -187,28 +188,34 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
   @override
   Widget build(BuildContext context) {
     Widget child = Transform.translate(
-      offset: const Offset(
-        -SimpleTableConstants.tableLeftPadding,
+      offset: Offset(
+        UniversalPlatform.isDesktop
+            ? -SimpleTableConstants.tableLeftPadding
+            : 0,
         0,
       ),
       child: _buildTable(),
     );
 
-    child = Provider.value(
-      value: simpleTableContext,
-      child: MouseRegion(
-        onEnter: (event) =>
-            simpleTableContext.isHoveringOnTableBlock.value = true,
-        onExit: (event) {
-          simpleTableContext.isHoveringOnTableBlock.value = false;
-        },
-        child: Container(
-          alignment: Alignment.topLeft,
-          padding: padding,
+    child = Container(
+      alignment: Alignment.topLeft,
+      padding: padding,
+      child: child,
+    );
+
+    if (UniversalPlatform.isDesktop) {
+      child = Provider.value(
+        value: simpleTableContext,
+        child: MouseRegion(
+          onEnter: (event) =>
+              simpleTableContext.isHoveringOnTableBlock.value = true,
+          onExit: (event) {
+            simpleTableContext.isHoveringOnTableBlock.value = false;
+          },
           child: child,
         ),
-      ),
-    );
+      );
+    }
 
     if (widget.showActions && widget.actionBuilder != null) {
       child = BlockComponentActionWrapper(
@@ -222,6 +229,14 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
   }
 
   Widget _buildTable() {
+    if (UniversalPlatform.isDesktop) {
+      return _buildDesktopTable();
+    } else {
+      return _buildMobileTable();
+    }
+  }
+
+  Widget _buildDesktopTable() {
     // IntrinsicWidth and IntrinsicHeight are used to make the table size fit the content.
     return MouseRegion(
       onEnter: (event) => simpleTableContext.isHoveringOnTableArea.value = true,
@@ -260,24 +275,45 @@ class _SimpleTableBlockWidgetState extends State<SimpleTableBlockWidget>
                 ),
               ),
             ),
-            SimpleTableAddColumnHoverButton(
-              editorState: editorState,
-              node: node,
-            ),
-            SimpleTableAddRowHoverButton(
-              editorState: editorState,
-              tableNode: node,
-            ),
-            SimpleTableAddColumnAndRowHoverButton(
-              editorState: editorState,
-              node: node,
-            ),
+            if (UniversalPlatform.isDesktop) ...[
+              SimpleTableAddColumnHoverButton(
+                editorState: editorState,
+                node: node,
+              ),
+              SimpleTableAddRowHoverButton(
+                editorState: editorState,
+                tableNode: node,
+              ),
+              SimpleTableAddColumnAndRowHoverButton(
+                editorState: editorState,
+                node: node,
+              ),
+            ],
           ],
         ),
       ),
     );
   }
 
+  Widget _buildMobileTable() {
+    return Provider.value(
+      value: simpleTableContext,
+      child: SingleChildScrollView(
+        controller: scrollController,
+        scrollDirection: Axis.horizontal,
+        child: IntrinsicWidth(
+          child: IntrinsicHeight(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: _buildRows(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
   List<Widget> _buildRows() {
     final List<Widget> rows = [];
 

diff --git a/...lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_constants.dart b/...lib/plugins/document/presentation/editor_plugins/simple_table/simple_table_constants.dart
@@ -3,6 +3,7 @@ import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
+import 'package:universal_platform/universal_platform.dart';
 
 const enableTableDebugLog = false;
 
@@ -166,10 +167,16 @@ class SimpleTableConstants {
   static const addColumnAndRowButtonBottomPadding = 2.5 * addRowButtonPadding;
 
   // Table cell
-  static const cellEdgePadding = EdgeInsets.symmetric(
-    horizontal: 9.0,
-    vertical: 2.0,
-  );
+  static EdgeInsets get cellEdgePadding => UniversalPlatform.isDesktop
+      ? const EdgeInsets.symmetric(
+          horizontal: 9.0,
+          vertical: 2.0,
+        )
+      : const EdgeInsets.only(
+          left: 8.0,
+          right: 8.0,
+          bottom: 6.0,
+        );
   static const cellBorderWidth = 1.0;
   static const resizeHandleWidth = 3.0;