From 01b3d879f023c006b07a153d5103fb6790855d1d Mon Sep 17 00:00:00 2001 From: ManhNTX Date: Sun, 26 Jun 2022 13:57:48 +0700 Subject: [PATCH] create icon open advanced_search_filter_overlay for web --- .../mailbox_dashboard_view_web.dart | 414 +++++++++--------- .../icon_open_advanced_search_widget.dart | 5 +- 2 files changed, 219 insertions(+), 200 deletions(-) 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 b4abbc19a..85d1fbae1 100644 --- a/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart +++ b/lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart @@ -1,5 +1,6 @@ import 'package:core/core.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_portal/flutter_portal.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:model/model.dart'; @@ -12,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/base_mailb import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/search_controller.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/composer_overlay_state.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart'; +import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/icon_open_advanced_search_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart'; import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart'; @@ -49,66 +51,68 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { desktop: const SizedBox.shrink(), ), drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context), - body: Stack(children: [ - ResponsiveWidget( - responsiveUtils: responsiveUtils, - desktop: Column(children: [ - Row(children: [ - Container( - width: responsiveUtils.defaultSizeMenu, - color: Colors.white, - padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28), - child: Row(children: [ - (SloganBuilder(arrangedByHorizontal: true) - ..setSloganText(AppLocalizations.of(context).app_name) - ..setSloganTextAlign(TextAlign.center) - ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)) - ..setSizeLogo(24) - ..setLogo(imagePaths.icLogoTMail)) - .build(), - Obx(() { - if (controller.appInformation.value != null) { - return Padding(padding: const EdgeInsets.only(top: 6), - child: Text( - 'v.${controller.appInformation.value!.version}', - textAlign: TextAlign.center, - style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), - )); - } else { - return const SizedBox.shrink(); - } - }), - ]) - ), - Expanded(child: Padding( - padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10), - child: _buildRightHeader(context))) + body: Portal( + child: Stack(children: [ + ResponsiveWidget( + responsiveUtils: responsiveUtils, + desktop: Column(children: [ + Row(children: [ + Container( + width: responsiveUtils.defaultSizeMenu, + color: Colors.white, + padding: const EdgeInsets.only(top: 25, bottom: 25, left: 28), + child: Row(children: [ + (SloganBuilder(arrangedByHorizontal: true) + ..setSloganText(AppLocalizations.of(context).app_name) + ..setSloganTextAlign(TextAlign.center) + ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)) + ..setSizeLogo(24) + ..setLogo(imagePaths.icLogoTMail)) + .build(), + Obx(() { + if (controller.appInformation.value != null) { + return Padding(padding: const EdgeInsets.only(top: 6), + child: Text( + 'v.${controller.appInformation.value!.version}', + textAlign: TextAlign.center, + style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500), + )); + } else { + return const SizedBox.shrink(); + } + }), + ]) + ), + Expanded(child: Padding( + padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10), + child: _buildRightHeader(context))) + ]), + Expanded(child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu), + Expanded(child: _wrapContainerForThreadAndEmail(context)) + ], + )) ]), - Expanded(child: Row( + tabletLarge: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu), + SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer), Expanded(child: _wrapContainerForThreadAndEmail(context)) ], - )) - ]), - tabletLarge: Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer), - Expanded(child: _wrapContainerForThreadAndEmail(context)) - ], - ), - tablet: ThreadView(), - mobile: ThreadView(), - ), - Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active - ? ComposerView() - : const SizedBox.shrink()), - Obx(() => controller.isNetworkConnectionAvailable() - ? const SizedBox.shrink() - : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))), - ]), + ), + tablet: ThreadView(), + mobile: ThreadView(), + ), + Obx(() => controller.composerOverlayState.value == ComposerOverlayState.active + ? ComposerView() + : const SizedBox.shrink()), + Obx(() => controller.isNetworkConnectionAvailable() + ? const SizedBox.shrink() + : Align(alignment: Alignment.bottomCenter, child: buildNetworkConnectionWidget(context))), + ]), + ), ); } @@ -412,157 +416,171 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView { borderRadius: BorderRadius.all(Radius.circular(10)), color: AppColor.colorBgSearchBar), height: 45, - child: QuickSearchInputForm( - textFieldConfiguration: QuickSearchTextFieldConfiguration( - controller: searchController.searchInputController, - autofocus: true, - focusNode: searchController.searchFocus, - textInputAction: TextInputAction.done, - onSubmitted: (keyword) { - if (keyword.trim().isNotEmpty) { - searchController.saveRecentSearch(RecentSearch.now(keyword)); - } - controller.searchEmail(context, keyword); - }, - onChanged: (query) { - log('MailboxDashBoardView::_buildSearchForm(): onChanged: $query'); - searchController.onChangeTextSearch(query); - }, - decoration: InputDecoration( - border: InputBorder.none, - focusedBorder: InputBorder.none, - enabledBorder: InputBorder.none, - contentPadding: EdgeInsets.zero, - hintText: AppLocalizations.of(context).search_mail, - hintStyle: const TextStyle( - color: AppColor.colorHintSearchBar, - fontSize: 17.0), - labelStyle: const TextStyle( - color: AppColor.colorHintSearchBar, - fontSize: 17.0) - ), - leftButton: buildIconWeb( - icon: SvgPicture.asset( - imagePaths.icSearchBar, - width: 16, - height: 16, - fit: BoxFit.fill), - onTap: () { - final keyword = searchController.searchInputController.text; - if (keyword.trim().isNotEmpty) { - searchController.saveRecentSearch(RecentSearch.now(keyword)); - } - controller.searchEmail(context, keyword); - }), - clearTextButton: buildIconWeb( - icon: SvgPicture.asset( - imagePaths.icClearTextSearch, - width: 16, - height: 16, - fit: BoxFit.fill), - onTap: () { - searchController.clearTextSearch(); - }), - rightButton: IconOpenAdvancedSearchWidget(context) + child: PortalTarget( + visible: controller.searchController.isAdvancedSearchViewOpen.isTrue, + anchor: const Aligned( + follower: Alignment.topLeft, + target: Alignment.bottomLeft, + widthFactor: 1, + backup: Aligned( + follower: Alignment.bottomLeft, + target: Alignment.topLeft, + widthFactor: 1, ), - suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration( - color: Colors.white, - borderRadius: const BorderRadius.all(Radius.circular(16)), - constraints: BoxConstraints( - maxWidth: responsiveUtils.isDesktop(context) - ? 556 - : double.infinity), - ), - debounceDuration: const Duration(milliseconds: 500), - listActionButton: const [ - QuickSearchFilter.hasAttachment, - QuickSearchFilter.last7Days, - QuickSearchFilter.fromMe, - ], - actionButtonBuilder: (context, filterAction) { - if (filterAction is QuickSearchFilter) { - return buildQuickSearchFilterButton(context, filterAction); - } - return const SizedBox.shrink(); - }, - buttonActionCallback: (filterAction) { - if (filterAction is QuickSearchFilter) { - controller.selectQuickSearchFilter( - quickSearchFilter: filterAction, - fromSuggestionBox: true, - ); - } - }, - listActionPadding: const EdgeInsets.only( - left: 24, - top: 24, - right: 24, - bottom: 16), - titleHeaderRecent: Padding( - padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8), - child: Text(AppLocalizations.of(context).recent, - style: const TextStyle(fontSize: 13.0, - color: AppColor.colorTextButtonHeaderThread, - fontWeight: FontWeight.w500) - ) - ), - buttonShowAllResult: (context, keyword) { - if (keyword is String) { - return InkWell( - onTap: () { + ), + portalFollower:const AdvancedSearchFilterOverlay(), + child: QuickSearchInputForm( + textFieldConfiguration: QuickSearchTextFieldConfiguration( + controller: controller.searchController.searchInputController, + autofocus: true, + focusNode: controller.searchController.searchFocus, + textInputAction: TextInputAction.done, + onSubmitted: (keyword) { if (keyword.trim().isNotEmpty) { searchController.saveRecentSearch(RecentSearch.now(keyword)); } controller.searchEmail(context, keyword); }, - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 24, - vertical: 14), - child: Row(children: [ - Text(AppLocalizations.of(context).showingResultsFor, - style: const TextStyle(fontSize: 13.0, - color: AppColor.colorTextButtonHeaderThread, - fontWeight: FontWeight.w500) - ), - const SizedBox(width: 4), - Expanded(child: Text('"$keyword"', - style: const TextStyle( - fontSize: 13.0, - color: Colors.black, - fontWeight: FontWeight.w500))) - ]) + onChanged: (query) { + log('MailboxDashBoardView::_buildSearchForm(): onChanged: $query'); + controller.searchController.onChangeTextSearch(query); + }, + decoration: InputDecoration( + border: InputBorder.none, + focusedBorder: InputBorder.none, + enabledBorder: InputBorder.none, + contentPadding: EdgeInsets.zero, + hintText: AppLocalizations.of(context).search_mail, + hintStyle: const TextStyle( + color: AppColor.colorHintSearchBar, + fontSize: 17.0), + labelStyle: const TextStyle( + color: AppColor.colorHintSearchBar, + fontSize: 17.0) ), - ); - } else { + leftButton: buildIconWeb( + icon: SvgPicture.asset( + imagePaths.icSearchBar, + width: 16, + height: 16, + fit: BoxFit.fill), + onTap: () { + final keyword = controller.searchController.searchInputController.text; + if (keyword.trim().isNotEmpty) { + controller.searchController.saveRecentSearch(RecentSearch.now(keyword)); + } + controller.searchEmail(context, keyword); + }), + clearTextButton: buildIconWeb( + icon: SvgPicture.asset( + imagePaths.icClearTextSearch, + width: 16, + height: 16, + fit: BoxFit.fill), + onTap: () { + controller.searchController.clearTextSearch(); + }), + rightButton: IconOpenAdvancedSearchWidget(context) + ), + suggestionsBoxDecoration: QuickSearchSuggestionsBoxDecoration( + color: Colors.white, + borderRadius: const BorderRadius.all(Radius.circular(16)), + constraints: BoxConstraints( + maxWidth: responsiveUtils.isDesktop(context) + ? 556 + : double.infinity), + ), + debounceDuration: const Duration(milliseconds: 500), + listActionButton: const [ + QuickSearchFilter.hasAttachment, + QuickSearchFilter.last7Days, + QuickSearchFilter.fromMe, + ], + actionButtonBuilder: (context, filterAction) { + if (filterAction is QuickSearchFilter) { + return buildQuickSearchFilterButton(context, filterAction); + } return const SizedBox.shrink(); - } - }, - loadingBuilder: (context) => Padding( - padding: const EdgeInsets.only(bottom: 16), - child: loadingWidget, - ), - fetchRecentActionCallback: (pattern) async { - return searchController.getAllRecentSearchAction(pattern); - }, - itemRecentBuilder: (context, recent) { - return RecentSearchItemTileWidget(recent); - }, - onRecentSelected: (recent) { - searchController.searchInputController.text = recent.value; - controller.searchEmail(context, recent.value); - }, - suggestionsCallback: (pattern) async { - return controller.quickSearchEmails(); - }, - itemBuilder: (context, email) { - return EmailQuickSearchItemTileWidget( - email, controller.selectedMailbox.value); - }, - onSuggestionSelected: (presentationEmail) async { - controller.dispatchAction( - OpenEmailDetailedAction(context, presentationEmail)); - }), + }, + buttonActionCallback: (filterAction) { + if (filterAction is QuickSearchFilter) { + controller.searchController.selectQuickSearchFilter( + quickSearchFilter: filterAction, + fromSuggestionBox: true, + ); + } + }, + listActionPadding: const EdgeInsets.only( + left: 24, + top: 24, + right: 24, + bottom: 16), + titleHeaderRecent: Padding( + padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8), + child: Text(AppLocalizations.of(context).recent, + style: const TextStyle(fontSize: 13.0, + color: AppColor.colorTextButtonHeaderThread, + fontWeight: FontWeight.w500) + ) + ), + buttonShowAllResult: (context, keyword) { + if (keyword is String) { + return InkWell( + onTap: () { + if (keyword.trim().isNotEmpty) { + controller.searchController.saveRecentSearch(RecentSearch.now(keyword)); + } + controller.searchEmail(context, keyword); + }, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 24, + vertical: 14), + child: Row(children: [ + Text(AppLocalizations.of(context).showingResultsFor, + style: const TextStyle(fontSize: 13.0, + color: AppColor.colorTextButtonHeaderThread, + fontWeight: FontWeight.w500) + ), + const SizedBox(width: 4), + Expanded(child: Text('"$keyword"', + style: const TextStyle( + fontSize: 13.0, + color: Colors.black, + fontWeight: FontWeight.w500))) + ]) + ), + ); + } else { + return const SizedBox.shrink(); + } + }, + loadingBuilder: (context) => Padding( + padding: const EdgeInsets.only(bottom: 16), + child: loadingWidget, + ), + fetchRecentActionCallback: (pattern) async { + return controller.searchController.getAllRecentSearchAction(pattern); + }, + itemRecentBuilder: (context, recent) { + return RecentSearchItemTileWidget(recent); + }, + onRecentSelected: (recent) { + controller.searchController.searchInputController.text = recent.value; + controller.searchEmail(context, recent.value); + }, + suggestionsCallback: (pattern) async { + return controller.searchController.quickSearchEmails(); + }, + itemBuilder: (context, email) { + return EmailQuickSearchItemTileWidget( + email, controller.selectedMailbox.value); + }, + onSuggestionSelected: (presentationEmail) async { + controller.dispatchAction( + OpenEmailDetailedAction(context, presentationEmail)); + }), + ), )), const SizedBox(width: 16), ] 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 d9b1e6989..9796d41c6 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 @@ -14,7 +14,6 @@ class IconOpenAdvancedSearchWidget extends StatelessWidget { }) : super(key: key); final _imagePaths = Get.find(); - final _responsiveUtils = Get.find(); final controller = Get.find(); final BuildContext _parentContext; @@ -30,7 +29,9 @@ class IconOpenAdvancedSearchWidget extends StatelessWidget { : AppColor.colorFilterMessageDisabled, width: 16, height: 16), - onTap: _responsiveUtils.isMobile(context) ? () {controller.showAdvancedFilterView(_parentContext);} : null), + onTap: () { + controller.showAdvancedFilterView(_parentContext); + }), ); } }