TF-984 Apply new design for mailbox creator view

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -38,12 +38,12 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
     }
 
     return PointerInterceptor(
+      child: GestureDetector(
+        onTap: () => controller.closeDestinationPicker(),
         child: Card(
           margin: EdgeInsets.zero,
           borderOnForeground: false,
           color: Colors.transparent,
-        child: GestureDetector(
-          onTap: () => controller.closeDestinationPicker(),
           child: SafeArea(
             top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
             bottom: false,
@@ -86,7 +86,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                                     ? _buildInputSearchFormWidget(context)
                                     : const SizedBox.shrink()),
                                 Expanded(child: Container(
-                                    color: actions?.getBackgroundColor(),
+                                    color: Colors.white,
                                     child: RefreshIndicator(
                                         color: AppColor.primaryColor,
                                         onRefresh: () async => controller.getAllMailboxAction(),
@@ -255,7 +255,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
   ) {
-    if (actions == MailboxActions.move || actions == MailboxActions.select) {
     return Material(
         color: Colors.transparent,
         child: InkWell(
@@ -296,42 +295,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       );
   }
 
-    return Container(
-      alignment: Alignment.center,
-      margin: EdgeInsets.only(
-          left: !_responsiveUtils.isLandscapeMobile(context) ? 16 : 0,
-          top: 16,
-          right: 16),
-      decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
-      child: MediaQuery(
-        data: const MediaQueryData(padding: EdgeInsets.zero),
-        child: ListTile(
-          contentPadding: EdgeInsets.zero,
-          onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
-          leading: Padding(
-            padding: const EdgeInsets.only(left: 16),
-            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(
-              children: [
-                Expanded(child: Text(
-                  AppLocalizations.of(context).default_mailbox,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail),
-                ))
-              ]
-            )
-          ),
-        ),
-      )
-    );
-  }
-
   void _handleOpenMailboxClick(MailboxNode mailboxNode) {
     PresentationMailbox presentationMailbox;
     final path = controller.findNodePath(mailboxNode.item.id)

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -764,7 +764,7 @@ class MailboxController extends BaseMailboxController {
       _appToast.showToastWithAction(
           currentOverlayContext!,
           AppLocalizations.of(currentContext!).moved_to_mailbox(
-              success.destinationMailboxName?.name ?? AppLocalizations.of(currentContext!).default_mailbox),
+              success.destinationMailboxName?.name ?? AppLocalizations.of(currentContext!).allMailboxes),
           AppLocalizations.of(currentContext!).undo_action,
           () {
             _undoMovingMailbox(MoveMailboxRequest(

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

@@ -21,7 +21,7 @@ extension MailboxActionsExtension on MailboxActions {
   String getTitle(BuildContext context) {
     switch(this) {
       case MailboxActions.create:
-        return AppLocalizations.of(context).mailbox_location;
+        return AppLocalizations.of(context).selectParentFolder;
       case MailboxActions.moveEmail:
       case MailboxActions.move:
         return AppLocalizations.of(context).moveTo;
@@ -72,17 +72,9 @@ extension MailboxActionsExtension on MailboxActions {
     }
   }
 
-  Color getBackgroundColor() {
-    switch(this) {
-      case MailboxActions.create:
-        return AppColor.colorBgMailbox;
-      default:
-        return Colors.white;
-    }
-  }
-
   bool canSearch() {
     switch(this) {
+      case MailboxActions.create:
       case MailboxActions.moveEmail:
       case MailboxActions.move:
       case MailboxActions.select:

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

@@ -388,7 +388,8 @@ class MailBoxFolderTileBuilder {
   Widget _buildSelectedIcon() {
     if (_mailboxNode.item.id == mailboxIdSelected &&
         mailboxDisplayed == MailboxDisplayed.destinationPicker &&
-        mailboxActions == MailboxActions.select) {
+        (mailboxActions == MailboxActions.select ||
+        mailboxActions == MailboxActions.create)) {
       return SvgPicture.asset(
           _imagePaths.icFilterSelected,
           width: 20,

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

@@ -224,7 +224,8 @@ class MailboxSearchTileBuilder {
   Widget? _buildSelectedIcon() {
     if (_presentationMailbox.id == mailboxIdSelected &&
         mailboxDisplayed == MailboxDisplayed.destinationPicker &&
-        mailboxActions == MailboxActions.select) {
+        (mailboxActions == MailboxActions.select ||
+        mailboxActions == MailboxActions.create)) {
       return Padding(
         padding: const EdgeInsets.only(right: 8),
         child: SvgPicture.asset(

lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart

@@ -135,7 +135,10 @@ class MailboxCreatorController extends BaseController {
     if (accountId != null) {
       final destinationMailbox = await push(
           AppRoutes.DESTINATION_PICKER,
-          arguments: DestinationPickerArguments(accountId!, MailboxActions.create)
+          arguments: DestinationPickerArguments(
+              accountId!,
+              MailboxActions.create,
+              mailboxIdSelected: selectedMailbox.value?.id)
       );
 
       if (destinationMailbox is PresentationMailbox) {

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/create_mailbox_name_input_decoration_builder.dart';
@@ -10,6 +11,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
 
+  final _maxHeight = 656.0;
   final _imagePaths = Get.find<ImagePaths>();
   final _responsiveUtils = Get.find<ResponsiveUtils>();
 
@@ -17,82 +19,71 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
 
   @override
   Widget build(BuildContext context) {
-    return PointerInterceptor(child: Card(
+    return PointerInterceptor(
-        margin: EdgeInsets.zero,
-        borderOnForeground: false,
-        elevation: 10,
-        color: Colors.transparent,
       child: GestureDetector(
         onTap: () => controller.closeMailboxCreator(context),
-          child: ResponsiveWidget(
+        child: Card(
-              responsiveUtils: _responsiveUtils,
+          margin: EdgeInsets.zero,
-              mobile: SizedBox(child: _buildBody(context), width: double.infinity),
+          borderOnForeground: false,
-              landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity),
+          color: Colors.transparent,
-              tablet: Row(children: [
+          child: SafeArea(
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
-                Expanded(child: Container(color: Colors.transparent)),
-              ]),
-              landscapeTablet: Row(children: [
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                Expanded(child: Container(color: Colors.transparent)),
-              ]),
-              tabletLarge: Row(children: [
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
-                Expanded(child: Container(color: Colors.transparent)),
-              ]),
-              desktop: Row(children: [
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
-                Expanded(child: Container(color: Colors.transparent)),
-              ])
-          ),
-        )
-    ));
-  }
-
-  Widget _buildBody(BuildContext context) {
-    return SafeArea(
             top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
             bottom: false,
             left: false,
             right: false,
+            child: Center(
                 child: GestureDetector(
                   onTap: () => FocusScope.of(context).unfocus(),
-          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: AppColor.colorBgMailbox,
+                      margin: _getMarginView(context),
+                      decoration: BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: _getRadiusView(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: _getWidthView(context),
+                      height: _getHeightView(context),
+                      child: ClipRRect(
+                          borderRadius: _getRadiusView(context),
                           child: SafeArea(
                             top: false,
                             bottom: false,
-                    left: _responsiveUtils.isLandscapeMobile(context) ? true : false,
+                            left: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
-                    right: _responsiveUtils.isLandscapeMobile(context) ? true : false,
+                            right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
-                    child: Column(
+                            child: Column(children: [
-                        children: [
+                              _buildAppBar(context),
-                          SafeArea(left: false, right: false, bottom: false, child: _buildAppBar(context)),
                               _buildCreateMailboxNameInput(context),
                               _buildMailboxLocation(context),
-                        ]
+                            ]),
-                    ),
                           )
                       )
                   ),
                 )
+            ),
+          ),
+        ),
+      ),
     );
   }
 
   Widget _buildAppBar(BuildContext context) {
-    return Padding(
+    return Obx(() => (AppBarMailboxCreatorBuilder(
-      padding: const EdgeInsets.only(top: 5),
-      child: Obx(() => (AppBarMailboxCreatorBuilder(
             context,
             title: AppLocalizations.of(context).new_mailbox,
             isValidated: controller.isCreateMailboxValidated(context))
         ..addOnCancelActionClick(() => controller.closeMailboxCreator(context))
         ..addOnDoneActionClick(() => controller.createNewMailbox(context)))
-        .build())
+      .build());
-    );
   }
 
   Widget _buildCreateMailboxNameInput(BuildContext context) {
@@ -120,36 +111,37 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
   Widget _buildMailboxLocation(BuildContext context) {
     return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
       Padding(
-        padding: const EdgeInsets.only(left: 24, right: 16, top: 16),
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
         child: Text(
-          AppLocalizations.of(context).mailbox_location.toUpperCase(),
+          AppLocalizations.of(context).selectParentFolder,
           textAlign: TextAlign.left,
-          style: const TextStyle(fontSize: 13, color: AppColor.colorHintSearchBar)),
+          style: const TextStyle(
+              fontSize: 13,
+              color: AppColor.colorHintSearchBar,
+              fontWeight: FontWeight.normal)),
       ),
       Container(
           alignment: Alignment.center,
-          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          margin: const EdgeInsets.symmetric(horizontal: 16),
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(14),
-              color: Colors.white
+              color: AppColor.colorBgMailbox
           ),
-          child: MediaQuery(
+          child: Material(
-            data: const MediaQueryData(padding: EdgeInsets.zero),
+            color: Colors.transparent,
-            child: ListTile(
+            child: InkWell(
-                contentPadding: EdgeInsets.zero,
               onTap: () => controller.selectMailboxLocation(context),
-                leading: Padding(
+              customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
-                    padding: const EdgeInsets.only(left: 16),
+              child: Row(children: [
-                    child: SvgPicture.asset(
+                const SizedBox(width: 12),
-                        _imagePaths.icFolderMailbox,
+                Obx(() => SvgPicture.asset(
+                    controller.selectedMailbox.value?.getMailboxIcon(_imagePaths) ?? _imagePaths.icFolderMailbox,
                     width: BuildUtils.isWeb ? 20 : 24,
                     height: BuildUtils.isWeb ? 20 : 24,
                     fit: BoxFit.fill)),
-                title: Transform(
+                const SizedBox(width: 12),
-                    transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
-                    child: Row(children: [
                 Expanded(child: Obx(() => Text(
-                        controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).default_mailbox,
+                  controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).allMailboxes,
                   maxLines: 1,
                   softWrap: CommonTextStyle.defaultSoftWrap,
                   overflow: CommonTextStyle.defaultTextOverFlow,
@@ -159,17 +151,97 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
                           ? AppColor.colorHintSearchBar
                           : AppColor.colorNameEmail),
                 ))),
-                    ])),
+                const SizedBox(width: 12),
-                trailing: Transform(
+                IconButton(
-                    transform: Matrix4.translationValues(4.0, 0.0, 0.0),
-                    child: IconButton(
                     color: AppColor.primaryColor,
-                        icon: SvgPicture.asset(_imagePaths.icCollapseFolder, color: AppColor.colorCollapseMailbox, fit: BoxFit.fill),
+                    icon: SvgPicture.asset(
-                        onPressed: () => controller.selectMailboxLocation(context)
+                        _imagePaths.icCollapseFolder,
-                    ))
+                        color: AppColor.colorCollapseMailbox,
-            ),
+                        fit: BoxFit.fill),
+                    onPressed: () => controller.selectMailboxLocation(context))
+                ])),
           )
       )
     ]);
   }
+
+  double _getWidthView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return double.infinity;
+      } else {
+        return 556;
+      }
+    } else {
+      if (_responsiveUtils.isLandscapeMobile(context) ||
+          _responsiveUtils.isPortraitMobile(context)) {
+        return double.infinity;
+      } else {
+        return 556;
+      }
+    }
+  }
+
+  double _getHeightView(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 _getMarginView(BuildContext context) {
+    if (BuildUtils.isWeb) {
+      if (_responsiveUtils.isMobile(context)) {
+        return EdgeInsets.zero;
+      } else {
+        if (_responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
+          return const EdgeInsets.symmetric(vertical: 12);
+        } else {
+          return const EdgeInsets.symmetric(vertical: 50);
+        }
+      }
+    } else {
+      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);
+        }
+      }
+    }
+  }
+
+  BorderRadius _getRadiusView(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));
+    }
+  }
 }

lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart

@@ -32,23 +32,14 @@ class AppBarMailboxCreatorBuilder {
 
   Widget build() {
     return Container(
-        key: const Key('app_bar_mailbox_creator'),
+        color: Colors.white,
-        alignment: Alignment.center,
+        height: 52,
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+        padding: const EdgeInsets.symmetric(horizontal: 12),
-        decoration: const BoxDecoration(
+        child: Row(children: [
-          borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
-          color: AppColor.colorBgMailbox),
-        child: MediaQuery(
-            data: const MediaQueryData(padding: EdgeInsets.zero),
-            child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
           _buildCancelButton(),
           Expanded(child: _buildTitle()),
           _buildCreateButton()
-                ]
+        ])
-            )
-        )
     );
   }
 
@@ -73,7 +64,11 @@ class AppBarMailboxCreatorBuilder {
         child: TextButton(
             child: Text(
               AppLocalizations.of(_context).done,
-              style: TextStyle(fontSize: 17, color: isValidated ? AppColor.colorTextButton : AppColor.colorDisableMailboxCreateButton),
+              style: TextStyle(
+                  fontSize: 17,
+                  color: isValidated
+                      ? AppColor.colorTextButton
+                      : AppColor.colorDisableMailboxCreateButton),
             ),
             onPressed: () => isValidated ? _onDoneActionClick?.call() : null
         )

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-10-05T22:55:58.696295",
+  "@@last_modified": "2022-10-10T22:38:31.310368",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -616,18 +616,6 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "mailbox_location": "Mailbox location",
-  "@mailbox_location": {
-    "type": "text",
-    "placeholders_order": [],
-    "placeholders": {}
-  },
-  "default_mailbox": "Default mailbox",
-  "@default_mailbox": {
-    "type": "text",
-    "placeholders_order": [],
-    "placeholders": {}
-  },
   "name_of_mailbox_is_required": "Name of mailbox is required",
   "@name_of_mailbox_is_required": {
     "type": "text",
@@ -2293,5 +2281,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "selectParentFolder": "Select parent folder",
+  "@selectParentFolder": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -637,20 +637,6 @@ class AppLocalizations {
     );
   }
 
-  String get mailbox_location {
-    return Intl.message(
-      'Mailbox location',
-      name: 'mailbox_location',
-    );
-  }
-
-  String get default_mailbox {
-    return Intl.message(
-      'Default mailbox',
-      name: 'default_mailbox',
-    );
-  }
-
   String get name_of_mailbox_is_required {
     return Intl.message(
       'Name of mailbox is required',
@@ -2377,4 +2363,9 @@ class AppLocalizations {
         name: 'customRange');
   }
 
+  String get selectParentFolder {
+    return Intl.message(
+        'Select parent folder',
+        name: 'selectParentFolder');
+  }
 }