From 3796e60401f8c1e4a7f9145803f688df2bc6094c Mon Sep 17 00:00:00 2001 From: dab246 Date: Mon, 10 Oct 2022 22:46:29 +0700 Subject: [PATCH] TF-984 Apply new design for mailbox creator view --- .../presentation/destination_picker_view.dart | 53 +--- .../presentation/mailbox_controller.dart | 2 +- .../presentation/model/mailbox_actions.dart | 12 +- .../widgets/mailbox_folder_tile_builder.dart | 3 +- .../widgets/mailbox_search_tile_builder.dart | 3 +- .../mailbox_creator_controller.dart | 5 +- .../presentation/mailbox_creator_view.dart | 294 +++++++++++------- .../app_bar_mailbox_creator_builder.dart | 31 +- lib/l10n/intl_messages.arb | 22 +- lib/main/localizations/app_localizations.dart | 19 +- 10 files changed, 228 insertions(+), 216 deletions(-) diff --git a/lib/features/destination_picker/presentation/destination_picker_view.dart b/lib/features/destination_picker/presentation/destination_picker_view.dart index a72b8eadc..69f8acbf9 100644 --- a/lib/features/destination_picker/presentation/destination_picker_view.dart +++ b/lib/features/destination_picker/presentation/destination_picker_view.dart @@ -38,12 +38,12 @@ class DestinationPickerView extends GetWidget } return PointerInterceptor( - child: Card( - margin: EdgeInsets.zero, - borderOnForeground: false, - color: Colors.transparent, - child: GestureDetector( - onTap: () => controller.closeDestinationPicker(), + child: GestureDetector( + onTap: () => controller.closeDestinationPicker(), + child: Card( + margin: EdgeInsets.zero, + borderOnForeground: false, + color: Colors.transparent, child: SafeArea( top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context), bottom: false, @@ -86,7 +86,7 @@ class DestinationPickerView extends GetWidget ? _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 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 ), ), ); - } - - 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) { diff --git a/lib/features/mailbox/presentation/mailbox_controller.dart b/lib/features/mailbox/presentation/mailbox_controller.dart index 892570d5f..37d46785f 100644 --- a/lib/features/mailbox/presentation/mailbox_controller.dart +++ b/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( diff --git a/lib/features/mailbox/presentation/model/mailbox_actions.dart b/lib/features/mailbox/presentation/model/mailbox_actions.dart index 8e864fc03..69a3ab1d1 100644 --- a/lib/features/mailbox/presentation/model/mailbox_actions.dart +++ b/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: diff --git a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart index 9146145e4..1cf31c080 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart +++ b/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, diff --git a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart b/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart index fb7df704b..6debb9aa8 100644 --- a/lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart +++ b/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( diff --git a/lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart b/lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart index 6f34bd38f..c958effcb 100644 --- a/lib/features/mailbox_creator/presentation/mailbox_creator_controller.dart +++ b/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) { diff --git a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart b/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart index cfb4632d6..ab7500b23 100644 --- a/lib/features/mailbox_creator/presentation/mailbox_creator_view.dart +++ b/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 { + final _maxHeight = 656.0; final _imagePaths = Get.find(); final _responsiveUtils = Get.find(); @@ -17,82 +19,71 @@ class MailboxCreatorView extends GetWidget { @override Widget build(BuildContext context) { - return PointerInterceptor(child: Card( - margin: EdgeInsets.zero, - borderOnForeground: false, - elevation: 10, - color: Colors.transparent, - child: GestureDetector( - onTap: () => controller.closeMailboxCreator(context), - child: ResponsiveWidget( - responsiveUtils: _responsiveUtils, - mobile: SizedBox(child: _buildBody(context), width: double.infinity), - landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity), - tablet: Row(children: [ - 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)), - ]) + return PointerInterceptor( + child: GestureDetector( + onTap: () => controller.closeMailboxCreator(context), + child: Card( + margin: EdgeInsets.zero, + borderOnForeground: false, + color: Colors.transparent, + child: SafeArea( + top: !BuildUtils.isWeb && _responsiveUtils.isPortraitMobile(context), + bottom: false, + left: false, + right: false, + child: Center( + child: GestureDetector( + onTap: () => FocusScope.of(context).unfocus(), + child: Container( + 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: !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( - 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()) - ); + return Obx(() => (AppBarMailboxCreatorBuilder( + context, + title: AppLocalizations.of(context).new_mailbox, + isValidated: controller.isCreateMailboxValidated(context)) + ..addOnCancelActionClick(() => controller.closeMailboxCreator(context)) + ..addOnDoneActionClick(() => controller.createNewMailbox(context))) + .build()); } Widget _buildCreateMailboxNameInput(BuildContext context) { @@ -120,56 +111,137 @@ class MailboxCreatorView extends GetWidget { 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( - data: const MediaQueryData(padding: EdgeInsets.zero), - child: ListTile( - contentPadding: EdgeInsets.zero, - onTap: () => controller.selectMailboxLocation(context), - 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: Obx(() => Text( - controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).default_mailbox, - maxLines: 1, - softWrap: CommonTextStyle.defaultSoftWrap, - overflow: CommonTextStyle.defaultTextOverFlow, - style: TextStyle( - fontSize: 15, - color: controller.selectedMailbox.value == null - ? AppColor.colorHintSearchBar - : AppColor.colorNameEmail), - ))), - ])), - trailing: Transform( - 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), - onPressed: () => controller.selectMailboxLocation(context) - )) - ), + child: Material( + color: Colors.transparent, + child: InkWell( + onTap: () => controller.selectMailboxLocation(context), + customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), + child: Row(children: [ + const SizedBox(width: 12), + Obx(() => SvgPicture.asset( + controller.selectedMailbox.value?.getMailboxIcon(_imagePaths) ?? _imagePaths.icFolderMailbox, + width: BuildUtils.isWeb ? 20 : 24, + height: BuildUtils.isWeb ? 20 : 24, + fit: BoxFit.fill)), + const SizedBox(width: 12), + Expanded(child: Obx(() => Text( + controller.selectedMailbox.value?.name?.name ?? AppLocalizations.of(context).allMailboxes, + maxLines: 1, + softWrap: CommonTextStyle.defaultSoftWrap, + overflow: CommonTextStyle.defaultTextOverFlow, + style: TextStyle( + fontSize: 15, + color: controller.selectedMailbox.value == null + ? AppColor.colorHintSearchBar + : AppColor.colorNameEmail), + ))), + const SizedBox(width: 12), + IconButton( + color: AppColor.primaryColor, + icon: SvgPicture.asset( + _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)); + } + } } \ No newline at end of file diff --git a/lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart b/lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart index facc065d7..7b93b208d 100644 --- a/lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart +++ b/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'), - alignment: Alignment.center, - padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12), - decoration: const BoxDecoration( - 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() - ] - ) - ) + color: Colors.white, + height: 52, + padding: const EdgeInsets.symmetric(horizontal: 12), + child: Row(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 ) diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 7de502e12..00d3cbeac 100644 --- a/lib/l10n/intl_messages.arb +++ b/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": {} } -} +} \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index fc42394b6..c85f2c145 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/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'); + } } \ No newline at end of file