diff --git a/assets/images/ic_search_bar.svg b/assets/images/ic_search_bar.svg new file mode 100644 index 000000000..6d1b7d605 --- /dev/null +++ b/assets/images/ic_search_bar.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index ccb81f780..38eb3c9db 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -65,6 +65,8 @@ extension AppColor on Color { static const colorNameEmail = Color(0xFF000000); static const colorContentEmail = Color(0xFF6D7885); static const colorTextButton = Color(0xFF007AFF); + static const colorHintSearchBar = Color(0xFF818C99); + static const colorBgSearchBar = Color(0xFFEBEDF0); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index a6a6ddaa1..160d0c545 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -49,6 +49,7 @@ class ImagePaths { String get icChevron => _getImagePath('ic_chevron.svg'); String get icChevronDown => _getImagePath('ic_chevron_down.svg'); String get icFilter => _getImagePath('ic_filter.svg'); + String get icSearchBar => _getImagePath('ic_search_bar.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 04936fbc4..65765f168 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -11,6 +11,7 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar_threa import 'package:tmail_ui_user/features/thread/presentation/widgets/email_context_menu_action_builder.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart'; +import 'package:tmail_ui_user/features/thread/presentation/widgets/search_bar_thread_view_widget.dart'; import 'package:tmail_ui_user/features/thread/presentation/widgets/suggestion_box_widget.dart'; import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; @@ -37,6 +38,11 @@ class ThreadView extends GetWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildAppBarThread(context), + Obx(() => !controller.isSearchActive() + ? (SearchBarThreadViewWidget(context, imagePaths) + ..addOnOpenSearchViewAction(() => controller.enableSearch(context))) + .build() + : SizedBox.shrink()), Expanded(child: Stack( children: [ Container( @@ -76,7 +82,7 @@ class ThreadView extends GetWidget { return Obx(() { return Stack( children: [ - _buildAppBarNormal(context), + if (!controller.isSearchActive()) _buildAppBarNormal(context), if (controller.isSearchActive()) _buildSearchForm(context), if (controller.currentSelectMode.value == SelectMode.ACTIVE) _buildAppBarSelectModeActive(context), ], diff --git a/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart b/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart new file mode 100644 index 000000000..41062e72c --- /dev/null +++ b/lib/features/thread/presentation/widgets/search_bar_thread_view_widget.dart @@ -0,0 +1,82 @@ + +import 'package:core/core.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; + +typedef OnOpenSearchViewAction = Function(); + +class SearchBarThreadViewWidget { + OnOpenSearchViewAction? _onOpenSearchViewAction; + + final BuildContext _context; + final ImagePaths _imagePaths; + + double? _heightSearchBar; + EdgeInsets? _padding; + EdgeInsets? _margin; + + SearchBarThreadViewWidget( + this._context, + this._imagePaths, + ); + + void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) { + _onOpenSearchViewAction = onOpenSearchViewAction; + } + + void setHeightSearchBar(double heightSearchBar) { + _heightSearchBar = heightSearchBar; + } + + void addPadding(EdgeInsets padding) { + _padding = padding; + } + + void addMargin(EdgeInsets margin) { + _margin = margin; + } + + Widget build() { + return GestureDetector( + onTap: () => _onOpenSearchViewAction?.call(), + child: Container( + key: Key('search_bar_widget'), + alignment: Alignment.topCenter, + height: _heightSearchBar ?? 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: AppColor.colorBgSearchBar), + padding: _padding ?? EdgeInsets.zero, + margin: _margin ?? EdgeInsets.only(left: 16, right: 16, bottom: 10), + child: MediaQuery( + data: MediaQueryData(padding: EdgeInsets.zero), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _buildSearchButton(), + Text( + AppLocalizations.of(_context).hint_search_emails, + style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar),) + ] + ) + ) + ), + ); + } + + Widget _buildSearchButton() { + return Material( + borderRadius: BorderRadius.circular(12), + color: Colors.transparent, + child: Padding( + padding: EdgeInsets.only(left: 2), + child: IconButton( + color: AppColor.appColor, + icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 18, height: 18, fit: BoxFit.fill), + onPressed: () => _onOpenSearchViewAction?.call() + ) + ) + ); + } +} \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index f941dd743..f28a5d296 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/lib/main/localizations/app_localizations.dart @@ -464,5 +464,11 @@ class AppLocalizations { return Intl.message('Edit', name: 'edit'); } + + String get hint_search_emails { + return Intl.message( + 'Search for emails and files', + name: 'hint_search_emails'); + } }