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: Card(
+      child: GestureDetector(
-        margin: EdgeInsets.zero,
+        onTap: () => controller.closeDestinationPicker(),
-        borderOnForeground: false,
+        child: Card(
-        color: Colors.transparent,
+          margin: EdgeInsets.zero,
-        child: GestureDetector(
+          borderOnForeground: false,
-          onTap: () => controller.closeDestinationPicker(),
+          color: Colors.transparent,
           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,8 +255,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
   ) {
-    if (actions == MailboxActions.move || actions == MailboxActions.select) {
+    return Material(
-      return Material(
         color: Colors.transparent,
         child: InkWell(
           onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
@@ -294,42 +293,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) {

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,
+      child: GestureDetector(
-        borderOnForeground: false,
+        onTap: () => controller.closeMailboxCreator(context),
-        elevation: 10,
+        child: Card(
-        color: Colors.transparent,
+          margin: EdgeInsets.zero,
-        child: GestureDetector(
+          borderOnForeground: false,
-          onTap: () => controller.closeMailboxCreator(context),
+          color: Colors.transparent,
-          child: ResponsiveWidget(
+          child: SafeArea(
-              responsiveUtils: _responsiveUtils,
+            top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
-              mobile: SizedBox(child: _buildBody(context), width: double.infinity),
+            bottom: false,
-              landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity),
+            left: false,
-              tablet: Row(children: [
+            right: false,
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
+            child: Center(
-                Expanded(child: Container(color: Colors.transparent)),
+                child: GestureDetector(
-              ]),
+                  onTap: () => FocusScope.of(context).unfocus(),
-              landscapeTablet: Row(children: [
+                  child: Container(
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
+                      margin: _getMarginView(context),
-                Expanded(child: Container(color: Colors.transparent)),
+                      decoration: BoxDecoration(
-              ]),
+                          color: Colors.white,
-              tabletLarge: Row(children: [
+                          borderRadius: _getRadiusView(context),
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeLeftMenuMobile),
+                          boxShadow: const [
-                Expanded(child: Container(color: Colors.transparent)),
+                            BoxShadow(
-              ]),
+                                color: AppColor.colorShadowLayerBottom,
-              desktop: Row(children: [
+                                blurRadius: 96,
-                SizedBox(child: _buildBody(context), width: ResponsiveUtils.defaultSizeDrawer),
+                                spreadRadius: 96,
-                Expanded(child: Container(color: Colors.transparent)),
+                                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: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                            right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
+                            child: Column(children: [
+                              _buildAppBar(context),
+                              _buildCreateMailboxNameInput(context),
+                              _buildMailboxLocation(context),
+                            ]),
+                          )
+                      )
+                  ),
+                )
+            ),
           ),
-        )
+        ),
-    ));
+      ),
-  }
-
-  Widget _buildBody(BuildContext context) {
-    return SafeArea(
-        top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context),
-        bottom: false,
-        left: false,
-        right: false,
-        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,
-                  child: SafeArea(
-                    top: false,
-                    bottom: false,
-                    left: _responsiveUtils.isLandscapeMobile(context) ? true : false,
-                    right: _responsiveUtils.isLandscapeMobile(context) ? true : false,
-                    child: Column(
-                        children: [
-                          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),
+            context,
-      child: Obx(() => (AppBarMailboxCreatorBuilder(
+            title: AppLocalizations.of(context).new_mailbox,
-              context,
+            isValidated: controller.isCreateMailboxValidated(context))
-              title: AppLocalizations.of(context).new_mailbox,
+        ..addOnCancelActionClick(() => controller.closeMailboxCreator(context))
-              isValidated: controller.isCreateMailboxValidated(context))
+        ..addOnDoneActionClick(() => controller.createNewMailbox(context)))
-          ..addOnCancelActionClick(() => controller.closeMailboxCreator(context))
+      .build());
-          ..addOnDoneActionClick(() => controller.createNewMailbox(context)))
-        .build())
-    );
   }
 
   Widget _buildCreateMailboxNameInput(BuildContext context) {
@@ -120,56 +111,137 @@ 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),
-                onTap: () => controller.selectMailboxLocation(context),
+              customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
-                leading: Padding(
+              child: Row(children: [
-                    padding: const EdgeInsets.only(left: 16),
+                const SizedBox(width: 12),
-                    child: SvgPicture.asset(
+                Obx(() => SvgPicture.asset(
-                        _imagePaths.icFolderMailbox,
+                    controller.selectedMailbox.value?.getMailboxIcon(_imagePaths) ?? _imagePaths.icFolderMailbox,
-                        width: BuildUtils.isWeb ? 20 : 24,
+                    width: BuildUtils.isWeb ? 20 : 24,
-                        height: BuildUtils.isWeb ? 20 : 24,
+                    height: BuildUtils.isWeb ? 20 : 24,
-                        fit: BoxFit.fill)),
+                    fit: BoxFit.fill)),
-                title: Transform(
+                const SizedBox(width: 12),
-                    transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
+                Expanded(child: Obx(() => Text(
-                    child: Row(children: [
+                  controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).allMailboxes,
-                      Expanded(child: Obx(() => Text(
+                  maxLines: 1,
-                        controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).default_mailbox,
+                  softWrap: CommonTextStyle.defaultSoftWrap,
-                        maxLines: 1,
+                  overflow: CommonTextStyle.defaultTextOverFlow,
-                        softWrap: CommonTextStyle.defaultSoftWrap,
+                  style: TextStyle(
-                        overflow: CommonTextStyle.defaultTextOverFlow,
+                      fontSize: 15,
-                        style: TextStyle(
+                      color: controller.selectedMailbox.value == null
-                            fontSize: 15,
+                          ? AppColor.colorHintSearchBar
-                            color: controller.selectedMailbox.value == null
+                          : AppColor.colorNameEmail),
-                                ? AppColor.colorHintSearchBar
+                ))),
-                                : AppColor.colorNameEmail),
+                const SizedBox(width: 12),
-                      ))),
+                IconButton(
-                    ])),
+                    color: AppColor.primaryColor,
-                trailing: Transform(
+                    icon: SvgPicture.asset(
-                    transform: Matrix4.translationValues(4.0, 0.0, 0.0),
+                        _imagePaths.icCollapseFolder,
-                    child: IconButton(
+                        color: AppColor.colorCollapseMailbox,
-                        color: AppColor.primaryColor,
+                        fit: BoxFit.fill),
-                        icon: SvgPicture.asset(_imagePaths.icCollapseFolder, color: AppColor.colorCollapseMailbox, fit: BoxFit.fill),
+                    onPressed: () => controller.selectMailboxLocation(context))
-                        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)),
+          _buildCancelButton(),
-          color: AppColor.colorBgMailbox),
+          Expanded(child: _buildTitle()),
-        child: MediaQuery(
+          _buildCreateButton()
-            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');
+  }
 }