TF-933 Update new position all button action of AppBar on Web Desktop

core/lib/presentation/extensions/color_extension.dart

@@ -143,6 +143,8 @@ extension AppColor on Color {
   static const colorVacationSettingExplanation = Color(0xFF686E76);
   static const colorBackgroundVacationSettingField = Color(0xFFF2F3F5);
   static const colorBackgroundNotificationVacationSetting= Color(0xFFFFF5C2);
+  static const colorDivider = Color(0xFFE7E8EC);
+  static const colorDividerVertical = Color(0xFF99A2AD);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/utils/responsive_utils.dart

@@ -95,6 +95,9 @@ class ResponsiveUtils {
   bool isWebDesktop(BuildContext context) =>
       BuildUtils.isWeb && isDesktop(context);
 
+  bool isWebNotDesktop(BuildContext context) =>
+      BuildUtils.isWeb && !isDesktop(context);
+
   bool mailboxDashboardHasMailboxAndEmailView(BuildContext context) {
     if (BuildUtils.isWeb) {
       return isDesktop(context) ||

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -110,7 +110,30 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                         Expanded(child: Obx(() {
                           switch(controller.routePath.value) {
                             case AppRoutes.THREAD:
-                              return ThreadView();
+                              return Container(
+                                margin: const EdgeInsets.only(right: 16, top: 16, bottom: 16),
+                                decoration: BoxDecoration(
+                                    borderRadius: BorderRadius.circular(20),
+                                    border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+                                    color: Colors.white),
+                                child: ClipRRect(
+                                  borderRadius: BorderRadius.circular(20),
+                                  child: Column(children: [
+                                    if (controller.isSelectionEnabled())
+                                      Padding(
+                                        padding: const EdgeInsets.all(12.0),
+                                        child: _buildListButtonTopBarSelection(context),
+                                      )
+                                    else
+                                      Padding(
+                                        padding: const EdgeInsets.all(16.0),
+                                        child: _buildListButtonTopBar(context),
+                                      ),
+                                    const Divider(color: AppColor.colorDivider, height: 1),
+                                    Expanded(child: ThreadView())
+                                  ]),
+                                ),
+                              );
                             case AppRoutes.EMAIL:
                               return EmailView();
                             default:
@@ -162,19 +185,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
 
   Widget _buildRightHeader(BuildContext context) {
     return Row(children: [
-      Obx(() {
-        if (controller.routePath.value != AppRoutes.THREAD) {
-          return const SizedBox.shrink();
-        }
-        if (controller.isSelectionEnabled()) {
-          return _buildListButtonTopBarSelection(context);
-        } else {
-          return searchController.isSearchActive()
-            ? _buildListButtonTopBarSearchActive(context)
-            : _buildListButtonTopBar(context);
-        }
-      }),
-      const SizedBox(width: 16),
       Obx(() => !searchController.isSearchActive() ? const Spacer() : const SizedBox.shrink()),
       Obx(() {
         if (searchController.isSearchActive()) {
@@ -308,38 +318,6 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
     ]);
   }
 
-  Widget _buildListButtonTopBarSearchActive(BuildContext context) {
-    return Row(children: [
-      (ButtonBuilder(imagePaths.icSelectAll)
-          ..key(const Key('button_select_all'))
-          ..decoration(BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: AppColor.colorButtonHeaderThread))
-          ..paddingIcon(const EdgeInsets.only(right: 8))
-          ..size(16)
-          ..radiusSplash(10)
-          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
-          ..onPressActionClick(() => controller.dispatchAction(SelectionAllEmailAction()))
-          ..text(AppLocalizations.of(context).select_all, isVertical: false))
-        .build(),
-      const SizedBox(width: 16),
-      (ButtonBuilder(imagePaths.icMarkAllAsRead)
-          ..key(const Key('button_mark_all_as_read'))
-          ..decoration(BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: AppColor.colorButtonHeaderThread))
-          ..paddingIcon(const EdgeInsets.only(right: 8))
-          ..size(16)
-          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-          ..radiusSplash(10)
-          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
-          ..onPressActionClick(() => controller.markAsReadMailboxAction())
-          ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false))
-        .build(),
-    ]);
-  }
-
   Widget _buildListButtonTopBarSelection(BuildContext context) {
     return Row(children: [
       buildIconWeb(

lib/features/thread/presentation/thread_view.dart

@@ -45,108 +45,33 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
       onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
       child: Scaffold(
         resizeToAvoidBottomInset: false,
-        backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+        backgroundColor: Colors.white,
-            ? AppColor.colorBgDesktop
-            : Colors.white,
         body: Portal(
           child: Row(children: [
-            if ((!BuildUtils.isWeb && _responsiveUtils.isDesktop(context) && _responsiveUtils.isTabletLarge(context))
+            if (supportVerticalDivider(context))
-                || (BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context)))
+              const VerticalDivider(
-              const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
+                  color: AppColor.colorDividerVertical,
+                  width: 1,
+                  thickness: 0.2),
             Expanded(child: SafeArea(
                 right: _responsiveUtils.isLandscapeMobile(context),
                 left: _responsiveUtils.isLandscapeMobile(context),
                 child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      if ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)
+                      if (!_responsiveUtils.isWebDesktop(context))
                         ... [
                           _buildAppBarNormal(context),
-                          Obx(() {
+                          _buildSearchBarView(context),
-                            return Stack(children: [
+                          _buildVacationNotificationMessage(context),
-                              if (!controller.isSearchActive())
+                        ],
-                                Container(
+                      _buildEmptyTrashButton(context),
-                                    color: Colors.white,
+                      _buildListButtonQuickSearchFilter(context),
-                                    padding: EdgeInsets.symmetric(
-                                        horizontal: 16,
-                                        vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0),
-                                    margin: const EdgeInsets.only(
-                                        bottom: !BuildUtils.isWeb ? 16 : 0),
-                                    child: _buildSearchFormInActive(context))
-                              else
-                                Container(
-                                    color: Colors.white,
-                                    padding: EdgeInsets.symmetric(
-                                        horizontal: 8,
-                                        vertical: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 8 : 0),
-                                    margin: const EdgeInsets.only(
-                                        bottom: !BuildUtils.isWeb ? 16 : 0),
-                                    child: _buildSearchFormActive(context))
-                            ]);
-                          }),
-                          Obx(() {
-                            if (controller.mailboxDashBoardController.vacationResponse.value?.vacationResponderIsValid == true) {
-                              return Padding(
-                                padding: const EdgeInsets.only(bottom: 8, top: 4),
-                                child: VacationNotificationMessageWidget(
-                                    vacationResponse: controller.mailboxDashBoardController.vacationResponse.value!,
-                                    actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(),
-                                    actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()),
-                              );
-                            } else {
-                              return const SizedBox.shrink();
-                            }
-                          }),
-                        ]
-                      else
-                        const SizedBox.shrink(),
-                      Obx(() {
-                        if (controller.isMailboxTrash
-                            && controller.emailList.isNotEmpty
-                            && !controller.isSearchActive()) {
-                          return _buildEmptyTrashButton(context);
-                        } else {
-                          return const SizedBox.shrink();
-                        }
-                      }),
-                      Obx(() {
-                        if (controller.isSearchActive()
-                            && controller.searchIsActive.isTrue
-                            && _responsiveUtils.isDesktop(context)
-                            && BuildUtils.isWeb) {
-                          return _buildListButtonQuickSearchFilter(context);
-                        } else {
-                          return const SizedBox.shrink();
-                        }
-                      }),
                       if (!_responsiveUtils.isDesktop(context))
                         _buildMarkAsMailboxReadLoading(context),
-                      Expanded(child: Container(
+                      _buildLoadingView(),
-                          alignment: Alignment.center,
+                      Expanded(child: _buildListEmail(context)),
-                          margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+                      _buildLoadingViewLoadMore(),
-                              ? const EdgeInsets.only(right: 16, top: 16, bottom: 16)
-                              : EdgeInsets.zero,
-                          decoration: BoxDecoration(
-                              borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
-                                  ? BorderRadius.circular(20)
-                                  : null,
-                              border: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
-                                  ? Border.all(color: AppColor.colorBorderBodyThread, width: 1)
-                                  : null,
-                              color: Colors.white),
-                          child: ClipRRect(
-                            borderRadius: BorderRadius.all(Radius.circular(
-                                BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 0)),
-                            child: Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  _buildLoadingView(),
-                                  Expanded(child: _buildListEmail(context)),
-                                  _buildLoadingViewLoadMore(),
-                                ]
-                            ),
-                          )
-                      )),
                       _buildListButtonSelectionForMobile(context),
                     ]
                 )
@@ -158,6 +83,55 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
     );
   }
 
+  bool supportVerticalDivider(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      return _responsiveUtils.isTabletLarge(context);
+    } else {
+      return _responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context);
+    }
+  }
+
+  Widget _buildSearchBarView(BuildContext context) {
+    return Obx(() {
+      if (!controller.isSearchActive()) {
+        return Container(
+            color: Colors.white,
+            padding: EdgeInsets.symmetric(
+                horizontal: 16,
+                vertical: _responsiveUtils.isWebNotDesktop(context) ? 8 : 0),
+            margin: const EdgeInsets.only(
+                bottom: !BuildUtils.isWeb ? 16 : 0),
+            child: _buildSearchFormInActive(context));
+      } else {
+        return Container(
+            color: Colors.white,
+            padding: EdgeInsets.symmetric(
+                horizontal: 8,
+                vertical: _responsiveUtils.isWebNotDesktop(context) ? 8 : 0),
+            margin: const EdgeInsets.only(
+                bottom: !BuildUtils.isWeb ? 16 : 0),
+            child: _buildSearchFormActive(context));
+      }
+    });
+  }
+
+  Widget _buildVacationNotificationMessage(BuildContext context) {
+    return Obx(() {
+      final vacation = controller.mailboxDashBoardController.vacationResponse.value;
+      if (vacation?.vacationResponderIsValid == true) {
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 8, top: 4),
+          child: VacationNotificationMessageWidget(
+              vacationResponse: vacation!,
+              actionGotoVacationSetting: () => controller.mailboxDashBoardController.goToVacationSetting(),
+              actionEndNow: () => controller.mailboxDashBoardController.disableVacationResponder()),
+        );
+      } else {
+        return const SizedBox.shrink();
+      }
+    });
+  }
+
   Widget _buildListButtonSelectionForMobile(BuildContext context) {
     return Obx(() {
       if ((!BuildUtils.isWeb || (BuildUtils.isWeb && controller.isSelectionEnabled()
@@ -631,43 +605,64 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
     );
   }
 
+  bool supportEmptyTrash(BuildContext context) {
+    return controller.isMailboxTrash
+        && controller.emailList.isNotEmpty
+        && !controller.isSearchActive();
+  }
+
   Widget _buildEmptyTrashButton(BuildContext context) {
-    return Container(
+    return Obx(() {
-      decoration: BoxDecoration(
+      if (supportEmptyTrash(context)) {
-          borderRadius: const BorderRadius.all(Radius.circular(14)),
+        return Container(
-          border: Border.all(color: AppColor.colorLineLeftEmailView),
+          decoration: BoxDecoration(
-          color: Colors.white),
+              borderRadius: const BorderRadius.all(Radius.circular(14)),
-      margin: EdgeInsets.only(
+              border: Border.all(color: AppColor.colorLineLeftEmailView),
-          left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16,
+              color: Colors.white),
-          right: 16,
+          margin: EdgeInsets.only(
-          bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16,
+              left: _responsiveUtils.isWebDesktop(context) ? 0 : 16,
-          top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0),
+              right: 16,
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              bottom: _responsiveUtils.isWebDesktop(context) ? 0 : 16,
-      child: Row(children: [
+              top: _responsiveUtils.isWebDesktop(context) ? 16 : 0),
-        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            padding: const EdgeInsets.only(right: 16),
+          child: Row(children: [
-            child: SvgPicture.asset(_imagePaths.icDeleteTrash, fit: BoxFit.fill)),
+            Padding(
-        Expanded(
+                padding: const EdgeInsets.only(right: 16),
-            child: Column(
+                child: SvgPicture.asset(
-                crossAxisAlignment: CrossAxisAlignment.start,
+                    _imagePaths.icDeleteTrash,
-                children: [
+                    fit: BoxFit.fill)),
-                  Padding(
+            Expanded(
-                      padding: const EdgeInsets.only(left: 8),
+                child: Column(
-                      child: Text(
+                    crossAxisAlignment: CrossAxisAlignment.start,
-                          AppLocalizations.of(context).message_delete_all_email_in_trash_button,
+                    children: [
-                          style: const TextStyle(color: AppColor.colorContentEmail, fontSize: 13, fontWeight: FontWeight.w500))),
+                      Padding(
-                  TextButton(
+                          padding: const EdgeInsets.only(left: 8),
-                      onPressed: () => controller.deleteSelectionEmailsPermanently(context, DeleteActionType.all),
+                          child: Text(
-                      child: Text(
+                              AppLocalizations.of(context).message_delete_all_email_in_trash_button,
-                          AppLocalizations.of(context).empty_trash_now,
+                              style: const TextStyle(
-                          style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton)
+                                  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) {
@@ -706,23 +701,30 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin,
     ];
   }
 
+  bool supportListButtonQuickSearchFilter(BuildContext context) {
+    return controller.isSearchActive()
+        && controller.searchIsActive.isTrue
+        && _responsiveUtils.isWebDesktop(context);
+  }
+
   Widget _buildListButtonQuickSearchFilter(BuildContext context) {
-    final listQuickSearchFilter = [
+    return Obx(() {
-      QuickSearchFilter.hasAttachment,
+      if (supportListButtonQuickSearchFilter(context)) {
-      QuickSearchFilter.last7Days,
+        return Padding(
-      QuickSearchFilter.fromMe,
+          padding: EdgeInsets.only(
-    ];
+              left: _responsiveUtils.isWebDesktop(context) ? 32 : 16,
-    return Padding(
+              right: _responsiveUtils.isWebDesktop(context) ? 20 : 16,
-      padding: EdgeInsets.only(
+              bottom: _responsiveUtils.isWebDesktop(context) ? 0 : 16,
-          left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 32 : 16,
+              top: _responsiveUtils.isWebDesktop(context) ? 16 : 0),
-          right: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 16,
+          child: Row(
-          bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16,
+              children: QuickSearchFilter.values
-          top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0),
+                  .map((filter) => _buildQuickSearchFilterButton(context, filter))
-      child: Row(
+                  .toList()),
-          children: listQuickSearchFilter
+        );
-              .map((filter) => _buildQuickSearchFilterButton(context, filter))
+      } else {
-              .toList()),
+        return const SizedBox.shrink();
-    );
+      }
+    });
   }
 
   Widget _buildQuickSearchFilterButton(