From 8937856d3653f67a7111747f61118eded237adb6 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Mon, 29 Jan 2024 16:34:19 +0800 Subject: [PATCH] feat: new UI design for number format list (#4537) --- .../base/flowy_search_text_field.dart | 2 +- .../mobile_field_type_option_editor.dart | 26 +++++++------------ .../widgets/flowy_option_tile.dart | 3 +-- .../add_block_toolbar_item.dart | 1 + .../flowy_icons/16x/m_blue_check.svg | 5 ++++ 5 files changed, 17 insertions(+), 20 deletions(-) create mode 100644 frontend/resources/flowy_icons/16x/m_blue_check.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 index 909f934324..8233f8bff5 100644 --- 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 @@ -26,7 +26,7 @@ class FlowySearchTextField extends StatelessWidget { onSubmitted: onSubmitted, placeholder: hintText, prefixIcon: const FlowySvg(FlowySvgs.m_search_m), - prefixInsets: const EdgeInsets.only(left: 16.0), + prefixInsets: const EdgeInsets.only(left: 16.0, right: 2.0), suffixIcon: const Icon(Icons.close), suffixInsets: const EdgeInsets.only(right: 16.0), placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith( 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 0c2fe3510f..bf1e226247 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 @@ -3,6 +3,7 @@ import 'dart:typed_data'; import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; +import 'package:appflowy/mobile/presentation/base/flowy_search_text_field.dart'; 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'; @@ -19,7 +20,6 @@ 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'; @@ -654,8 +654,7 @@ class _NumberOption extends StatelessWidget { return DraggableScrollableSheet( expand: false, snap: true, - initialChildSize: 0.6, - minChildSize: 0.6, + minChildSize: 0.5, builder: (context, scrollController) => _NumberFormatList( scrollController: scrollController, selectedFormat: selectedFormat, @@ -701,16 +700,7 @@ class _NumberFormatListState extends State<_NumberFormatList> { 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, - ), + child: FlowySearchTextField( onChanged: (String value) { setState(() { formats = NumberFormatPB.values @@ -732,19 +722,21 @@ class _NumberFormatListState extends State<_NumberFormatList> { child: Row( children: [ Padding( - padding: const EdgeInsets.symmetric( - horizontal: 4.0, - vertical: 16.0, + padding: const EdgeInsets.fromLTRB( + 4.0, + 16.0, + 12.0, + 16.0, ), child: FlowyText( element.title(), fontSize: 16, ), ), - const Spacer(), FlowyText( element.iconSymbol(), fontSize: 16, + color: Theme.of(context).hintColor, ), widget.selectedFormat != element ? const HSpace(30.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 4ae2e31315..f9b5104a10 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 @@ -111,8 +111,7 @@ class FlowyOptionTile extends StatelessWidget { leading: leftIcon, trailing: isSelected ? const FlowySvg( - FlowySvgs.blue_check_s, - size: Size.square(24.0), + FlowySvgs.m_blue_check_s, blendMode: null, ) : null, 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 8c214b5951..459c80b2f5 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 @@ -65,6 +65,7 @@ Future showAddBlockMenu( showHeader: true, showDragHandle: true, showDoneButton: true, + showCloseButton: true, barrierColor: Colors.transparent, backgroundColor: theme.toolbarMenuBackgroundColor, elevation: 20, diff --git a/frontend/resources/flowy_icons/16x/m_blue_check.svg b/frontend/resources/flowy_icons/16x/m_blue_check.svg new file mode 100644 index 0000000000..90875a54b2 --- /dev/null +++ b/frontend/resources/flowy_icons/16x/m_blue_check.svg @@ -0,0 +1,5 @@ + + + + +