fix: mobile ui fixes (#4780)

* fix: adjust mobile grid padding * fix: reorder field not working
2024-08-30 18:12:39 +00:00 · 2024-02-29 09:44:48 +08:00 · 2024-02-29 09:44:48 +08:00 · f826d05f03
commit f826d05f03
parent 01f2b15f70
12 changed files with 106 additions and 85 deletions
--- a/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart
@ -7,16 +7,16 @@ class CalendarSize {
  static double get headerContainerPadding => 12 * scale;

  static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
+        GridSize.horizontalHeaderPadding,
        CalendarSize.headerContainerPadding,
-        GridSize.leadingHeaderPadding,
+        GridSize.horizontalHeaderPadding,
        CalendarSize.headerContainerPadding,
      );

  static EdgeInsets get contentInsetsMobile => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding / 2,
+        GridSize.horizontalHeaderPadding / 2,
        0,
-        GridSize.leadingHeaderPadding / 2,
+        GridSize.horizontalHeaderPadding / 2,
        0,
      );

--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
@ -16,7 +16,7 @@ class GridLayout {
        .reduce((value, element) => value + element);

    return fieldsWidth +
-        GridSize.leadingHeaderPadding +
+        GridSize.horizontalHeaderPadding +
        GridSize.trailHeaderPadding;
  }
 }
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
@ -7,19 +7,14 @@ class GridSize {
  static double get scrollBarSize => 8 * scale;
  static double get headerHeight => 40 * scale;
  static double get footerHeight => 40 * scale;
-  static double get leadingHeaderPadding =>
-      PlatformExtension.isDesktop ? 40 * scale : 20 * scale;
+  static double get horizontalHeaderPadding =>
+      PlatformExtension.isDesktop ? 40 * scale : 16 * scale;
  static double get trailHeaderPadding => 140 * scale;
-  static double get headerContainerPadding => 0 * scale;
  static double get cellHPadding => 10 * scale;
  static double get cellVPadding => 10 * scale;
  static double get popoverItemHeight => 26 * scale;
  static double get typeOptionSeparatorHeight => 4 * scale;

-  static EdgeInsets get headerContentInsets => EdgeInsets.symmetric(
-        horizontal: GridSize.headerContainerPadding,
-        vertical: GridSize.headerContainerPadding,
-      );
  static EdgeInsets get cellContentInsets => EdgeInsets.symmetric(
        horizontal: GridSize.cellHPadding,
        vertical: GridSize.cellVPadding,
@ -36,18 +31,13 @@ class GridSize {
      const EdgeInsets.symmetric(horizontal: 8, vertical: 2);

  static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
-        PlatformExtension.isMobile
-            ? GridSize.leadingHeaderPadding
-            : GridSize.headerContainerPadding,
-        PlatformExtension.isMobile ? 100 : GridSize.headerContainerPadding,
+        GridSize.horizontalHeaderPadding,
+        0,
+        PlatformExtension.isMobile ? GridSize.horizontalHeaderPadding : 0,
+        PlatformExtension.isMobile ? 100 : 0,
      );

-  static EdgeInsets get contentInsets => EdgeInsets.fromLTRB(
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
-        GridSize.leadingHeaderPadding,
-        GridSize.headerContainerPadding,
+  static EdgeInsets get contentInsets => EdgeInsets.symmetric(
+        horizontal: GridSize.horizontalHeaderPadding,
      );
 }
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/mobile_grid_page.dart
@ -157,12 +157,14 @@ class _GridPageContentState extends State<GridPageContent> {
  final _scrollController = GridScrollController(
    scrollGroupController: LinkedScrollControllerGroup(),
  );
-  late final ScrollController headerScrollController;
+  late final ScrollController contentScrollController;
+  late final ScrollController reorderableController;

  @override
  void initState() {
    super.initState();
-    headerScrollController = _scrollController.linkHorizontalController();
+    contentScrollController = _scrollController.linkHorizontalController();
+    reorderableController = _scrollController.linkHorizontalController();
  }

  @override
@ -196,7 +198,8 @@ class _GridPageContentState extends State<GridPageContent> {
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _GridHeader(
-                headerScrollController: headerScrollController,
+                contentScrollController: contentScrollController,
+                reorderableController: reorderableController,
              ),
              _GridRows(
                viewId: widget.view.id,
@ -205,8 +208,8 @@ class _GridPageContentState extends State<GridPageContent> {
            ],
          ),
          Positioned(
-            bottom: 20,
-            right: 20,
+            bottom: 16,
+            right: 16,
            child: getGridFabs(context),
          ),
        ],
@ -216,9 +219,13 @@ class _GridPageContentState extends State<GridPageContent> {
 }

 class _GridHeader extends StatelessWidget {
-  const _GridHeader({required this.headerScrollController});
+  const _GridHeader({
+    required this.contentScrollController,
+    required this.reorderableController,
+  });

-  final ScrollController headerScrollController;
+  final ScrollController contentScrollController;
+  final ScrollController reorderableController;

  @override
  Widget build(BuildContext context) {
@ -226,7 +233,8 @@ class _GridHeader extends StatelessWidget {
      builder: (context, state) {
        return MobileGridHeader(
          viewId: state.viewId,
-          anchorScrollController: headerScrollController,
+          contentScrollController: contentScrollController,
+          reorderableController: reorderableController,
        );
      },
    );
@ -247,7 +255,7 @@ class _GridRows extends StatelessWidget {
    return BlocBuilder<GridBloc, GridState>(
      buildWhen: (previous, current) => previous.fields != current.fields,
      builder: (context, state) {
-        final double contentWidth = _getContentWidth(state.fields);
+        final double contentWidth = getMobileGridContentWidth(state.fields);
        return Expanded(
          child: _WrapScrollView(
            scrollController: scrollController,
@ -277,14 +285,6 @@ class _GridRows extends StatelessWidget {
    );
  }

-  double _getContentWidth(List<FieldInfo> fields) {
-    final visibleFields = fields.where(
-      (field) =>
-          field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
-    );
-    return (visibleFields.length + 1) * 200 + GridSize.leadingHeaderPadding * 2;
-  }
-
  Widget _renderList(
    BuildContext context,
    GridState state,
@ -438,3 +438,11 @@ class _AddRowButton extends StatelessWidget {
    );
  }
 }
+
+double getMobileGridContentWidth(List<FieldInfo> fields) {
+  final visibleFields = fields.where(
+    (field) => field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden,
+  );
+  return (visibleFields.length + 1) * 200 +
+      GridSize.horizontalHeaderPadding * 2;
+}
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
@ -139,7 +139,7 @@ class _GridHeaderState extends State<_GridHeader> {
  }

  Widget _cellLeading() {
-    return SizedBox(width: GridSize.leadingHeaderPadding);
+    return SizedBox(width: GridSize.horizontalHeaderPadding);
  }
 }

@ -158,7 +158,6 @@ class _CellTrailing extends StatelessWidget {
          bottom: BorderSide(color: Theme.of(context).dividerColor),
        ),
      ),
-      padding: GridSize.headerContentInsets,
      child: CreateFieldButton(
        viewId: viewId,
        onFieldCreated: (fieldId) => context
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
@ -13,17 +13,22 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';

 import '../../layout/sizes.dart';
+import '../../mobile_grid_page.dart';
 import 'mobile_field_button.dart';

+const double _kGridHeaderHeight = 50.0;
+
 class MobileGridHeader extends StatefulWidget {
  const MobileGridHeader({
    super.key,
    required this.viewId,
-    required this.anchorScrollController,
+    required this.contentScrollController,
+    required this.reorderableController,
  });

  final String viewId;
-  final ScrollController anchorScrollController;
+  final ScrollController contentScrollController;
+  final ScrollController reorderableController;

  @override
  State<MobileGridHeader> createState() => _MobileGridHeaderState();
@ -41,29 +46,45 @@ class _MobileGridHeaderState extends State<MobileGridHeader> {
          fieldController: fieldController,
        )..add(const GridHeaderEvent.initial());
      },
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        controller: widget.anchorScrollController,
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            HSpace(GridSize.leadingHeaderPadding),
-            Stack(
-              children: [
-                Positioned(top: 0, left: 24, right: 24, child: _divider()),
-                Positioned(bottom: 0, left: 0, right: 0, child: _divider()),
-                SizedBox(
-                  height: 50,
-                  child: _GridHeader(
-                    viewId: widget.viewId,
-                    fieldController: fieldController,
-                  ),
+      child: Stack(
+        children: [
+          BlocBuilder<GridHeaderBloc, GridHeaderState>(
+            builder: (context, state) {
+              return SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                controller: widget.contentScrollController,
+                child: Stack(
+                  children: [
+                    Positioned(
+                      top: 0,
+                      left: GridSize.horizontalHeaderPadding + 24,
+                      right: GridSize.horizontalHeaderPadding + 24,
+                      child: _divider(),
+                    ),
+                    Positioned(
+                      bottom: 0,
+                      left: GridSize.horizontalHeaderPadding,
+                      right: GridSize.horizontalHeaderPadding,
+                      child: _divider(),
+                    ),
+                    SizedBox(
+                      height: _kGridHeaderHeight,
+                      width: getMobileGridContentWidth(state.fields),
+                    ),
+                  ],
                ),
-              ],
+              );
+            },
+          ),
+          SizedBox(
+            height: _kGridHeaderHeight,
+            child: _GridHeader(
+              viewId: widget.viewId,
+              fieldController: fieldController,
+              scrollController: widget.reorderableController,
            ),
-            const HSpace(20),
-          ],
-        ),
+          ),
+        ],
      ),
    );
  }
@ -81,10 +102,12 @@ class _GridHeader extends StatefulWidget {
  const _GridHeader({
    required this.viewId,
    required this.fieldController,
+    required this.scrollController,
  });

  final String viewId;
  final FieldController fieldController;
+  final ScrollController scrollController;

  @override
  State<_GridHeader> createState() => _GridHeaderState();
@ -114,13 +137,16 @@ class _GridHeaderState extends State<_GridHeader> {
            .toList();

        return ReorderableListView.builder(
-          scrollController: ScrollController(),
+          scrollController: widget.scrollController,
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          proxyDecorator: (child, index, anim) => Material(
            color: Colors.transparent,
            child: child,
          ),
+          padding: EdgeInsets.symmetric(
+            horizontal: GridSize.horizontalHeaderPadding,
+          ),
          header: firstField != null
              ? MobileFieldButton.first(
                  viewId: widget.viewId,
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/mobile_row.dart
@ -68,7 +68,7 @@ class _MobileGridRowState extends State<MobileGridRow> {
        builder: (context, state) {
          return Row(
            children: [
-              SizedBox(width: GridSize.leadingHeaderPadding),
+              SizedBox(width: GridSize.horizontalHeaderPadding),
              Expanded(
                child: RowContent(
                  fieldController: widget.databaseController.fieldController,
@ -163,7 +163,6 @@ class RowContent extends StatelessWidget {
  Widget _finalCellDecoration(BuildContext context) {
    return Container(
      width: 200,
-      padding: GridSize.headerContentInsets,
      constraints: const BoxConstraints(minHeight: 46),
      decoration: BoxDecoration(
        border: Border(
--- a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
@ -115,7 +115,7 @@ class _RowLeadingState extends State<_RowLeading> {
      child: Consumer<RegionStateNotifier>(
        builder: (context, state, _) {
          return SizedBox(
-            width: GridSize.leadingHeaderPadding,
+            width: GridSize.horizontalHeaderPadding,
            child: state.onEnter ? _activeWidget() : null,
          );
        },
@ -283,7 +283,6 @@ class RowContent extends StatelessWidget {
      cursor: SystemMouseCursors.basic,
      child: Container(
        width: GridSize.trailHeaderPadding,
-        padding: GridSize.headerContentInsets,
        constraints: const BoxConstraints(minHeight: 46),
        decoration: BoxDecoration(
          border: Border(
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/setting_menu.dart
@ -57,7 +57,7 @@ class _DatabaseViewSettingContent extends StatelessWidget {
      builder: (context, state) {
        return Padding(
          padding: EdgeInsets.symmetric(
-            horizontal: GridSize.leadingHeaderPadding,
+            horizontal: GridSize.horizontalHeaderPadding,
          ),
          child: DecoratedBox(
            decoration: BoxDecoration(
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:flutter/material.dart';

 import 'package:appflowy/generated/flowy_svgs.g.dart';
@ -21,8 +22,11 @@ class TabBarHeader extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return SizedBox(
+    return Container(
      height: 30,
+      padding: EdgeInsets.symmetric(
+        horizontal: GridSize.horizontalHeaderPadding,
+      ),
      child: Stack(
        children: [
          Positioned(
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:flutter/material.dart';

 import 'package:appflowy/generated/flowy_svgs.g.dart';
@ -26,8 +27,11 @@ class _MobileTabBarHeaderState extends State<MobileTabBarHeader> {
  @override
  Widget build(BuildContext context) {
    return Padding(
-      padding: const EdgeInsets.only(top: 14.0) +
-          const EdgeInsets.symmetric(horizontal: 20),
+      padding: EdgeInsets.only(
+        left: GridSize.horizontalHeaderPadding,
+        top: 14.0,
+        right: GridSize.horizontalHeaderPadding - 5.0,
+      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
--- a/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/tab_bar/tab_bar_view.dart
@ -2,7 +2,6 @@ import 'package:flutter/material.dart';

 import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/application/tab_bar_bloc.dart';
-import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database/widgets/share_button.dart';
 import 'package:appflowy/plugins/util.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
@ -112,16 +111,9 @@ class _DatabaseTabBarViewState extends State<DatabaseTabBarView> {
                      return const SizedBox.shrink();
                    }

-                    if (PlatformExtension.isDesktop) {
-                      return Padding(
-                        padding: EdgeInsets.symmetric(
-                          horizontal: GridSize.leadingHeaderPadding,
-                        ),
-                        child: const TabBarHeader(),
-                      );
-                    }
-
-                    return const MobileTabBarHeader();
+                    return PlatformExtension.isDesktop
+                        ? const TabBarHeader()
+                        : const MobileTabBarHeader();
                  },
                );
              },