From 2cc2e17bf2f89be346a7ebf0f4737d7ab32f9b96 Mon Sep 17 00:00:00 2001 From: dab246 Date: Thu, 9 Feb 2023 16:43:37 +0700 Subject: [PATCH] TF-1427 Apply new design for search mailbox on mobile/tablet --- assets/images/ic_delete_mailbox.svg | 11 +++++ assets/images/ic_hide_mailbox.svg | 5 +++ assets/images/ic_mark_as_read.svg | 5 +++ assets/images/ic_move_mailbox.svg | 8 ++++ assets/images/ic_rename_mailbox.svg | 7 +-- .../presentation/resources/image_paths.dart | 4 ++ .../presentation/mailbox_controller.dart | 4 +- .../mailbox/presentation/mailbox_view.dart | 4 +- .../presentation/mailbox_view_web.dart | 37 ++++++++++------ .../presentation/model/mailbox_actions.dart | 14 +++--- .../utils/mailbox_method_action_define.dart | 1 + .../widgets/mailbox_folder_tile_builder.dart | 6 +-- .../search_mailbox_controller.dart | 14 +++++- .../presentation/search_mailbox_view.dart | 27 ++++++++---- .../utils/search_mailbox_utils.dart | 44 ++++++++++++++++++- .../mailbox_searched_item_builder.dart | 9 +++- 16 files changed, 153 insertions(+), 47 deletions(-) create mode 100644 assets/images/ic_delete_mailbox.svg create mode 100644 assets/images/ic_hide_mailbox.svg create mode 100644 assets/images/ic_mark_as_read.svg create mode 100644 assets/images/ic_move_mailbox.svg diff --git a/assets/images/ic_delete_mailbox.svg b/assets/images/ic_delete_mailbox.svg new file mode 100644 index 000000000..d157154f1 --- /dev/null +++ b/assets/images/ic_delete_mailbox.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/assets/images/ic_hide_mailbox.svg b/assets/images/ic_hide_mailbox.svg new file mode 100644 index 000000000..28a29d615 --- /dev/null +++ b/assets/images/ic_hide_mailbox.svg @@ -0,0 +1,5 @@ + + + diff --git a/assets/images/ic_mark_as_read.svg b/assets/images/ic_mark_as_read.svg new file mode 100644 index 000000000..d5df25781 --- /dev/null +++ b/assets/images/ic_mark_as_read.svg @@ -0,0 +1,5 @@ + + + diff --git a/assets/images/ic_move_mailbox.svg b/assets/images/ic_move_mailbox.svg new file mode 100644 index 000000000..2d6150dbe --- /dev/null +++ b/assets/images/ic_move_mailbox.svg @@ -0,0 +1,8 @@ + + + + diff --git a/assets/images/ic_rename_mailbox.svg b/assets/images/ic_rename_mailbox.svg index b27f3cd02..1c5b13e4f 100644 --- a/assets/images/ic_rename_mailbox.svg +++ b/assets/images/ic_rename_mailbox.svg @@ -1,4 +1,5 @@ - - - + + diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart index 32e7d2d7f..66ed9ae5d 100644 --- a/core/lib/presentation/resources/image_paths.dart +++ b/core/lib/presentation/resources/image_paths.dart @@ -169,6 +169,10 @@ class ImagePaths { String get icSpamReportEnable => _getImagePath('ic_spam_report_enable.svg'); String get icClearSearchInput => _getImagePath('ic_clear_search_input.svg'); String get icHideFolder => _getImagePath('ic_hide_folder.svg'); + String get icMoveMailbox => _getImagePath('ic_move_mailbox.svg'); + String get icMarkAsRead => _getImagePath('ic_mark_as_read.svg'); + String get icDeleteMailbox => _getImagePath('ic_delete_mailbox.svg'); + String get icHideMailbox => _getImagePath('ic_hide_mailbox.svg'); String _getImagePath(String imageName) { return AssetsPaths.images + imageName; diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index ec06f3724..8c64649da 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/lib/features/mailbox/presentation/mailbox_controller.dart @@ -596,10 +596,10 @@ class MailboxController extends BaseMailboxController with MailboxActionHandlerM bool isSearchActive() => searchState.value.searchStatus == SearchStatus.ACTIVE; - void enableSearch() { - _cancelSelectMailbox(); + void openSearchViewAction(BuildContext context) { SearchMailboxBindings().dependencies(); mailboxDashBoardController.searchMailboxActivated.value = true; + closeMailboxScreen(context); } void disableSearch() { diff --git a/lib/features/mailbox/presentation/mailbox_view.dart b/lib/features/mailbox/presentation/mailbox_view.dart index 2a670a370..6537d92c7 100644 --- a/lib/features/mailbox/presentation/mailbox_view.dart +++ b/lib/features/mailbox/presentation/mailbox_view.dart @@ -233,8 +233,8 @@ class MailboxView extends GetWidget { color: AppColor.colorTextButton, fit: BoxFit.fill ), - tooltip: AppLocalizations.of(context).search_folder, - onTap: controller.enableSearch + tooltip: AppLocalizations.of(context).search_folder, + onTap: () => controller.openSearchViewAction(context) ), buildIconWeb( minSize: 40, diff --git a/lib/features/mailbox/presentation/mailbox_view_web.dart b/lib/features/mailbox/presentation/mailbox_view_web.dart index 8deaebfb2..2287529fb 100644 --- a/lib/features/mailbox/presentation/mailbox_view_web.dart +++ b/lib/features/mailbox/presentation/mailbox_view_web.dart @@ -160,7 +160,7 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu color: AppColor.colorTextButton, fit: BoxFit.fill ), - onTap: controller.enableSearch + onTap: () => controller.openSearchViewAction(context) ), buildIconWeb( minSize: 40, @@ -463,14 +463,21 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu return (MailboxBottomSheetActionTileBuilder( Key('${contextMenuItem.action.name}_action'), SvgPicture.asset( - contextMenuItem.action.getContextMenuIcon(_imagePaths), - color: contextMenuItem.action.getColorContextMenuIcon()), + contextMenuItem.action.getContextMenuIcon(_imagePaths), + color: contextMenuItem.action.getColorContextMenuIcon(), + width: 24, + height: 24 + ), contextMenuItem.action.getTitleContextMenu(context), mailbox, absorbing: !contextMenuItem.isActivated, opacity: !contextMenuItem.isActivated) - ..onActionClick((mailbox) => - controller.handleMailboxAction(context, contextMenuItem.action, mailbox))) + ..actionTextStyle(textStyle: const TextStyle( + fontSize: 16, + color: Colors.black, + fontWeight: FontWeight.w500 + )) + ..onActionClick((mailbox) => controller.handleMailboxAction(context, contextMenuItem.action, mailbox))) .build(); } @@ -495,15 +502,17 @@ class MailboxView extends GetWidget with AppLoaderMixin, Popu absorbing: !contextMenuItem.isActivated, child: Opacity( opacity: contextMenuItem.isActivated ? 1.0 : 0.3, - child: popupItem(contextMenuItem.action.getContextMenuIcon(_imagePaths), - contextMenuItem.action.getTitleContextMenu(context), - colorIcon: contextMenuItem.action.getColorContextMenuIcon(), - styleName: TextStyle( - fontWeight: FontWeight.normal, - fontSize: 17, - color: contextMenuItem.action.getColorContextMenuTitle()), - onCallbackAction: () => - controller.handleMailboxAction(context, contextMenuItem.action, mailbox)), + child: popupItem( + contextMenuItem.action.getContextMenuIcon(_imagePaths), + contextMenuItem.action.getTitleContextMenu(context), + colorIcon: contextMenuItem.action.getColorContextMenuIcon(), + styleName: TextStyle( + fontWeight: FontWeight.w500, + fontSize: 16, + color: contextMenuItem.action.getColorContextMenuTitle() + ), + onCallbackAction: () => controller.handleMailboxAction(context, contextMenuItem.action, mailbox) + ), ), )); } diff --git a/lib/features/mailbox/presentation/model/mailbox_actions.dart b/lib/features/mailbox/presentation/model/mailbox_actions.dart index 9992fc01a..c5b1c14fc 100644 --- a/lib/features/mailbox/presentation/model/mailbox_actions.dart +++ b/lib/features/mailbox/presentation/model/mailbox_actions.dart @@ -69,15 +69,15 @@ extension MailboxActionsExtension on MailboxActions { case MailboxActions.enableSpamReport: return imagePaths.icSpamReportEnable; case MailboxActions.markAsRead: - return imagePaths.icRead; + return imagePaths.icMarkAsRead; case MailboxActions.move: - return imagePaths.icMove; + return imagePaths.icMoveMailbox; case MailboxActions.rename: return imagePaths.icRenameMailbox; case MailboxActions.delete: - return imagePaths.icDelete; + return imagePaths.icDeleteMailbox; case MailboxActions.disableMailbox: - return imagePaths.icEyeOff; + return imagePaths.icHideMailbox; default: return ''; } @@ -96,12 +96,8 @@ extension MailboxActionsExtension on MailboxActions { switch(this) { case MailboxActions.delete: return AppColor.colorActionDeleteConfirmDialog; - case MailboxActions.disableSpamReport: - case MailboxActions.enableSpamReport: - case MailboxActions.disableMailbox: - return AppColor.primaryColor; default: - return Colors.black; + return AppColor.primaryColor; } } diff --git a/lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart b/lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart index 8481f6f1e..fab441a59 100644 --- a/lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart +++ b/lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart @@ -8,6 +8,7 @@ typedef OnClickOpenMailboxAction = void Function(PresentationMailbox); typedef OnClickOpenMenuMailboxAction = void Function(RelativeRect, PresentationMailbox); typedef OnSelectMailboxAction = void Function(PresentationMailbox); typedef OnDragEmailToMailboxAccepted = void Function(List, PresentationMailbox); +typedef OnLongPressMailboxAction = void Function(PresentationMailbox); typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode); typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode); diff --git a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart index 0ee040179..f7eba041c 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart @@ -30,7 +30,7 @@ class MailBoxFolderTileBuilder { OnSelectMailboxNodeAction? _onSelectMailboxFolderClick; OnClickOpenMenuMailboxNodeAction? _onMenuActionClick; OnDragEmailToMailboxAccepted? _onDragItemAccepted; - OnLongPressMailboxNodeAction? _onLongPressSpamReport; + OnLongPressMailboxNodeAction? _onLongPressMailboxNodeAction; bool isHoverItem = false; @@ -68,8 +68,8 @@ class MailBoxFolderTileBuilder { _onDragItemAccepted = onDragItemAccepted; } - void addOnLongPressMailboxNodeAction(OnLongPressMailboxNodeAction onLongPressSpamReport) { - _onLongPressSpamReport = onLongPressSpamReport; + void addOnLongPressMailboxNodeAction(OnLongPressMailboxNodeAction onLongPressMailboxNodeAction) { + _onLongPressMailboxNodeAction = onLongPressMailboxNodeAction; } Widget build() => DragTarget>( diff --git a/lib/features/search/mailbox/presentation/search_mailbox_controller.dart b/lib/features/search/mailbox/presentation/search_mailbox_controller.dart index 45896fdba..b4a8bb002 100644 --- a/lib/features/search/mailbox/presentation/search_mailbox_controller.dart +++ b/lib/features/search/mailbox/presentation/search_mailbox_controller.dart @@ -1,4 +1,5 @@ +import 'package:core/core.dart'; import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/resources/image_paths.dart'; import 'package:core/presentation/state/failure.dart'; @@ -150,8 +151,9 @@ class SearchMailboxController extends BaseMailboxController with MailboxActionHa final newMailboxState = mailboxState ?? currentMailboxState; dashboardController.dispatchMailboxUIAction(RefreshChangeMailboxAction(newMailboxState)); final accountId = dashboardController.accountId.value; - if (accountId != null && newMailboxState != null) { - consumeState(_refreshAllMailboxInteractor.execute(accountId, newMailboxState)); + final session = dashboardController.sessionCurrent; + if (session != null && accountId != null && newMailboxState != null) { + consumeState(_refreshAllMailboxInteractor.execute(session, accountId, newMailboxState)); } } @@ -362,6 +364,14 @@ class SearchMailboxController extends BaseMailboxController with MailboxActionHa } } + void openMailboxAction(BuildContext context, PresentationMailbox mailbox) { + dashboardController.openMailboxAction(context, mailbox); + + if (!responsiveUtils.isWebDesktop(context)) { + closeSearchView(context); + } + } + void clearAllTextInputSearchForm() { textInputSearchController.clear(); currentSearchQuery.value = ''; diff --git a/lib/features/search/mailbox/presentation/search_mailbox_view.dart b/lib/features/search/mailbox/presentation/search_mailbox_view.dart index 0c86c5cdf..79246ed64 100644 --- a/lib/features/search/mailbox/presentation/search_mailbox_view.dart +++ b/lib/features/search/mailbox/presentation/search_mailbox_view.dart @@ -1,4 +1,5 @@ +import 'package:core/core.dart'; import 'package:core/presentation/extensions/color_extension.dart'; import 'package:core/presentation/views/button/icon_button_web.dart'; import 'package:core/presentation/views/text/text_field_builder.dart'; @@ -43,7 +44,7 @@ class SearchMailboxView extends GetWidget if (!controller.responsiveUtils.isWebDesktop(context)) const Divider(color: AppColor.colorDividerComposer, height: 1), _buildLoadingView(), - Expanded(child: _buildMailboxListView()) + Expanded(child: _buildMailboxListView(context)) ]), ), ), @@ -68,9 +69,9 @@ class SearchMailboxView extends GetWidget Widget _buildSearchInputForm(BuildContext context) { return Row(children: [ buildIconWeb( - minSize: 30, + minSize: SearchMailboxUtils.getIconSize(context, controller.responsiveUtils), iconPadding: EdgeInsets.zero, - splashRadius: 10, + splashRadius: SearchMailboxUtils.getIconSplashRadius(context, controller.responsiveUtils), icon: SvgPicture.asset( controller.imagePaths.icBack, color: AppColor.colorTextButton, @@ -89,7 +90,7 @@ class SearchMailboxView extends GetWidget alignment: Alignment.center, child: Row(children: [ Padding( - padding: const EdgeInsets.only(left: 5, right: 2), + padding: SearchMailboxUtils.getPaddingInputSearchIcon(context, controller.responsiveUtils), child: buildIconWeb( minSize: 40, iconPadding: EdgeInsets.zero, @@ -157,10 +158,10 @@ class SearchMailboxView extends GetWidget )).build(); } - Widget _buildMailboxListView() { + Widget _buildMailboxListView(BuildContext context) { return Obx(() { return ListView.builder( - padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16), + padding: SearchMailboxUtils.getPaddingListViewMailboxSearched(context, controller.responsiveUtils), key: const Key('list_mailbox_searched'), itemCount: controller.listMailboxSearched.length, shrinkWrap: true, @@ -171,8 +172,9 @@ class SearchMailboxView extends GetWidget controller.responsiveUtils, controller.listMailboxSearched[index], onDragEmailToMailboxAccepted: controller.dashboardController.dragSelectedMultipleEmailToMailboxAction, - onClickOpenMailboxAction: (mailbox) => controller.dashboardController.openMailboxAction(context, mailbox), - onClickOpenMenuMailboxAction: (position, mailbox) => _openMailboxMenuAction(context, position, mailbox), + onClickOpenMailboxAction: (mailbox) => controller.openMailboxAction(context, mailbox), + onClickOpenMenuMailboxAction: (position, mailbox) => _openMailboxMenuAction(context, mailbox, position: position), + onLongPressMailboxAction: (mailbox) => _openMailboxMenuAction(context, mailbox), ); } ); @@ -185,7 +187,11 @@ class SearchMailboxView extends GetWidget : MailboxActions.enableSpamReport; } - void _openMailboxMenuAction(BuildContext context, RelativeRect position, PresentationMailbox mailbox) { + void _openMailboxMenuAction( + BuildContext context, + PresentationMailbox mailbox, + {RelativeRect? position} + ) { final mailboxActionsSupported = [ MailboxActions.openInNewTab, if (mailbox.isPersonal && mailbox.isSpam) @@ -241,6 +247,8 @@ class SearchMailboxView extends GetWidget Key('${contextMenuItem.action.name}_action'), SvgPicture.asset( contextMenuItem.action.getContextMenuIcon(controller.imagePaths), + width: 24, + height: 24, color: contextMenuItem.action.getColorContextMenuIcon() ), contextMenuItem.action.getTitleContextMenu(context), @@ -279,6 +287,7 @@ class SearchMailboxView extends GetWidget child: popupItem(contextMenuItem.action.getContextMenuIcon(controller.imagePaths), contextMenuItem.action.getTitleContextMenu(context), colorIcon: contextMenuItem.action.getColorContextMenuIcon(), + iconSize: 24, styleName: TextStyle( fontWeight: FontWeight.w500, fontSize: 16, 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 433cc4332..772aa710d 100644 --- a/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart +++ b/lib/features/search/mailbox/presentation/utils/search_mailbox_utils.dart @@ -7,9 +7,49 @@ class SearchMailboxUtils { return const EdgeInsets.symmetric(vertical: 8, horizontal: 16); } else { if (responsiveUtils.isScreenWithShortestSide(context)) { - return const EdgeInsets.symmetric(horizontal: 10); + return const EdgeInsets.symmetric(horizontal: 16, vertical: 8); } else { - return const EdgeInsets.symmetric(horizontal: 32); + return const EdgeInsets.symmetric(horizontal: 32, 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: 10, right: 16); + } else { + return const EdgeInsets.only(left: 10, 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); } } } diff --git a/lib/features/search/mailbox/presentation/widgets/mailbox_searched_item_builder.dart b/lib/features/search/mailbox/presentation/widgets/mailbox_searched_item_builder.dart index 669152cf8..8eef72488 100644 --- a/lib/features/search/mailbox/presentation/widgets/mailbox_searched_item_builder.dart +++ b/lib/features/search/mailbox/presentation/widgets/mailbox_searched_item_builder.dart @@ -18,6 +18,7 @@ class MailboxSearchedItemBuilder extends StatefulWidget { final OnClickOpenMailboxAction? onClickOpenMailboxAction; final OnClickOpenMenuMailboxAction? onClickOpenMenuMailboxAction; final OnDragEmailToMailboxAccepted? onDragEmailToMailboxAccepted; + final OnLongPressMailboxAction? onLongPressMailboxAction; const MailboxSearchedItemBuilder( this._imagePaths, @@ -27,7 +28,8 @@ class MailboxSearchedItemBuilder extends StatefulWidget { Key? key, this.onClickOpenMailboxAction, this.onClickOpenMenuMailboxAction, - this.onDragEmailToMailboxAccepted + this.onDragEmailToMailboxAccepted, + this.onLongPressMailboxAction } ) : super(key: key); @@ -89,6 +91,7 @@ class _MailboxSearchedItemBuilderState extends State return ListTile( contentPadding: const EdgeInsets.symmetric(horizontal: 8), onTap: _onTapMailboxAction, + onLongPress: _onLongPressMailboxAction, leading: _buildMailboxIcon(), title: _buildTitleItem(), subtitle: _buildSubtitleItem() @@ -102,6 +105,10 @@ class _MailboxSearchedItemBuilderState extends State } } + void _onLongPressMailboxAction() { + widget.onLongPressMailboxAction?.call(widget._presentationMailbox); + } + Widget _buildMailboxIcon() { return SvgPicture.asset( widget._presentationMailbox.isSubscribed?.value == true