From 380a270bda6747e71fa678dd4afad0bad658afb3 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 18 Sep 2024 01:50:25 +0700 Subject: [PATCH] TF-3005 Apply new design search input contact view --- .../contact/presentation/contact_view.dart | 24 ++++--- .../styles/contact_view_style.dart | 26 ++++++- .../presentation/utils/contact_utils.dart | 12 ---- .../presentation/destination_picker_view.dart | 5 -- .../widgets/search_app_bar_widget.dart | 71 ++++++++++--------- 5 files changed, 77 insertions(+), 61 deletions(-) diff --git a/lib/features/contact/presentation/contact_view.dart b/lib/features/contact/presentation/contact_view.dart index 9b77b966d2..5495488db7 100644 --- a/lib/features/contact/presentation/contact_view.dart +++ b/lib/features/contact/presentation/contact_view.dart @@ -2,7 +2,6 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:jmap_dart_client/jmap/mail/email/email_address.dart'; import 'package:pointer_interceptor/pointer_interceptor.dart'; @@ -61,27 +60,30 @@ class ContactView extends GetWidget { responsiveUtils: controller.responsiveUtils, onCloseContactView: controller.closeContactView, )), - SearchAppBarWidget( + Obx(() => SearchAppBarWidget( imagePaths: controller.imagePaths, searchQuery: controller.searchQuery.value, searchFocusNode: controller.textInputSearchFocus, searchInputController: controller.textInputSearchController, hasBackButton: false, hasSearchButton: true, - margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils), + searchIconSize: 20, + searchIconColor: AppColor.colorHintSearchBar, + margin: ContactViewStyle.getSearchInputFormMargin( + context, + controller.responsiveUtils + ), decoration: const BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(10)), - color: AppColor.colorBgSearchBar), - iconClearText: SvgPicture.asset( - controller.imagePaths.icClearTextSearch, - width: 18, - height: 18, - fit: BoxFit.fill), + borderRadius: BorderRadius.all(Radius.circular(12)), + color: AppColor.colorBgSearchBar + ), hintText: AppLocalizations.of(context).hintSearchInputContact, + inputHintTextStyle: ContactViewStyle.searchInputHintTextStyle, + inputTextStyle: ContactViewStyle.searchInputTextStyle, onClearTextSearchAction: controller.clearAllTextInputSearchForm, onTextChangeSearchAction: controller.onTextSearchChange, onSearchTextAction: controller.onSearchTextAction, - ), + )), if (PlatformInfo.isWeb) Obx(() { final username = controller.session.value?.username.value ?? ''; diff --git a/lib/features/contact/presentation/styles/contact_view_style.dart b/lib/features/contact/presentation/styles/contact_view_style.dart index 492ca058d5..aa7d77939f 100644 --- a/lib/features/contact/presentation/styles/contact_view_style.dart +++ b/lib/features/contact/presentation/styles/contact_view_style.dart @@ -1,12 +1,25 @@ +import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:core/utils/platform_info.dart'; -import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; class ContactViewStyle { static const double viewMaxHeight = 624.0; static const double viewMaxWidth = 558.0; + static TextStyle searchInputHintTextStyle = const TextStyle( + fontSize: 15, + fontWeight: FontWeight.w400, + color: AppColor.colorHintSearchBar + ); + + static TextStyle searchInputTextStyle = const TextStyle( + fontSize: 15, + fontWeight: FontWeight.w400, + color: Colors.black + ); + static double getContactViewHeight( BuildContext context, ResponsiveUtils responsiveUtils @@ -59,4 +72,15 @@ class ContactViewStyle { return const BorderRadius.all(Radius.circular(16)); } } + + static EdgeInsetsGeometry getSearchInputFormMargin( + BuildContext context, + ResponsiveUtils responsiveUtils + ) { + if (PlatformInfo.isWeb || responsiveUtils.isScreenWithShortestSide(context)) { + return const EdgeInsets.symmetric(horizontal: 16, vertical: 10); + } else { + return const EdgeInsets.symmetric(horizontal: 32, vertical: 10); + } + } } \ No newline at end of file diff --git a/lib/features/contact/presentation/utils/contact_utils.dart b/lib/features/contact/presentation/utils/contact_utils.dart index 39adf0c3f1..5c7d919c85 100644 --- a/lib/features/contact/presentation/utils/contact_utils.dart +++ b/lib/features/contact/presentation/utils/contact_utils.dart @@ -4,18 +4,6 @@ import 'package:core/utils/platform_info.dart'; import 'package:flutter/material.dart'; class ContactUtils { - static EdgeInsets getPaddingSearchInputForm(BuildContext context, ResponsiveUtils responsiveUtils) { - if (PlatformInfo.isWeb) { - return const EdgeInsets.symmetric(horizontal: 16, vertical: 10); - } else { - if (responsiveUtils.isScreenWithShortestSide(context)) { - return const EdgeInsets.symmetric(horizontal: 16, vertical: 10); - } else { - return const EdgeInsets.symmetric(horizontal: 32, vertical: 10); - } - } - } - static EdgeInsets getPaddingSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) { if (PlatformInfo.isWeb) { return const EdgeInsets.symmetric(horizontal: 16, vertical: 10); diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index 6b54bcf199..45c33868e5 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -609,11 +609,6 @@ class DestinationPickerView extends GetWidget decoration: const BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(12)), color: AppColor.colorBgSearchBar), - iconClearText: SvgPicture.asset( - controller.imagePaths.icClearTextSearch, - width: 18, - height: 18, - fit: BoxFit.fill), hintText: AppLocalizations.of(context).hintSearchFolders, onClearTextSearchAction: controller.clearSearchText, onTextChangeSearchAction: (query) => controller.searchMailbox(context, query), diff --git a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart index 4b446bb764..5e24742f4a 100644 --- a/lib/features/thread/presentation/widgets/search_app_bar_widget.dart +++ b/lib/features/thread/presentation/widgets/search_app_bar_widget.dart @@ -2,6 +2,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/views/button/icon_button_web.dart'; +import 'package:core/presentation/views/button/tmail_button_widget.dart'; import 'package:core/presentation/views/text/text_field_builder.dart'; import 'package:core/utils/direction_utils.dart'; import 'package:flutter/material.dart'; @@ -25,9 +26,12 @@ class SearchAppBarWidget extends StatelessWidget { final double? heightSearchBar; final Decoration? decoration; final EdgeInsets? padding; - final EdgeInsets? margin; + final EdgeInsetsGeometry? margin; final String? hintText; - final Widget? iconClearText; + final Color? searchIconColor; + final double? searchIconSize; + final TextStyle? inputHintTextStyle; + final TextStyle? inputTextStyle; final OnCancelSearchPressed? onCancelSearchPressed; final OnTextChangeSearchAction? onTextChangeSearchAction; final OnClearTextSearchAction? onClearTextSearchAction; @@ -47,7 +51,10 @@ class SearchAppBarWidget extends StatelessWidget { this.padding, this.margin, this.hintText, - this.iconClearText, + this.searchIconColor, + this.searchIconSize, + this.inputHintTextStyle, + this.inputTextStyle, this.onCancelSearchPressed, this.onTextChangeSearchAction, this.onClearTextSearchAction, @@ -65,10 +72,28 @@ class SearchAppBarWidget extends StatelessWidget { child: Row( children: [ if (hasBackButton) _buildBackButton(), - if (hasSearchButton) _buildSearchButton(), + if (hasSearchButton) + TMailButtonWidget.fromIcon( + icon: imagePaths.icSearchBar, + iconColor: searchIconColor, + iconSize: searchIconSize, + backgroundColor: Colors.transparent, + margin: const EdgeInsets.symmetric(horizontal: 8), + onTapActionCallback: () => + onSearchTextAction?.call(searchInputController?.text ?? ''), + ), Expanded(child: _buildSearchInputForm(context)), - if (suggestionSearch?.isNotEmpty == true || (searchQuery != null && searchQuery!.value.isNotEmpty)) - _buildClearTextSearchButton(), + if (suggestionSearch?.isNotEmpty == true || + (searchQuery != null && searchQuery!.value.isNotEmpty)) + TMailButtonWidget.fromIcon( + icon: imagePaths.icClearTextSearch, + backgroundColor: Colors.transparent, + margin: const EdgeInsets.symmetric(horizontal: 8), + onTapActionCallback: () { + searchInputController?.clear(); + onClearTextSearchAction?.call(); + }, + ), ] ) ); @@ -88,15 +113,6 @@ class SearchAppBarWidget extends StatelessWidget { }); } - Widget _buildClearTextSearchButton() { - return buildIconWeb( - icon: iconClearText ?? SvgPicture.asset(imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill), - onTap: () { - searchInputController?.clear(); - onClearTextSearchAction?.call(); - }); - } - Widget _buildSearchInputForm(BuildContext context) { return TextFieldBuilder( key: const Key('search_input_form'), @@ -108,31 +124,22 @@ class SearchAppBarWidget extends StatelessWidget { textDirection: DirectionUtils.getDirectionByLanguage(context), autoFocus: true, focusNode: searchFocusNode, - textStyle: const TextStyle(color: AppColor.colorNameEmail, fontSize: 17), + textStyle: inputTextStyle ?? const TextStyle( + color: AppColor.colorNameEmail, + fontSize: 17 + ), decoration: InputDecoration( border: InputBorder.none, focusedBorder: InputBorder.none, enabledBorder: InputBorder.none, contentPadding: EdgeInsets.zero, hintText: hintText, - hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0), + hintStyle: inputHintTextStyle ?? const TextStyle( + color: AppColor.colorHintSearchBar, + fontSize: 17.0 + ), labelStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0)), controller: searchInputController, ); } - - Widget _buildSearchButton() { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 8), - child: buildIconWeb( - minSize: 40, - iconPadding: EdgeInsets.zero, - icon: SvgPicture.asset( - imagePaths.icSearchBar, - fit: BoxFit.fill - ), - onTap: () => onSearchTextAction?.call(searchInputController?.text ?? '') - ), - ); - } } \ No newline at end of file