TF-599 Apply new icon mailbox for destination picker

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -5,6 +5,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart';
@@ -17,7 +18,8 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_sear
 import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class DestinationPickerView extends GetWidget<DestinationPickerController> {
+class DestinationPickerView extends GetWidget<DestinationPickerController>
+    with AppLoaderMixin {
 
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -161,12 +163,9 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
     return Obx(() => controller.viewState.value.fold(
       (failure) => const SizedBox.shrink(),
       (success) => success is LoadingState
-        ? const Center(child: Padding(
+        ? Padding(
-            padding: EdgeInsets.only(top: 16),
+            padding: const EdgeInsets.only(top: 16),
-            child: SizedBox(
+            child: loadingWidget)
-              width: 24,
-              height: 24,
-              child: CircularProgressIndicator(color: AppColor.primaryColor))))
         : const SizedBox.shrink()));
   }
 
@@ -181,17 +180,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
           const SizedBox(height: 12),
         if (actions == MailboxActions.create) _buildUnifiedMailbox(context),
         const SizedBox(height: 12),
-        Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+        Obx(() => controller.defaultMailboxHasChild
-            ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root, actions)
+            ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode, actions)
             : const SizedBox.shrink()),
         if (actions == MailboxActions.create) const SizedBox(height: 12),
         if (actions != MailboxActions.create && !kIsWeb)
           const Padding(
             padding: EdgeInsets.only(left: 60),
             child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
-        Obx(() => controller.folderMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
+        Obx(() => controller.folderMailboxHasChild
-            ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderMailboxTree.value.root, actions)
+            ? _buildMailboxCategory(context, MailboxCategories.folders, controller.folderRootNode, actions)
             : const SizedBox.shrink()),
+        const SizedBox(height: 12),
       ]
     );
   }
@@ -218,7 +218,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
         child: Row(children: [
           Expanded(child: Text(categories.getTitle(context),
               maxLines: 1,
-              overflow: TextOverflow.ellipsis,
+              overflow: CommonTextStyle.defaultTextOverFlow,
               style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
           buildIconWeb(
               icon: SvgPicture.asset(
@@ -239,7 +239,11 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
         margin: EdgeInsets.only(
             left: actions == MailboxActions.moveEmail ? 8 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
             right: actions == MailboxActions.moveEmail ? 0 : 16),
-        padding: const EdgeInsets.only(left: 12, right: 8),
+        padding: EdgeInsets.only(
+            top: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0,
+            bottom: _responsiveUtils.isDesktop(context) && actions == MailboxActions.create ? 8 : 0,
+            left: _responsiveUtils.isDesktop(context) ? 0 : 12,
+            right: actions == MailboxActions.create ? 8 : 16),
         child: TreeView(
             key: Key('${categories.keyValue}_mailbox_list'),
             children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));
@@ -269,9 +273,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
 
   Widget _buildListMailboxSearched(BuildContext context) {
     return Obx(() => Container(
-        margin: _responsiveUtils.isDesktop(context)
+        margin: const EdgeInsets.only(right: 8, bottom: 12),
-            ? const EdgeInsets.only(left: 16, right: 16)
-            : EdgeInsets.zero,
         decoration: _responsiveUtils.isDesktop(context)
             ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
             : null,
@@ -287,6 +289,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
                         _imagePaths,
                         _responsiveUtils,
                         controller.listMailboxSearched[index],
+                        mailboxDisplayed: MailboxDisplayed.destinationPicker,
                         lastMailbox: controller.listMailboxSearched.last)
                     ..addOnOpenMailboxAction((mailbox) => controller.selectMailboxAction(mailbox)))
                   .build())
@@ -309,7 +312,10 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
           onTap: () => controller.selectMailboxAction(null),
           leading: Padding(
             padding: const EdgeInsets.only(left: 16),
-            child: SvgPicture.asset(_imagePaths.icFolderMailbox, width: 28, height: 28, fit: BoxFit.fill)),
+            child: SvgPicture.asset(_imagePaths.icFolderMailbox,
+                width: BuildUtils.isWeb ? 20 : 24,
+                height: BuildUtils.isWeb ? 20 : 24,
+                fit: BoxFit.fill)),
           title: Transform(
             transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
             child: Row(
@@ -329,7 +335,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
   }
 
   void _handleOpenMailboxClick(MailboxNode mailboxNode) {
-    var presentationMailbox;
+    PresentationMailbox presentationMailbox;
     final path = controller.findNodePath(mailboxNode.item.id)
         ?? mailboxNode.item.name?.name;
     if (path != null) {

lib/features/destination_picker/presentation/widgets/app_bar_destination_picker_builder.dart

@@ -79,7 +79,7 @@ class AppBarDestinationPickerBuilder {
     return Text(
         _mailboxAction?.getTitle(_context) ?? '',
         maxLines: 1,
-        overflow: TextOverflow.ellipsis,
+        overflow: CommonTextStyle.defaultTextOverFlow,
         textAlign: TextAlign.center,
         style: const TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700));
   }

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

@@ -96,19 +96,19 @@ class MailBoxFolderTileBuilder {
       } else {
         return InkWell(
           onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
-          child: Container(
+          child: ClipRRect(
-              decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(14)),
-                  borderRadius: BorderRadius.circular(10),
+            child: Container(
-                  color: backgroundColorItem),
+                color: Colors.white,
-              padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
+                padding: const EdgeInsets.only(left: 16, top: 8, bottom: 8),
-              margin: const EdgeInsets.only(bottom: 4),
+                child: Row(children: [
-              child: Row(children: [
+                  _buildLeadingMailboxItem(),
-                _buildLeadingMailboxItem(),
+                  const SizedBox(width: 8),
-                const SizedBox(width: 4),
+                  Expanded(child: _buildTitleFolderItem()),
-                Expanded(child: _buildTitleFolderItem()),
+                  const SizedBox(width: 8),
-                const SizedBox(width: 8),
+                  _buildTrailingMailboxItem()
-                _buildTrailingMailboxItem()
+                ])
-              ])
+            ),
           ),
         );
       }
@@ -147,30 +147,34 @@ class MailBoxFolderTileBuilder {
 
   Widget _buildLeadingMailboxItem() {
     if (BuildUtils.isWeb) {
-      return Row(mainAxisSize: MainAxisSize.min, children: [
+      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        if (_mailboxNode.hasChildren())
+        return Row(mainAxisSize: MainAxisSize.min, children: [
-          buildIconWeb(
+          if (_mailboxNode.hasChildren())
-              icon: SvgPicture.asset(
+            buildIconWeb(
-                  _mailboxNode.expandMode == ExpandMode.EXPAND
+                icon: SvgPicture.asset(
-                      ? _imagePaths.icExpandFolder
+                    _mailboxNode.expandMode == ExpandMode.EXPAND
-                      : _imagePaths.icCollapseFolder,
+                        ? _imagePaths.icExpandFolder
-                  color: _mailboxNode.expandMode == ExpandMode.EXPAND
+                        : _imagePaths.icCollapseFolder,
-                      ? AppColor.colorExpandMailbox
+                    color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                      : AppColor.colorCollapseMailbox,
+                        ? AppColor.colorExpandMailbox
-                  fit: BoxFit.fill),
+                        : AppColor.colorCollapseMailbox,
-              minSize: 12,
+                    fit: BoxFit.fill),
-              splashRadius: 10,
+                minSize: 12,
-              iconPadding: EdgeInsets.zero,
+                splashRadius: 10,
-              tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+                iconPadding: EdgeInsets.zero,
-                  ? AppLocalizations.of(_context).collapse
+                tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                  : AppLocalizations.of(_context).expand,
+                    ? AppLocalizations.of(_context).collapse
-              onTap: () => _onExpandFolderActionClick?.call(_mailboxNode))
+                    : AppLocalizations.of(_context).expand,
-        else
+                onTap: () => _onExpandFolderActionClick?.call(_mailboxNode))
-          const SizedBox(width: 24),
+          else
-        Transform(
+            const SizedBox(width: 24),
-            transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+          Transform(
-            child: _buildLeadingIcon())
+              transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-      ]);
+              child: _buildLeadingIcon())
+        ]);
+      } else {
+        return _buildLeadingIcon();
+      }
     } else {
       return _buildLeadingIcon();
     }
@@ -186,6 +190,25 @@ class MailBoxFolderTileBuilder {
           padding: const EdgeInsets.only(right: 10),
           child: _buildCounter(),
         );
+      } else if (_mailboxNode.hasChildren()
+          && mailboxDisplayed == MailboxDisplayed.destinationPicker) {
+        return buildIconWeb(
+            icon: SvgPicture.asset(
+                _mailboxNode.expandMode == ExpandMode.EXPAND
+                    ? _imagePaths.icExpandFolder
+                    : _imagePaths.icCollapseFolder,
+                color: _mailboxNode.expandMode == ExpandMode.EXPAND
+                    ? AppColor.colorExpandMailbox
+                    : AppColor.colorCollapseMailbox,
+                fit: BoxFit.fill),
+            splashRadius: 10,
+            iconPadding: EdgeInsets.zero,
+            minSize: 30,
+            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+                ? AppLocalizations.of(_context).collapse
+                : AppLocalizations.of(_context).expand,
+            onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
+        );
       } else {
         return const SizedBox(width: 20);
       }

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

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
 
 typedef OnOpenMailboxActionClick = void Function(PresentationMailbox);
 typedef OnSelectMailboxActionClick = void Function(PresentationMailbox);
@@ -16,6 +17,7 @@ class MailboxSearchTileBuilder {
   final ImagePaths _imagePaths;
   final ResponsiveUtils _responsiveUtils;
   final BuildContext _context;
+  final MailboxDisplayed mailboxDisplayed;
 
   bool isHoverItem = false;
 
@@ -31,6 +33,7 @@ class MailboxSearchTileBuilder {
     {
       this.allSelectMode = SelectMode.INACTIVE,
       this.lastMailbox,
+      this.mailboxDisplayed = MailboxDisplayed.mailbox,
     }
   );
 
@@ -159,7 +162,7 @@ class MailboxSearchTileBuilder {
   }
 
   Widget? _buildMenuIcon() {
-    if (isHoverItem) {
+    if (isHoverItem && mailboxDisplayed == MailboxDisplayed.mailbox) {
       return Padding(
         padding: const EdgeInsets.only(right: 8),
         child: InkWell(
@@ -188,9 +191,13 @@ class MailboxSearchTileBuilder {
     if (isHoverItem) {
       return AppColor.colorBgMailboxSelected;
     } else {
-      return _responsiveUtils.isDesktop(_context)
+      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-          ? AppColor.colorBgDesktop
+        return _responsiveUtils.isDesktop(_context)
-          : Colors.white;
+            ? AppColor.colorBgDesktop
+            : Colors.white;
+      } else {
+        return Colors.white;
+      }
     }
   }
 }

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -13,6 +13,8 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
+  MailboxCreatorView({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
     return PointerInterceptor(child: Card(
@@ -131,8 +133,8 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
                     padding: const EdgeInsets.only(left: 16),
                     child: SvgPicture.asset(
                         _imagePaths.icFolderMailbox,
-                        width: 28,
+                        width: BuildUtils.isWeb ? 20 : 24,
-                        height: 28,
+                        height: BuildUtils.isWeb ? 20 : 24,
                         fit: BoxFit.fill)),
                 title: Transform(
                     transform: Matrix4.translationValues(-5.0, 0.0, 0.0),

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -76,7 +76,7 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
                   ])
                 ),
                 Expanded(child: Padding(
-                  padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
+                  padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10),
                   child: _buildRightHeader(context)))
               ]),
               Expanded(child: Row(