TF-119 Filter messages support for tablet, desktop

lib/features/thread/presentation/thread_controller.dart

@@ -439,6 +439,16 @@ class ThreadController extends BaseController {
       .build();
   }
 
+  void openFilterMessagesForTablet(BuildContext context, RelativeRect? position, List<PopupMenuEntry> popupMenuItems) async {
+    await showMenu(
+        context: context,
+        position: position ?? RelativeRect.fromLTRB(16, 40, 16, 16),
+        color: Colors.white,
+        elevation: 5,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+        items: popupMenuItems);
+  }
+
   void closeFilterMessageActionSheet() {
     popBack();
   }
@@ -461,12 +471,6 @@ class ThreadController extends BaseController {
         icon: newFilterOption.getIconToast(_imagePaths));
   }
 
-  void openContextMenuSelectedEmail(BuildContext context, List<Widget> actionTiles) {
-      (ContextMenuBuilder(context)
-        ..addTiles(actionTiles))
-    .build();
-  }
-
   void moveSelectedMultipleEmailToMailboxAction(List<PresentationEmail> listEmail) async {
     final currentMailbox = mailboxDashBoardController.selectedMailbox.value;
     if (currentMailbox != null && _accountId != null) {
@@ -549,16 +553,6 @@ class ThreadController extends BaseController {
     }
   }
 
-  void openPopupMenuSelectedEmail(BuildContext context, RelativeRect position, List<PopupMenuItem> popupMenuItems) async {
-    await showMenu(
-      context: context,
-      position: position,
-      color: Colors.white,
-      elevation: 5,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
-      items: popupMenuItems);
-  }
-
   void markAsStarEmail(PresentationEmail presentationEmail) {
     final mailboxCurrent = mailboxDashBoardController.selectedMailbox.value;
     if (_accountId != null && mailboxCurrent != null) {

lib/features/thread/presentation/thread_view.dart

@@ -153,11 +153,16 @@ class ThreadView extends GetWidget<ThreadController> {
               controller.filterMessageOption.value)
           ..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())
           ..addOnEditThreadAction(() => controller.enableSelectionEmail())
-          ..addOnFilterEmailAction((filterMessageOption) =>
+          ..addOnFilterEmailAction((filterMessageOption, position) =>
-              controller.openFilterMessagesCupertinoActionSheet(
+              responsiveUtils.isMobileDevice(context)
-                  context,
+                ? controller.openFilterMessagesCupertinoActionSheet(
-                  _filterMessagesCupertinoActionTile(context, filterMessageOption),
+                    context,
-                  cancelButton: _buildCupertinoActionCancelButton(context)))
+                    _filterMessagesCupertinoActionTile(context, filterMessageOption),
+                    cancelButton: _buildCupertinoActionCancelButton(context))
+                : controller.openFilterMessagesForTablet(
+                    context,
+                    position,
+                    _popupMenuEmailActionTile(context, filterMessageOption)))
           ..addOnCancelEditThread(() => controller.cancelSelectEmail()))
         .build();
   }
@@ -186,6 +191,12 @@ class ThreadView extends GetWidget<ThreadController> {
           AppLocalizations.of(context).with_attachments,
           FilterMessageOption.attachments,
           optionCurrent: optionCurrent,
+          iconLeftPadding: responsiveUtils.isMobile(context)
+              ? EdgeInsets.only(left: 12, right: 16)
+              : EdgeInsets.only(right: 12),
+          iconRightPadding: responsiveUtils.isMobile(context)
+              ? EdgeInsets.only(right: 12)
+              : EdgeInsets.zero,
           actionSelected: SvgPicture.asset(imagePaths.icFilterSelected, fit: BoxFit.fill))
       ..onActionClick((option) => controller.filterMessagesAction(context, option)))
     .build();
@@ -198,6 +209,12 @@ class ThreadView extends GetWidget<ThreadController> {
           AppLocalizations.of(context).unread,
           FilterMessageOption.unread,
           optionCurrent: optionCurrent,
+          iconLeftPadding: responsiveUtils.isMobile(context)
+            ? EdgeInsets.only(left: 12, right: 16)
+            : EdgeInsets.only(right: 12),
+          iconRightPadding: responsiveUtils.isMobile(context)
+            ? EdgeInsets.only(right: 12)
+            : EdgeInsets.zero,
           actionSelected: SvgPicture.asset(imagePaths.icFilterSelected, fit: BoxFit.fill))
       ..onActionClick((option) => controller.filterMessagesAction(context, option)))
     .build();
@@ -210,107 +227,26 @@ class ThreadView extends GetWidget<ThreadController> {
           AppLocalizations.of(context).starred,
           FilterMessageOption.starred,
           optionCurrent: optionCurrent,
+          iconLeftPadding: responsiveUtils.isMobile(context)
+              ? EdgeInsets.only(left: 12, right: 16)
+              : EdgeInsets.only(right: 12),
+          iconRightPadding: responsiveUtils.isMobile(context)
+              ? EdgeInsets.only(right: 12)
+              : EdgeInsets.zero,
           actionSelected: SvgPicture.asset(imagePaths.icFilterSelected, fit: BoxFit.fill))
       ..onActionClick((option) => controller.filterMessagesAction(context, option)))
     .build();
   }
 
-  // Widget _buildAppBarSelectModeActive(BuildContext context) {
+  List<PopupMenuEntry> _popupMenuEmailActionTile(BuildContext context, FilterMessageOption option) {
-  //   return (AppBarThreadSelectModeActiveBuilder(
+    return [
-  //             context,
+      PopupMenuItem(padding: EdgeInsets.symmetric(horizontal: 8), child: _filterMessageWithAttachmentsAction(context, option)),
-  //             imagePaths,
+      PopupMenuDivider(height: 0.5),
-  //             controller.getListEmailSelected(),
+      PopupMenuItem(padding: EdgeInsets.symmetric(horizontal: 8), child: _filterMessagesUnreadAction(context, option)),
-  //             responsiveUtils)
+      PopupMenuDivider(height: 0.5),
-  //         ..addCloseActionClick(() => controller.cancelSelectEmail())
+      PopupMenuItem(padding: EdgeInsets.symmetric(horizontal: 8), child: _filterMessageStarredAction(context, option)),
-  //         // ..addRemoveEmailActionClick((listEmail) => {})
+    ];
-  //         ..addOnMarkAsEmailReadActionClick((listEmail) => controller.markAsSelectedEmailRead(listEmail))
+  }
-  //         ..addOpenContextMenuActionClick((listEmail) =>
-  //             controller.openContextMenuSelectedEmail(context, _contextMenuEmailActionTile(context, listEmail)))
-  //         ..addOnOpenPopupMenuActionClick((listEmail, position) =>
-  //             controller.openPopupMenuSelectedEmail(context, position, _popupMenuEmailActionTile(context, listEmail))))
-  //       .build();
-  // }
-
-  // List<Widget> _contextMenuEmailActionTile(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return [
-  //     // _moveToTrashAction(context, listEmail),
-  //     _moveToMailboxAction(context, listEmail),
-  //     _markAsReadAction(context, listEmail),
-  //     _markAsStarAction(context, listEmail),
-  //     // _moveToSpamAction(context, listEmail),
-  //     SizedBox(height: 20),
-  //   ];
-  // }
-
-  // Widget _markAsReadAction(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return (EmailContextMenuActionBuilder(
-  //           Key('mark_as_read_context_menu_action'),
-  //           SvgPicture.asset(imagePaths.icEyeDisable, width: 24, height: 24, fit: BoxFit.fill),
-  //           controller.isAllEmailRead(listEmail)
-  //               ? AppLocalizations.of(context).mark_as_unread
-  //               : AppLocalizations.of(context).mark_as_read,
-  //           listEmail)
-  //         ..onActionClick((data) => controller.markAsSelectedEmailRead(data, fromContextMenuAction: true)))
-  //       .build();
-  // }
-
-  // Widget _moveToTrashAction(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return (EmailContextMenuActionBuilder(
-  //           Key('move_to_trash_context_menu_action'),
-  //           SvgPicture.asset(imagePaths.icTrash, width: 24, height: 24, fit: BoxFit.fill),
-  //           AppLocalizations.of(context).move_to_trash,
-  //           listEmail)
-  //       ..onActionClick((data) => {}))
-  //     .build();
-  // }
-
-  // Widget _moveToMailboxAction(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return (EmailContextMenuActionBuilder(
-  //           Key('move_to_mailbox_context_menu_action'),
-  //           SvgPicture.asset(imagePaths.icFolder, width: 24, height: 24, fit: BoxFit.fill),
-  //           AppLocalizations.of(context).move_to_mailbox,
-  //           listEmail)
-  //       ..onActionClick((data) => controller.moveSelectedMultipleEmailToMailboxAction(data)))
-  //     .build();
-  // }
-  //
-  // Widget _markAsStarAction(BuildContext context, List<PresentationEmail> listEmail) {
-  //   final markStarAction = controller.isAllEmailMarkAsStar(listEmail) ? MarkStarAction.unMarkStar : MarkStarAction.markStar;
-  //
-  //   return (EmailContextMenuActionBuilder(
-  //           Key('mark_as_star_context_menu_action'),
-  //           SvgPicture.asset(
-  //               markStarAction == MarkStarAction.markStar ? imagePaths.icFlag : imagePaths.icFlagged,
-  //               width: 24,
-  //               height: 24,
-  //               fit: BoxFit.fill),
-  //           markStarAction == MarkStarAction.markStar
-  //               ? AppLocalizations.of(context).mark_as_star
-  //               : AppLocalizations.of(context).mark_as_unstar,
-  //           listEmail)
-  //         ..onActionClick((data) => controller.markAsStarSelectedMultipleEmail(data, markStarAction)))
-  //       .build();
-  // }
-
-  // Widget _moveToSpamAction(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return (EmailContextMenuActionBuilder(
-  //           Key('move_to_spam_context_menu_action'),
-  //           SvgPicture.asset(imagePaths.icMailboxSpam, width: 24, height: 24, fit: BoxFit.fill),
-  //           AppLocalizations.of(context).move_to_spam,
-  //           listEmail)
-  //       ..onActionClick((data) => {}))
-  //     .build();
-  // }
-
-  // List<PopupMenuItem> _popupMenuEmailActionTile(BuildContext context, List<PresentationEmail> listEmail) {
-  //   return [
-  //     // PopupMenuItem(child: _moveToTrashAction(context, listEmail)),
-  //     PopupMenuItem(child: _moveToMailboxAction(context, listEmail)),
-  //     PopupMenuItem(child: _markAsReadAction(context, listEmail)),
-  //     PopupMenuItem(child: _markAsStarAction(context, listEmail)),
-  //     // PopupMenuItem(child: _moveToSpamAction(context, listEmail)),
-  //   ];
-  // }
 
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -7,7 +7,7 @@ import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/filter_message_option.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-typedef OnFilterEmailAction = void Function(FilterMessageOption);
+typedef OnFilterEmailAction = void Function(FilterMessageOption, RelativeRect? position);
 typedef OnEditThreadAction = void Function();
 typedef OnOpenListMailboxActionClick = void Function();
 typedef OnCancelEditThread = void Function();
@@ -75,10 +75,10 @@ class AppBarThreadWidgetBuilder {
               _filterMessageOption.getTitle(_context).isNotEmpty
                 ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                     Padding(
-                      padding: EdgeInsets.only(left: 60, right: 40),
+                      padding: EdgeInsets.only(left: 40, right: 40),
                       child: _buildContentCenterAppBar()),
                     Transform(
-                      transform: Matrix4.translationValues(-2.0, -8.0, 0.0),
+                      transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
                       child: Text(
                           _filterMessageOption.getTitle(_context),
                           style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
@@ -115,16 +115,32 @@ class AppBarThreadWidgetBuilder {
       borderRadius: BorderRadius.circular(12),
       color: Colors.transparent,
       child: Padding(
-        padding: EdgeInsets.only(left: 16),
+        padding: EdgeInsets.only(left: 16, right: 16),
-        child: IconButton(
+        child: GestureDetector(
-          icon: SvgPicture.asset(
+            onTap: () {
+              if (_onFilterEmailAction != null && _responsiveUtils.isMobileDevice(_context)) {
+                _onFilterEmailAction!.call(_filterMessageOption, null);
+              }
+            },
+            child: SvgPicture.asset(
               _imagePaths.icFilter,
               color: _filterMessageOption == FilterMessageOption.all
-                ? AppColor.colorFilterMessageDisabled
+                  ? AppColor.colorFilterMessageDisabled
-                : AppColor.colorFilterMessageEnabled,
+                  : AppColor.colorFilterMessageEnabled,
               fit: BoxFit.fill),
-          onPressed: () => _onFilterEmailAction?.call(_filterMessageOption)
+            onTapDown: (detail) {
-        )
+              if (_onFilterEmailAction != null && !_responsiveUtils.isMobileDevice(_context)) {
+                final screenSize = MediaQuery.of(_context).size;
+                final offset = detail.globalPosition;
+                final position = RelativeRect.fromLTRB(
+                  offset.dx,
+                  offset.dy,
+                  screenSize.width - offset.dx,
+                  screenSize.height - offset.dy,
+                );
+                _onFilterEmailAction!.call(_filterMessageOption, position);
+              }
+            })
       )
     );
   }
@@ -164,7 +180,7 @@ class AppBarThreadWidgetBuilder {
         GestureDetector(
           onTap: () => !_responsiveUtils.isDesktop(_context) ? _onOpenListMailboxActionClick?.call() : null,
           child: Padding(
-            padding: EdgeInsets.zero,
+            padding: !_responsiveUtils.isDesktop(_context) ? EdgeInsets.zero : EdgeInsets.only(bottom: 8, top: 8),
             child: Container(
               padding: EdgeInsets.zero,
               margin: EdgeInsets.zero,

lib/features/thread/presentation/widgets/filter_message_cupertino_action_sheet_action_builder.dart

@@ -11,6 +11,8 @@ class FilterMessageCupertinoActionSheetActionBuilder extends CupertinoActionShee
   final FilterMessageOption? optionCurrent;
   final SvgPicture? actionSelected;
   final Color? bgColor;
+  final EdgeInsets? iconLeftPadding;
+  final EdgeInsets? iconRightPadding;
 
   FilterMessageCupertinoActionSheetActionBuilder(
       Key key,
@@ -21,6 +23,8 @@ class FilterMessageCupertinoActionSheetActionBuilder extends CupertinoActionShee
         this.optionCurrent,
         this.actionSelected,
         this.bgColor,
+        this.iconLeftPadding,
+        this.iconRightPadding,
       }
   ) : super(key, actionIcon, actionName);
 
@@ -32,12 +36,12 @@ class FilterMessageCupertinoActionSheetActionBuilder extends CupertinoActionShee
         key: key,
         child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
           Padding(
-              padding: EdgeInsets.only(left: 12, right: 16),
+              padding: iconLeftPadding ?? EdgeInsets.only(left: 12, right: 16),
               child: actionIcon),
           Expanded(child: Text(actionName, textAlign: TextAlign.left, style: actionTextStyle())),
           if (optionCurrent == option && actionSelected != null)
             Padding(
-              padding: EdgeInsets.only(right: 12),
+              padding: iconRightPadding ?? EdgeInsets.only(right: 12),
               child: actionSelected!),
         ]),
         onPressed: () {