From f826d05f031e10b43a4e9ef7f97261d114af7e53 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Thu, 29 Feb 2024 09:44:48 +0800 Subject: [PATCH] fix: mobile ui fixes (#4780) * fix: adjust mobile grid padding * fix: reorder field not working --- .../calendar/presentation/layout/sizes.dart | 8 +- .../grid/presentation/layout/layout.dart | 2 +- .../grid/presentation/layout/sizes.dart | 26 ++----- .../grid/presentation/mobile_grid_page.dart | 42 ++++++----- .../widgets/header/grid_header.dart | 3 +- .../widgets/header/mobile_grid_header.dart | 74 +++++++++++++------ .../presentation/widgets/row/mobile_row.dart | 3 +- .../grid/presentation/widgets/row/row.dart | 3 +- .../tab_bar/desktop/setting_menu.dart | 2 +- .../tab_bar/desktop/tab_bar_header.dart | 6 +- .../tab_bar/mobile/mobile_tab_bar_header.dart | 8 +- .../database/tab_bar/tab_bar_view.dart | 14 +--- 12 files changed, 106 insertions(+), 85 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart b/frontend/appflowy_flutter/lib/plugins/database/calendar/presentation/layout/sizes.dart index dfe0f74744..73b006691f 100644 --- 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, ); diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart index 88541b343e..853f83c64d 100755 --- 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; } } diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart index e73ffe7e9a..5e96e35f1f 100755 --- 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, ); } diff --git 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 index 23b51c437f..1172f81ac9 100644 --- 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 { 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 { crossAxisAlignment: CrossAxisAlignment.start, children: [ _GridHeader( - headerScrollController: headerScrollController, + contentScrollController: contentScrollController, + reorderableController: reorderableController, ), _GridRows( viewId: widget.view.id, @@ -205,8 +208,8 @@ class _GridPageContentState extends State { ], ), Positioned( - bottom: 20, - right: 20, + bottom: 16, + right: 16, child: getGridFabs(context), ), ], @@ -216,9 +219,13 @@ class _GridPageContentState extends State { } 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( 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 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 fields) { + final visibleFields = fields.where( + (field) => field.fieldSettings?.visibility != FieldVisibility.AlwaysHidden, + ); + return (visibleFields.length + 1) * 200 + + GridSize.horizontalHeaderPadding * 2; +} diff --git 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 index 97acedf097..4668edc0e9 100644 --- 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 diff --git 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 index 059ad3d5b4..35c4127dfd 100644 --- 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 createState() => _MobileGridHeaderState(); @@ -41,29 +46,45 @@ class _MobileGridHeaderState extends State { 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( + 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, diff --git 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 index f5ce1f9c40..92d9360106 100755 --- 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 { 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( diff --git 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 index 3869925b7e..d2c56dbfd8 100755 --- 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( 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( diff --git 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 index 5ddc111bcf..5b66c3a149 100644 --- 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( diff --git 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 index 08f77525d8..711b132a4d 100644 --- 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( diff --git 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 index 4cf2846a83..2665c4da1d 100644 --- 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 { @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: [ diff --git 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 index 7ed03e4a29..57a747a631 100644 --- 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 { 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(); }, ); },