From 0e3ffa8fd5e4160070dd88e9ee41e83884ceba51 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Fri, 26 Jan 2024 00:33:45 +0800 Subject: [PATCH] feat: action sheet revamp (#4497) --- frontend/appflowy_flutter/ios/Podfile.lock | 4 +- .../presentation/base/app_bar_actions.dart | 26 ++++ .../presentation/base/mobile_view_page.dart | 7 +- .../bottom_sheet_add_new_page.dart | 77 +++++----- .../bottom_sheet/bottom_sheet_view_item.dart | 42 +---- .../bottom_sheet_view_item_body.dart | 101 +++++------- .../bottom_sheet/bottom_sheet_view_page.dart | 140 +++++------------ .../default_mobile_action_pane.dart | 5 + .../show_mobile_bottom_sheet.dart | 145 ++++++++++++------ .../database/view/database_view_list.dart | 40 +---- .../view/edit_database_view_screen.dart | 1 + .../page_item/mobile_view_item.dart | 9 +- .../setting/appearance/rtl_setting.dart | 41 +++-- .../setting/appearance/theme_setting.dart | 61 ++++---- .../edit_username_bottom_sheet.dart | 28 +--- .../personal_info_setting_group.dart | 5 + .../widgets/flowy_option_tile.dart | 4 +- .../lib/plugins/base/drag_handler.dart | 2 +- .../setting/mobile_database_controls.dart | 9 +- .../header/document_header_node_widget.dart | 57 +++---- .../mobile_toolbar_v3/_color_list.dart | 5 +- .../add_block_toolbar_item.dart | 10 +- .../settings/widgets/setting_cloud.dart | 33 ++-- .../resources/flowy_icons/16x/m_delete.svg | 3 + .../resources/flowy_icons/16x/m_duplicate.svg | 3 + .../flowy_icons/16x/m_favorite_unselected.svg | 3 + .../resources/flowy_icons/16x/m_rename.svg | 4 + .../resources/flowy_icons/16x/m_share.svg | 5 + .../flowy_icons/16x/m_theme_mode_dark.svg | 3 + .../flowy_icons/16x/m_theme_mode_light.svg | 10 ++ .../flowy_icons/16x/m_theme_mode_system.svg | 3 + 31 files changed, 429 insertions(+), 457 deletions(-) create mode 100644 frontend/resources/flowy_icons/16x/m_delete.svg create mode 100644 frontend/resources/flowy_icons/16x/m_duplicate.svg create mode 100644 frontend/resources/flowy_icons/16x/m_favorite_unselected.svg create mode 100644 frontend/resources/flowy_icons/16x/m_rename.svg create mode 100644 frontend/resources/flowy_icons/16x/m_share.svg create mode 100644 frontend/resources/flowy_icons/16x/m_theme_mode_dark.svg create mode 100644 frontend/resources/flowy_icons/16x/m_theme_mode_light.svg create mode 100644 frontend/resources/flowy_icons/16x/m_theme_mode_system.svg diff --git a/frontend/appflowy_flutter/ios/Podfile.lock b/frontend/appflowy_flutter/ios/Podfile.lock index 60484becc5..9057a91ab5 100644 --- a/frontend/appflowy_flutter/ios/Podfile.lock +++ b/frontend/appflowy_flutter/ios/Podfile.lock @@ -179,7 +179,7 @@ SPEC CHECKSUMS: file_picker: 15fd9539e4eb735dc54bae8c0534a7a9511a03de flowy_infra_ui: 0455e1fa8c51885aa1437848e361e99419f34ebc Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854 - fluttertoast: 31b00dabfa7fb7bacd9e7dbee580d7a2ff4bf265 + fluttertoast: fafc4fa4d01a6a9e4f772ecd190ffa525e9e2d9c FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a image_gallery_saver: cb43cc43141711190510e92c460eb1655cd343cb image_picker_ios: 4a8aadfbb6dc30ad5141a2ce3832af9214a705b5 @@ -202,4 +202,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 8c681999c7764593c94846b2a64b44d86f7a27ac -COCOAPODS: 1.14.3 +COCOAPODS: 1.12.1 diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart index 7bdaa85878..71672bb7e8 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/app_bar_actions.dart @@ -65,6 +65,32 @@ class AppBarCancelButton extends StatelessWidget { } } +class AppBarDoneButton extends StatelessWidget { + const AppBarDoneButton({ + super.key, + required this.onTap, + }); + + final VoidCallback onTap; + + @override + Widget build(BuildContext context) { + return AppBarButton( + onTap: onTap, + extent: 0.0, + child: Padding( + padding: const EdgeInsets.only(right: 8.0), + child: FlowyText( + LocaleKeys.button_Done.tr(), + color: Theme.of(context).colorScheme.primary, + fontWeight: FontWeight.w500, + textAlign: TextAlign.right, + ), + ), + ); + } +} + class AppBarMoreButton extends StatelessWidget { const AppBarMoreButton({ super.key, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart index aa34be6eef..fdf34e1805 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart @@ -1,5 +1,3 @@ -import 'package:flutter/material.dart'; - import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart'; import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; @@ -17,6 +15,7 @@ import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart'; import 'package:dartz/dartz.dart' hide State; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:go_router/go_router.dart'; @@ -151,6 +150,10 @@ class _MobileViewPageState extends State { onTap: (context) { showMobileBottomSheet( context, + showDragHandle: true, + showDivider: false, + padding: const EdgeInsets.only(bottom: 36.0), + backgroundColor: Theme.of(context).colorScheme.background, builder: (_) => _buildViewPageBottomSheet(context), ); }, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_add_new_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_add_new_page.dart index 0cc8e6f1a9..37a5cb0221 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_add_new_page.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_add_new_page.dart @@ -1,9 +1,8 @@ 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_action_widget.dart'; +import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; class AddNewPageWidgetBottomSheet extends StatelessWidget { @@ -20,47 +19,41 @@ class AddNewPageWidgetBottomSheet extends StatelessWidget { Widget build(BuildContext context) { return Column( children: [ - // new document, new grid - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.document_s, - text: LocaleKeys.document_menuName.tr(), - onTap: () => onAction(ViewLayoutPB.Document), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.grid_s, - text: LocaleKeys.grid_menuName.tr(), - onTap: () => onAction(ViewLayoutPB.Grid), - ), - ), - ], + FlowyOptionTile.text( + text: LocaleKeys.document_menuName.tr(), + leftIcon: const FlowySvg( + FlowySvgs.document_s, + size: Size.square(20), + ), + showTopBorder: false, + onTap: () => onAction(ViewLayoutPB.Document), ), - const VSpace(8), - - // new board, new calendar - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.board_s, - text: LocaleKeys.board_menuName.tr(), - onTap: () => onAction(ViewLayoutPB.Board), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.date_s, - text: LocaleKeys.calendar_menuName.tr(), - onTap: () => onAction(ViewLayoutPB.Calendar), - ), - ), - ], + FlowyOptionTile.text( + text: LocaleKeys.grid_menuName.tr(), + leftIcon: const FlowySvg( + FlowySvgs.grid_s, + size: Size.square(20), + ), + showTopBorder: false, + onTap: () => onAction(ViewLayoutPB.Grid), + ), + FlowyOptionTile.text( + text: LocaleKeys.board_menuName.tr(), + leftIcon: const FlowySvg( + FlowySvgs.board_s, + size: Size.square(20), + ), + showTopBorder: false, + onTap: () => onAction(ViewLayoutPB.Board), + ), + FlowyOptionTile.text( + text: LocaleKeys.calendar_menuName.tr(), + leftIcon: const FlowySvg( + FlowySvgs.date_s, + size: Size.square(20), + ), + showTopBorder: false, + onTap: () => onAction(ViewLayoutPB.Calendar), ), ], ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item.dart index 13857f34e7..c1e2560e48 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item.dart @@ -2,10 +2,8 @@ import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; import 'package:appflowy/workspace/application/favorite/favorite_bloc.dart'; import 'package:appflowy/workspace/application/view/view_bloc.dart'; import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart' hide WidgetBuilder; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:go_router/go_router.dart'; enum MobileBottomSheetType { view, @@ -39,36 +37,6 @@ class _MobileViewItemBottomSheetState extends State { @override Widget build(BuildContext context) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - // header - _buildHeader(), - const VSpace(16), - // body - _buildBody(), - ], - ); - } - - Widget _buildHeader() { - switch (type) { - case MobileBottomSheetType.view: - case MobileBottomSheetType.rename: - // header - return MobileViewItemBottomSheetHeader( - showBackButton: type != MobileBottomSheetType.view, - view: widget.view, - onBack: () { - setState(() { - type = MobileBottomSheetType.view; - }); - }, - ); - } - } - - Widget _buildBody() { switch (type) { case MobileBottomSheetType.view: return MobileViewItemBottomSheetBody( @@ -81,21 +49,21 @@ class _MobileViewItemBottomSheetState extends State { }); break; case MobileViewItemBottomSheetBodyAction.duplicate: - context.pop(); + Navigator.pop(context); context.read().add(const ViewEvent.duplicate()); break; case MobileViewItemBottomSheetBodyAction.share: // unimplemented - context.pop(); + Navigator.pop(context); break; case MobileViewItemBottomSheetBodyAction.delete: - context.pop(); + Navigator.pop(context); context.read().add(const ViewEvent.delete()); break; case MobileViewItemBottomSheetBodyAction.addToFavorites: case MobileViewItemBottomSheetBodyAction.removeFromFavorites: - context.pop(); + Navigator.pop(context); context .read() .add(FavoriteEvent.toggle(widget.view)); @@ -110,7 +78,7 @@ class _MobileViewItemBottomSheetState extends State { if (name != widget.view.name) { context.read().add(ViewEvent.rename(name)); } - context.pop(); + Navigator.pop(context); }, ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart index 7f5fda6127..2e869875f9 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_item_body.dart @@ -1,8 +1,7 @@ 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_action_widget.dart'; +import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; enum MobileViewItemBottomSheetBodyAction { @@ -29,74 +28,56 @@ class MobileViewItemBottomSheetBody extends StatelessWidget { return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - // rename, duplicate - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_rename_m, - text: LocaleKeys.button_rename.tr(), - onTap: () => onAction( - MobileViewItemBottomSheetBodyAction.rename, - ), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_duplicate_m, - text: LocaleKeys.button_duplicate.tr(), - onTap: () => onAction( - MobileViewItemBottomSheetBodyAction.duplicate, - ), - ), - ), - ], + FlowyOptionTile.text( + text: LocaleKeys.button_rename.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_rename_s, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewItemBottomSheetBodyAction.rename, + ), ), - const VSpace(8), - - // share, delete - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_share_m, - text: LocaleKeys.button_share.tr(), - onTap: () => onAction( - MobileViewItemBottomSheetBodyAction.share, - ), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_delete_m, - text: LocaleKeys.button_delete.tr(), - onTap: () => onAction( - MobileViewItemBottomSheetBodyAction.delete, - ), - ), - ), - ], - ), - const VSpace(8), - - // remove from favorites/add to favorites - BottomSheetActionWidget( - svg: isFavorite - ? FlowySvgs.m_favorite_selected_lg - : FlowySvgs.m_favorite_unselected_lg, - //TODO(yijing): switch to theme color - iconColor: isFavorite ? Colors.yellow : null, + FlowyOptionTile.text( text: isFavorite ? LocaleKeys.button_removeFromFavorites.tr() : LocaleKeys.button_addToFavorites.tr(), + leftIcon: FlowySvg( + size: const Size(20, 20), + isFavorite + ? FlowySvgs.m_favorite_selected_lg + : FlowySvgs.m_favorite_unselected_lg, + color: isFavorite ? Colors.yellow : null, + ), + showTopBorder: false, onTap: () => onAction( isFavorite ? MobileViewItemBottomSheetBodyAction.removeFromFavorites : MobileViewItemBottomSheetBodyAction.addToFavorites, ), ), + FlowyOptionTile.text( + text: LocaleKeys.button_duplicate.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_duplicate_s, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewItemBottomSheetBodyAction.duplicate, + ), + ), + FlowyOptionTile.text( + text: LocaleKeys.button_delete.tr(), + textColor: Theme.of(context).colorScheme.error, + leftIcon: FlowySvg( + FlowySvgs.m_delete_s, + color: Theme.of(context).colorScheme.error, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewItemBottomSheetBodyAction.delete, + ), + ), ], ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart index 67a123e9d0..d3d23ddbbd 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/bottom_sheet_view_page.dart @@ -1,9 +1,9 @@ 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/widgets.dart'; import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart'; import 'package:easy_localization/easy_localization.dart'; -import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; enum MobileViewBottomSheetBodyAction { @@ -43,36 +43,6 @@ class _ViewPageBottomSheetState extends State { @override Widget build(BuildContext context) { - return Column( - mainAxisSize: MainAxisSize.min, - children: [ - // header - _buildHeader(), - const VSpace(16), - // body - _buildBody(), - ], - ); - } - - Widget _buildHeader() { - switch (type) { - case MobileBottomSheetType.view: - case MobileBottomSheetType.rename: - // header - return MobileViewItemBottomSheetHeader( - showBackButton: type != MobileBottomSheetType.view, - view: widget.view, - onBack: () { - setState(() { - type = MobileBottomSheetType.view; - }); - }, - ); - } - } - - Widget _buildBody() { switch (type) { case MobileBottomSheetType.view: return MobileViewBottomSheetBody( @@ -117,84 +87,56 @@ class MobileViewBottomSheetBody extends StatelessWidget { return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - // rename, duplicate - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_rename_m, - text: LocaleKeys.button_rename.tr(), - onTap: () => onAction( - MobileViewBottomSheetBodyAction.rename, - ), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_duplicate_m, - text: LocaleKeys.button_duplicate.tr(), - onTap: () => onAction( - MobileViewBottomSheetBodyAction.duplicate, - ), - ), - ), - ], + FlowyOptionTile.text( + text: LocaleKeys.button_rename.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_rename_s, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewBottomSheetBodyAction.rename, + ), ), - const VSpace(8), - - // share, delete - Row( - children: [ - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_share_m, - text: LocaleKeys.button_share.tr(), - onTap: () => onAction( - MobileViewBottomSheetBodyAction.share, - ), - ), - ), - const HSpace(8), - Expanded( - child: BottomSheetActionWidget( - svg: FlowySvgs.m_delete_m, - text: LocaleKeys.button_delete.tr(), - onTap: () => onAction( - MobileViewBottomSheetBodyAction.delete, - ), - ), - ), - ], - ), - const VSpace(8), - - // favorites - BottomSheetActionWidget( - svg: isFavorite - ? FlowySvgs.m_favorite_selected_lg - : FlowySvgs.m_favorite_unselected_lg, - //TODO(yijing): switch to theme color - iconColor: isFavorite ? Colors.yellow : null, + FlowyOptionTile.text( text: isFavorite ? LocaleKeys.button_removeFromFavorites.tr() : LocaleKeys.button_addToFavorites.tr(), + leftIcon: FlowySvg( + size: const Size(20, 20), + isFavorite + ? FlowySvgs.m_favorite_selected_lg + : FlowySvgs.m_favorite_unselected_lg, + color: isFavorite ? Colors.yellow : null, + ), + showTopBorder: false, onTap: () => onAction( isFavorite ? MobileViewBottomSheetBodyAction.removeFromFavorites : MobileViewBottomSheetBodyAction.addToFavorites, ), ), - - // Help Center - // const VSpace(8), - // BottomSheetActionWidget( - // svg: FlowySvgs.m_help_center_m, - // text: LocaleKeys.button_helpCenter.tr(), - // onTap: () => onAction( - // MobileViewBottomSheetBodyAction.helpCenter, - // ), - // ), + FlowyOptionTile.text( + text: LocaleKeys.button_duplicate.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_duplicate_s, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewBottomSheetBodyAction.duplicate, + ), + ), + FlowyOptionTile.text( + text: LocaleKeys.button_delete.tr(), + textColor: Theme.of(context).colorScheme.error, + leftIcon: FlowySvg( + FlowySvgs.m_delete_s, + color: Theme.of(context).colorScheme.error, + ), + showTopBorder: false, + onTap: () => onAction( + MobileViewBottomSheetBodyAction.delete, + ), + ), ], ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart index e29618eb84..b47f6ec59c 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart @@ -52,6 +52,11 @@ enum MobilePaneActionType { final favoriteBloc = context.read(); showMobileBottomSheet( context, + showDragHandle: true, + showDivider: false, + padding: const EdgeInsets.only(bottom: 36.0), + backgroundColor: Theme.of(context).colorScheme.background, + useRootNavigator: true, builder: (context) { return MultiBlocProvider( providers: [ 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 737a8a2876..820b4a5505 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 @@ -7,26 +7,37 @@ import 'package:flutter/material.dart'; Future showMobileBottomSheet( BuildContext context, { required WidgetBuilder builder, - ShapeBorder? shape, bool isDragEnabled = true, - bool resizeToAvoidBottomInset = true, - EdgeInsets padding = const EdgeInsets.fromLTRB(16, 16, 16, 32), bool showDragHandle = false, bool showHeader = false, + // this field is only used if showHeader is true bool showCloseButton = false, - String title = '', // only works if showHeader is true - Color? backgroundColor, + // this field is only used if showHeader is true + String title = '', + bool resizeToAvoidBottomInset = true, bool isScrollControlled = true, - BoxConstraints? constraints, bool showDivider = true, + bool useRootNavigator = false, + ShapeBorder? shape, + // the padding of the content, the padding of the header area is fixed + EdgeInsets padding = const EdgeInsets.fromLTRB(16, 4, 16, 32), + Color? backgroundColor, + BoxConstraints? constraints, Color? barrierColor, double? elevation, + bool showDoneButton = false, }) async { assert(() { if (showCloseButton || title.isNotEmpty) assert(showHeader); return true; }()); + shape ??= const RoundedRectangleBorder( + borderRadius: BorderRadius.vertical( + top: Corners.s12Radius, + ), + ); + return showModalBottomSheet( context: context, isScrollControlled: isScrollControlled, @@ -37,68 +48,63 @@ Future showMobileBottomSheet( constraints: constraints, barrierColor: barrierColor, elevation: elevation, - shape: shape ?? - const RoundedRectangleBorder( - borderRadius: BorderRadius.vertical( - top: Corners.s12Radius, - ), - ), + shape: shape, + useRootNavigator: useRootNavigator, builder: (context) { final List children = []; + final child = builder(context); + + // if the children is only one, we don't need to wrap it with a column + if (!showDragHandle && + !showHeader && + !showDivider && + !resizeToAvoidBottomInset) { + return child; + } + + // ----- header area ----- if (showDragHandle) { - children.addAll([ + children.add( const DragHandler(), - ]); + ); } if (showHeader) { - children.addAll([ - VSpace(padding.top), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - showCloseButton - ? Padding( - padding: EdgeInsets.only(left: padding.left), - child: const AppBarCloseButton( - margin: EdgeInsets.zero, - ), - ) - : const SizedBox.shrink(), - FlowyText( - title, - fontSize: 16.0, - fontWeight: FontWeight.w500, - ), - showCloseButton - ? HSpace(padding.right + 24) - : const SizedBox.shrink(), - ], + children.add( + _Header( + showCloseButton: showCloseButton, + showDoneButton: showDoneButton, + title: title, ), - const VSpace(4), - if (showDivider) const Divider(), - ]); + ); + + if (showDivider) { + children.add( + const Divider(height: 1.0, thickness: 1.0), + ); + } } - final child = builder(context); + // ----- header area ----- + // ----- content area ----- if (resizeToAvoidBottomInset) { children.add( - AnimatedPadding( + Padding( padding: EdgeInsets.only( - top: showHeader ? 0 : padding.top, + top: padding.top, left: padding.left, right: padding.right, bottom: padding.bottom + MediaQuery.of(context).viewInsets.bottom, ), - duration: Duration.zero, child: child, ), ); } else { children.add(child); } + // ----- content area ----- if (children.length == 1) { return children.first; @@ -111,3 +117,56 @@ Future showMobileBottomSheet( }, ); } + +class _Header extends StatelessWidget { + const _Header({ + required this.showCloseButton, + required this.title, + required this.showDoneButton, + }); + + final bool showCloseButton; + final String title; + final bool showDoneButton; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 4.0), + child: SizedBox( + height: 44.0, // the height of the header area is fixed + child: Stack( + children: [ + if (showCloseButton) + const Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: EdgeInsets.only(left: 16), + child: AppBarCloseButton( + margin: EdgeInsets.zero, + ), + ), + ), + Align( + child: FlowyText( + title, + fontSize: 16.0, + fontWeight: FontWeight.w500, + ), + ), + if (showDoneButton) + Align( + alignment: Alignment.centerRight, + child: Padding( + padding: const EdgeInsets.only(right: 16), + child: AppBarDoneButton( + onTap: () => Navigator.pop(context), + ), + ), + ), + ], + ), + ), + ); + } +} 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 278a521261..b224c25dc7 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 @@ -30,8 +30,6 @@ class MobileDatabaseViewList extends StatelessWidget { builder: (context, state) { final views = [state.view, ...state.view.childViews]; final children = [ - const Center(child: DragHandler()), - const _Header(), ...views.mapIndexed( (index, view) => MobileDatabaseViewListButton( view: view, @@ -50,38 +48,6 @@ class MobileDatabaseViewList extends StatelessWidget { } } -class _Header extends StatelessWidget { - const _Header(); - - @override - Widget build(BuildContext context) { - const iconWidth = 30.0; - return Padding( - padding: const EdgeInsets.fromLTRB(8, 4, 8, 12), - child: Stack( - children: [ - Align( - alignment: Alignment.centerLeft, - child: FlowyIconButton( - icon: const FlowySvg( - FlowySvgs.close_s, - size: Size.square(iconWidth), - ), - onPressed: () => context.pop(), - ), - ), - Align( - child: FlowyText.medium( - LocaleKeys.grid_settings_viewList.tr(), - fontSize: 16, - ), - ), - ], - ), - ); - } -} - @visibleForTesting class MobileDatabaseViewListButton extends StatelessWidget { const MobileDatabaseViewListButton({ @@ -141,6 +107,7 @@ class MobileDatabaseViewListButton extends StatelessWidget { showMobileBottomSheet( context, padding: EdgeInsets.zero, + showDragHandle: true, builder: (_) { return BlocProvider( create: (_) => @@ -189,7 +156,7 @@ class MobileNewDatabaseViewButton extends StatelessWidget { onTap: () async { final result = await showMobileBottomSheet<(DatabaseLayoutPB, String)>( context, - padding: EdgeInsets.zero, + padding: const EdgeInsets.only(bottom: 36), builder: (_) { return const MobileCreateDatabaseView(); }, @@ -239,6 +206,7 @@ class _MobileCreateDatabaseViewState extends State { textController: controller, selectedLayout: layoutType, ), + const VSpace(4.0), FlowyOptionTile.textField( autofocus: true, controller: controller, @@ -281,7 +249,7 @@ class _CreateViewHeader extends StatelessWidget { onPressed: () => context.pop(), icon: const FlowySvg( FlowySvgs.arrow_left_s, - size: Size.square(20), + size: Size.square(24), ), ), ), diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart index 2e5a944289..b3f80d82b6 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart @@ -338,6 +338,7 @@ class DatabaseViewSettingTile extends StatelessWidget { context, padding: EdgeInsets.zero, resizeToAvoidBottomInset: false, + showDragHandle: true, builder: (context) { return Padding( padding: const EdgeInsets.only(top: 24, bottom: 46), diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart b/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart index 9ef41ad0b7..9957d68a9d 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart @@ -13,7 +13,6 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; -import 'package:go_router/go_router.dart'; typedef ViewItemOnSelected = void Function(ViewPB); typedef ActionPaneBuilder = ActionPane Function(BuildContext context); @@ -395,13 +394,15 @@ class _SingleMobileInnerViewItemState extends State { context, showHeader: true, title: title, - showCloseButton: true, showDragHandle: true, - builder: (_) { + showCloseButton: true, + useRootNavigator: true, + padding: const EdgeInsets.only(bottom: 36), + builder: (sheetContext) { return AddNewPageWidgetBottomSheet( view: widget.view, onAction: (layout) { - context.pop(); + Navigator.of(sheetContext).pop(); context.read().add( ViewEvent.createView( LocaleKeys.menuAppHeader_defaultNewPageName.tr(), diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart index 5dcd708457..6e3dbfb598 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart @@ -39,31 +39,28 @@ class RTLSetting extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_appearance_textDirection_label.tr(), - padding: const EdgeInsets.fromLTRB(0, 8, 0, 48), + padding: const EdgeInsets.only(bottom: 36), builder: (context) { final layoutDirection = context.watch().state.layoutDirection; - return Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: [ - FlowyOptionTile.checkbox( - text: LocaleKeys.settings_appearance_textDirection_ltr.tr(), - isSelected: layoutDirection == LayoutDirection.ltrLayout, - onTap: () => context - .read() - .setLayoutDirection(LayoutDirection.ltrLayout), - ), - FlowyOptionTile.checkbox( - showTopBorder: false, - text: LocaleKeys.settings_appearance_textDirection_rtl.tr(), - isSelected: layoutDirection == LayoutDirection.rtlLayout, - onTap: () => context - .read() - .setLayoutDirection(LayoutDirection.rtlLayout), - ), - ], - ), + return Column( + children: [ + FlowyOptionTile.checkbox( + text: LocaleKeys.settings_appearance_textDirection_ltr.tr(), + isSelected: layoutDirection == LayoutDirection.ltrLayout, + onTap: () => context + .read() + .setLayoutDirection(LayoutDirection.ltrLayout), + ), + FlowyOptionTile.checkbox( + showTopBorder: false, + text: LocaleKeys.settings_appearance_textDirection_rtl.tr(), + isSelected: layoutDirection == LayoutDirection.rtlLayout, + onTap: () => context + .read() + .setLayoutDirection(LayoutDirection.rtlLayout), + ), + ], ); }, ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart index f897391003..4b25ac6b3a 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart @@ -1,3 +1,4 @@ +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/widgets.dart'; @@ -39,39 +40,45 @@ class ThemeSetting extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_appearance_themeMode_label.tr(), - padding: const EdgeInsets.fromLTRB(0, 8, 0, 48), + padding: const EdgeInsets.only(bottom: 36), builder: (context) { final themeMode = context.read().state.themeMode; - return Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: [ - FlowyOptionTile.checkbox( - text: LocaleKeys.settings_appearance_themeMode_system.tr(), - isSelected: themeMode == ThemeMode.system, - onTap: () => context - .read() - .setThemeMode(ThemeMode.system), + return Column( + children: [ + FlowyOptionTile.checkbox( + text: LocaleKeys.settings_appearance_themeMode_system.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_theme_mode_system_s, ), - FlowyOptionTile.checkbox( - showTopBorder: false, - text: LocaleKeys.settings_appearance_themeMode_light.tr(), - isSelected: themeMode == ThemeMode.light, - onTap: () => context - .read() - .setThemeMode(ThemeMode.light), + isSelected: themeMode == ThemeMode.system, + onTap: () => context + .read() + .setThemeMode(ThemeMode.system), + ), + FlowyOptionTile.checkbox( + showTopBorder: false, + text: LocaleKeys.settings_appearance_themeMode_light.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_theme_mode_light_s, ), - FlowyOptionTile.checkbox( - showTopBorder: false, - text: LocaleKeys.settings_appearance_themeMode_dark.tr(), - isSelected: themeMode == ThemeMode.dark, - onTap: () => context - .read() - .setThemeMode(ThemeMode.dark), + isSelected: themeMode == ThemeMode.light, + onTap: () => context + .read() + .setThemeMode(ThemeMode.light), + ), + FlowyOptionTile.checkbox( + showTopBorder: false, + text: LocaleKeys.settings_appearance_themeMode_dark.tr(), + leftIcon: const FlowySvg( + FlowySvgs.m_theme_mode_dark_s, ), - ], - ), + isSelected: themeMode == ThemeMode.dark, + onTap: () => context + .read() + .setThemeMode(ThemeMode.dark), + ), + ], ); }, ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/edit_username_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/edit_username_bottom_sheet.dart index 15d5155366..d88747ea24 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/edit_username_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/edit_username_bottom_sheet.dart @@ -1,5 +1,6 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:easy_localization/easy_localization.dart'; +import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; @@ -36,8 +37,6 @@ class _EditUsernameBottomSheetState extends State { @override Widget build(BuildContext context) { - final theme = Theme.of(context); - void submitUserName() { if (_formKey.currentState!.validate()) { final value = _textFieldController.text; @@ -49,27 +48,6 @@ class _EditUsernameBottomSheetState extends State { return Column( mainAxisSize: MainAxisSize.min, children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - LocaleKeys.settings_mobile_username.tr(), - style: theme.textTheme.labelSmall, - ), - IconButton( - icon: Icon( - Icons.close, - color: theme.hintColor, - ), - onPressed: () { - widget.context.pop(); - }, - ), - ], - ), - const SizedBox( - height: 16, - ), Form( key: _formKey, child: TextFormField( @@ -84,9 +62,7 @@ class _EditUsernameBottomSheetState extends State { onEditingComplete: submitUserName, ), ), - const SizedBox( - height: 16, - ), + const VSpace(16), SizedBox( width: double.infinity, child: ElevatedButton( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart index 39f54c6d1b..8e3f7123bd 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/personal_info/personal_info_setting_group.dart @@ -46,6 +46,11 @@ class PersonalInfoSettingGroup extends StatelessWidget { onTap: () { showMobileBottomSheet( context, + showHeader: true, + title: LocaleKeys.settings_mobile_username.tr(), + showCloseButton: true, + showDragHandle: true, + showDivider: false, builder: (_) { return EditUsernameBottomSheet( context, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart index da08179148..286fa0bae5 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart @@ -204,7 +204,7 @@ class FlowyOptionTile extends StatelessWidget { } final padding = EdgeInsets.symmetric( - horizontal: leading == null ? 0.0 : 8.0, + horizontal: leading == null ? 0.0 : 12.0, vertical: 16.0, ); @@ -213,7 +213,7 @@ class FlowyOptionTile extends StatelessWidget { padding: padding, child: FlowyText( text!, - fontSize: 15, + fontSize: 16, color: textColor, ), ), diff --git a/frontend/appflowy_flutter/lib/plugins/base/drag_handler.dart b/frontend/appflowy_flutter/lib/plugins/base/drag_handler.dart index 28e7e96af5..95c082629a 100644 --- a/frontend/appflowy_flutter/lib/plugins/base/drag_handler.dart +++ b/frontend/appflowy_flutter/lib/plugins/base/drag_handler.dart @@ -10,7 +10,7 @@ class DragHandler extends StatelessWidget { return Container( height: 4, width: 40, - margin: const EdgeInsets.symmetric(vertical: 8), + margin: const EdgeInsets.symmetric(vertical: 6), decoration: BoxDecoration( color: Colors.grey.shade400, borderRadius: BorderRadius.circular(2), diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart index 4318ee4458..60c2cbc5f3 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart @@ -1,4 +1,5 @@ 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/database/view/database_view_list.dart'; import 'package:appflowy/mobile/presentation/database/view/edit_database_view_screen.dart'; @@ -8,6 +9,7 @@ import 'package:appflowy/plugins/database/grid/application/filter/filter_menu_bl import 'package:appflowy/plugins/database/grid/application/sort/sort_menu_bloc.dart'; import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart'; import 'package:appflowy/workspace/application/view/view_bloc.dart'; +import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -88,7 +90,12 @@ class MobileDatabaseControls extends StatelessWidget { onTap: () { showMobileBottomSheet( context, - padding: EdgeInsets.zero, + showHeader: true, + showCloseButton: true, + showDragHandle: true, + showDivider: false, + title: LocaleKeys.grid_settings_viewList.tr(), + padding: const EdgeInsets.only(bottom: 36.0), builder: (_) { return MultiBlocProvider( providers: [ diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart index c3d8ab950b..dab569bf85 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart @@ -443,33 +443,36 @@ class DocumentCoverState extends State { title: LocaleKeys.document_plugins_cover_changeCover.tr(), builder: (context) { - return ConstrainedBox( - constraints: const BoxConstraints( - maxHeight: 340, - minHeight: 80, - ), - child: UploadImageMenu( - supportTypes: const [ - UploadImageType.color, - UploadImageType.local, - UploadImageType.url, - UploadImageType.unsplash, - ], - onSelectedLocalImage: (path) async { - context.pop(); - widget.onCoverChanged(CoverType.file, path); - }, - onSelectedAIImage: (_) { - throw UnimplementedError(); - }, - onSelectedNetworkImage: (url) async { - context.pop(); - widget.onCoverChanged(CoverType.file, url); - }, - onSelectedColor: (color) { - context.pop(); - widget.onCoverChanged(CoverType.color, color); - }, + return Padding( + padding: const EdgeInsets.only(top: 8.0), + child: ConstrainedBox( + constraints: const BoxConstraints( + maxHeight: 340, + minHeight: 80, + ), + child: UploadImageMenu( + supportTypes: const [ + UploadImageType.color, + UploadImageType.local, + UploadImageType.url, + UploadImageType.unsplash, + ], + onSelectedLocalImage: (path) async { + context.pop(); + widget.onCoverChanged(CoverType.file, path); + }, + onSelectedAIImage: (_) { + throw UnimplementedError(); + }, + onSelectedNetworkImage: (url) async { + context.pop(); + widget.onCoverChanged(CoverType.file, url); + }, + onSelectedColor: (color) { + context.pop(); + widget.onCoverChanged(CoverType.color, color); + }, + ), ), ); }, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart index fb840f5f6a..ca210840f2 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart @@ -18,9 +18,10 @@ Future showTextColorAndBackgroundColorPicker( await showMobileBottomSheet( context, showHeader: true, - showCloseButton: true, - showDivider: false, + showCloseButton: false, + showDivider: true, showDragHandle: true, + showDoneButton: true, barrierColor: Colors.transparent, backgroundColor: theme.toolbarMenuBackgroundColor, elevation: 20, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart index e746ee88a8..cf4a918f51 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart @@ -1,5 +1,3 @@ -import 'package:flutter/material.dart'; - 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'; @@ -12,6 +10,7 @@ import 'package:appflowy/startup/tasks/app_widget.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; final addBlockToolbarItem = AppFlowyMobileToolbarItem( @@ -58,17 +57,16 @@ Future showAddBlockMenu( return showMobileBottomSheet( context, showHeader: true, - showCloseButton: true, - showDivider: false, showDragHandle: true, + showDoneButton: true, barrierColor: Colors.transparent, backgroundColor: theme.toolbarMenuBackgroundColor, elevation: 20, title: LocaleKeys.button_add.tr(), - padding: const EdgeInsets.fromLTRB(16, 4, 16, 0), + padding: const EdgeInsets.fromLTRB(16, 16, 16, 0), builder: (context) { return Padding( - padding: const EdgeInsets.only(top: 12.0, bottom: 16), + padding: const EdgeInsets.only(bottom: 16), child: _AddBlockMenu( selection: selection, editorState: editorState, diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart index ba2b355db8..7ebaca830c 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart @@ -167,25 +167,22 @@ class CloudTypeSwitcher extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_menu_cloudServerType.tr(), - padding: const EdgeInsets.fromLTRB(0, 8, 0, 48), + padding: const EdgeInsets.only(bottom: 36), builder: (context) { - return Padding( - padding: const EdgeInsets.only(top: 10), - child: Column( - children: values - .mapIndexed( - (i, e) => FlowyOptionTile.checkbox( - text: titleFromCloudType(values[i]), - isSelected: cloudType == values[i], - onTap: () { - onSelected(e); - context.pop(); - }, - showBottomBorder: i == values.length - 1, - ), - ) - .toList(), - ), + return Column( + children: values + .mapIndexed( + (i, e) => FlowyOptionTile.checkbox( + text: titleFromCloudType(values[i]), + isSelected: cloudType == values[i], + onTap: () { + onSelected(e); + context.pop(); + }, + showBottomBorder: i == values.length - 1, + ), + ) + .toList(), ); }, ); diff --git a/frontend/resources/flowy_icons/16x/m_delete.svg b/frontend/resources/flowy_icons/16x/m_delete.svg new file mode 100644 index 0000000000..b22b1fde1d --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_duplicate.svg b/frontend/resources/flowy_icons/16x/m_duplicate.svg new file mode 100644 index 0000000000..f58785faac --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_duplicate.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_favorite_unselected.svg b/frontend/resources/flowy_icons/16x/m_favorite_unselected.svg new file mode 100644 index 0000000000..574d836147 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_favorite_unselected.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_rename.svg b/frontend/resources/flowy_icons/16x/m_rename.svg new file mode 100644 index 0000000000..98200fd061 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_rename.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/16x/m_share.svg b/frontend/resources/flowy_icons/16x/m_share.svg new file mode 100644 index 0000000000..d888934b82 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_share.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/16x/m_theme_mode_dark.svg b/frontend/resources/flowy_icons/16x/m_theme_mode_dark.svg new file mode 100644 index 0000000000..6e404495fe --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_theme_mode_dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_theme_mode_light.svg b/frontend/resources/flowy_icons/16x/m_theme_mode_light.svg new file mode 100644 index 0000000000..416d4c89c7 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_theme_mode_light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/resources/flowy_icons/16x/m_theme_mode_system.svg b/frontend/resources/flowy_icons/16x/m_theme_mode_system.svg new file mode 100644 index 0000000000..04522bd7c6 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_theme_mode_system.svg @@ -0,0 +1,3 @@ + + +