fix: mobile grid issues (#4026)

* chore: some mobile grid issues * fix: grid right padding
2024-08-30 18:12:39 +00:00 · 2023-11-28 11:44:45 +08:00 · 2023-11-28 11:44:45 +08:00 · 7c54b6d599
commit 7c54b6d599
parent 3e17613f54
7 changed files with 80 additions and 74 deletions
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/sizes.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/sizes.dart
@ -1,3 +1,4 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/widgets.dart';

 class GridSize {
@ -6,7 +7,8 @@ class GridSize {
  static double get scrollBarSize => 8 * scale;
  static double get headerHeight => 40 * scale;
  static double get footerHeight => 40 * scale;
-  static double get leadingHeaderPadding => 40 * scale;
+  static double get leadingHeaderPadding =>
+      PlatformExtension.isDesktop ? 40 * scale : 20 * scale;
  static double get trailHeaderPadding => 140 * scale;
  static double get headerContainerPadding => 0 * scale;
  static double get cellHPadding => 10 * scale;
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/mobile_grid_page.dart
@ -158,7 +158,7 @@ class _GridPageContentState extends State<GridPageContent> {
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
-              padding: const EdgeInsets.only(right: 14),
+              padding: EdgeInsets.only(right: GridSize.leadingHeaderPadding),
              child:
                  _GridHeader(headerScrollController: headerScrollController),
            ),
@ -266,6 +266,14 @@ class _GridRows extends StatelessWidget {
      },
      itemCount: rowInfos.length,
      itemBuilder: (context, index) => children[index],
+      header: Padding(
+        padding: EdgeInsets.only(left: GridSize.leadingHeaderPadding),
+        child: Container(
+          height: 1,
+          width: contentWidth,
+          color: Theme.of(context).dividerColor,
+        ),
+      ),
      footer: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
@ -2,7 +2,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database_view/grid/application/grid_bloc.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
-import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';

@ -12,31 +11,27 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 class GridAddRowButton extends StatelessWidget {
-  const GridAddRowButton({Key? key}) : super(key: key);
+  const GridAddRowButton({super.key});

  @override
  Widget build(BuildContext context) {
-    final color =
-        PlatformExtension.isMobile ? null : Theme.of(context).hintColor;
    return FlowyButton(
      text: FlowyText.medium(
        LocaleKeys.grid_row_newRow.tr(),
-        color: color,
+        color: Theme.of(context).hintColor,
      ),
      hoverColor: AFThemeExtension.of(context).lightGreyHover,
      onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
      leftIcon: FlowySvg(
        FlowySvgs.add_s,
-        color: color,
+        color: Theme.of(context).hintColor,
      ),
    );
  }
 }

 class GridRowBottomBar extends StatelessWidget {
-  const GridRowBottomBar({
-    super.key,
-  });
+  const GridRowBottomBar({super.key});

  @override
  Widget build(BuildContext context) {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
@ -107,30 +107,32 @@ class _GridHeaderState extends State<_GridHeader> {
                  : MobileFieldButton(
                      key: _getKeyById(fieldInfo.id),
                      viewId: widget.viewId,
-                      field: fieldInfo,
+                      fieldController: widget.fieldController,
+                      fieldInfo: fieldInfo,
                    ),
            )
            .toList();

-        return ColoredBox(
-          color: Theme.of(context).colorScheme.surface,
-          child: RepaintBoundary(
-            child: ReorderableRow(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              scrollController: ScrollController(),
-              header: const _CellLeading(),
-              needsLongPressDraggable: PlatformExtension.isMobile,
-              footer: _CellTrailing(viewId: widget.viewId),
-              onReorder: (int oldIndex, int newIndex) {
-                _onReorder(
-                  cells,
-                  oldIndex,
-                  context,
-                  newIndex,
-                );
-              },
-              children: cells,
+        return RepaintBoundary(
+          child: ReorderableRow(
+            scrollController: ScrollController(),
+            buildDraggableFeedback: (context, constraints, child) => Material(
+              color: Colors.transparent,
+              child: child,
            ),
+            draggingWidgetOpacity: 0,
+            header: const _CellLeading(),
+            needsLongPressDraggable: PlatformExtension.isMobile,
+            footer: _CellTrailing(viewId: widget.viewId),
+            onReorder: (int oldIndex, int newIndex) {
+              _onReorder(
+                cells,
+                oldIndex,
+                context,
+                newIndex,
+              );
+            },
+            children: cells,
          ),
        );
      },
@ -144,7 +146,9 @@ class _GridHeaderState extends State<_GridHeader> {
    int newIndex,
  ) {
    if (cells.length > oldIndex) {
-      final field = (cells[oldIndex] as GridFieldCell).fieldInfo.field;
+      final field = PlatformExtension.isDesktop
+          ? (cells[oldIndex] as GridFieldCell).fieldInfo.field
+          : (cells[oldIndex] as MobileFieldButton).fieldInfo.field;
      context
          .read<GridHeaderBloc>()
          .add(GridHeaderEvent.moveField(field, oldIndex, newIndex));
@ -174,9 +178,11 @@ class _CellTrailing extends StatelessWidget {
        BorderSide(color: Theme.of(context).dividerColor, width: 1.0);
    return Container(
      width: GridSize.trailHeaderPadding,
-      decoration: BoxDecoration(
-        border: Border(bottom: borderSide),
-      ),
+      decoration: PlatformExtension.isDesktop
+          ? BoxDecoration(
+              border: Border(bottom: borderSide),
+            )
+          : null,
      padding: GridSize.headerContentInsets,
      child: CreateFieldButton(viewId: viewId),
    );
@ -217,6 +223,8 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
        text: FlowyText.medium(
          LocaleKeys.grid_field_newProperty.tr(),
          overflow: TextOverflow.ellipsis,
+          color:
+              PlatformExtension.isDesktop ? null : Theme.of(context).hintColor,
        ),
        hoverColor: AFThemeExtension.of(context).greyHover,
        onTap: () async {
@ -231,7 +239,11 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
            (r) => Log.error("Failed to create field type option: $r"),
          );
        },
-        leftIcon: const FlowySvg(FlowySvgs.add_s),
+        leftIcon: FlowySvg(
+          FlowySvgs.add_s,
+          color:
+              PlatformExtension.isDesktop ? null : Theme.of(context).hintColor,
+        ),
      ),
      popupBuilder: (BuildContext popoverContext) {
        return FieldEditor(
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/mobile_field_cell.dart
@ -3,26 +3,25 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet_database_field_editor.dart';
 import 'package:appflowy/mobile/presentation/widgets/flowy_paginated_bottom_sheet.dart';
 import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
-import 'package:appflowy/plugins/database_view/grid/application/grid_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
-
-import 'package:flowy_infra/theme_extension.dart';
+import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';

 import 'field_type_extension.dart';

 class MobileFieldButton extends StatelessWidget {
  final String viewId;
-  final FieldInfo field;
+  final FieldController fieldController;
+  final FieldInfo fieldInfo;
  final int? maxLines;
  final BorderRadius? radius;
  final EdgeInsets? margin;

  const MobileFieldButton({
    required this.viewId,
-    required this.field,
+    required this.fieldController,
+    required this.fieldInfo,
    this.maxLines = 1,
    this.radius = BorderRadius.zero,
    this.margin,
@ -31,51 +30,40 @@ class MobileFieldButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final border = BorderSide(
-      color: Theme.of(context).dividerColor,
-      width: 1.0,
-    );
-    final fieldController =
-        context.read<GridBloc>().databaseController.fieldController;
    return Container(
-      width: field.fieldSettings!.width.toDouble(),
+      width: fieldInfo.fieldSettings!.width.toDouble(),
      decoration: BoxDecoration(
-        border: Border(right: border, bottom: border),
+        border: Border(
+          right: BorderSide(
+            color: Theme.of(context).dividerColor,
+            width: 1.0,
+          ),
+        ),
      ),
-      child: TextButton(
-        onLongPress: () {
+      child: FlowyButton(
+        onTap: () {
          showPaginatedBottomSheet(
            context,
            page: SheetPage(
              title: LocaleKeys.grid_field_editProperty.tr(),
              body: MobileDBBottomSheetFieldEditor(
                viewId: viewId,
-                field: field.field,
+                field: fieldInfo.field,
                fieldController: fieldController,
              ),
            ),
          );
        },
-        style: TextButton.styleFrom(
-          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+        margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+        leftIcon: FlowySvg(
+          fieldInfo.fieldType.icon(),
+          color: Theme.of(context).hintColor,
        ),
-        onPressed: () {},
-        child: Row(
-          children: [
-            FlowySvg(
-              field.fieldType.icon(),
-              color: Theme.of(context).iconTheme.color,
-            ),
-            const HSpace(6),
-            Expanded(
-              child: FlowyText.medium(
-                field.name,
-                maxLines: maxLines,
-                overflow: TextOverflow.ellipsis,
-                color: AFThemeExtension.of(context).textColor,
-              ),
-            ),
-          ],
+        text: FlowyText.medium(
+          fieldInfo.name,
+          maxLines: maxLines,
+          overflow: TextOverflow.ellipsis,
+          color: Theme.of(context).hintColor,
        ),
      ),
    );
--- a/frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/tab_bar_view.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database_view/tab_bar/tab_bar_view.dart
@ -1,5 +1,6 @@
 import 'package:appflowy/plugins/database_view/application/database_controller.dart';
 import 'package:appflowy/plugins/database_view/application/tab_bar_bloc.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database_view/tab_bar/mobile/mobile_tab_bar_header.dart';
 import 'package:appflowy/plugins/database_view/widgets/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
@ -101,7 +102,7 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {

                    return Padding(
                      padding: EdgeInsets.symmetric(
-                        horizontal: PlatformExtension.isMobile ? 20 : 40,
+                        horizontal: GridSize.leadingHeaderPadding,
                      ),
                      child: PlatformExtension.isMobile
                          ? const MobileTabBarHeader()
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart
+++ b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart
@ -249,8 +249,8 @@ class ScrollbarListStack extends StatelessWidget {
        /// LIST
        /// Wrap with a bit of padding on the right
        child.padding(
-          right: axis == Axis.vertical ? barSize + Insets.sm : 0,
-          bottom: axis == Axis.horizontal ? barSize + Insets.sm : 0,
+          right: axis == Axis.vertical ? barSize + Insets.m : 0,
+          bottom: axis == Axis.horizontal ? barSize + Insets.m : 0,
        ),

        /// SCROLLBAR