TF-2421 Update new UI for selection mode in email list view

dab246 · dab246 · commit 105b997abd58 · 2024-01-09T13:41:34.000+07:00
Signed-off-by: dab246 &lt;tdvu@linagora.com&gt;
diff --git a/assets/images/ic_checkbox_off.svg b/assets/images/ic_checkbox_off.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M19.6843 2.33337C21.7645 2.33337 22.5188 2.54997 23.2793 2.95668C24.0398 3.3634 24.6367 3.96024 25.0434 4.72073C25.4501 5.48123 25.6667 6.23556 25.6667 8.31577V19.6843C25.6667 21.7645 25.4501 22.5189 25.0434 23.2793C24.6367 24.0398 24.0398 24.6367 23.2793 25.0434C22.5188 25.4501 21.7645 25.6667 19.6843 25.6667H8.31574C6.23553 25.6667 5.4812 25.4501 4.7207 25.0434C3.96021 24.6367 3.36337 24.0398 2.95665 23.2793C2.54994 22.5189 2.33334 21.7645 2.33334 19.6843V8.31577C2.33334 6.23556 2.54994 5.48123 2.95665 4.72073C3.36337 3.96024 3.96021 3.3634 4.7207 2.95668C5.4812 2.54997 6.23553 2.33337 8.31574 2.33337H19.6843ZM20.3421 4.66671H7.65788C6.61777 4.66671 6.2406 4.775 5.86036 4.97836C5.48011 5.18172 5.18169 5.48014 4.97833 5.86039C4.77497 6.24063 4.66668 6.6178 4.66668 7.65791V20.3422C4.66668 21.3823 4.77497 21.7594 4.97833 22.1397C5.18169 22.5199 5.48011 22.8184 5.86036 23.0217C6.2406 23.2251 6.61777 23.3334 7.65788 23.3334H20.3421C21.3823 23.3334 21.7594 23.2251 22.1397 23.0217C22.5199 22.8184 22.8183 22.5199 23.0217 22.1397C23.225 21.7594 23.3333 21.3823 23.3333 20.3422V7.65791C23.3333 6.6178 23.225 6.24063 23.0217 5.86039C22.8183 5.48014 22.5199 5.18172 22.1397 4.97836C21.7594 4.775 21.3823 4.66671 20.3421 4.66671Z"
+        fill="#818C99" />
+</svg>
diff --git a/assets/images/ic_checkbox_on.svg b/assets/images/ic_checkbox_on.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M2.84198 4.88142C2.33334 5.87967 2.33334 7.18646 2.33334 9.80004V18.2C2.33334 20.8136 2.33334 22.1204 2.84198 23.1187C3.28939 23.9968 4.0033 24.7107 4.88139 25.1581C5.87964 25.6667 7.18643 25.6667 9.80001 25.6667H18.2C20.8136 25.6667 22.1204 25.6667 23.1186 25.1581C23.9967 24.7107 24.7106 23.9968 25.158 23.1187C25.6667 22.1204 25.6667 20.8136 25.6667 18.2V9.80004C25.6667 7.18646 25.6667 5.87967 25.158 4.88142C24.7106 4.00333 23.9967 3.28942 23.1186 2.84201C22.1204 2.33337 20.8136 2.33337 18.2 2.33337H9.80001C7.18643 2.33337 5.87964 2.33337 4.88139 2.84201C4.0033 3.28942 3.28939 4.00333 2.84198 4.88142ZM21.2416 10.7417C21.6972 10.2861 21.6972 9.54736 21.2416 9.09175C20.786 8.63614 20.0473 8.63614 19.5917 9.09175L11.6667 17.0168L8.4083 13.7584C7.95269 13.3028 7.214 13.3028 6.75839 13.7584C6.30277 14.214 6.30277 14.9527 6.75839 15.4083L10.8417 19.4917C11.2973 19.9473 12.036 19.9473 12.4916 19.4917L21.2416 10.7417Z"
+        fill="#007AFF" />
+</svg>
diff --git a/core/lib/presentation/resources/image_paths.dart b/core/lib/presentation/resources/image_paths.dart
@@ -209,6 +209,8 @@ class ImagePaths {
   String get icUnsubscribe => _getImagePath('ic_unsubscribe.svg');
   String get icRecoverDeletedMessages => _getImagePath('ic_recover_deleted_messages.svg');
   String get icLogoTwakeWelcome => _getImagePath('ic_logo_twake_welcome.svg');
+  String get icCheckboxOn => _getImagePath('ic_checkbox_on.svg');
+  String get icCheckboxOff => _getImagePath('ic_checkbox_off.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;
diff --git a/core/lib/presentation/views/image/avatar_builder.dart b/core/lib/presentation/views/image/avatar_builder.dart
@@ -62,7 +62,9 @@ class AvatarBuilder extends StatelessWidget {
                   tileMode: TileMode.decal,
                   colors: avatarColors ?? [])
               : null,
-            color: bgColor ?? AppColor.avatarColor
+            color: avatarColors?.isNotEmpty == true
+              ? null
+              : bgColor ?? AppColor.avatarColor
           ),
           child: Text(
             text ?? '',
diff --git a/lib/features/base/widget/email_avatar_builder.dart b/lib/features/base/widget/email_avatar_builder.dart
@@ -1,5 +1,4 @@
 
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/views/image/avatar_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/presentation_email.dart';
@@ -24,7 +23,6 @@ class EmailAvatarBuilder extends StatelessWidget {
         fontSize: 21,
         color: Colors.white
       ),
-      bgColor: AppColor.colorAvatar,
       avatarColors: emailSelected.avatarColors,
     );
   }
diff --git a/lib/features/search/email/presentation/search_email_view.dart b/lib/features/search/email/presentation/search_email_view.dart
@@ -489,6 +489,9 @@ class SearchEmailView extends GetWidget<SearchEmailController>
               physics: const AlwaysScrollableScrollPhysics(),
               key: const PageStorageKey('list_presentation_email_in_search_view'),
               itemCount: listPresentationEmail.length,
+              padding: controller.selectionMode.value == SelectMode.INACTIVE
+                ? null
+                : const EdgeInsets.symmetric(horizontal: 8),
               itemBuilder: (context, index) {
                 final currentPresentationEmail = listPresentationEmail[index];
                 return Obx(() => EmailTileBuilder(
@@ -497,7 +500,11 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                   searchQuery: controller.searchQuery,
                   isShowingEmailContent: controller.mailboxDashBoardController.selectedEmail.value?.id == currentPresentationEmail.id,
                   isSearchEmailRunning: true,
-                  padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
+                  padding: SearchEmailUtils.getPaddingItemListMobile(
+                    context,
+                    controller.responsiveUtils,
+                    controller.selectionMode.value
+                  ),
                   mailboxContain: currentPresentationEmail.mailboxContain,
                   emailActionClick: (action, email) {
                     controller.pressEmailAction(
@@ -524,13 +531,19 @@ class SearchEmailView extends GetWidget<SearchEmailController>
                 ));
               },
               separatorBuilder: (BuildContext context, int index) {
-                if (index < listPresentationEmail.length - 1) {
-                  return Padding(
-                    padding: SearchEmailUtils.getPaddingItemListMobile(context, controller.responsiveUtils),
-                    child: const Divider());
-                } else {
-                  return const SizedBox.shrink();
-                }
+                return Padding(
+                  padding: ItemEmailTileStyles.getMobilePaddingDivider(
+                    context: context,
+                    responsiveUtils: controller.responsiveUtils,
+                    selectMode: controller.selectionMode.value
+                  ),
+                  child: Divider(
+                    color: index < listPresentationEmail.length - 1 &&
+                      controller.selectionMode.value == SelectMode.INACTIVE
+                        ? null
+                        : Colors.white,
+                  )
+                );
               },
             )
           : ScrollbarListView(
diff --git a/lib/features/search/email/presentation/utils/search_email_utils.dart b/lib/features/search/email/presentation/utils/search_email_utils.dart
@@ -2,6 +2,7 @@
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
+import 'package:model/mailbox/select_mode.dart';
 
 class SearchEmailUtils {
   static EdgeInsets getPaddingAppBar(BuildContext context, ResponsiveUtils responsiveUtils) {
@@ -64,11 +65,19 @@ class SearchEmailUtils {
     }
   }
 
-  static EdgeInsets getPaddingItemListMobile(BuildContext context, ResponsiveUtils responsiveUtils) {
+  static EdgeInsets getPaddingItemListMobile(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils,
+    SelectMode selectMode
+  ) {
     if (responsiveUtils.isPortraitMobile(context)) {
-      return const EdgeInsets.symmetric(horizontal: 16);
+      return EdgeInsets.symmetric(
+        horizontal: selectMode == SelectMode.ACTIVE ? 8 : 16
+      );
     } else {
-      return const EdgeInsets.symmetric(horizontal: 32);
+      return EdgeInsets.symmetric(
+        horizontal: selectMode == SelectMode.ACTIVE ? 24 : 32
+      );
     }
   }
 
diff --git a/lib/features/thread/presentation/mixin/base_email_item_tile.dart b/lib/features/thread/presentation/mixin/base_email_item_tile.dart
@@ -271,14 +271,9 @@ mixin BaseEmailItemTile {
             fit: BoxFit.fill),
       );
     } else {
-      return Container(
-          alignment: Alignment.center,
-          color: Colors.transparent,
-          child: SvgPicture.asset(
-              email.isSelected
-                  ? imagePaths.icSelected
-                  : imagePaths.icUnSelected,
-              width: 24, height: 24));
+      return SvgPicture.asset(
+        email.isSelected ? imagePaths.icCheckboxOn : imagePaths.icCheckboxOff
+      );
     }
   }
 
diff --git a/lib/features/thread/presentation/styles/item_email_tile_styles.dart b/lib/features/thread/presentation/styles/item_email_tile_styles.dart
@@ -1,6 +1,7 @@
 
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:model/mailbox/select_mode.dart';
 
 class ItemEmailTileStyles {
 
@@ -17,11 +18,37 @@ class ItemEmailTileStyles {
     }
   }
 
-  static EdgeInsetsGeometry getMobilePaddingItemList(BuildContext context, ResponsiveUtils responsiveUtils) {
+  static EdgeInsetsGeometry getMobilePaddingItemList({
+    required BuildContext context,
+    required ResponsiveUtils responsiveUtils,
+    SelectMode? selectMode
+  }) {
     if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
-      return const EdgeInsets.symmetric(horizontal: 16);
+      return EdgeInsets.symmetric(
+        horizontal: selectMode == SelectMode.ACTIVE ? 8 : 16
+      );
     } else {
-      return const EdgeInsets.symmetric(horizontal: 32);
+      return EdgeInsets.symmetric(
+        horizontal: selectMode == SelectMode.ACTIVE ? 24 : 32
+      );
+    }
+  }
+
+  static EdgeInsetsGeometry getMobilePaddingDivider({
+    required BuildContext context,
+    required ResponsiveUtils responsiveUtils,
+    SelectMode? selectMode
+  }) {
+    if (responsiveUtils.isPortraitMobile(context) || responsiveUtils.isLandscapeTablet(context)) {
+      return EdgeInsets.symmetric(
+        horizontal: 16,
+        vertical: selectMode == SelectMode.ACTIVE ? 2 : 0.0
+      );
+    } else {
+      return EdgeInsets.symmetric(
+        horizontal: 32,
+        vertical: selectMode == SelectMode.ACTIVE ? 2 : 0.0
+      );
     }
   }
 
diff --git a/lib/features/thread/presentation/thread_view.dart b/lib/features/thread/presentation/thread_view.dart
@@ -113,54 +113,60 @@ class ThreadView extends GetWidget<ThreadController>
                               }
                             }),
                           if (PlatformInfo.isMobile)
-                            Padding(
-                              padding: _getBannerMargin(context, controller.responsiveUtils),
-                              child: Row(
-                                children: [
-                                  Expanded(
-                                    child: SearchBarView(
-                                      key: const Key('email_search_bar_view'),
-                                      imagePaths: controller.imagePaths,
-                                      margin: const EdgeInsetsDirectional.only(end: 8),
-                                      hintTextSearch: AppLocalizations.of(context).search_emails,
-                                      onOpenSearchViewAction: controller.goToSearchView
-                                    ),
-                                  ),
-                                  Obx(() {
-                                    return TMailButtonWidget.fromIcon(
-                                      key: const Key('filter_email_button'),
-                                      icon: controller.imagePaths.icFilter,
-                                      iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(
-                                        controller.mailboxDashBoardController.filterMessageOption.value
+                            Obx(() {
+                              final selectionMode = controller.mailboxDashBoardController.currentSelectMode.value;
+                              if (selectionMode == SelectMode.INACTIVE) {
+                                return Padding(
+                                  padding: _getBannerMargin(context, controller.responsiveUtils),
+                                  child: Row(
+                                    children: [
+                                      Expanded(
+                                        child: SearchBarView(
+                                          key: const Key('email_search_bar_view'),
+                                          imagePaths: controller.imagePaths,
+                                          margin: const EdgeInsetsDirectional.only(end: 8),
+                                          hintTextSearch: AppLocalizations.of(context).search_emails,
+                                          onOpenSearchViewAction: controller.goToSearchView
+                                        ),
                                       ),
-                                      padding: EdgeInsets.zero,
-                                      backgroundColor: Colors.transparent,
-                                      tooltipMessage: AppLocalizations.of(context).filter_messages,
-                                      onTapActionCallback: controller.responsiveUtils.isScreenWithShortestSide(context)
-                                        ? () => controller.openContextMenuAction(
-                                            context,
-                                            _filterMessagesCupertinoActionTile(
-                                              context,
-                                              controller.mailboxDashBoardController.filterMessageOption.value
-                                            )
-                                          )
-                                        : null,
-                                      onTapActionAtPositionCallback: !controller.responsiveUtils.isScreenWithShortestSide(context)
-                                        ? (position) => controller.openPopupMenuAction(
-                                            context,
-                                            position,
-                                            popupMenuFilterEmailActionTile(
-                                              context,
-                                              controller.mailboxDashBoardController.filterMessageOption.value,
-                                              (option) => controller.filterMessagesAction(context, option)
-                                            )
-                                          )
-                                        : null,
-                                    );
-                                  })
-                                ],
-                              ),
-                            )
+                                      Obx(() {
+                                        final filterOption = controller.mailboxDashBoardController.filterMessageOption.value;
+                                        return TMailButtonWidget.fromIcon(
+                                          key: const Key('filter_email_button'),
+                                          icon: controller.imagePaths.icFilter,
+                                          iconColor: MobileAppBarThreadWidgetStyle.getFilterButtonColor(filterOption),
+                                          padding: EdgeInsets.zero,
+                                          backgroundColor: Colors.transparent,
+                                          tooltipMessage: AppLocalizations.of(context).filter_messages,
+                                          onTapActionCallback: controller.responsiveUtils.isScreenWithShortestSide(context)
+                                            ? () => controller.openContextMenuAction(
+                                                context,
+                                                _filterMessagesCupertinoActionTile(
+                                                  context,
+                                                  filterOption
+                                                )
+                                              )
+                                            : null,
+                                          onTapActionAtPositionCallback: !controller.responsiveUtils.isScreenWithShortestSide(context)
+                                            ? (position) => controller.openPopupMenuAction(
+                                                context,
+                                                position,
+                                                popupMenuFilterEmailActionTile(
+                                                  context,
+                                                  filterOption,
+                                                  (option) => controller.filterMessagesAction(context, option)
+                                                )
+                                              )
+                                            : null,
+                                        );
+                                      })
+                                    ],
+                                  ),
+                                );
+                              } else {
+                                return const SizedBox.shrink();
+                              }
+                            })
                           else
                             SearchBarView(
                               key: const Key('email_search_bar_view'),
@@ -419,15 +425,24 @@ class ThreadView extends GetWidget<ThreadController>
             controller: controller.listEmailController,
             physics: const AlwaysScrollableScrollPhysics(),
             itemCount: listPresentationEmail.length,
+            padding: controller.mailboxDashBoardController.currentSelectMode.value == SelectMode.INACTIVE
+              ? null
+              : const EdgeInsets.symmetric(horizontal: 8),
             itemBuilder: (context, index) => Obx(() => _buildEmailItemNotDraggable(context, listPresentationEmail[index])),
             separatorBuilder: (context, index) {
-              if (index < listPresentationEmail.length - 1) {
-                return Padding(
-                  padding: ItemEmailTileStyles.getMobilePaddingItemList(context, controller.responsiveUtils),
-                  child: const Divider());
-              } else {
-                return const SizedBox.shrink();
-              }
+              return Padding(
+                padding: ItemEmailTileStyles.getMobilePaddingDivider(
+                  context: context,
+                  responsiveUtils: controller.responsiveUtils,
+                  selectMode: controller.mailboxDashBoardController.currentSelectMode.value
+                ),
+                child: Divider(
+                  color: index < listPresentationEmail.length - 1 &&
+                    controller.mailboxDashBoardController.currentSelectMode.value == SelectMode.INACTIVE
+                      ? null
+                      : Colors.white,
+                )
+              );
             },
           )
         : Focus(
diff --git a/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/mobile_app_bar_thread_widget.dart
@@ -102,7 +102,31 @@ class MobileAppBarThreadWidget extends StatelessWidget {
         ],
       );
     } else {
-      child = const SizedBox.shrink();
+      child = Row(
+        children: [
+          TMailButtonWidget.fromIcon(
+            key: const Key('cancel_selection_button'),
+            icon: _imagePaths.icArrowLeft,
+            backgroundColor: Colors.transparent,
+            iconColor: AppColor.primaryColor,
+            padding: const EdgeInsets.all(3),
+            tooltipMessage: AppLocalizations.of(context).cancel,
+            onTapActionCallback: cancelEditThreadAction,
+          ),
+          Expanded(
+            child: Text(
+              AppLocalizations.of(context).count_email_selected(listEmailSelected.length),
+              maxLines: 1,
+              overflow: CommonTextStyle.defaultTextOverFlow,
+              softWrap: CommonTextStyle.defaultSoftWrap,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                fontSize: 16,
+                color: AppColor.primaryColor
+              )
+            )
+          ),
+        ],
+      );
     }
     
     return Container(
diff --git a/lib/features/thread/presentation/widgets/app_bar/title_app_bar_thread_widget.dart b/lib/features/thread/presentation/widgets/app_bar/title_app_bar_thread_widget.dart
diff --git a/lib/features/thread/presentation/widgets/email_tile_builder.dart b/lib/features/thread/presentation/widgets/email_tile_builder.dart
