TF-1710 Update new UI for banner empty trash

(cherry picked from commit e467d973c338f8323c7109cb491c33c6e3c17c09)

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -1468,10 +1468,20 @@ class MailboxDashBoardController extends ReloadableController {
     }
   }
 
-  bool get isMailboxTrashValid {
-    return selectedMailbox.value != null
-      && selectedMailbox.value!.isTrash
-      && selectedMailbox.value!.countEmails > 0;
+  bool isEmptyTrashBannerEnabledOnWeb(BuildContext context) {
+    return selectedMailbox.value != null &&
+      selectedMailbox.value!.isTrash &&
+      selectedMailbox.value!.countEmails > 0 &&
+      !searchController.isSearchActive() &&
+      _responsiveUtils.isWebDesktop(context);
+  }
+
+  bool isEmptyTrashBannerEnabledOnMobile(BuildContext context) {
+    return selectedMailbox.value != null &&
+      selectedMailbox.value!.isTrash &&
+      selectedMailbox.value!.countEmails > 0 &&
+      !searchController.isSearchActive() &&
+      !_responsiveUtils.isWebDesktop(context);
   }
 
   void emptyTrashAction(BuildContext context) {

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -22,7 +22,9 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/banner_delete_all_spam_emails_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_delete_all_spam_emails_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_empty_trash_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
@@ -125,7 +127,21 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                       ]),
                       Expanded(child: Column(children: [
                         const SpamReportBannerWebWidget(),
-                        _buildEmptyTrashButton(context),
+                        Obx(() {
+                          if (controller.isEmptyTrashBannerEnabledOnWeb(context)) {
+                            return Padding(
+                              padding: const EdgeInsetsDirectional.only(
+                                top: BannerEmptyTrashStyles.webTopMargin,
+                                end: BannerEmptyTrashStyles.webEndMargin
+                              ),
+                              child: BannerEmptyTrashWidget(
+                                onTapAction: () => controller.emptyTrashAction(context)
+                              ),
+                            );
+                          } else {
+                            return const SizedBox.shrink();
+                          }
+                        }),
                         Obx(() {
                           if (controller.isEmptySpamBannerEnabledOnWeb(context)) {
                             return Padding(
@@ -659,72 +675,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
       .toList();
   }
 
-  bool _supportEmptyTrash(BuildContext context) {
-    return controller.isMailboxTrashValid
-      && !controller.searchController.isSearchActive()
-      && responsiveUtils.isWebDesktop(context);
-  }
-
-  Widget _buildEmptyTrashButton(BuildContext context) {
-    return Obx(() {
-      log('MailboxDashBoardView::_buildEmptyTrashButton():');
-      if (_supportEmptyTrash(context)) {
-        return Container(
-          decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(14)),
-              border: Border.all(color: AppColor.colorLineLeftEmailView),
-              color: Colors.white),
-          margin: EdgeInsets.only(
-            right: AppUtils.isDirectionRTL(context) ? 0 : 16,
-            left: AppUtils.isDirectionRTL(context) ? 16 : 0,
-            top: 16
-          ),
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-          child: Row(children: [
-            Padding(
-                padding: EdgeInsets.only(
-                  right: AppUtils.isDirectionRTL(context) ? 0 : 16,
-                  left: AppUtils.isDirectionRTL(context) ? 16 : 0,
-                ),
-                child: SvgPicture.asset(
-                    imagePaths.icDeleteTrash,
-                    fit: BoxFit.fill)),
-            Expanded(
-                child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Padding(
-                          padding: EdgeInsets.only(
-                            left: AppUtils.isDirectionRTL(context) ? 0 : 8,
-                            right: AppUtils.isDirectionRTL(context) ? 8 : 0
-                          ),
-                          child: Text(
-                              AppLocalizations.of(context).message_delete_all_email_in_trash_button,
-                              style: const TextStyle(
-                                  color: AppColor.colorContentEmail,
-                                  fontSize: 13,
-                                  fontWeight: FontWeight.w500))),
-                      TextButton(
-                          onPressed: () => controller.emptyTrashAction(context),
-                          child: Text(
-                              AppLocalizations.of(context).empty_trash_now,
-                              style: const TextStyle(
-                                  fontSize: 17,
-                                  fontWeight: FontWeight.w500,
-                                  color: AppColor.colorTextButton)
-                          )
-                      )
-                    ]
-                )
-            )
-          ]),
-        );
-      } else {
-        return const SizedBox.shrink();
-      }
-    });
-  }
-
   Widget _buildComposerButton(BuildContext context) {
     return Container(
       padding: const EdgeInsets.all(16),

lib/features/thread/presentation/styles/banner_empty_trash_styles.dart

@@ -0,0 +1,21 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class BannerEmptyTrashStyles {
+  static const double borderRadius = 14;
+  static const double buttonBorderRadius = 20;
+  static const double horizontalPadding = 16;
+  static const double verticalPadding = 10;
+  static const double webEndMargin = 16;
+  static const double webTopMargin = 8;
+  static const double mobileMargin = 16;
+  static const double labelTextSize = 13;
+  static const double buttonTextSize = 17;
+  static const double iconSize = 20;
+  static const double space = 8;
+  static const Color backgroundColor = Colors.white;
+  static const Color borderStrokeColor = AppColor.colorBorderBodyThread;
+  static const Color labelTextColor = AppColor.colorSubtitle;
+  static const Color buttonTextColor = AppColor.toastErrorBackgroundColor;
+}

lib/features/thread/presentation/thread_view.dart

@@ -21,9 +21,11 @@ import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.da
 import 'package:tmail_ui_user/features/thread/domain/state/search_more_email_state.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/banner_delete_all_spam_emails_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_controller.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_delete_all_spam_emails_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/banner_empty_trash_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/bottom_bar_thread_selection_widget.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart'
   if (dart.library.html) 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_web_builder.dart';
@@ -31,7 +33,6 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/filter_messag
 import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
-import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class ThreadView extends GetWidget<ThreadController>
   with AppLoaderMixin,
@@ -78,7 +79,20 @@ class ThreadView extends GetWidget<ThreadController>
                           const QuotasWarningBannerWidget(),
                           _buildVacationNotificationMessage(context),
                         ],
-                      _buildEmptyTrashButton(context),
+                      Obx(() {
+                        if (controller.mailboxDashBoardController.isEmptyTrashBannerEnabledOnMobile(context)) {
+                          return Padding(
+                            padding: const EdgeInsetsDirectional.symmetric(
+                              horizontal: BannerEmptyTrashStyles.mobileMargin
+                            ),
+                            child: BannerEmptyTrashWidget(
+                              onTapAction: () => controller.deleteSelectionEmailsPermanently(context, DeleteActionType.all)
+                            ),
+                          );
+                        } else {
+                          return const SizedBox.shrink();
+                        }
+                      }),
                       Obx(() {
                         if (controller.mailboxDashBoardController.isEmptySpamBannerEnabledOnMobile(context)) {
                           return Padding(
@@ -530,73 +544,6 @@ class ThreadView extends GetWidget<ThreadController>
     }
   }
 
-  bool supportEmptyTrash(BuildContext context) {
-    return controller.isMailboxTrash
-        && controller.mailboxDashBoardController.emailsInCurrentMailbox.isNotEmpty
-        && !controller.isSearchActive()
-        && !_responsiveUtils.isWebDesktop(context);
-  }
-
-  Widget _buildEmptyTrashButton(BuildContext context) {
-    return Obx(() {
-      if (supportEmptyTrash(context)) {
-        return Container(
-          decoration: BoxDecoration(
-              borderRadius: const BorderRadius.all(Radius.circular(14)),
-              border: Border.all(color: AppColor.colorLineLeftEmailView),
-              color: Colors.white),
-          margin: EdgeInsets.only(
-              left: AppUtils.isDirectionRTL(context) ? 16 : _responsiveUtils.isWebDesktop(context) ? 0 : 16,
-              right: AppUtils.isDirectionRTL(context) ? _responsiveUtils.isWebDesktop(context) ? 0 : 16 : 16,
-              bottom: _responsiveUtils.isWebDesktop(context) ? 0 : 16,
-              top: _responsiveUtils.isWebDesktop(context) ? 16 : 0),
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-          child: Row(children: [
-            Padding(
-                padding: EdgeInsets.only(
-                  right: AppUtils.isDirectionRTL(context) ? 0 : 16,
-                  left: AppUtils.isDirectionRTL(context) ? 16 : 0,
-                ),
-                child: SvgPicture.asset(
-                    _imagePaths.icDeleteTrash,
-                    fit: BoxFit.fill)),
-            Expanded(
-                child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Padding(
-                          padding: EdgeInsets.only(
-                            left: AppUtils.isDirectionRTL(context) ? 0 : 8,
-                            right: AppUtils.isDirectionRTL(context) ? 0 : 8,
-                          ),
-                          child: Text(
-                              AppLocalizations.of(context).message_delete_all_email_in_trash_button,
-                              style: const TextStyle(
-                                  color: AppColor.colorContentEmail,
-                                  fontSize: 13,
-                                  fontWeight: FontWeight.w500))),
-                      TextButton(
-                          onPressed: () =>
-                              controller.deleteSelectionEmailsPermanently(context, DeleteActionType.all),
-                          child: Text(
-                              AppLocalizations.of(context).empty_trash_now,
-                              style: const TextStyle(
-                                  fontSize: 17,
-                                  fontWeight: FontWeight.w500,
-                                  color: AppColor.colorTextButton)
-                          )
-                      )
-                    ]
-                )
-            )
-          ]),
-        );
-      } else {
-        return const SizedBox.shrink();
-      }
-    });
-  }
-
   List<Widget> _contextMenuActionTile(BuildContext context, PresentationEmail email) {
     final mailboxContain = email.mailboxContain;
 

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

@@ -0,0 +1,79 @@
+
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/banner_empty_trash_styles.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class BannerEmptyTrashWidget extends StatelessWidget {
+
+  final VoidCallback onTapAction;
+
+  const BannerEmptyTrashWidget({super.key, required this.onTapAction});
+
+  @override
+  Widget build(BuildContext context) {
+    final imagePaths = Get.find<ImagePaths>();
+    return Container(
+      decoration: const ShapeDecoration(
+        color: BannerEmptyTrashStyles.backgroundColor,
+        shape: RoundedRectangleBorder(
+          side: BorderSide(
+            width: 1,
+            color: BannerEmptyTrashStyles.borderStrokeColor,
+          ),
+          borderRadius: BorderRadius.all(Radius.circular(BannerEmptyTrashStyles.borderRadius)),
+        ),
+      ),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: onTapAction,
+          borderRadius: const BorderRadius.all(Radius.circular(BannerEmptyTrashStyles.borderRadius)),
+          child: Padding(
+            padding: const EdgeInsetsDirectional.symmetric(
+              horizontal: BannerEmptyTrashStyles.horizontalPadding,
+              vertical: BannerEmptyTrashStyles.verticalPadding
+            ),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SvgPicture.asset(
+                  imagePaths.icDeleteRuleMobile,
+                  width: BannerEmptyTrashStyles.iconSize,
+                  height: BannerEmptyTrashStyles.iconSize,
+                  fit: BoxFit.fill
+                ),
+                const SizedBox(width: BannerEmptyTrashStyles.space),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        AppLocalizations.of(context).empty_trash_now,
+                        style: const TextStyle(
+                          fontSize: BannerEmptyTrashStyles.buttonTextSize,
+                          fontWeight: FontWeight.w500,
+                          color: BannerEmptyTrashStyles.buttonTextColor
+                        )
+                      ),
+                      Text(
+                        AppLocalizations.of(context).message_delete_all_email_in_trash_button,
+                        style: const TextStyle(
+                          color: BannerEmptyTrashStyles.labelTextColor,
+                          fontSize: BannerEmptyTrashStyles.labelTextSize,
+                          fontWeight: FontWeight.w400
+                        )
+                      ),
+                    ]
+                  )
+                )
+              ]
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}