From 5a9a1e60e6397b9187e905a1dc4295f20b3808da Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Sun, 28 Jan 2024 22:50:25 +0800 Subject: [PATCH] fix: bottom sheet issues (#4523) * fix: bottom sheet padding * fix: set divider width to 0.5px * feat: optimize number select menu * chore: update edit field icons * chore: use short form in add block menu * feat: optimize select and multi-select menu * feat: refactor font settings page, theme mode menu and rtl menu --- .../base/flowy_search_text_field.dart | 40 ++++++++ .../presentation/base/mobile_view_page.dart | 1 - .../presentation/base/option_color_list.dart | 1 + .../default_mobile_action_pane.dart | 1 - .../show_mobile_bottom_sheet.dart | 25 +++-- .../field/mobile_field_bottom_sheets.dart | 4 +- .../mobile_field_type_option_editor.dart | 98 ++++++++++++++++--- .../field/mobile_quick_field_editor.dart | 12 +-- .../database/view/database_view_list.dart | 1 - .../view/edit_database_view_screen.dart | 16 +-- .../page_item/mobile_view_item.dart | 1 - .../setting/appearance/rtl_setting.dart | 19 ++-- .../setting/appearance/theme_setting.dart | 28 ++++-- .../setting/font/font_picker_screen.dart | 47 ++++----- .../flowy_mobile_option_decorate_box.dart | 6 +- .../widgets/flowy_mobile_search_bar.dart | 77 --------------- .../flowy_mobile_search_text_field.dart | 40 ++++++++ .../widgets/flowy_option_tile.dart | 45 ++++++--- .../field/type_option/number_format_bloc.dart | 92 ++++++++++++++--- .../widgets/cell_editor/extension.dart | 22 +++-- .../mobile_select_option_editor.dart | 73 +++++++------- .../setting/mobile_database_controls.dart | 1 - .../mobile_toolbar_v3/_color_list.dart | 2 + .../add_block_toolbar_item.dart | 11 ++- .../settings/widgets/setting_cloud.dart | 1 - .../flowy_icons/16x/m_field_copy.svg | 3 + .../flowy_icons/16x/m_field_delete.svg | 3 + .../flowy_icons/16x/m_field_edit.svg | 3 + .../flowy_icons/16x/m_field_hide.svg | 5 + .../flowy_icons/16x/m_field_more.svg | 9 ++ .../flowy_icons/16x/m_filed_insert_left.svg | 4 + .../flowy_icons/16x/m_filed_insert_right.svg | 4 + .../resources/flowy_icons/24x/m_close.svg | 6 +- .../resources/flowy_icons/24x/m_search.svg | 4 + frontend/resources/translations/en.json | 8 +- 35 files changed, 457 insertions(+), 256 deletions(-) create mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart delete mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_bar.dart create mode 100644 frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_text_field.dart create mode 100644 frontend/resources/flowy_icons/16x/m_field_copy.svg create mode 100644 frontend/resources/flowy_icons/16x/m_field_delete.svg create mode 100644 frontend/resources/flowy_icons/16x/m_field_edit.svg create mode 100644 frontend/resources/flowy_icons/16x/m_field_hide.svg create mode 100644 frontend/resources/flowy_icons/16x/m_field_more.svg create mode 100644 frontend/resources/flowy_icons/16x/m_filed_insert_left.svg create mode 100644 frontend/resources/flowy_icons/16x/m_filed_insert_right.svg create mode 100644 frontend/resources/flowy_icons/24x/m_search.svg diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart new file mode 100644 index 0000000000..909f934324 --- /dev/null +++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart @@ -0,0 +1,40 @@ +import 'package:appflowy/generated/flowy_svgs.g.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class FlowySearchTextField extends StatelessWidget { + const FlowySearchTextField({ + super.key, + this.hintText, + this.controller, + this.onChanged, + this.onSubmitted, + }); + + final String? hintText; + final TextEditingController? controller; + final ValueChanged? onChanged; + final ValueChanged? onSubmitted; + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 44.0, + child: CupertinoSearchTextField( + controller: controller, + onChanged: onChanged, + onSubmitted: onSubmitted, + placeholder: hintText, + prefixIcon: const FlowySvg(FlowySvgs.m_search_m), + prefixInsets: const EdgeInsets.only(left: 16.0), + suffixIcon: const Icon(Icons.close), + suffixInsets: const EdgeInsets.only(right: 16.0), + placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith( + color: Theme.of(context).hintColor, + fontWeight: FontWeight.w400, + fontSize: 14.0, + ), + ), + ); + } +} 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 fdf34e1805..e536648a14 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 @@ -152,7 +152,6 @@ class _MobileViewPageState extends State { 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/base/option_color_list.dart b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart index 71efa9425e..84a5e4b395 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart @@ -34,6 +34,7 @@ class OptionColorList extends StatelessWidget { color: color, borderRadius: Corners.s12Border, border: Border.all( + width: isSelected ? 2.0 : 1.0, color: isSelected ? const Color(0xff00C6F1) : Theme.of(context).dividerColor, 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 b47f6ec59c..f27c5b3b6f 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 @@ -54,7 +54,6 @@ enum MobilePaneActionType { context, showDragHandle: true, showDivider: false, - padding: const EdgeInsets.only(bottom: 36.0), backgroundColor: Theme.of(context).colorScheme.background, useRootNavigator: true, builder: (context) { 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 820b4a5505..eb22d81e20 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 @@ -20,7 +20,7 @@ Future showMobileBottomSheet( 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), + EdgeInsets padding = const EdgeInsets.all(0.0), Color? backgroundColor, BoxConstraints? constraints, Color? barrierColor, @@ -38,16 +38,20 @@ Future showMobileBottomSheet( ), ); + backgroundColor ??= Theme.of(context).brightness == Brightness.light + ? const Color(0xFFF7F8FB) + : const Color(0xFF626364); + return showModalBottomSheet( context: context, isScrollControlled: isScrollControlled, enableDrag: isDragEnabled, useSafeArea: true, clipBehavior: Clip.antiAlias, - backgroundColor: backgroundColor, constraints: constraints, barrierColor: barrierColor, elevation: elevation, + backgroundColor: backgroundColor, shape: shape, useRootNavigator: useRootNavigator, builder: (context) { @@ -81,7 +85,7 @@ Future showMobileBottomSheet( if (showDivider) { children.add( - const Divider(height: 1.0, thickness: 1.0), + const Divider(height: 0.5, thickness: 0.5), ); } } @@ -110,9 +114,18 @@ Future showMobileBottomSheet( return children.first; } - return Column( - mainAxisSize: MainAxisSize.min, - children: children, + // not full-screen mode + if (MediaQuery.of(context).padding.bottom == 0) { + children.add( + const VSpace(16), + ); + } + + return SafeArea( + child: Column( + mainAxisSize: MainAxisSize.min, + children: children, + ), ); }, ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart index 0980fb4524..f075ebd03c 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart @@ -1,9 +1,8 @@ -import 'package:flutter/material.dart'; - import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; import 'package:appflowy/plugins/database/application/field/field_controller.dart'; import 'package:appflowy/plugins/database/application/field/field_info.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart'; +import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'mobile_create_field_screen.dart'; @@ -98,7 +97,6 @@ Future showFieldPicker( ) { return showMobileBottomSheet( context, - padding: EdgeInsets.zero, builder: (context) { return MobileFieldPickerList( selectedFieldId: selectedFieldId, diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart index 3e058fb4ed..c2c580f497 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart @@ -7,6 +7,7 @@ import 'package:appflowy/mobile/presentation/base/option_color_list.dart'; import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart'; import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart'; import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; +import 'package:appflowy/plugins/base/drag_handler.dart'; import 'package:appflowy/plugins/database/application/field/field_service.dart'; import 'package:appflowy/plugins/database/application/field/type_option/number_format_bloc.dart'; import 'package:appflowy/plugins/database/grid/presentation/widgets/header/type_option/date/date_time_format.dart'; @@ -18,6 +19,7 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/uuid.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:protobuf/protobuf.dart'; @@ -338,7 +340,7 @@ class _FieldOptionEditorState extends State { if (widget.actions.contains(FieldOptionAction.hide)) FlowyOptionTile.text( text: LocaleKeys.grid_field_hide.tr(), - leftIcon: const FlowySvg(FlowySvgs.hide_s), + leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s), onTap: () => widget.onAction?.call(FieldOptionAction.hide), ), if (widget.actions.contains(FieldOptionAction.show)) @@ -352,7 +354,7 @@ class _FieldOptionEditorState extends State { FlowyOptionTile.text( showTopBorder: false, text: LocaleKeys.button_duplicate.tr(), - leftIcon: const FlowySvg(FlowySvgs.copy_s), + leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s), onTap: () => widget.onAction?.call(FieldOptionAction.duplicate), ), if (widget.actions.contains(FieldOptionAction.delete) && @@ -362,7 +364,7 @@ class _FieldOptionEditorState extends State { text: LocaleKeys.button_delete.tr(), textColor: Theme.of(context).colorScheme.error, leftIcon: FlowySvg( - FlowySvgs.delete_s, + FlowySvgs.m_delete_s, color: Theme.of(context).colorScheme.error, ), onTap: () => widget.onAction?.call(FieldOptionAction.delete), @@ -642,7 +644,7 @@ class _NumberOption extends StatelessWidget { onTap: () { showMobileBottomSheet( context, - padding: EdgeInsets.zero, + backgroundColor: Theme.of(context).colorScheme.surface, builder: (context) { return DraggableScrollableSheet( expand: false, @@ -665,7 +667,7 @@ class _NumberOption extends StatelessWidget { } } -class _NumberFormatList extends StatelessWidget { +class _NumberFormatList extends StatefulWidget { const _NumberFormatList({ this.scrollController, required this.selectedFormat, @@ -676,20 +678,81 @@ class _NumberFormatList extends StatelessWidget { final ScrollController? scrollController; final void Function(NumberFormatPB format) onSelected; + @override + State<_NumberFormatList> createState() => _NumberFormatListState(); +} + +class _NumberFormatListState extends State<_NumberFormatList> { + List formats = NumberFormatPB.values; + @override Widget build(BuildContext context) { return ListView( - controller: scrollController, - children: NumberFormatPB.values - .mapIndexed( - (index, element) => FlowyOptionTile.checkbox( - text: element.title(), - isSelected: selectedFormat == element, - showTopBorder: index == 0, - onTap: () => onSelected(element), + controller: widget.scrollController, + children: [ + const Center( + child: DragHandler(), + ), + Container( + margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), + height: 44.0, + child: CupertinoSearchTextField( + prefixIcon: const FlowySvg(FlowySvgs.m_search_m), + prefixInsets: const EdgeInsets.only(left: 16.0), + suffixIcon: const Icon(Icons.close), + suffixInsets: const EdgeInsets.only(right: 16.0), + placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith( + color: Theme.of(context).hintColor, + fontWeight: FontWeight.w400, + fontSize: 14.0, + ), + onChanged: (String value) { + setState(() { + formats = NumberFormatPB.values + .where( + (element) => element + .title() + .toLowerCase() + .contains(value.toLowerCase()), + ) + .toList(); + }); + }, + ), + ), + ...formats.mapIndexed( + (index, element) => FlowyOptionTile.checkbox( + text: element.title(), + content: Expanded( + child: Row( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 4.0, + vertical: 16.0, + ), + child: FlowyText( + element.title(), + fontSize: 16, + ), + ), + const Spacer(), + FlowyText( + element.iconSymbol(), + fontSize: 16, + ), + widget.selectedFormat != element + ? const HSpace(30.0) + : const HSpace(6.0), + ], + ), ), - ) - .toList(), + isSelected: widget.selectedFormat == element, + showTopBorder: false, + onTap: () => widget.onSelected(element), + ), + ), + ], ); } } @@ -730,7 +793,10 @@ class _SelectOption extends StatelessWidget { ), FlowyOptionTile.text( text: LocaleKeys.grid_field_addOption.tr(), - leftIcon: const FlowySvg(FlowySvgs.add_s), + leftIcon: const FlowySvg( + FlowySvgs.add_s, + size: Size.square(20), + ), onTap: () { onAddOptions([ SelectOptionPB( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart index 8518479a2f..5aa3a05855 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart @@ -72,7 +72,7 @@ class _QuickEditFieldState extends State { const _Divider(), FlowyOptionTile.text( text: LocaleKeys.grid_field_editProperty.tr(), - leftIcon: const FlowySvg(FlowySvgs.edit_s), + leftIcon: const FlowySvg(FlowySvgs.m_field_edit_s), onTap: () async { widget.fieldInfo.field.freeze(); final field = widget.fieldInfo.field.rebuild((field) { @@ -98,7 +98,7 @@ class _QuickEditFieldState extends State { text: fieldVisibility.isVisibleState() ? LocaleKeys.grid_field_hide.tr() : LocaleKeys.grid_field_show.tr(), - leftIcon: const FlowySvg(FlowySvgs.hide_s), + leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s), onTap: () async { context.pop(); if (fieldVisibility.isVisibleState()) { @@ -112,7 +112,7 @@ class _QuickEditFieldState extends State { FlowyOptionTile.text( showTopBorder: false, text: LocaleKeys.grid_field_insertLeft.tr(), - leftIcon: const FlowySvg(FlowySvgs.insert_left_s), + leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_left_s), onTap: () async { context.pop(); showCreateFieldBottomSheet( @@ -128,7 +128,7 @@ class _QuickEditFieldState extends State { FlowyOptionTile.text( showTopBorder: false, text: LocaleKeys.grid_field_insertRight.tr(), - leftIcon: const FlowySvg(FlowySvgs.insert_right_s), + leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_right_s), onTap: () async { context.pop(); showCreateFieldBottomSheet( @@ -145,7 +145,7 @@ class _QuickEditFieldState extends State { FlowyOptionTile.text( showTopBorder: false, text: LocaleKeys.button_duplicate.tr(), - leftIcon: const FlowySvg(FlowySvgs.copy_s), + leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s), onTap: () async { context.pop(); await service.duplicate(); @@ -156,7 +156,7 @@ class _QuickEditFieldState extends State { text: LocaleKeys.button_delete.tr(), textColor: Theme.of(context).colorScheme.error, leftIcon: FlowySvg( - FlowySvgs.delete_s, + FlowySvgs.m_field_delete_s, color: Theme.of(context).colorScheme.error, ), onTap: () async { 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 b224c25dc7..8bc76bdda8 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 @@ -156,7 +156,6 @@ class MobileNewDatabaseViewButton extends StatelessWidget { onTap: () async { final result = await showMobileBottomSheet<(DatabaseLayoutPB, String)>( context, - padding: const EdgeInsets.only(bottom: 36), builder: (_) { return const MobileCreateDatabaseView(); }, 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 b3f80d82b6..58f1e20111 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 @@ -336,18 +336,14 @@ class DatabaseViewSettingTile extends StatelessWidget { final databaseLayout = databaseLayoutFromViewLayout(view.layout); final newLayout = await showMobileBottomSheet( context, - padding: EdgeInsets.zero, resizeToAvoidBottomInset: false, showDragHandle: true, builder: (context) { - return Padding( - padding: const EdgeInsets.only(top: 24, bottom: 46), - child: DatabaseViewLayoutPicker( - selectedLayout: databaseLayout, - onSelect: (layout) { - Navigator.of(context).pop(layout); - }, - ), + return DatabaseViewLayoutPicker( + selectedLayout: databaseLayout, + onSelect: (layout) { + Navigator.of(context).pop(layout); + }, ); }, ); @@ -363,7 +359,6 @@ class DatabaseViewSettingTile extends StatelessWidget { if (setting == DatabaseViewSettings.board) { showMobileBottomSheet( context, - padding: EdgeInsets.zero, resizeToAvoidBottomInset: false, builder: (context) { return Padding( @@ -380,7 +375,6 @@ class DatabaseViewSettingTile extends StatelessWidget { if (setting == DatabaseViewSettings.calendar) { showMobileBottomSheet( context, - padding: EdgeInsets.zero, resizeToAvoidBottomInset: false, builder: (context) { return Padding( 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 9957d68a9d..6f6c3adf49 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 @@ -397,7 +397,6 @@ class _SingleMobileInnerViewItemState extends State { showDragHandle: true, showCloseButton: true, useRootNavigator: true, - padding: const EdgeInsets.only(bottom: 36), builder: (sheetContext) { return AddNewPageWidgetBottomSheet( view: widget.view, 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 6e3dbfb598..39a0fdae4c 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,7 +39,6 @@ class RTLSetting extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_appearance_textDirection_label.tr(), - padding: const EdgeInsets.only(bottom: 36), builder: (context) { final layoutDirection = context.watch().state.layoutDirection; @@ -48,17 +47,23 @@ class RTLSetting extends StatelessWidget { FlowyOptionTile.checkbox( text: LocaleKeys.settings_appearance_textDirection_ltr.tr(), isSelected: layoutDirection == LayoutDirection.ltrLayout, - onTap: () => context - .read() - .setLayoutDirection(LayoutDirection.ltrLayout), + onTap: () { + context + .read() + .setLayoutDirection(LayoutDirection.ltrLayout); + Navigator.pop(context); + }, ), FlowyOptionTile.checkbox( showTopBorder: false, text: LocaleKeys.settings_appearance_textDirection_rtl.tr(), isSelected: layoutDirection == LayoutDirection.rtlLayout, - onTap: () => context - .read() - .setLayoutDirection(LayoutDirection.rtlLayout), + onTap: () { + context + .read() + .setLayoutDirection(LayoutDirection.rtlLayout); + Navigator.pop(context); + }, ), ], ); 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 4b25ac6b3a..1291804af6 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 @@ -40,7 +40,6 @@ class ThemeSetting extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_appearance_themeMode_label.tr(), - padding: const EdgeInsets.only(bottom: 36), builder: (context) { final themeMode = context.read().state.themeMode; @@ -52,9 +51,12 @@ class ThemeSetting extends StatelessWidget { FlowySvgs.m_theme_mode_system_s, ), isSelected: themeMode == ThemeMode.system, - onTap: () => context - .read() - .setThemeMode(ThemeMode.system), + onTap: () { + context + .read() + .setThemeMode(ThemeMode.system); + Navigator.pop(context); + }, ), FlowyOptionTile.checkbox( showTopBorder: false, @@ -63,9 +65,12 @@ class ThemeSetting extends StatelessWidget { FlowySvgs.m_theme_mode_light_s, ), isSelected: themeMode == ThemeMode.light, - onTap: () => context - .read() - .setThemeMode(ThemeMode.light), + onTap: () { + context + .read() + .setThemeMode(ThemeMode.light); + Navigator.pop(context); + }, ), FlowyOptionTile.checkbox( showTopBorder: false, @@ -74,9 +79,12 @@ class ThemeSetting extends StatelessWidget { FlowySvgs.m_theme_mode_dark_s, ), isSelected: themeMode == ThemeMode.dark, - onTap: () => context - .read() - .setThemeMode(ThemeMode.dark), + onTap: () { + context + .read() + .setThemeMode(ThemeMode.dark); + Navigator.pop(context); + }, ), ], ); diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart index 3b336034c4..7bcc692821 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart @@ -1,6 +1,7 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart'; -import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_bar.dart'; +import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart'; +import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -48,11 +49,18 @@ class _LanguagePickerPageState extends State { return Scaffold( appBar: AppBar( titleSpacing: 0, + elevation: 0, title: FlowyText.semibold( LocaleKeys.titleBar_font.tr(), fontSize: 14.0, ), leading: const AppBarBackButton(), + bottom: const PreferredSize( + preferredSize: Size.fromHeight(0.5), + child: Divider( + height: 0.5, + ), + ), ), body: SafeArea( child: ListView.separated( @@ -62,7 +70,7 @@ class _LanguagePickerPageState extends State { return Padding( padding: const EdgeInsets.all(8.0), child: FlowyMobileSearchTextField( - onKeywordChanged: (keyword) { + onChanged: (keyword) { setState(() { availableFonts = _availableFonts .where( @@ -78,34 +86,13 @@ class _LanguagePickerPageState extends State { } final fontFamilyName = availableFonts[index - 1]; final displayName = parseFontFamilyName(fontFamilyName); - return SizedBox( - height: 48.0, - child: InkWell( - onTap: () => context.pop(fontFamilyName), - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 4.0, - vertical: 12.0, - ), - child: Row( - children: [ - const HSpace(12.0), - FlowyText( - displayName, - fontFamily: - GoogleFonts.getFont(fontFamilyName).fontFamily, - ), - const Spacer(), - if (selectedFontFamilyName == fontFamilyName) - const Icon( - Icons.check, - size: 16, - ), - const HSpace(12.0), - ], - ), - ), - ), + return FlowyOptionTile.checkbox( + text: displayName, + isSelected: selectedFontFamilyName == fontFamilyName, + showTopBorder: index == 0, + onTap: () => context.pop(fontFamilyName), + fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily, + backgroundColor: Colors.transparent, ); }, separatorBuilder: (_, __) => const Divider( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart index 33a10280f8..55ba32d06e 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart @@ -5,27 +5,31 @@ class FlowyOptionDecorateBox extends StatelessWidget { super.key, this.showTopBorder = true, this.showBottomBorder = true, + this.color, required this.child, }); final bool showTopBorder; final bool showBottomBorder; final Widget child; + final Color? color; @override Widget build(BuildContext context) { return DecoratedBox( decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, + color: color ?? Theme.of(context).colorScheme.surface, border: Border( top: showTopBorder ? BorderSide( color: Theme.of(context).dividerColor, + width: 0.5, ) : BorderSide.none, bottom: showBottomBorder ? BorderSide( color: Theme.of(context).dividerColor, + width: 0.5, ) : BorderSide.none, ), diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_bar.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_bar.dart deleted file mode 100644 index 41a9b09b0a..0000000000 --- a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_bar.dart +++ /dev/null @@ -1,77 +0,0 @@ -import 'package:appflowy/generated/flowy_svgs.g.dart'; -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'; - -class FlowyMobileSearchTextField extends StatefulWidget { - const FlowyMobileSearchTextField({ - super.key, - required this.onKeywordChanged, - }); - - final void Function(String keyword) onKeywordChanged; - - @override - State createState() => - _FlowyMobileSearchTextFieldState(); -} - -class _FlowyMobileSearchTextFieldState - extends State { - final TextEditingController controller = TextEditingController(); - final FocusNode focusNode = FocusNode(); - - @override - void dispose() { - controller.dispose(); - focusNode.dispose(); - - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return ConstrainedBox( - constraints: const BoxConstraints( - maxHeight: 36.0, - ), - child: FlowyTextField( - focusNode: focusNode, - hintText: LocaleKeys.emoji_search.tr(), - controller: controller, - onChanged: widget.onKeywordChanged, - prefixIcon: const Padding( - padding: EdgeInsets.only( - left: 8.0, - right: 4.0, - ), - child: FlowySvg( - FlowySvgs.search_s, - ), - ), - prefixIconConstraints: const BoxConstraints( - maxHeight: 18.0, - ), - suffixIcon: Padding( - padding: const EdgeInsets.all(4.0), - child: FlowyButton( - text: const FlowySvg( - FlowySvgs.close_lg, - ), - margin: EdgeInsets.zero, - useIntrinsicWidth: true, - onTap: () { - if (controller.text.isNotEmpty) { - controller.clear(); - widget.onKeywordChanged(''); - } else { - focusNode.unfocus(); - } - }, - ), - ), - ), - ); - } -} diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_text_field.dart b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_text_field.dart new file mode 100644 index 0000000000..39839b407c --- /dev/null +++ b/frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_text_field.dart @@ -0,0 +1,40 @@ +import 'package:appflowy/generated/flowy_svgs.g.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class FlowyMobileSearchTextField extends StatelessWidget { + const FlowyMobileSearchTextField({ + super.key, + this.hintText, + this.controller, + this.onChanged, + this.onSubmitted, + }); + + final String? hintText; + final TextEditingController? controller; + final ValueChanged? onChanged; + final ValueChanged? onSubmitted; + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 44.0, + child: CupertinoSearchTextField( + controller: controller, + onChanged: onChanged, + onSubmitted: onSubmitted, + placeholder: hintText, + prefixIcon: const FlowySvg(FlowySvgs.m_search_m), + prefixInsets: const EdgeInsets.only(left: 16.0), + suffixIcon: const Icon(Icons.close), + suffixInsets: const EdgeInsets.only(right: 16.0), + placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith( + color: Theme.of(context).hintColor, + fontWeight: FontWeight.w400, + fontSize: 14.0, + ), + ), + ); + } +} 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 286fa0bae5..4ae2e31315 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 @@ -32,6 +32,9 @@ class FlowyOptionTile extends StatelessWidget { this.onTextChanged, this.onTextSubmitted, this.autofocus, + this.content, + this.backgroundColor, + this.fontFamily, }); factory FlowyOptionTile.text({ @@ -89,14 +92,20 @@ class FlowyOptionTile extends StatelessWidget { required bool isSelected, required VoidCallback? onTap, Widget? leftIcon, + Widget? content, bool showTopBorder = true, bool showBottomBorder = true, + String? fontFamily, + Color? backgroundColor, }) { return FlowyOptionTile._( type: FlowyOptionTileType.checkbox, isSelected: isSelected, text: text, + content: content, onTap: onTap, + fontFamily: fontFamily, + backgroundColor: backgroundColor, showTopBorder: showTopBorder, showBottomBorder: showBottomBorder, leading: leftIcon, @@ -141,6 +150,9 @@ class FlowyOptionTile extends StatelessWidget { final Widget? leading; final Widget? trailing; + // customize the content widget + final Widget? content; + // only used in checkbox or switcher final bool isSelected; @@ -155,25 +167,27 @@ class FlowyOptionTile extends StatelessWidget { final FlowyOptionTileType type; + final Color? backgroundColor; + final String? fontFamily; + @override Widget build(BuildContext context) { final leadingWidget = _buildLeading(); - final child = ColoredBox( - color: Theme.of(context).colorScheme.surface, - child: FlowyOptionDecorateBox( - showTopBorder: showTopBorder, - showBottomBorder: showBottomBorder, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: Row( - children: [ - if (leadingWidget != null) leadingWidget, - _buildText(), - _buildTextField(), - if (trailing != null) trailing!, - ], - ), + final child = FlowyOptionDecorateBox( + color: backgroundColor, + showTopBorder: showTopBorder, + showBottomBorder: showBottomBorder, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0), + child: Row( + children: [ + if (leadingWidget != null) leadingWidget, + if (content != null) content!, + if (content == null) _buildText(), + if (content == null) _buildTextField(), + if (trailing != null) trailing!, + ], ), ), ); @@ -215,6 +229,7 @@ class FlowyOptionTile extends StatelessWidget { text!, fontSize: 16, color: textColor, + fontFamily: fontFamily, ), ), ); diff --git a/frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/number_format_bloc.dart b/frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/number_format_bloc.dart index 5c8a9ebf37..a43a3be1e6 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/number_format_bloc.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/number_format_bloc.dart @@ -128,18 +128,82 @@ extension NumberFormatExtension on NumberFormatPB { } } - // String iconName() { - // switch (this) { - // case NumberFormatPB.CNY: - // return "grid/field/yen"; - // case NumberFormatPB.EUR: - // return "grid/field/euro"; - // case NumberFormatPB.Number: - // return "grid/field/numbers"; - // case NumberFormatPB.USD: - // return "grid/field/us_dollar"; - // default: - // throw UnimplementedError; - // } - // } + String iconSymbol() { + switch (this) { + case NumberFormatPB.ArgentinePeso: + return "\$"; + case NumberFormatPB.Baht: + return "฿"; + case NumberFormatPB.CanadianDollar: + return "C\$"; + case NumberFormatPB.ChileanPeso: + return "\$"; + case NumberFormatPB.ColombianPeso: + return "\$"; + case NumberFormatPB.DanishKrone: + return "kr"; + case NumberFormatPB.Dirham: + return "د.إ"; + case NumberFormatPB.EUR: + return "€"; + case NumberFormatPB.Forint: + return "Ft"; + case NumberFormatPB.Franc: + return "Fr"; + case NumberFormatPB.HongKongDollar: + return "HK\$"; + case NumberFormatPB.Koruna: + return "Kč"; + case NumberFormatPB.Krona: + return "kr"; + case NumberFormatPB.Leu: + return "lei"; + case NumberFormatPB.Lira: + return "₺"; + case NumberFormatPB.MexicanPeso: + return "\$"; + case NumberFormatPB.NewTaiwanDollar: + return "NT\$"; + case NumberFormatPB.NewZealandDollar: + return "NZ\$"; + case NumberFormatPB.NorwegianKrone: + return "kr"; + case NumberFormatPB.Num: + return "#"; + case NumberFormatPB.Percent: + return "%"; + case NumberFormatPB.PhilippinePeso: + return "₱"; + case NumberFormatPB.Pound: + return "£"; + case NumberFormatPB.Rand: + return "R"; + case NumberFormatPB.Real: + return "R\$"; + case NumberFormatPB.Ringgit: + return "RM"; + case NumberFormatPB.Riyal: + return "ر.س"; + case NumberFormatPB.Ruble: + return "₽"; + case NumberFormatPB.Rupee: + return "₹"; + case NumberFormatPB.Rupiah: + return "Rp"; + case NumberFormatPB.Shekel: + return "₪"; + case NumberFormatPB.USD: + return "\$"; + case NumberFormatPB.UruguayanPeso: + return "\$U"; + case NumberFormatPB.Won: + return "₩"; + case NumberFormatPB.Yen: + return "JPY ¥"; + case NumberFormatPB.Yuan: + return "¥"; + default: + throw UnimplementedError; + } + } } diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart index a5efce1fc7..c68d39492a 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart @@ -1,7 +1,7 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; -import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart'; +import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; @@ -68,6 +68,8 @@ class SelectOptionTag extends StatelessWidget { this.color, this.textStyle, this.onRemove, + this.textAlign, + this.isExpanded = false, required this.padding, }) : assert(option != null || name != null && color != null); @@ -78,11 +80,20 @@ class SelectOptionTag extends StatelessWidget { final TextStyle? textStyle; final void Function(String)? onRemove; final EdgeInsets padding; + final TextAlign? textAlign; + final bool isExpanded; @override Widget build(BuildContext context) { final optionName = option?.name ?? name!; final optionColor = option?.color.toColor(context) ?? color!; + final text = FlowyText.medium( + optionName, + fontSize: fontSize, + overflow: TextOverflow.ellipsis, + color: AFThemeExtension.of(context).textColor, + textAlign: textAlign, + ); return Container( padding: onRemove == null ? padding : padding.copyWith(right: 2.0), decoration: BoxDecoration( @@ -96,14 +107,7 @@ class SelectOptionTag extends StatelessWidget { child: Row( mainAxisSize: MainAxisSize.min, children: [ - Flexible( - child: FlowyText.medium( - optionName, - fontSize: fontSize, - overflow: TextOverflow.ellipsis, - color: AFThemeExtension.of(context).textColor, - ), - ), + isExpanded ? Expanded(child: text) : Flexible(child: text), if (onRemove != null) ...[ const HSpace(4), FlowyIconButton( 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 4ef0b97233..3aaf5b140d 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 @@ -1,12 +1,12 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/presentation/base/option_color_list.dart'; +import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart'; import 'package:appflowy/mobile/presentation/widgets/widgets.dart'; import 'package:appflowy/plugins/base/drag_handler.dart'; -import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart'; -import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart'; -import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart'; import 'package:appflowy/plugins/database/application/cell/bloc/select_option_editor_bloc.dart'; +import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart'; +import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart'; import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart'; import 'package:easy_localization/easy_localization.dart'; @@ -65,6 +65,7 @@ class _MobileSelectOptionEditorState extends State { padding: const EdgeInsets.symmetric(horizontal: 8.0), child: _buildHeader(context), ), + const Divider(height: 0.5), Expanded( child: Padding( padding: EdgeInsets.symmetric( @@ -146,6 +147,7 @@ class _MobileSelectOptionEditorState extends State { return SingleChildScrollView( child: Column( children: [ + const VSpace(16), _SearchField( controller: searchController, hintText: LocaleKeys.grid_selectOption_searchOrCreateOption.tr(), @@ -165,6 +167,7 @@ class _MobileSelectOptionEditorState extends State { ); }, ), + const VSpace(22), _OptionList( onCreateOption: (optionName) { context @@ -234,23 +237,11 @@ class _SearchField extends StatelessWidget { @override Widget build(BuildContext context) { - final textStyle = Theme.of(context).textTheme.bodyMedium; - return Padding( - padding: const EdgeInsets.symmetric( - vertical: 12, - ), - child: SizedBox( - height: 44, // the height is fixed. - child: FlowyTextField( - autoFocus: false, - hintText: hintText, - textStyle: textStyle, - hintStyle: textStyle?.copyWith(color: Theme.of(context).hintColor), - onChanged: onChanged, - onSubmitted: onSubmitted, - controller: controller, - ), - ), + return FlowyMobileSearchTextField( + controller: controller, + onChanged: onChanged, + onSubmitted: onSubmitted, + hintText: hintText, ); } } @@ -300,8 +291,7 @@ class _OptionList extends StatelessWidget { return ListView.separated( shrinkWrap: true, itemCount: cells.length, - separatorBuilder: (_, __) => - VSpace(GridSize.typeOptionSeparatorHeight), + separatorBuilder: (_, __) => const VSpace(20), physics: const NeverScrollableScrollPhysics(), itemBuilder: (_, int index) => cells[index], padding: const EdgeInsets.only(bottom: 12.0), @@ -327,7 +317,7 @@ class _SelectOption extends StatelessWidget { @override Widget build(BuildContext context) { return SizedBox( - height: 44, + height: 40, child: GestureDetector( // no need to add click effect, so using gesture detector behavior: HitTestBehavior.translucent, @@ -340,19 +330,28 @@ class _SelectOption extends StatelessWidget { ? FlowySvgs.m_checkbox_checked_s : FlowySvgs.m_checkbox_uncheck_s, size: const Size.square(24.0), - blendMode: null, + blendMode: checked ? null : BlendMode.srcIn, ), // padding const HSpace(12), // option tag - SelectOptionTag( - option: option, - padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 8), + Expanded( + child: SelectOptionTag( + option: option, + padding: const EdgeInsets.symmetric( + vertical: 10, + ), + textAlign: TextAlign.center, + fontSize: 15.0, + isExpanded: true, + ), ), - const Spacer(), + const HSpace(24), // more options FlowyIconButton( - icon: const FlowySvg(FlowySvgs.three_dots_s), + icon: const FlowySvg( + FlowySvgs.m_field_more_s, + ), onPressed: onMoreOptions, ), ], @@ -386,13 +385,13 @@ class _CreateOptionCell extends StatelessWidget { ), const HSpace(8), Expanded( - child: Align( - alignment: Alignment.centerLeft, - child: SelectOptionTag( - name: optionName, - color: Theme.of(context).colorScheme.surfaceVariant, - padding: - const EdgeInsets.symmetric(horizontal: 11, vertical: 8), + child: SelectOptionTag( + isExpanded: true, + name: optionName, + color: Theme.of(context).colorScheme.surfaceVariant, + textAlign: TextAlign.center, + padding: const EdgeInsets.symmetric( + vertical: 10, ), ), ), @@ -483,7 +482,7 @@ class _MoreOptionsState extends State<_MoreOptions> { Widget _buildDeleteButton(BuildContext context) { return FlowyOptionTile.text( text: LocaleKeys.button_delete.tr(), - leftIcon: const FlowySvg(FlowySvgs.delete_s), + leftIcon: const FlowySvg(FlowySvgs.m_delete_s), onTap: widget.onDelete, ); } 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 60c2cbc5f3..5f5e164271 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 @@ -95,7 +95,6 @@ class MobileDatabaseControls extends StatelessWidget { 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/mobile_toolbar_v3/_color_list.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart index ca210840f2..cd0c258e5c 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 @@ -212,6 +212,7 @@ class _BackgroundColorItem extends StatelessWidget { color: color, borderRadius: Corners.s12Border, border: Border.all( + width: isSelected ? 2.0 : 1.0, color: isSelected ? theme.toolbarMenuItemSelectedBackgroundColor : Theme.of(context).dividerColor, @@ -291,6 +292,7 @@ class _TextColorItem extends StatelessWidget { decoration: BoxDecoration( borderRadius: Corners.s12Border, border: Border.all( + width: isSelected ? 2.0 : 1.0, color: isSelected ? const Color(0xff00C6F1) : Theme.of(context).dividerColor, 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 785e9dd28b..004abbad41 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 @@ -131,21 +131,21 @@ class _AddBlockMenu extends StatelessWidget { _AddBlockMenuItemData( blockType: BulletedListBlockKeys.type, backgroundColor: const Color(0xFFFFB9EF), - text: LocaleKeys.editor_bulletedList.tr(), + text: LocaleKeys.editor_bulletedListShortForm.tr(), icon: FlowySvgs.m_add_block_bulleted_list_s, onTap: () => _insertBlock(bulletedListNode()), ), _AddBlockMenuItemData( blockType: NumberedListBlockKeys.type, backgroundColor: const Color(0xFFFFB9EF), - text: LocaleKeys.editor_numberedList.tr(), + text: LocaleKeys.editor_numberedListShortForm.tr(), icon: FlowySvgs.m_add_block_numbered_list_s, onTap: () => _insertBlock(numberedListNode()), ), _AddBlockMenuItemData( blockType: ToggleListBlockKeys.type, backgroundColor: const Color(0xFFFFB9EF), - text: LocaleKeys.document_plugins_toggleList.tr(), + text: LocaleKeys.editor_toggleListShortForm.tr(), icon: FlowySvgs.m_add_block_toggle_s, onTap: () => _insertBlock(toggleListBlockNode()), ), @@ -161,14 +161,14 @@ class _AddBlockMenu extends StatelessWidget { _AddBlockMenuItemData( blockType: CodeBlockKeys.type, backgroundColor: const Color(0xFFCABDFF), - text: LocaleKeys.document_selectionMenu_codeBlock.tr(), + text: LocaleKeys.editor_codeBlockShortForm.tr(), icon: FlowySvgs.m_add_block_code_s, onTap: () => _insertBlock(codeBlockNode()), ), _AddBlockMenuItemData( blockType: MathEquationBlockKeys.type, backgroundColor: const Color(0xFFCABDFF), - text: LocaleKeys.document_plugins_mathEquation_name.tr(), + text: LocaleKeys.editor_mathEquationShortForm.tr(), icon: FlowySvgs.m_add_block_formula_s, onTap: () { AppGlobals.rootNavKey.currentContext?.pop(true); @@ -298,6 +298,7 @@ class _AddBlockMenuItem extends StatelessWidget { data.text, fontSize: 12.0, overflow: TextOverflow.ellipsis, + textAlign: TextAlign.center, ), ), ], 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 7ebaca830c..ef9ba39482 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,7 +167,6 @@ class CloudTypeSwitcher extends StatelessWidget { showDivider: false, showCloseButton: false, title: LocaleKeys.settings_menu_cloudServerType.tr(), - padding: const EdgeInsets.only(bottom: 36), builder: (context) { return Column( children: values diff --git a/frontend/resources/flowy_icons/16x/m_field_copy.svg b/frontend/resources/flowy_icons/16x/m_field_copy.svg new file mode 100644 index 0000000000..2234c5224e --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_field_copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_field_delete.svg b/frontend/resources/flowy_icons/16x/m_field_delete.svg new file mode 100644 index 0000000000..801287fad2 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_field_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_field_edit.svg b/frontend/resources/flowy_icons/16x/m_field_edit.svg new file mode 100644 index 0000000000..7f50d24f11 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_field_edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/flowy_icons/16x/m_field_hide.svg b/frontend/resources/flowy_icons/16x/m_field_hide.svg new file mode 100644 index 0000000000..63804754ea --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_field_hide.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/resources/flowy_icons/16x/m_field_more.svg b/frontend/resources/flowy_icons/16x/m_field_more.svg new file mode 100644 index 0000000000..ab825d59ed --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_field_more.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/resources/flowy_icons/16x/m_filed_insert_left.svg b/frontend/resources/flowy_icons/16x/m_filed_insert_left.svg new file mode 100644 index 0000000000..378518af71 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_filed_insert_left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/16x/m_filed_insert_right.svg b/frontend/resources/flowy_icons/16x/m_filed_insert_right.svg new file mode 100644 index 0000000000..d669cf1f6d --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_filed_insert_right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/flowy_icons/24x/m_close.svg b/frontend/resources/flowy_icons/24x/m_close.svg index 663a83d938..e7ce7c6515 100644 --- a/frontend/resources/flowy_icons/24x/m_close.svg +++ b/frontend/resources/flowy_icons/24x/m_close.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/frontend/resources/flowy_icons/24x/m_search.svg b/frontend/resources/flowy_icons/24x/m_search.svg new file mode 100644 index 0000000000..685d5e8942 --- /dev/null +++ b/frontend/resources/flowy_icons/24x/m_search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index b5b96c46c0..60d989cb67 100644 --- a/frontend/resources/translations/en.json +++ b/frontend/resources/translations/en.json @@ -1096,6 +1096,7 @@ "editor": { "bold": "Bold", "bulletedList": "Bulleted List", + "bulletedListShortForm": "Bulleted", "checkbox": "Checkbox", "embedCode": "Embed Code", "heading1": "H1", @@ -1108,6 +1109,7 @@ "italic": "Italic", "link": "Link", "numberedList": "Numbered List", + "numberedListShortForm": "Numbered", "quote": "Quote", "strikethrough": "Strikethrough", "text": "Text", @@ -1206,7 +1208,11 @@ "colClear": "Clear Content", "rowClear": "Clear Content", "slashPlaceHolder": "Type '/' to insert a block, or start typing", - "typeSomething": "Type something..." + "typeSomething": "Type something...", + "toggleListShortForm": "Toggle", + "quoteListShortForm": "Quote", + "mathEquationShortForm": "Formula", + "codeBlockShortForm": "Code" }, "favorite": { "noFavorite": "No favorite page",