TF-467 Apply new UI for threadView

core/lib/presentation/utils/responsive_utils.dart

@@ -9,7 +9,8 @@ class ResponsiveUtils {
   final int minTabletLargeWidth = 900;
 
   final double defaultSizeDrawerWidthMobileTablet = 375;
-  final double defaultSizeDrawerWidthWeb = 262;
+  final double defaultSizeDrawerWidthWeb = 320;
+  final double defaultSizeMenuWidthWeb = 262;
 
   final double _loginTextFieldWidthSmallScreen = 280.0;
   final double _loginTextFieldWidthLargeScreen = 320.0;

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -1,4 +1,5 @@
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -135,7 +136,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
         padding: EdgeInsets.only(
-            top: _responsiveUtils.isMobile(context) ? 12 : 0,
+            top: _responsiveUtils.isMobile(context) || kIsWeb ? 12 : 0,
             left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
             right: 16),
         child: (SearchBarView(_imagePaths)
@@ -179,7 +180,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
             ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions)
             : SizedBox.shrink()),
         if (actions == MailboxActions.create) SizedBox(height: 12),
-        if (actions != MailboxActions.create)
+        if (actions != MailboxActions.create && !kIsWeb)
           Padding(
             padding: EdgeInsets.only(left: 60),
             child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -289,6 +290,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
       alignment: Alignment.center,
       margin: EdgeInsets.only(
           left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0,
+          top: kIsWeb ? 16 : 0,
           right: 16),
       decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
       child: MediaQuery(
@@ -347,7 +349,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
                   ..addPadding(EdgeInsets.zero)
                   ..setMargin(EdgeInsets.only(right: 16))
                   ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
-                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
+                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
                   ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
                   ..addOnClearTextSearchAction(() => controller.clearSearchText())
                   ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -234,6 +234,8 @@ class MailboxController extends BaseMailboxController {
         mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
             defaultMailbox: ExpandMode.COLLAPSE,
             folderMailbox: ExpandMode.COLLAPSE);
+      } else {
+        mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
       }
     }
   }

lib/features/mailbox/presentation/mailbox_view.dart

@@ -371,7 +371,7 @@ class MailboxView extends GetWidget<MailboxController> {
               ..addPadding(EdgeInsets.zero)
               ..setMargin(EdgeInsets.only(right: 16))
               ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
-              ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
+              ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 18, height: 18, fit: BoxFit.fill))
               ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
               ..addOnClearTextSearchAction(() => controller.clearSearchText())
               ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -34,11 +34,11 @@ class MailboxView extends GetWidget<MailboxController> {
                   color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                   child: Column(children: [
                     if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
-                    SizedBox(height: 16),
                     Obx(() => controller.isSearchActive() ? _buildInputSearchFormWidget(context) : SizedBox.shrink()),
                     Expanded(child: Obx(() => Container(
                       color: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
                       padding: EdgeInsets.zero,
+                      margin: EdgeInsets.only(top: _responsiveUtils.isDesktop(context) ? 16 : 0),
                       child: RefreshIndicator(
                           color: AppColor.primaryColor,
                           onRefresh: () async => controller.refreshAllMailbox(),
@@ -122,14 +122,14 @@ class MailboxView extends GetWidget<MailboxController> {
 
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(
-            (failure) => SizedBox.shrink(),
+        (failure) => SizedBox.shrink(),
-            (success) => success is LoadingState
+        (success) => success is LoadingState
             ? Center(child: Padding(
-            padding: EdgeInsets.only(top: 16),
+                  padding: EdgeInsets.only(top: 16),
-            child: SizedBox(
+                  child: SizedBox(
-                width: 24,
+                      width: 24,
-                height: 24,
+                      height: 24,
-                child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
+                      child: CupertinoActivityIndicator(color: AppColor.colorTextButton))))
             : SizedBox.shrink()));
   }
 
@@ -166,17 +166,17 @@ class MailboxView extends GetWidget<MailboxController> {
           Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
               ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root)
               : SizedBox.shrink()),
-          Obx(() => !controller.isSearchActive()
+          SizedBox(height: 8),
-              ? Row(children: [
+          Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
-                  Expanded(child: _buildSearchBarWidget(context)),
+          Row(children: [
-                  Padding(
+            Expanded(child: _buildSearchBarWidget(context)),
-                    padding: EdgeInsets.only(right: 8),
+            Padding(
-                    child: buildIconWeb(
+                padding: EdgeInsets.only(right: 8),
-                        icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
+                child: buildIconWeb(
-                        tooltip: AppLocalizations.of(context).new_mailbox,
+                    icon: SvgPicture.asset(_imagePaths.icAddNewFolder, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                        onTap: () => controller.goToCreateNewMailboxView())),
+                    tooltip: AppLocalizations.of(context).new_mailbox,
-                ])
+                    onTap: () => controller.goToCreateNewMailboxView())),
-              : SizedBox.shrink()),
+          ]),
         ]
     );
   }
@@ -262,7 +262,7 @@ class MailboxView extends GetWidget<MailboxController> {
 
   Widget _buildInputSearchFormWidget(BuildContext context) {
     return Padding(
-        padding: EdgeInsets.only(left: 8),
+        padding: EdgeInsets.only(left: 8, top: 16),
         child: Row(
             children: [
               buildIconWeb(
@@ -273,7 +273,7 @@ class MailboxView extends GetWidget<MailboxController> {
                   ..addPadding(EdgeInsets.zero)
                   ..setMargin(EdgeInsets.only(right: 16))
                   ..addDecoration(BoxDecoration(borderRadius: BorderRadius.circular(12), color: AppColor.colorBgSearchBar))
-                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 20, height: 20, fit: BoxFit.fill))
+                  ..addIconClearText(SvgPicture.asset(_imagePaths.icClearTextSearch, width: 16, height: 16, fit: BoxFit.fill))
                   ..setHintText(AppLocalizations.of(context).hint_search_mailboxes)
                   ..addOnClearTextSearchAction(() => controller.clearSearchText())
                   ..addOnTextChangeSearchAction((query) => controller.searchMailbox(query))

lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart

@@ -173,13 +173,17 @@ class MailBoxFolderTileBuilder {
   }
 
   Color get backgroundColorItem {
-    if (kIsWeb) {
+    if (mailboxDisplayed == MailboxDisplayed.destinationPicker) {
-      if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
-        return AppColor.colorBgMailboxSelected;
-      }
-      return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
-    } else {
       return Colors.white;
+    } else {
+      if (kIsWeb) {
+        if (mailboxNodeSelected?.id == _mailboxNode.item.id) {
+          return AppColor.colorBgMailboxSelected;
+        }
+        return _responsiveUtils.isDesktop(_context) ? AppColor.colorBgDesktop : Colors.white;
+      } else {
+        return Colors.white;
+      }
     }
   }
 }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -22,9 +22,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       key: controller.scaffoldKey,
       drawer: ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
-          mobile: _responsiveUtils.isPortrait(context)
+          mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
-              ? SizedBox(child: MailboxView(), width: double.infinity)
-              : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
           tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
           tabletLarge: SizedBox.shrink(),
           desktop: SizedBox.shrink()
@@ -95,7 +93,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
           Expanded(child: _buildThreadAndEmailContainer(context))
         ],
       ),

lib/features/thread/presentation/thread_controller.dart

@@ -733,10 +733,14 @@ class ThreadController extends BaseController {
       countMarkStarSuccess = success.countMarkStarSuccess;
     }
 
-    if (currentContext != null && markStarAction != null) {
+    if (currentContext != null && markStarAction != null && currentOverlayContext != null) {
-      _appToast.showSuccessToast(markStarAction == MarkStarAction.unMarkStar
+      final message = markStarAction == MarkStarAction.unMarkStar
           ? AppLocalizations.of(currentContext!).marked_unstar_multiple_item(countMarkStarSuccess)
-          : AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess));
+          : AppLocalizations.of(currentContext!).marked_star_multiple_item(countMarkStarSuccess);
+      _appToast.showToastWithIcon(
+          currentOverlayContext!,
+          message: message,
+          icon: markStarAction == MarkStarAction.unMarkStar ? _imagePaths.icUnStar : _imagePaths.icStar);
     }
 
     _refreshEmailChanges();

lib/features/thread/presentation/thread_view.dart

@@ -32,11 +32,11 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
         resizeToAvoidBottomInset: false,
         backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
         body: Row(children: [
-          if (!kIsWeb && !_responsiveUtils.isMobile(context))
+          if ((!kIsWeb && !_responsiveUtils.isMobile(context)) || (kIsWeb && _responsiveUtils.isTabletLarge(context)))
             VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
           Expanded(child: SafeArea(
-              right: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context),
+              right: _responsiveUtils.isLandscapeMobile(context),
-              left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context),
+              left: _responsiveUtils.isLandscapeMobile(context),
               child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
@@ -45,23 +45,20 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
                           color: Colors.white,
                           padding: EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 32),
                           child: _buildHeader(context)),
-                    Padding(
+                    Obx(() => !controller.isSearchActive() && !_responsiveUtils.isDesktop(context)
-                        padding: EdgeInsets.only(
+                      ? _buildAppBarNormal(context)
-                            left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
+                      : SizedBox.shrink()),
-                        child: _buildSearchInputFormForMobile(context)),
+                    _buildSearchInputFormForMobile(context),
                     Container(
                         color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
-                        padding: EdgeInsets.only(
+                        padding: EdgeInsets.zero,
-                            left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
                         child: _buildSearchButtonViewForMobile(context)),
                     Obx(() => controller.isMailboxTrash && controller.emailList.isNotEmpty && !controller.isSearchActive()
                         ? _buildEmptyTrashButton(context)
                         : SizedBox.shrink()),
                     Expanded(child: Container(
-                        padding: EdgeInsets.only(
-                            left: kIsWeb && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context)) ? 32 : 0),
                         color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
-                        margin: _responsiveUtils.isDesktop(context) ? EdgeInsets.all(16) : EdgeInsets.zero,
+                        padding: _responsiveUtils.isDesktop(context) ? EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) : EdgeInsets.zero,
                         child: Stack(children: [
                           Container(
                               alignment: Alignment.center,
@@ -81,7 +78,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
                           ),
                           _buildSuggestionBox(context)
                         ]))),
-                    _buildListButtonSelectionForMobile(context),
+                    if (!kIsWeb) _buildListButtonSelectionForMobile(context),
                   ]
               )
           ))
@@ -93,14 +90,10 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
 
   Widget _buildHeader(BuildContext context) {
     return Row(children: [
-      Obx(() => !controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context)
+      Obx(() => !controller.isSelectionEnabled() ? _buildListButtonTopBar(context) : SizedBox.shrink()),
-          ? _buildListButtonTopBar(context)
+      Obx(() => controller.isSelectionEnabled() ? _buildListButtonSelectionForDesktop(context) : SizedBox.shrink()),
-          : SizedBox.shrink()),
-      Obx(() => controller.isSelectionEnabled() && _responsiveUtils.isDesktop(context)
-          ? _buildListButtonSelectionForDesktop(context)
-          : SizedBox.shrink()),
       SizedBox(width: 16),
-      Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context) ? Spacer() : SizedBox.shrink()),
+      Obx(() => !controller.isSearchActive() ? Spacer() : SizedBox.shrink()),
       Expanded(child: _buildSearchInputFormForDesktop(context)),
       _buildSearchButtonViewForDesktop(context),
       Padding(
@@ -124,7 +117,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
 
   Widget _buildListButtonTopBar(BuildContext context) {
     return Row(children: [
-      if (!controller.isSearchActive()) SizedBox(width: 16),
       if (!controller.isSearchActive())
         (ButtonBuilder(_imagePaths.icRefresh)
             ..key(Key('button_reload_thread'))
@@ -135,7 +127,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
             ..padding(EdgeInsets.symmetric(horizontal: 8, vertical: 8))
             ..onPressActionClick(() => controller.refreshAllEmail()))
           .build(),
-      SizedBox(width: 16),
+      if (!controller.isSearchActive()) SizedBox(width: 16),
       (ButtonBuilder(_imagePaths.icSelectAll)
           ..key(Key('button_select_all'))
           ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread))
@@ -198,7 +190,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
 
   Widget _buildListButtonSelectionForDesktop(BuildContext context) {
     return Row(children: [
-      SizedBox(width: 16),
       buildIconWeb(
           icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
           tooltip: AppLocalizations.of(context).cancel,
@@ -265,7 +256,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
           color: Colors.white,
           padding: EdgeInsets.only(left: 16, right: 16, bottom: 10),
           child: (SearchBarView(_imagePaths)
-              ..hintTextSearch(AppLocalizations.of(context).hint_search_emails)
+              ..hintTextSearch(kIsWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails)
               ..addOnOpenSearchViewAction(() => controller.enableSearch(context)))
             .build());
       } else {
@@ -277,9 +268,12 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
   Widget _buildSearchInputFormForMobile(BuildContext context) {
     return Obx(() {
       if (controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
-        return _buildSearchForm(context);
+        return Column(children: [
+          _buildSearchForm(context),
+          Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
+        ]);
       } else {
-        return _responsiveUtils.isDesktop(context) ? SizedBox.shrink() : _buildAppBarNormal(context);
+        return SizedBox.shrink();
       }
     });
   }
@@ -342,7 +336,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
           controller.mailboxDashBoardController.searchInputController,
           suggestionSearch: controller.mailboxDashBoardController.suggestionSearch,)
       ..addDecoration(BoxDecoration(color: Colors.white))
-      ..setMargin(EdgeInsets.only(right: 10, top: _responsiveUtils.isTabletLarge(context) ? 32 : 0))
+      ..setMargin(EdgeInsets.only(right: 10))
       ..setHintText(AppLocalizations.of(context).search_mail)
       ..addOnCancelSearchPressed(() => controller.disableSearch())
       ..addOnClearTextSearchAction(() => controller.mailboxDashBoardController.clearSearchText())
@@ -360,8 +354,10 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
               controller.listEmailSelected,
               controller.currentSelectMode.value,
               controller.filterMessageOption.value)
-          ..addOpenListMailboxActionClick(() => controller.openMailboxLeftMenu())
+          ..addOpenMailboxMenuActionClick(() => controller.openMailboxLeftMenu())
           ..addOnEditThreadAction(() => controller.enableSelectionEmail())
+          ..addOnEmailSelectionAction((actionType, selectionEmail) =>
+              controller.pressEmailSelectionAction(context, actionType, selectionEmail))
           ..addOnFilterEmailAction((filterMessageOption, position) =>
               _responsiveUtils.isMobileDevice(context)
                 ? controller.openFilterMessagesCupertinoActionSheet(
@@ -380,7 +376,9 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
     return Obx(() {
       if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
         return Container(
-          padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 80 : _responsiveUtils.isMobileDevice(context) ? 0 : 16),
+          padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() && controller.listEmailSelected.isNotEmpty
+              ? 80
+              : _responsiveUtils.isMobileDevice(context) ? 0 : 16),
           child: Align(
             alignment: Alignment.bottomRight,
             child: ScrollingFloatingButtonAnimated(
@@ -528,8 +526,8 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
   Widget _buildListEmail(BuildContext context) {
     return Container(
       margin: _responsiveUtils.isDesktop(context)
-          ? EdgeInsets.only(top: 16, bottom: 16)
+          ? EdgeInsets.symmetric(vertical: controller.isSelectionEnabled() ? 4 : 12, horizontal: 4)
-          : EdgeInsets.zero,
+          : EdgeInsets.only(top: controller.isSearchActive() ? 8 : 0),
       alignment: Alignment.center,
       padding: EdgeInsets.zero,
       color: Colors.white,
@@ -591,6 +589,7 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
         physics: AlwaysScrollableScrollPhysics(),
         key: PageStorageKey('list_presentation_email_in_threads'),
         itemCount: listPresentationEmail.length,
+        padding: EdgeInsets.zero,
         itemBuilder: (context, index) => Obx(() => (EmailTileBuilder(
                 context,
                 listPresentationEmail[index],
@@ -646,7 +645,6 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
         return controller.emailListSearch.length > 0
           ? Container(
               width: double.infinity,
-              margin: EdgeInsets.only(bottom: 16),
               padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
               decoration: BoxDecoration(
                   borderRadius: _responsiveUtils.isDesktop(context)
@@ -670,7 +668,9 @@ class ThreadView extends GetWidget<ThreadController> with UserSettingPopupMenuMi
           borderRadius: BorderRadius.all(Radius.circular(14)),
           border: Border.all(color: AppColor.colorLineLeftEmailView),
           color: Colors.white),
-      margin: EdgeInsets.only(left: 16, right: 16,
+      margin: EdgeInsets.only(
+          left: _responsiveUtils.isDesktop(context) ? 32 : 16,
+          right: _responsiveUtils.isDesktop(context) ? 20 : 16,
           bottom: _responsiveUtils.isDesktop(context) ? 0 : 16,
           top: _responsiveUtils.isDesktop(context) ? 16 : 0),
       padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),

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

@@ -1,5 +1,6 @@
 
 import 'package:core/core.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -9,14 +10,16 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnFilterEmailAction = void Function(FilterMessageOption, RelativeRect? position);
 typedef OnEditThreadAction = void Function();
-typedef OnOpenListMailboxActionClick = void Function();
+typedef OnOpenMailboxMenuActionClick = void Function();
 typedef OnCancelEditThread = void Function();
+typedef OnEmailSelectionAction = void Function(EmailActionType actionType, List<PresentationEmail>);
 
 class AppBarThreadWidgetBuilder {
   OnFilterEmailAction? _onFilterEmailAction;
-  OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
+  OnOpenMailboxMenuActionClick? _onOpenMailboxMenuActionClick;
   OnEditThreadAction? _onEditThreadAction;
   OnCancelEditThread? _onCancelEditThread;
+  OnEmailSelectionAction? _onEmailSelectionAction;
 
   final BuildContext _context;
   final ImagePaths _imagePaths;
@@ -40,8 +43,8 @@ class AppBarThreadWidgetBuilder {
     _onFilterEmailAction = onFilterEmailAction;
   }
 
-  void addOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
+  void addOpenMailboxMenuActionClick(OnOpenMailboxMenuActionClick actionClick) {
-    _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
+    _onOpenMailboxMenuActionClick = actionClick;
   }
 
   void addOnEditThreadAction(OnEditThreadAction onEditThreadAction) {
@@ -52,6 +55,10 @@ class AppBarThreadWidgetBuilder {
     _onCancelEditThread = onCancelEditThread;
   }
 
+  void addOnEmailSelectionAction(OnEmailSelectionAction onEmailSelectionAction) {
+    _onEmailSelectionAction = onEmailSelectionAction;
+  }
+
   Widget build() {
     return Container(
       key: Key('app_bar_thread_widget'),
@@ -61,36 +68,113 @@ class AppBarThreadWidgetBuilder {
       padding: EdgeInsets.only(left: 8, top: 16, bottom: 8, right: 8),
       child: MediaQuery(
         data: MediaQueryData(padding: EdgeInsets.zero),
-        child: Row(children: [
+        child: kIsWeb
-          Expanded(child: Stack(
+            ? _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForWeb() : _buildBodyAppBarForWebSelection()
-            alignment: Alignment.center,
+            : _selectMode == SelectMode.INACTIVE ? _buildBodyAppBarForMobile() : _buildBodyAppBarForMobileSelection()
-            children: [
+      )
-              if (_selectMode != SelectMode.ACTIVE)
+    );
-                Positioned(left: 0,child: _buildEditButton()),
+  }
-              if (_selectMode == SelectMode.ACTIVE)
+
-                Positioned(left: 0, child: _buildBackButton()),
+  Widget _buildBodyAppBarForWeb() {
-              if (_selectMode == SelectMode.ACTIVE)
+    return Row(children: [
-                Positioned(left: 40, child: _buildCountItemSelected()),
+      if (!_responsiveUtils.isTabletLarge(_context)) _buildMenuButton(),
-              Positioned(right: 0, child: _buildFilterButton()),
+      if (_responsiveUtils.isTabletLarge(_context)) SizedBox(width: 16),
-              _filterMessageOption.getTitle(_context).isNotEmpty
+      Expanded(child: Text(
+          '${_presentationMailbox?.name?.name.capitalizeFirstEach ?? ''}',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: TextStyle(fontSize: 21, color: Colors.black, fontWeight: FontWeight.bold))),
+      _buildFilterButton(),
+    ]);
+  }
+
+  Widget _buildBodyAppBarForWebSelection() {
+    return Row(children: [
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(_context).cancel,
+          onTap: () => _onCancelEditThread?.call()),
+      Expanded(child: Text(
+        AppLocalizations.of(_context).count_email_selected(_listSelectionEmail.length),
+        style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))),
+      buildIconWeb(
+          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead, fit: BoxFit.fill),
+          tooltip: _listSelectionEmail.isAllEmailRead ? AppLocalizations.of(_context).unread : AppLocalizations.of(_context).read,
+          onTap: () => _onEmailSelectionAction?.call(
+              _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
+              _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar, fit: BoxFit.fill),
+          tooltip: _listSelectionEmail.isAllEmailStarred ? AppLocalizations.of(_context).not_starred : AppLocalizations.of(_context).starred,
+          onTap: () => _onEmailSelectionAction?.call(
+              _listSelectionEmail.isAllEmailStarred ? EmailActionType.markAsUnStar : EmailActionType.markAsStar,
+              _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(_context).move,
+          onTap: () => _onEmailSelectionAction?.call(EmailActionType.move, _listSelectionEmail)),
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill),
+          tooltip: _presentationMailbox?.role != PresentationMailbox.roleTrash
+              ? AppLocalizations.of(_context).move_to_trash
+              : AppLocalizations.of(_context).delete_permanently,
+          onTap: () => _presentationMailbox?.role != PresentationMailbox.roleTrash
+              ? _onEmailSelectionAction?.call(EmailActionType.moveToTrash, _listSelectionEmail)
+              : _onEmailSelectionAction?.call(EmailActionType.deletePermanently, _listSelectionEmail)),
+    ]);
+  }
+
+  Widget _buildBodyAppBarForMobile() {
+    return Row(children: [
+      Expanded(child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Positioned(left: 0,child: _buildEditButton()),
+            Positioned(right: 0, child: _buildFilterButton()),
+            _filterMessageOption.getTitle(_context).isNotEmpty
                 ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                     Padding(
-                      padding: EdgeInsets.only(left: 40, right: 40),
+                        padding: EdgeInsets.only(left: 40, right: 40),
-                      child: _buildContentCenterAppBar()),
+                        child: _buildContentCenterAppBar()),
                     Transform(
-                      transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
+                        transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
-                      child: Text(
+                        child: Text(
-                          _filterMessageOption.getTitle(_context),
+                            _filterMessageOption.getTitle(_context),
-                          style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
+                            style: TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
                   ])
                 : Padding(
                     padding: EdgeInsets.only(left: 60, right: 40),
                     child: _buildContentCenterAppBar()),
-            ]
+          ]
-          ))
+      ))
-        ])
+    ]);
-      )
+  }
-    );
+
+  Widget _buildBodyAppBarForMobileSelection() {
+    return Row(children: [
+      Expanded(child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Positioned(left: 0, child: _buildBackButton()),
+            Positioned(left: 40, child: _buildCountItemSelected()),
+            Positioned(right: 0, child: _buildFilterButton()),
+            _filterMessageOption.getTitle(_context).isNotEmpty
+                ? Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+                    Padding(
+                        padding: EdgeInsets.only(left: 40, right: 40),
+                        child: _buildContentCenterAppBar()),
+                    Transform(
+                        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)))
+                  ])
+                : Padding(
+                    padding: EdgeInsets.only(left: 60, right: 40),
+                    child: _buildContentCenterAppBar()),
+          ]
+      ))
+    ]);
   }
 
   Widget _buildEditButton() {
@@ -145,21 +229,16 @@ class AppBarThreadWidgetBuilder {
     );
   }
 
+  Widget _buildMenuButton() {
+    return buildIconWeb(
+        icon: SvgPicture.asset(_imagePaths.icMenuDrawer, fit: BoxFit.fill),
+        onTap:() => _onOpenMailboxMenuActionClick?.call());
+  }
+
   Widget _buildBackButton() {
-    return Material(
+    return buildIconWeb(
-        borderRadius: BorderRadius.circular(12),
+        icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
-        color: Colors.transparent,
+        onTap:() => _onCancelEditThread?.call());
-        child: IconButton(
-            color: AppColor.baseTextColor,
-            icon: SvgPicture.asset(
-                _imagePaths.icBack,
-                width: 20,
-                height: 20,
-                color: AppColor.colorTextButton,
-                fit: BoxFit.fill),
-            onPressed: () => _onCancelEditThread?.call()
-        )
-    );
   }
 
   Widget _buildCountItemSelected() {
@@ -177,8 +256,8 @@ class AppBarThreadWidgetBuilder {
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        GestureDetector(
+        InkWell(
-          onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null,
+          onTap: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null,
           child: Padding(
             padding: !_responsiveUtils.isTabletLarge(_context) ? EdgeInsets.zero : EdgeInsets.only(bottom: 8, top: 8),
             child: Container(
@@ -198,7 +277,7 @@ class AppBarThreadWidgetBuilder {
               padding: EdgeInsets.zero,
               color: AppColor.baseTextColor,
               icon: SvgPicture.asset(_imagePaths.icChevronDown, width: 20, height: 16, fit: BoxFit.fill),
-              onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenListMailboxActionClick?.call() : null))
+              onPressed: () => !_responsiveUtils.isTabletLarge(_context) ? _onOpenMailboxMenuActionClick?.call() : null))
       ]
     );
   }

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

@@ -59,7 +59,7 @@ class EmailTileBuilder {
         mobile: _buildListTile(),
         desktop: Container(
           margin: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.only(top: 3, left: 8, right: 8) : EdgeInsets.zero,
-          padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 10) : EdgeInsets.zero,
+          padding: _selectModeAll == SelectMode.ACTIVE ? EdgeInsets.symmetric(vertical: 8) : EdgeInsets.zero,
           decoration: _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
             ? BoxDecoration(
                 borderRadius: BorderRadius.circular(14),
@@ -73,8 +73,15 @@ class EmailTileBuilder {
 
   Widget _buildListTile() {
     return Container(
-        color: Colors.white,
+        margin: kIsWeb && _selectModeAll == SelectMode.ACTIVE
-        padding: EdgeInsets.only(bottom: 10, left: 20, right: 6),
+            ? EdgeInsets.only(top: 3, left: 16, right: 16)
+            : EdgeInsets.zero,
+        padding: kIsWeb && _selectModeAll == SelectMode.ACTIVE
+            ? EdgeInsets.only(top: 8, bottom: 16, right: 8)
+            : EdgeInsets.only(bottom: 10, left: 16, right: 16),
+        decoration: kIsWeb && _selectModeAll == SelectMode.ACTIVE && _presentationEmail.selectMode == SelectMode.ACTIVE
+            ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: AppColor.colorItemEmailSelectedDesktop)
+            : BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.white),
         alignment: Alignment.center,
         child: Column(children: [
           ListTile(
@@ -194,14 +201,19 @@ class EmailTileBuilder {
                                   overflow:TextOverflow.ellipsis,
                                   style: TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
                           ),
-                        ]))
+                        ])),
+                    if (kIsWeb && _selectModeAll == SelectMode.INACTIVE)
+                      Padding(
+                          padding: EdgeInsets.only(top: 12),
+                          child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
                   ],
                 )
             ),
           ),
-          Padding(
+          if (!kIsWeb)
-              padding: EdgeInsets.only(top: 12, right: 12),
+            Padding(
-              child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
+                padding: EdgeInsets.only(top: 12, right: 12),
+                child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
         ]),
     );
   }

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

@@ -112,26 +112,19 @@ class SearchAppBarWidget {
   }
 
  Widget _buildBackButton() {
-   return Material(
+   return buildIconWeb(
-     shape: CircleBorder(),
+       icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
-     color: Colors.transparent,
+       onTap: () {
-     child: Padding(
+         _searchInputController?.clear();
-       padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(_context) ? 0 : 8),
+         if (_onCancelSearchPressed != null) {
-       child: IconButton(
+           _onCancelSearchPressed!();
-         splashRadius: 20,
-         icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
-         onPressed: () {
-           _searchInputController?.clear();
-           if (_onCancelSearchPressed != null) {
-             _onCancelSearchPressed!();
-           }
          }
-       )));
+       });
  }
 
  Widget _buildClearTextSearchButton() {
     return buildIconWeb(
-        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 12, height: 12, fit: BoxFit.fill),
+        icon: _iconClearText ?? SvgPicture.asset(_imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
         onTap: () {
           _searchInputController?.clear();
           _onClearTextSearchAction?.call();