From b625894c394282272f9c015821aacdea0b5209cc Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 2 Jun 2025 03:29:07 +0700 Subject: [PATCH] TF-3761 Update search bar for search mailbox in left menu Signed-off-by: dab246 --- .../extensions/color_extension.dart | 2 +- .../type_ahead_field_quick_search.dart | 2 +- .../widgets/search_input_form_widget.dart | 17 ++- .../presentation/search_mailbox_view.dart | 118 +++++++++--------- .../utils/search_mailbox_utils.dart | 52 -------- 5 files changed, 71 insertions(+), 120 deletions(-) diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index ed126a51b..b22dbe2fe 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -162,7 +162,7 @@ extension AppColor on Color { static const colorSpamReportBannerLabelColor = Color(0xFF626D7A); static const colorSpamReportBannerButtonBackground = Color(0xFFEBEDF0); static const colorSubtitle = Color(0xFF6D7885); - static const colorBackgroundSearchMailboxInput = Color(0xFFEBEDF0); + static const searchInputBackground = Color(0xFFE0E9F1); static const colorMailboxHovered = Color(0xFFEBEDF0); static const colorMailboxPath = Color(0xFF818C99); static const colorIconUnSubscribedMailbox = Color(0xFFAEB7C2); diff --git a/core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart b/core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart index f6f16fe5b..8c9f8167a 100644 --- a/core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart +++ b/core/lib/presentation/views/quick_search/type_ahead_field_quick_search.dart @@ -660,7 +660,7 @@ class _TypeAheadFieldQuickSearchState ) : const BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(12)), - color: AppColor.colorBgDesktop, + color: AppColor.searchInputBackground, ), height: widget.maxHeight, child: Row( diff --git a/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart index 9dd8c24f3..bef96d050 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart @@ -3,6 +3,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/utils/responsive_utils.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/quick_search/quick_search_input_form.dart'; import 'package:core/presentation/views/quick_search/quick_search_suggestion_box_decoration.dart'; import 'package:core/presentation/views/quick_search/quick_search_suggestion_list.dart'; @@ -221,12 +222,15 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin { labelStyle: const TextStyle(color: Colors.black, fontSize: 16.0) ), leftButton: Padding( - padding: const EdgeInsetsDirectional.only(start: 8), - child: buildIconWeb( - minSize: 40, - iconPadding: EdgeInsets.zero, - icon: SvgPicture.asset(_imagePaths.icSearchBar, fit: BoxFit.fill), - onTap: () => _invokeSearchEmailAction(_searchController.searchInputController.text.trim()) + padding: const EdgeInsetsDirectional.symmetric(horizontal: 12), + child: TMailButtonWidget.fromIcon( + icon: _imagePaths.icSearchBar, + iconColor: AppColor.steelGray400, + iconSize: 28, + backgroundColor: Colors.transparent, + padding: const EdgeInsets.all(4), + tooltipMessage: AppLocalizations.of(context).search, + onTapActionCallback: () => _invokeSearchEmailAction(_searchController.searchInputController.text.trim()) ) ), clearTextButton: buildIconWeb( @@ -234,6 +238,7 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin { _imagePaths.icClearTextSearch, width: 16, height: 16, + colorFilter: AppColor.steelGray400.asFilter(), fit: BoxFit.fill ), onTap: _searchController.clearTextSearch diff --git a/lib/features/search/mailbox/presentation/search_mailbox_view.dart b/lib/features/search/mailbox/presentation/search_mailbox_view.dart index 8899f4ff2..73acee47e 100644 --- a/lib/features/search/mailbox/presentation/search_mailbox_view.dart +++ b/lib/features/search/mailbox/presentation/search_mailbox_view.dart @@ -1,6 +1,7 @@ import 'package:core/presentation/extensions/color_extension.dart'; -import 'package:core/presentation/views/button/icon_button_web.dart'; +import 'package:core/presentation/utils/theme_utils.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:core/utils/platform_info.dart'; @@ -17,7 +18,6 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_m import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart'; import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_utils.dart'; import 'package:tmail_ui_user/features/search/mailbox/presentation/search_mailbox_controller.dart'; -import 'package:tmail_ui_user/features/search/mailbox/presentation/utils/search_mailbox_utils.dart'; import 'package:tmail_ui_user/features/search/mailbox/presentation/widgets/mailbox_searched_item_builder.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -45,20 +45,23 @@ class SearchMailboxView extends GetWidget } Widget _buildSearchBody(BuildContext context) { - return Container( + return ColoredBox( color: backgroundColor ?? Colors.white, - padding: const EdgeInsets.symmetric(horizontal: 4), child: Column(children: [ - Container( - color: Colors.transparent, - padding: SearchMailboxUtils.getPaddingAppBar(context, controller.responsiveUtils), - child: _buildSearchInputForm(context) + Padding( + padding: const EdgeInsetsDirectional.only( + start: 16, + end: 16, + top: 12, + ), + child: _buildSearchInputForm(context), ), - if (!controller.responsiveUtils.isWebDesktop(context)) - const Divider(color: AppColor.colorDividerComposer, height: 1), _buildLoadingView(), Expanded( - child: _buildMailboxListView(context) + child: Padding( + padding: const EdgeInsets.only(top: 12), + child: _buildMailboxListView(context), + ) ) ]), ); @@ -70,7 +73,7 @@ class SearchMailboxView extends GetWidget (success) { if (success is LoadingSearchMailbox) { return Padding( - padding: const EdgeInsets.symmetric(vertical: 16), + padding: const EdgeInsets.only(top: 12), child: loadingWidget); } else { return const SizedBox.shrink(); @@ -81,57 +84,50 @@ class SearchMailboxView extends GetWidget Widget _buildSearchInputForm(BuildContext context) { return Row(children: [ - buildIconWeb( - minSize: SearchMailboxUtils.getIconSize(context, controller.responsiveUtils), - iconPadding: EdgeInsets.zero, - splashRadius: SearchMailboxUtils.getIconSplashRadius(context, controller.responsiveUtils), - icon: SvgPicture.asset( - controller.imagePaths.icBack, - colorFilter: AppColor.colorTextButton.asFilter(), - fit: BoxFit.fill - ), - tooltip: AppLocalizations.of(context).back, - onTap: () => controller.closeSearchView(context) + TMailButtonWidget.fromIcon( + icon: controller.imagePaths.icBack, + iconColor: AppColor.steelGray400, + backgroundColor: Colors.transparent, + width: 36, + height: 36, + margin: const EdgeInsetsDirectional.only(end: 8), + padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 14), + tooltipMessage: AppLocalizations.of(context).back, + onTapActionCallback: () => controller.closeSearchView(context), ), Expanded(child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(controller.responsiveUtils.isWebDesktop(context) ? 12 : 0)), - color: controller.responsiveUtils.isWebDesktop(context) - ? AppColor.colorBackgroundSearchMailboxInput - : Colors.transparent + decoration: const BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(12)), + color: AppColor.searchInputBackground ), alignment: Alignment.center, child: Row(children: [ Padding( - padding: SearchMailboxUtils.getPaddingInputSearchIcon(context, controller.responsiveUtils), - child: buildIconWeb( - minSize: 40, - iconPadding: EdgeInsets.zero, - icon: SvgPicture.asset( - controller.imagePaths.icSearchBar, - colorFilter: AppColor.colorTextButton.asFilter(), - fit: BoxFit.fill - ), - tooltip: AppLocalizations.of(context).search, - onTap: () => controller.handleSearchButtonPressed(context) + padding: const EdgeInsets.symmetric(horizontal: 12), + child: TMailButtonWidget.fromIcon( + icon: controller.imagePaths.icSearchBar, + iconColor: AppColor.steelGray400, + iconSize: 28, + backgroundColor: Colors.transparent, + padding: const EdgeInsets.all(4), + tooltipMessage: AppLocalizations.of(context).search, + onTapActionCallback: () => + controller.handleSearchButtonPressed(context) ), ), Expanded(child: _buildTextFieldSearchInput(context)), Obx(() { if (controller.currentSearchQuery.isNotEmpty) { return Padding( - padding: const EdgeInsets.only(right: 2), - child: buildIconWeb( - minSize: 40, - iconPadding: EdgeInsets.zero, - icon: SvgPicture.asset( - controller.imagePaths.icClearSearchInput, - width: 24, - height: 24, - fit: BoxFit.fill - ), - tooltip: AppLocalizations.of(context).clearAll, - onTap: controller.clearAllTextInputSearchForm), + padding: const EdgeInsetsDirectional.only(end: 12), + child: TMailButtonWidget.fromIcon( + icon: controller.imagePaths.icClearSearchInput, + iconColor: AppColor.steelGray400, + iconSize: 28, + padding: const EdgeInsets.all(4), + tooltipMessage: AppLocalizations.of(context).clearAll, + onTapActionCallback: controller.clearAllTextInputSearchForm, + ), ); } else { return const SizedBox.shrink(); @@ -150,19 +146,21 @@ class SearchMailboxView extends GetWidget maxLines: 1, controller: controller.textInputSearchController, textDirection: DirectionUtils.getDirectionByLanguage(context), - textStyle: const TextStyle( + textStyle: ThemeUtils.textStyleBodyBody2( color: Colors.black, - fontSize: 15, - fontWeight: FontWeight.normal), + ), keyboardType: TextInputType.text, onTextSubmitted: (text) => controller.onTextSearchSubmitted(context, text), decoration: InputDecoration( - contentPadding: EdgeInsets.zero, + contentPadding: const EdgeInsetsDirectional.only( + end: 12, + bottom: 14, + top: 14, + ), hintText: AppLocalizations.of(context).searchForFolders, - hintStyle: const TextStyle( - color: AppColor.loginTextFieldHintColor, - fontSize: 15, - fontWeight: FontWeight.normal), + hintStyle: ThemeUtils.textStyleBodyBody2( + color: AppColor.steelGray400, + ), border: InputBorder.none ), ); @@ -171,9 +169,9 @@ class SearchMailboxView extends GetWidget Widget _buildMailboxListView(BuildContext context) { return Obx(() { return ListView.builder( - padding: SearchMailboxUtils.getPaddingListViewMailboxSearched(context, controller.responsiveUtils), key: const Key('list_mailbox_searched'), itemCount: controller.listMailboxSearched.length, + padding: const EdgeInsets.symmetric(horizontal: 16), shrinkWrap: true, primary: false, itemBuilder: (context, index) { diff --git a/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart b/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart index 8c680df9a..e647f1c74 100644 --- a/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart +++ b/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart @@ -2,58 +2,6 @@ import 'package:core/presentation/utils/responsive_utils.dart'; import 'package:flutter/material.dart'; class SearchMailboxUtils { - static EdgeInsets getPaddingAppBar(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return const EdgeInsets.symmetric(vertical: 8, horizontal: 16); - } else { - if (responsiveUtils.isScreenWithShortestSide(context)) { - return const EdgeInsets.symmetric(horizontal: 12, vertical: 8); - } else { - return const EdgeInsets.symmetric(horizontal: 28, vertical: 8); - } - } - } - - static EdgeInsets getPaddingInputSearchIcon(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return const EdgeInsets.only(left: 5, right: 2); - } else { - if (responsiveUtils.isScreenWithShortestSide(context)) { - return const EdgeInsets.only(left: 6, right: 14); - } else { - return const EdgeInsets.only(left: 8, right: 16); - } - } - } - - static double getIconSize(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return 30; - } else { - return 40; - } - } - - static double getIconSplashRadius(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return 10; - } else { - return 15; - } - } - - static EdgeInsets getPaddingListViewMailboxSearched(BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isWebDesktop(context)) { - return const EdgeInsets.only(left: 16, right: 16, bottom: 16); - } else { - if (responsiveUtils.isScreenWithShortestSide(context)) { - return const EdgeInsets.all(16); - } else { - return const EdgeInsets.symmetric(horizontal: 32, vertical: 16); - } - } - } - static EdgeInsets getPaddingItemListView(BuildContext context, ResponsiveUtils responsiveUtils) { if (responsiveUtils.isWebDesktop(context)) { return const EdgeInsets.all(8);