From d861ce62273be709149e88520a4cd66ad79d0244 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Sun, 25 Feb 2024 11:51:18 +0800 Subject: [PATCH] fix: mobile view and field list bottom sheets (#4727) --- .../show_mobile_bottom_sheet.dart | 33 ++++++++++++------- .../database/view/database_field_list.dart | 12 +++++-- .../database/view/database_view_list.dart | 9 +++-- .../mobile_select_option_editor.dart | 6 +++- 4 files changed, 44 insertions(+), 16 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart index de9a87925f..6ad821bb64 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart @@ -3,6 +3,25 @@ import 'package:appflowy/plugins/base/drag_handler.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder; import 'package:flutter/material.dart'; +extension BottomSheetPaddingExtension on BuildContext { + /// Calculates the total amount of space that should be added to the bottom of + /// a bottom sheet + double bottomSheetPadding({ + bool ignoreViewPadding = true, + }) { + final viewPadding = MediaQuery.viewPaddingOf(this); + final viewInsets = MediaQuery.viewInsetsOf(this); + double bottom = 0.0; + if (!ignoreViewPadding) { + bottom += viewPadding.bottom; + } + // for screens with 0 view padding, add some even more space + bottom += viewPadding.bottom == 0 ? 28.0 : 16.0; + bottom += viewInsets.bottom; + return bottom; + } +} + Future showMobileBottomSheet( BuildContext context, { required WidgetBuilder builder, @@ -120,12 +139,11 @@ Future showMobileBottomSheet( } // ----- content area ----- - // make sure the keyboard won't cover the content + // add content padding and extra bottom padding children.add( Padding( - padding: padding.copyWith( - bottom: padding.bottom + MediaQuery.of(context).viewInsets.bottom, - ), + padding: + padding + EdgeInsets.only(bottom: context.bottomSheetPadding()), child: child, ), ); @@ -135,13 +153,6 @@ Future showMobileBottomSheet( return children.first; } - // add default padding - // for full screen bottom sheet, the padding should be 16.0 - // for non full screen bottom sheet, the padding should be 28.0 - children.add( - VSpace(MediaQuery.of(context).padding.bottom == 0 ? 28.0 : 16.0), - ); - return useSafeArea ? SafeArea( child: Column( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart index 8cbc701277..99ee144235 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_field_list.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; import 'package:appflowy/mobile/presentation/widgets/flowy_option_tile.dart'; import 'package:appflowy/plugins/database/application/database_controller.dart'; import 'package:appflowy/plugins/database/application/field/field_controller.dart'; @@ -61,6 +62,7 @@ class _MobileDatabaseFieldListBody extends StatelessWidget { if (state.fieldContexts.isEmpty) { return const SizedBox.shrink(); } + final fields = [...state.fieldContexts]; final firstField = fields.removeAt(0); final firstCell = DatabaseFieldListTile( @@ -124,10 +126,16 @@ class _MobileDatabaseFieldListBody extends StatelessWidget { children: [ _divider(), _NewDatabaseFieldTile(viewId: viewId), - const VSpace(24), + VSpace( + context.bottomSheetPadding( + ignoreViewPadding: false, + ), + ), ], ) - : const VSpace(24), + : VSpace( + context.bottomSheetPadding(ignoreViewPadding: false), + ), itemCount: cells.length, itemBuilder: (context, index) => cells[index], ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart index 4966d888bb..73709ab1e6 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart @@ -44,8 +44,10 @@ class MobileDatabaseViewList extends StatelessWidget { useFilledDoneButton: false, onDone: (context) => Navigator.pop(context), ), - SingleChildScrollView( - child: Column( + Expanded( + child: ListView( + shrinkWrap: true, + padding: EdgeInsets.zero, children: [ ...views.mapIndexed( (index, view) => MobileDatabaseViewListButton( @@ -55,6 +57,9 @@ class MobileDatabaseViewList extends StatelessWidget { ), const VSpace(20), const MobileNewDatabaseViewButton(), + VSpace( + context.bottomSheetPadding(ignoreViewPadding: false), + ), ], ), ), diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart index 71cce3a114..2bded1e077 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart @@ -480,7 +480,11 @@ class _MoreOptionsState extends State<_MoreOptions> { Widget _buildDeleteButton(BuildContext context) { return FlowyOptionTile.text( text: LocaleKeys.button_delete.tr(), - leftIcon: const FlowySvg(FlowySvgs.m_delete_s), + textColor: Theme.of(context).colorScheme.error, + leftIcon: FlowySvg( + FlowySvgs.m_delete_s, + color: Theme.of(context).colorScheme.error, + ), onTap: widget.onDelete, ); }