From be625472c6817092283fe3ec8f3f15eb2269866c Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 4 Jul 2022 11:50:48 +0700 Subject: [PATCH] TF-682 Update padding advanced search form on landscape tablet --- .../presentation/utils/responsive_utils.dart | 8 +++ .../advanced_filter_controller.dart | 2 - .../mailbox_dashboard_controller.dart | 1 - .../mailbox_dashboard_view_web.dart | 2 +- .../advanced_search_filter_form.dart | 58 ++++++++++++------- ...vanced_search_filter_form_bottom_view.dart | 37 ++++++------ .../advanced_search_filter_overlay.dart | 40 +++++++++++-- .../icon_open_advanced_search_widget.dart | 34 ++++++----- .../presentation/thread_controller.dart | 3 + .../thread/presentation/thread_view.dart | 7 ++- 10 files changed, 124 insertions(+), 68 deletions(-) diff --git a/core/lib/presentation/utils/responsive_utils.dart b/core/lib/presentation/utils/responsive_utils.dart index 3dc4af19f..6257dc6fd 100644 --- a/core/lib/presentation/utils/responsive_utils.dart +++ b/core/lib/presentation/utils/responsive_utils.dart @@ -124,4 +124,12 @@ class ResponsiveUtils { return isLandscapeTablet(context) || isDesktop(context); } } + + bool landscapeTabletSupported(BuildContext context) { + if (BuildUtils.isWeb) { + return isTabletLarge(context); + } else { + return isLandscapeTablet(context); + } + } } \ No newline at end of file diff --git a/lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart b/lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart index b9f6ea094..e70ca068f 100644 --- a/lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart +++ b/lib/features/mailbox_dashboard/presentation/controller/advanced_filter_controller.dart @@ -94,7 +94,6 @@ class AdvancedFilterController extends GetxController { } if(lastTextForm.isNotEmpty && !searchController.searchEmailFilter.value.from.contains(lastTextForm.value)){ - print(lastTextForm); searchController.updateFilterEmail( from: searchController.searchEmailFilter.value.from..add(lastTextForm.value), ); @@ -108,7 +107,6 @@ class AdvancedFilterController extends GetxController { ); lastTextTo.value = ''; - } searchController.updateFilterEmail( diff --git a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart index f105a0d44..c43993c9e 100644 --- a/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart +++ b/lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart @@ -281,7 +281,6 @@ class MailboxDashBoardController extends ReloadableController { bool get isDrawerOpen => scaffoldKey.currentState?.isDrawerOpen == true; - bool isSelectionEnabled() => currentSelectMode.value == SelectMode.ACTIVE; void searchEmail(BuildContext context, String value) { diff --git a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart index e3fcad24f..7d7ab9819 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -436,7 +436,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { widthFactor: 1, ), ), - portalFollower:const AdvancedSearchFilterOverlay(), + portalFollower: const AdvancedSearchFilterOverlay(), child: QuickSearchInputForm( textFieldConfiguration: QuickSearchTextFieldConfiguration( controller: searchController.searchInputController, diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart index 69c1019dc..8b6393ce8 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart @@ -121,7 +121,8 @@ class AdvancedSearchInputForm extends GetWidget }) { final child = [ SizedBox( - width: _responsiveUtils.isMobile(context) ? null : 112, + width: _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) + ? null : 112, child: Text( advancedSearchFilterField.getTitle(context), style: const TextStyle( @@ -131,27 +132,39 @@ class AdvancedSearchInputForm extends GetWidget ), ), const Padding(padding: EdgeInsets.all(4)), - _responsiveUtils.isMobile(context) - ? _buildTextField( - isSelectFormList: isSelectFormList, - onTap: onTap, - context: context, - advancedSearchFilterField: advancedSearchFilterField, - textEditingController: textEditingController, - ) - : Expanded( - child: _buildTextFieldFilterForWeb( - isSelectFormList: isSelectFormList, - onTap: onTap, - context: context, - advancedSearchFilterField: advancedSearchFilterField, - textEditingController: textEditingController, - ), - ) + if (_responsiveUtils.isMobile(context)) + _buildTextField( + isSelectFormList: isSelectFormList, + onTap: onTap, + context: context, + advancedSearchFilterField: advancedSearchFilterField, + textEditingController: textEditingController, + ) + else if (_responsiveUtils.landscapeTabletSupported(context)) + if (advancedSearchFilterField == AdvancedSearchFilterField.date) + const DateDropDownButton() + else + _buildTextField( + isSelectFormList: isSelectFormList, + onTap: onTap, + context: context, + advancedSearchFilterField: advancedSearchFilterField, + textEditingController: textEditingController, + ) + else + Expanded( + child: _buildTextFieldFilterForWeb( + isSelectFormList: isSelectFormList, + onTap: onTap, + context: context, + advancedSearchFilterField: advancedSearchFilterField, + textEditingController: textEditingController, + ), + ) ]; return Padding( padding: const EdgeInsets.symmetric(vertical: 8), - child: _responsiveUtils.isMobile(context) + child: _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) ? Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, @@ -191,7 +204,8 @@ class AdvancedSearchInputForm extends GetWidget }) { final child = [ SizedBox( - width: _responsiveUtils.isMobile(context) ? null : 112, + width: _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) + ? null : 112, child: Text( advancedSearchFilterField.getTitle(context), style: const TextStyle( @@ -201,7 +215,7 @@ class AdvancedSearchInputForm extends GetWidget ), ), const Padding(padding: EdgeInsets.all(4)), - _responsiveUtils.isMobile(context) + _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) ? TextFieldAutoCompleteEmailAddress( optionsBuilder: (word) async { return controller.getAutoCompleteSuggestion(word: word); @@ -274,7 +288,7 @@ class AdvancedSearchInputForm extends GetWidget ]; return Padding( padding: const EdgeInsets.symmetric(vertical: 8), - child: _responsiveUtils.isMobile(context) + child: _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) ? Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart index ff9a02cb5..67b4a94b7 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart @@ -16,24 +16,25 @@ class AdvancedSearchFilterFormBottomView final ResponsiveUtils _responsiveUtils = Get.find(); return Padding( - padding: - EdgeInsets.only(top: _responsiveUtils.isMobile(context) ? 8 : 20), + padding: EdgeInsets.only( + top: _responsiveUtils.isMobile(context) || + _responsiveUtils.landscapeTabletSupported(context) ? 8 : 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if (_responsiveUtils.isMobile(context)) - _buildCheckboxHasAttachment(context), + if (_responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context)) + ...[ + _buildCheckboxHasAttachment(context), + const SizedBox(height: 24) + ], Row( - mainAxisAlignment: _responsiveUtils.isMobile(context) + mainAxisAlignment: _responsiveUtils.isMobile(context) || _responsiveUtils.landscapeTabletSupported(context) ? MainAxisAlignment.spaceEvenly - : MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.end, - mainAxisSize: MainAxisSize.max, + : MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - if (!_responsiveUtils.isMobile(context))...[ - _buildCheckboxHasAttachment(context), - const Spacer(), - ], + if (!_responsiveUtils.isMobile(context) && !_responsiveUtils.landscapeTabletSupported(context)) + Expanded(child: _buildCheckboxHasAttachment(context)), ..._buildListButton(context, _responsiveUtils), ], ), @@ -44,7 +45,7 @@ class AdvancedSearchFilterFormBottomView List _buildListButton( BuildContext context, ResponsiveUtils responsiveUtils) { - if (responsiveUtils.isMobile(context)) { + if (responsiveUtils.isMobile(context) || responsiveUtils.landscapeTabletSupported(context)) { return [ Expanded( child: _buildButton( @@ -130,16 +131,14 @@ class AdvancedSearchFilterFormBottomView }) { return InkWell( onTap: onAction, - onTapDown: (_) { - onAction.call(); - }, child: Container( height: 44, padding: EdgeInsets.symmetric( - horizontal: responsiveUtils.isMobile(context) ? 0 : 26), + horizontal: responsiveUtils.isMobile(context) || responsiveUtils.landscapeTabletSupported(context) + ? 0 : 26), constraints: BoxConstraints( - maxWidth: - responsiveUtils.isMobile(context) ? double.infinity : 144), + maxWidth: responsiveUtils.isMobile(context) || responsiveUtils.landscapeTabletSupported(context) + ? double.infinity : 144), alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: colorButton), diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart index 29c551c7b..b96160487 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart @@ -1,22 +1,30 @@ import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/responsive_utils.dart'; +import 'package:core/utils/app_logger.dart'; import 'package:flutter/material.dart'; +import 'package:get/get.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form.dart'; class AdvancedSearchFilterOverlay extends StatelessWidget { + const AdvancedSearchFilterOverlay({Key? key}) : super(key: key); @override Widget build(BuildContext context) { + final responsiveUtils = Get.find(); + return Padding( - padding: const EdgeInsets.only(top: 8), + padding: const EdgeInsets.only(top: 8, bottom: 16), child: Container( - constraints: const BoxConstraints( + constraints: BoxConstraints( minWidth: 660, - maxHeight: 568, + maxHeight: _getHeightOverlay(context, responsiveUtils), ), width: 660, - height: MediaQuery.of(context).size.height, - padding: const EdgeInsets.all(32), + height: _getHeightOverlay(context, responsiveUtils), + padding: responsiveUtils.landscapeTabletSupported(context) + ? EdgeInsets.zero + : const EdgeInsets.all(24), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(16), @@ -29,11 +37,31 @@ class AdvancedSearchFilterOverlay extends StatelessWidget { ]), child: SingleChildScrollView( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 12), + padding: EdgeInsets.symmetric( + horizontal: responsiveUtils.landscapeTabletSupported(context) + ? 16 : 28, + vertical: responsiveUtils.landscapeTabletSupported(context) + ? 16 : 12), child: AdvancedSearchInputForm(), ), ), ), ); } + + double _getHeightOverlay(BuildContext context, ResponsiveUtils responsiveUtils) { + const double maxHeightTopBar = 160; + const double maxHeightOverlay = 568; + final currentHeight = responsiveUtils.getSizeScreenHeight(context); + double maxHeightForm = maxHeightOverlay; + + if (currentHeight < maxHeightOverlay) { + maxHeightForm = currentHeight > maxHeightTopBar + ? currentHeight - maxHeightTopBar + : currentHeight; + } + + log('AdvancedSearchFilterOverlay::_getHeightOverlay(): maxHeightForm: $maxHeightForm'); + return maxHeightForm; + } } diff --git a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart index ad354f92a..73def93ad 100644 --- a/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart +++ b/lib/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart @@ -21,21 +21,25 @@ class IconOpenAdvancedSearchWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Obx( - () => buildIconWeb( - minSize: 0, - iconPadding: const EdgeInsets.only(right: 8), - icon: SvgPicture.asset(_imagePaths.icFilterAdvanced, - color: searchController.isAdvancedSearchViewOpen.isTrue || searchController.isAdvancedSearchHasApply.isTrue - ? AppColor.colorFilterMessageEnabled - : AppColor.colorFilterMessageDisabled, - width: 16, - height: 16), - onTap: () { - if(searchController.isAdvancedSearchViewOpen.isFalse && searchController.isAdvancedSearchHasApply.isFalse){ - advancedFilterController.initSearchFilterField(context); - } - searchController.showAdvancedFilterView(_parentContext); - }), + () => Padding( + padding: const EdgeInsets.only(right: 8), + child: buildIconWeb( + splashRadius: 15, + minSize: 40, + iconPadding: const EdgeInsets.only(right: 2), + icon: SvgPicture.asset(_imagePaths.icFilterAdvanced, + color: searchController.isAdvancedSearchViewOpen.isTrue || searchController.isAdvancedSearchHasApply.isTrue + ? AppColor.colorFilterMessageEnabled + : AppColor.colorFilterMessageDisabled, + width: 16, + height: 16), + onTap: () { + if(searchController.isAdvancedSearchViewOpen.isFalse && searchController.isAdvancedSearchHasApply.isFalse){ + advancedFilterController.initSearchFilterField(context); + } + searchController.showAdvancedFilterView(_parentContext); + }), + ), ); } } diff --git a/lib/features/thread/presentation/thread_controller.dart b/lib/features/thread/presentation/thread_controller.dart index fb98c5c1e..bfacc8d37 100644 --- a/lib/features/thread/presentation/thread_controller.dart +++ b/lib/features/thread/presentation/thread_controller.dart @@ -802,6 +802,9 @@ class ThreadController extends BaseController { bool isSearchActive() => searchController.isSearchActive(); + bool get isAllSearchInActive => !searchController.isSearchActive() && + searchController.isAdvancedSearchViewOpen.isFalse; + void enableSearch(BuildContext context) { searchController.enableSearch(); } diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart index 7944a9ce1..00ad462c7 100644 --- a/lib/features/thread/presentation/thread_view.dart +++ b/lib/features/thread/presentation/thread_view.dart @@ -401,9 +401,12 @@ class ThreadView extends GetWidget with AppLoaderMixin, } Widget _buildFloatingButtonCompose(BuildContext context) { + if (_responsiveUtils.isWebDesktop(context)) { + return const SizedBox.shrink(); + } + return Obx(() { - if (!controller.isSearchActive() - && (!BuildUtils.isWeb || (BuildUtils.isWeb && !_responsiveUtils.isDesktop(context)))) { + if (controller.isAllSearchInActive) { return Container( padding: BuildUtils.isWeb ? EdgeInsets.zero