eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-984 Apply new design for mailbox creator view

Browse Source
This commit is contained in:
dab246
2022-10-10 22:46:29 +07:00
committed by Dat H. Pham
parent 1c6e5002f8
commit 3796e60401
10 changed files with 228 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/destination_picker/presentation/destination_picker_view.dart
+8 -45
View File
@@ -38,12 +38,12 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
}
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<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
+1 -1
View File
@@ -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
+2 -10
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+4 -1
View File
@@ -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
+183 -111
View File
@@ -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(
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<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(
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));
}
}
}
lib/features/mailbox_creator/presentation/widgets/app_bar_mailbox_creator_builder.dart
+13 -18
View File
@@ -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
)
lib/l10n/intl_messages.arb
+8 -14
View File
@@ -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
+5 -14
View File
@@ -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');
}
}