TF-984 Apply new design for destination picker view

core/lib/presentation/extensions/color_extension.dart

@@ -148,6 +148,8 @@ extension AppColor on Color {
   static const colorCloseButton = Color(0xFF818C99);
   static const colorDropShadow = Color(0x0F000000);
   static const colorBackgroundKeyboard = Color(0xFFD2D5DC);
+  static const colorShadowLayerBottom = Color(0x29000000);
+  static const colorShadowLayerTop = Color(0x1F000000);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -8,8 +8,7 @@ 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';
+import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart';
-import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_web_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
@@ -22,6 +21,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 class DestinationPickerView extends GetWidget<DestinationPickerController>
     with AppLoaderMixin {
 
+  final _maxHeight = 656.0;
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
@@ -37,236 +37,74 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       mailboxIdSelected = arguments.mailboxIdSelected;
     }
 
-    if (BuildUtils.isWeb) {
+    return PointerInterceptor(
-      return PointerInterceptor(
+      child: Card(
+        margin: EdgeInsets.zero,
+        borderOnForeground: false,
+        color: Colors.transparent,
         child: GestureDetector(
           onTap: () => controller.closeDestinationPicker(),
-          child: Scaffold(
+          child: SafeArea(
-            backgroundColor: AppColor.colorShadowDestinationPicker,
+            top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
-            body: Align(
+            bottom: false,
-              alignment: Alignment.center,
+            left: false,
-              child: Card(
+            right: false,
-                color: Colors.white,
+            child: Center(
-                margin: _getMarginDestinationPicker(context),
-                elevation: 16,
-                shape: const RoundedRectangleBorder(
-                    borderRadius: BorderRadius.all(Radius.circular(14))),
                 child: Container(
-                    decoration: const BoxDecoration(
+                    margin: _getMarginDestinationPicker(context),
+                    decoration: BoxDecoration(
                         color: Colors.white,
-                        borderRadius: BorderRadius.all(Radius.circular(14))),
+                        borderRadius: _getRadiusDestinationPicker(context),
+                        boxShadow: const [
+                          BoxShadow(
+                              color: AppColor.colorShadowLayerBottom,
+                              blurRadius: 96,
+                              spreadRadius: 96,
+                              offset: Offset.zero),
+                          BoxShadow(
+                              color: AppColor.colorShadowLayerTop,
+                              blurRadius: 2,
+                              spreadRadius: 2,
+                              offset: Offset.zero),
+                        ]),
                     width: _getWidthDestinationPicker(context),
+                    height: _getHeightDestinationPicker(context),
                     child: ClipRRect(
-                        borderRadius: const BorderRadius.all(Radius.circular(14)),
+                        borderRadius: _getRadiusDestinationPicker(context),
                         child: GestureDetector(
                             onTap: () => {},
-                            child: _buildDestinationPickerWebWidget(context, actions, mailboxIdSelected))
+                            child: SafeArea(
+                              top: false,
+                              bottom: false,
+                              left: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                              right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                              child: Column(children: [
+                                Obx(() => TopBarDestinationPickerBuilder(
+                                    controller.mailboxAction.value,
+                                    onCloseAction: () => controller.closeDestinationPicker())),
+                                Obx(() => controller.isSearchActive()
+                                    ? _buildInputSearchFormWidget(context)
+                                    : const SizedBox.shrink()),
+                                Expanded(child: Container(
+                                    color: actions?.getBackgroundColor(),
+                                    child: RefreshIndicator(
+                                        color: AppColor.primaryColor,
+                                        onRefresh: () async => controller.getAllMailboxAction(),
+                                        child: Obx(() => controller.isSearchActive()
+                                            ? _buildListMailboxSearched(context, actions, mailboxIdSelected)
+                                            : _buildListMailbox(context, actions, mailboxIdSelected)))
+                                ))
+                              ]),
+                            ))
                     )
                 )
-              )
+            ),
-            )
           ),
         ),
-      );
+      ),
-    }
-
-    final bodyMailboxLocation = _buildBodyMailboxLocation(
-        context,
-        actions,
-        mailboxIdSelected);
-
-    if (actions == MailboxActions.create) {
-      return PointerInterceptor(child: Card(
-          margin: EdgeInsets.zero,
-          borderOnForeground: false,
-          color: Colors.transparent,
-          child: GestureDetector(
-            onTap: () => controller.closeDestinationPicker(),
-            child: ResponsiveWidget(
-                responsiveUtils: _responsiveUtils,
-                mobile: SizedBox(
-                    child: bodyMailboxLocation,
-                    width: double.infinity),
-                landscapeMobile: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tablet: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeDrawer),
-                ]),
-                landscapeTablet: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeLeftMenuMobile),
-                ]),
-                tabletLarge: Row(children: [
-                  Expanded(child: Container(color: Colors.transparent)),
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: _responsiveUtils.getSizeScreenWidth(context) -
-                          ResponsiveUtils.defaultSizeLeftMenuMobile),
-                ]),
-            ),
-          )
-      ));
-    } else {
-      return PointerInterceptor(child: Card(
-          margin: EdgeInsets.zero,
-          borderOnForeground: false,
-          color: Colors.transparent,
-          child: GestureDetector(
-            onTap: () => controller.closeDestinationPicker(),
-            child: ResponsiveWidget(
-                responsiveUtils: _responsiveUtils,
-                mobile: SizedBox(
-                    child: bodyMailboxLocation,
-                    width: double.infinity),
-                landscapeMobile: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tablet: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeDrawer),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                landscapeTablet: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-                tabletLarge: Row(children: [
-                  SizedBox(
-                      child: bodyMailboxLocation,
-                      width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                  Expanded(child: Container(color: Colors.transparent)),
-                ]),
-            ),
-          )
-      ));
-    }
-  }
-
-  Widget _buildDestinationPickerWebWidget(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return Column(children: [
-      Obx(() => TopBarDestinationPickerWebBuilder(
-          controller.mailboxAction.value,
-          onCloseAction: () => controller.closeDestinationPicker())),
-      Obx(() => controller.isSearchActive()
-          ? _buildInputSearchFormWidget(context)
-          : const SizedBox.shrink()),
-      Expanded(child: Container(
-          color: actions?.getBackgroundColor(),
-          child: _buildBodyDestinationPicker(context, actions, mailboxIdSelected)))
-    ]);
-  }
-
-  Widget _buildBodyMailboxLocation(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return SafeArea(
-        top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
-        bottom: false,
-        left: false,
-        right: false,
-        child: GestureDetector(
-          onTap: () => {},
-          child: ClipRRect(
-              borderRadius: BorderRadius.only(
-                  topRight: Radius.circular(!BuildUtils.isWeb &&
-                      _responsiveUtils.isPortraitMobile(context)
-                          ? 14
-                          : 0),
-                  topLeft: Radius.circular(!BuildUtils.isWeb &&
-                      _responsiveUtils.isPortraitMobile(context)
-                          ? 14
-                          : 0)),
-              child: Container(
-                  color: Colors.white,
-                  child: Column(children: [
-                      SafeArea(
-                          left: !BuildUtils.isWeb &&
-                              _responsiveUtils.isLandscapeMobile(context),
-                          right: false,
-                          bottom: false,
-                          child: _buildAppBar(context)),
-                      const Divider(
-                          color: AppColor.colorDividerMailbox,
-                          height: 0.5,
-                          thickness: 0.2),
-                      Obx(() => controller.isSearchActive()
-                          ? SafeArea(
-                              bottom: false,
-                              top: false,
-                              right: false,
-                              child: _buildInputSearchFormWidget(context))
-                          : const SizedBox.shrink()),
-                      Expanded(child: Container(
-                          color: actions?.getBackgroundColor(),
-                          child: SafeArea(
-                              top: false,
-                              bottom: false,
-                              left: !BuildUtils.isWeb &&
-                                  _responsiveUtils.isLandscapeMobile(context),
-                              right: false,
-                              child: _buildBodyDestinationPicker(context, actions, mailboxIdSelected))))
-                  ])
-              )
-          ),
-        )
     );
   }
 
-  Widget _buildAppBar(BuildContext context) {
-    return Obx(() => AppBarDestinationPickerBuilder(
-        controller.mailboxAction.value,
-        onCloseAction: () => controller.closeDestinationPicker()));
-  }
-
-  Widget _buildSearchBarWidget(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.only(
-            top: !BuildUtils.isWeb ? 12 : 0,
-            left: _responsiveUtils.isLandscapeMobile(context) &&
-                !BuildUtils.isWeb ? 0 : 16,
-            right: 16),
-        child: SearchBarView(
-            _imagePaths,
-            hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-            onOpenSearchViewAction: controller.enableSearch));
-  }
-
-  Widget _buildBodyDestinationPicker(
-      BuildContext context,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    return RefreshIndicator(
-      color: AppColor.primaryColor,
-      onRefresh: () async => controller.getAllMailboxAction(),
-      child: Obx(() => controller.isSearchActive()
-        ? _buildListMailboxSearched(context, actions, mailboxIdSelected)
-        : _buildListMailbox(context, actions, mailboxIdSelected)));
-  }
-
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(
       (failure) => const SizedBox.shrink(),
@@ -285,34 +123,15 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
     return SingleChildScrollView(
         physics: const ClampingScrollPhysics(),
         child: Column(children: [
-          if (actions?.hasSearchActive() == true)
+          if (actions?.canSearch() == true)
-            _buildSearchBarWidget(context),
+            SearchBarView(
+                _imagePaths,
+                margin: const EdgeInsets.all(12),
+                hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
+                onOpenSearchViewAction: controller.enableSearch),
           _buildLoadingView(),
-          if (actions == MailboxActions.create && !BuildUtils.isWeb)
-            const SizedBox(height: 12),
           if (actions?.hasAllMailboxDefault() == true)
-            ...[
+            _buildAllMailboxes(context, actions, mailboxIdSelected),
-              _buildUnifiedMailbox(context, actions, mailboxIdSelected),
-              const SizedBox(height: 12),
-              if (actions != MailboxActions.create &&
-                  (
-                    _responsiveUtils.isLandscapeMobile(context) ||
-                    _responsiveUtils.isPortraitMobile(context) ||
-                    _responsiveUtils.isTablet(context) ||
-                    _responsiveUtils.isLandscapeTablet(context) ||
-                    _responsiveUtils.isTabletLarge(context)
-                  )
-                && !BuildUtils.isWeb
-              )
-                 Padding(
-                    padding: EdgeInsets.only(
-                        left: _responsiveUtils.isLandscapeMobile(context) ? 40 : 55,
-                        right: 20),
-                    child: const Divider(
-                        color: AppColor.lineItemListColor,
-                        height: 0.5,
-                        thickness: 0.2)),
-            ],
           Obx(() => controller.defaultMailboxHasChild
               ? _buildMailboxCategory(
                     context,
@@ -321,11 +140,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                     actions,
                     mailboxIdSelected)
               : const SizedBox.shrink()),
-          if (actions == MailboxActions.create) const SizedBox(height: 12),
-          if (actions != MailboxActions.create && !BuildUtils.isWeb)
-            const Padding(
-                padding: EdgeInsets.only(left: 55, right: 20),
-                child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
           Obx(() => controller.folderMailboxHasChild
               ? _buildMailboxCategory(
                     context,
@@ -346,100 +160,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
   ) {
-    if (actions?.canCollapseMailboxGroup() == false) {
-      return _buildBodyMailboxCategory(
-          context,
-          categories,
-          mailboxNode,
-          actions,
-          mailboxIdSelected);
-    }
-    return Column(children: [
-      _buildHeaderMailboxCategory(context, categories),
-      AnimatedContainer(
-          duration: const Duration(milliseconds: 400),
-          child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-              ? _buildBodyMailboxCategory(
-                    context,
-                    categories,
-                    mailboxNode,
-                    actions,
-                    mailboxIdSelected)
-              : const Offstage())
-    ]);
-  }
-
-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
-    return Padding(
-        padding: EdgeInsets.only(
-            left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
-            right: 16),
-        child: Row(children: [
-          Expanded(child: Text(categories.getTitle(context),
-              maxLines: 1,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-              overflow: CommonTextStyle.defaultTextOverFlow,
-              style: const TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold))),
-          buildIconWeb(
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                  color: AppColor.primaryColor, fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories))
-        ]));
-  }
-
-  Widget _buildBodyMailboxCategory(
-      BuildContext context,
-      MailboxCategories categories,
-      MailboxNode mailboxNode,
-      MailboxActions? actions,
-      MailboxId? mailboxIdSelected
-  ) {
-    final lastNode = mailboxNode.childrenItems?.last;
-
     return Container(
-        decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
+        color: Colors.white,
-        margin: _marginMailboxList(context, actions),
-        padding: _paddingMailboxList(context, actions),
         child: TreeView(
             key: Key('${categories.keyValue}_mailbox_list'),
             children: _buildListChildTileWidget(
                 context,
                 mailboxNode,
                 mailboxIdSelected,
-                lastNode: lastNode,
+                lastNode: mailboxNode.childrenItems?.last,
                 actions: actions)));
   }
 
-  EdgeInsets _marginMailboxList(BuildContext context, MailboxActions? actions) {
-    if (BuildUtils.isWeb) {
-      return EdgeInsets.only(
-          left: actions?.canCollapseMailboxGroup() == false ? 0 : 16,
-          right: actions?.canCollapseMailboxGroup() == false ? 0 : 16);
-    } else {
-      return EdgeInsets.only(
-          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
-          right: actions == MailboxActions.create
-              ? 16
-              : _responsiveUtils.isLandscapeMobile(context) ? 0 : 8);
-    }
-  }
-
-  EdgeInsets _paddingMailboxList(BuildContext context, MailboxActions? actions) {
-    if (BuildUtils.isWeb) {
-      return EdgeInsets.only(
-          left: actions == MailboxActions.create ? 0 : 8,
-          right: actions == MailboxActions.create ? 8 : 16);
-    } else {
-      return EdgeInsets.only(
-          left: actions == MailboxActions.create ? 16 : 8,
-          right: 0);
-    }
-  }
-
   List<Widget> _buildListChildTileWidget(
       BuildContext context,
       MailboxNode parentNode,
@@ -518,33 +250,18 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
     ));
   }
 
-  Widget _buildUnifiedMailbox(
+  Widget _buildAllMailboxes(
       BuildContext context,
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
   ) {
     if (actions == MailboxActions.move || actions == MailboxActions.select) {
-      return InkWell(
+      return Material(
-        onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
+        color: Colors.transparent,
-        child: ClipRRect(
+        child: InkWell(
-          borderRadius: const BorderRadius.all(Radius.circular(14)),
+          onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
           child: Container(
-              color: Colors.white,
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
-              margin: EdgeInsets.only(
-                  left: BuildUtils.isWeb ||
-                    _responsiveUtils.isTablet(context) ||
-                    _responsiveUtils.isLandscapeTablet(context) ||
-                    _responsiveUtils.isTabletLarge(context) ||
-                    _responsiveUtils.isPortraitMobile(context)
-                      ? 8
-                      : 0,
-                  top: 8),
-              padding: EdgeInsets.only(
-                  left: !BuildUtils.isWeb &&
-                      _responsiveUtils.isLandscapeMobile(context)
-                        ? 8
-                        : 16,
-                  top: 16),
               child: Row(children: [
                 SvgPicture.asset(
                     _imagePaths.icFolderMailbox,
@@ -583,7 +300,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       alignment: Alignment.center,
       margin: EdgeInsets.only(
           left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0,
-          top: BuildUtils.isWeb ? 16 : 0,
+          top: 16,
           right: 16),
       decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
       child: MediaQuery(
@@ -658,27 +375,83 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
     );
   }
 
+  BorderRadius _getRadiusDestinationPicker(BuildContext context) {
+    if (!BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context)) {
+      return BorderRadius.zero;
+    } else if (_responsiveUtils.isMobile(context)) {
+      return const BorderRadius.only(
+          topRight: Radius.circular(16),
+          topLeft: Radius.circular(16));
+    } else {
+      return const BorderRadius.all(Radius.circular(16));
+    }
+  }
+
   double _getWidthDestinationPicker(BuildContext context) {
     if (BuildUtils.isWeb) {
       if (_responsiveUtils.isMobile(context)) {
         return double.infinity;
       } else {
-        return 500;
+        return 556;
       }
     } else {
-      return 500;
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return double.infinity;
+      } else {
+        return 556;
+      }
     }
   }
 
+  double _getHeightDestinationPicker(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return double.infinity;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return _maxHeight;
+        } else {
+          return double.infinity;
+        }
+      }
+    } else {
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return double.infinity;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return _maxHeight;
+        } else {
+          return double.infinity;
+        }
+      }
+    }
+
+  }
+
   EdgeInsets _getMarginDestinationPicker(BuildContext context) {
     if (BuildUtils.isWeb) {
       if (_responsiveUtils.isMobile(context)) {
         return EdgeInsets.zero;
       } else {
-        return const EdgeInsets.symmetric(vertical: 50);
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return const EdgeInsets.symmetric(vertical: 12);
+        } else {
+          return const EdgeInsets.symmetric(vertical: 50);
+        }
       }
     } else {
-      return EdgeInsets.zero;
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return EdgeInsets.zero;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return const EdgeInsets.symmetric(vertical: 12);
+        } else {
+          return const EdgeInsets.symmetric(vertical: 50);
+        }
+      }
     }
   }
 }

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

@@ -6,12 +6,12 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class TopBarDestinationPickerWebBuilder extends StatelessWidget {
+class TopBarDestinationPickerBuilder extends StatelessWidget {
 
   final MailboxActions? _mailboxAction;
   final VoidCallback? onCloseAction;
 
-  const TopBarDestinationPickerWebBuilder(
+  const TopBarDestinationPickerBuilder(
       this._mailboxAction,
       {
         Key? key,
@@ -24,31 +24,35 @@ class TopBarDestinationPickerWebBuilder extends StatelessWidget {
     final _imagePaths = Get.find<ImagePaths>();
 
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
       color: Colors.white,
-      child: Row(
+      height: 52,
-          mainAxisAlignment: MainAxisAlignment.end,
+      child: Stack(
           children: [
-            const SizedBox(width: 40),
+            Center(
-            Expanded(
               child: Text(
                 _mailboxAction?.getTitle(context) ?? '',
                 maxLines: 1,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
+                softWrap: CommonTextStyle.defaultSoftWrap,
                 overflow: CommonTextStyle.defaultTextOverFlow,
                 textAlign: TextAlign.center,
                 style: const TextStyle(
                     fontSize: 20,
                     color: Colors.black,
                     fontWeight: FontWeight.w700))),
-            buildIconWeb(
+            Padding(
-                iconSize: 32,
+              padding: const EdgeInsets.only(left: 8.0),
-                colorSelected: Colors.white,
+              child: Align(
-                splashRadius: 20,
+                alignment: Alignment.centerLeft,
-                iconPadding: const EdgeInsets.all(5),
+                child: buildIconWeb(
-                icon: SvgPicture.asset(_imagePaths.icCloseMailbox, fit: BoxFit.fill),
+                    iconSize: 24,
-                tooltip: AppLocalizations.of(context).close,
+                    colorSelected: Colors.white,
-                onTap: () => onCloseAction?.call()),
+                    splashRadius: 15,
+                    iconPadding: const EdgeInsets.all(3),
+                    icon: SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
+                    tooltip: AppLocalizations.of(context).close,
+                    onTap: () => onCloseAction?.call()),
+              ),
+            ),
           ]
       ),
     );

lib/features/mailbox/presentation/model/mailbox_actions.dart

@@ -81,7 +81,7 @@ extension MailboxActionsExtension on MailboxActions {
     }
   }
 
-  bool hasSearchActive() {
+  bool canSearch() {
     switch(this) {
       case MailboxActions.moveEmail:
       case MailboxActions.move:

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

@@ -66,60 +66,71 @@ class MailBoxFolderTileBuilder {
     _onMenuActionClick = onMenuActionClick;
   }
 
-  Widget build() {
+  Widget build() => _buildMailboxItem();
-    return Theme(
-        data: ThemeData(
-            splashColor: Colors.transparent,
-            highlightColor: Colors.transparent),
-        child: _buildMailboxItem()
-    );
-  }
 
   Widget _buildMailboxItem() {
-    if (BuildUtils.isWeb) {
+    if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
+      if (BuildUtils.isWeb) {
-        return StatefulBuilder(
+        return Theme(
-            builder: (BuildContext context, StateSetter setState) {
+          data: ThemeData(
-              return InkWell(
+              splashColor: Colors.transparent,
-                onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+              highlightColor: Colors.transparent),
-                onHover: (value) => setState(() => isHoverItem = value),
+          child: StatefulBuilder(
-                child: Container(
+              builder: (BuildContext context, StateSetter setState) {
-                    decoration: BoxDecoration(
+                return InkWell(
-                        borderRadius: BorderRadius.circular(10),
+                  onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
-                        color: backgroundColorItem),
+                  onHover: (value) => setState(() => isHoverItem = value),
-                    padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
+                  child: Container(
-                    margin: const EdgeInsets.only(bottom: 4),
+                      decoration: BoxDecoration(
-                    child: Row(children: [
+                          borderRadius: BorderRadius.circular(10),
-                      _buildLeadingMailboxItem(),
+                          color: backgroundColorItem),
-                      const SizedBox(width: 4),
+                      padding: const EdgeInsets.only(left: 4, right: 4, top: 8, bottom: 8),
-                      Expanded(child: _buildTitleFolderItem()),
+                      margin: const EdgeInsets.only(bottom: 4),
-                      const SizedBox(width: 8),
+                      child: Row(children: [
-                      _buildTrailingMailboxItem()
+                        _buildLeadingMailboxItem(),
-                    ])
+                        const SizedBox(width: 4),
-                ),
+                        Expanded(child: _buildTitleFolderItem()),
-              );
+                        const SizedBox(width: 8),
-            });
+                        _buildTrailingMailboxItem()
+                      ])
+                  ),
+                );
+              }
+          ),
+        );
       } else {
         return AbsorbPointer(
           absorbing: !_mailboxNode.isActivated,
           child: Opacity(
             opacity: _mailboxNode.isActivated ? 1.0 : 0.3,
             child: InkWell(
-              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+              onTap: () => allSelectMode == SelectMode.ACTIVE
-              radius: 14,
+                  ? _onSelectMailboxFolderClick?.call(_mailboxNode)
+                  : _onOpenMailboxFolderClick?.call(_mailboxNode),
               child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(14)),
+                  borderRadius: const BorderRadius.all(Radius.circular(14)),
-                child: Container(
+                  child: Container(
-                    padding: const EdgeInsets.only(left: 16, top: 10, bottom: 10),
+                      color: Colors.white,
-                    child: Row(children: [
+                      child: Column(
-                      _buildLeadingMailboxItem(),
+                          mainAxisSize: MainAxisSize.min,
-                      const SizedBox(width: 8),
+                          mainAxisAlignment: MainAxisAlignment.center,
-                      Expanded(child: _buildTitleFolderItem()),
+                          children: [
-                      _buildSelectedIcon(),
+                            Padding(
-                      const SizedBox(width: 8),
+                              padding: EdgeInsets.symmetric(
-                      _buildTrailingMailboxItem()
+                                  vertical: _mailboxNode.hasChildren() ? 8 : 15),
-                    ])
+                              child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-                ),
+                                _buildLeadingMailboxItem(),
+                                const SizedBox(width: 8),
+                                Expanded(child: _buildTitleFolderItem()),
+                                _buildSelectedIcon(),
+                                const SizedBox(width: 8),
+                                _buildTrailingMailboxItem()
+                              ]),
+                            ),
+                            _buildDivider(),
+                          ]
+                      )
+                  )
               ),
             ),
           ),
@@ -130,34 +141,22 @@ class MailBoxFolderTileBuilder {
         absorbing: !_mailboxNode.isActivated,
         child: Opacity(
           opacity: _mailboxNode.isActivated ? 1.0 : 0.3,
-          child: InkWell(
+          child: Material(
-            onTap: () => allSelectMode == SelectMode.ACTIVE
+            color: Colors.transparent,
-                ? _onSelectMailboxFolderClick?.call(_mailboxNode)
+            child: InkWell(
-                : _onOpenMailboxFolderClick?.call(_mailboxNode),
+              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
-            child: ClipRRect(
+              child: Container(
-                borderRadius: const BorderRadius.all(Radius.circular(14)),
+                  color: Colors.transparent,
-                child: Container(
+                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
-                    color: Colors.white,
+                  child: Row(children: [
-                    child: Column(
+                    _buildLeadingMailboxItem(),
-                        mainAxisSize: MainAxisSize.min,
+                    const SizedBox(width: 8),
-                        mainAxisAlignment: MainAxisAlignment.center,
+                    Expanded(child: _buildTitleFolderItem()),
-                        children: [
+                    _buildSelectedIcon(),
-                          Padding(
+                    const SizedBox(width: 8),
-                            padding: EdgeInsets.symmetric(
+                    _buildTrailingMailboxItem()
-                                vertical: _mailboxNode.hasChildren() ? 8 : 15),
+                  ])
-                            child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+              ),
-                              _buildLeadingMailboxItem(),
-                              const SizedBox(width: 8),
-                              Expanded(child: _buildTitleFolderItem()),
-                              _buildSelectedIcon(),
-                              const SizedBox(width: 8),
-                              _buildTrailingMailboxItem()
-                            ]),
-                          ),
-                          _buildDivider(),
-                        ]
-                    )
-                )
             ),
           ),
         ),
@@ -252,9 +251,9 @@ class MailBoxFolderTileBuilder {
                           ? AppColor.colorExpandMailbox
                           : AppColor.colorCollapseMailbox,
                       fit: BoxFit.fill),
-                  splashRadius: 20,
+                  splashRadius: mailboxDisplayed == MailboxDisplayed.mailbox ? 20 : 20,
                   iconPadding: EdgeInsets.zero,
-                  minSize: 40,
+                  minSize: mailboxDisplayed == MailboxDisplayed.mailbox ? 40 : 24,
                   tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
                       ? AppLocalizations.of(_context).collapse
                       : AppLocalizations.of(_context).expand,

pubspec.lock

@@ -189,7 +189,7 @@ packages:
       name: connectivity_plus_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.4"
+    version: "1.2.5"
   connectivity_plus_windows:
     dependency: transitive
     description:
@@ -757,7 +757,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "5a27adb39dd8690ebbbea13171128633fe7aeae0"
+      resolved-ref: f5652f21f7b7005bcdcefb45fc406c876ce05618
       url: "https://github.com/linagora/jmap-dart-client.git"
     source: git
     version: "0.0.1"