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

TF-390 Apply new ui composer for mobile

Browse Source
This commit is contained in:
dab246
2022-03-24 11:18:49 +07:00
committed by Dat H. Pham
parent 8700959362
commit 5ca2f2a572
4 changed files with 358 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/composer/presentation/composer_controller.dart
+14 -13
View File
@@ -57,8 +57,6 @@ class ComposerController extends BaseController {
final _imagePaths = Get.find<ImagePaths>(); final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>(); final _responsiveUtils = Get.find<ResponsiveUtils>();
final expandMode = ExpandMode.COLLAPSE.obs;
final expandModeMobile = ExpandMode.EXPAND.obs;
final expandModeAttachments = ExpandMode.EXPAND.obs; final expandModeAttachments = ExpandMode.EXPAND.obs;
final composerArguments = Rxn<ComposerArguments>(); final composerArguments = Rxn<ComposerArguments>();
final isEnableEmailSendButton = false.obs; final isEnableEmailSendButton = false.obs;
@@ -154,7 +152,6 @@ class ComposerController extends BaseController {
toEmailAddressController.dispose(); toEmailAddressController.dispose();
ccEmailAddressController.dispose(); ccEmailAddressController.dispose();
bccEmailAddressController.dispose(); bccEmailAddressController.dispose();
toEmailAddressFocusNode.dispose();
super.onClose(); super.onClose();
} }
@@ -626,8 +623,6 @@ class ComposerController extends BaseController {
final isChanged = await _isEmailChanged(context, arguments); final isChanged = await _isEmailChanged(context, arguments);
if (isChanged) { if (isChanged) {
log('ComposerController::saveEmailAsDrafts(): saveEmailAsDrafts isChanged: $isChanged'); log('ComposerController::saveEmailAsDrafts(): saveEmailAsDrafts isChanged: $isChanged');
_saveEmailAddress();
final newEmail = await _generateEmail(mapDefaultMailboxId, userProfile, asDrafts: true); final newEmail = await _generateEmail(mapDefaultMailboxId, userProfile, asDrafts: true);
final accountId = session.accounts.keys.first; final accountId = session.accounts.keys.first;
final oldEmail = arguments.presentationEmail; final oldEmail = arguments.presentationEmail;
@@ -683,9 +678,8 @@ class ComposerController extends BaseController {
if (!kIsWeb) { if (!kIsWeb) {
htmlEditorApi?.unfocus(context); htmlEditorApi?.unfocus(context);
htmlControllerBrowser.clearFocus(); htmlControllerBrowser.clearFocus();
} else {
FocusManager.instance.primaryFocus?.unfocus();
} }
FocusManager.instance.primaryFocus?.unfocus();
} }
void closeComposerWeb() { void closeComposerWeb() {
@@ -754,17 +748,23 @@ class ComposerController extends BaseController {
} }
} }
void collapseComposer(ExpandMode expandMode) {
expandModeMobile.value = expandMode;
}
void addEmailAddressType(PrefixEmailAddress prefixEmailAddress) { void addEmailAddressType(PrefixEmailAddress prefixEmailAddress) {
listEmailAddressType.add(prefixEmailAddress); listEmailAddressType.add(prefixEmailAddress);
} }
void deleteEmailAddressType(PrefixEmailAddress prefixEmailAddress) { void deleteEmailAddressType(PrefixEmailAddress prefixEmailAddress) {
listEmailAddressType.remove(prefixEmailAddress); listEmailAddressType.remove(prefixEmailAddress);
updateListEmailAddress(prefixEmailAddress, List.empty()); updateListEmailAddress(prefixEmailAddress, <EmailAddress>[]);
switch(prefixEmailAddress) {
case PrefixEmailAddress.cc:
ccEmailAddressController.clear();
break;
case PrefixEmailAddress.bcc:
bccEmailAddressController.clear();
break;
default:
break;
}
} }
void onSubjectEmailFocusChange(bool isFocus) { void onSubjectEmailFocusChange(bool isFocus) {
@@ -825,7 +825,8 @@ class ComposerController extends BaseController {
} }
} }
void closeComposer(BuildContext context) { void closeComposer() {
FocusManager.instance.primaryFocus?.unfocus();
popBack(); popBack();
} }
} }
lib/features/composer/presentation/composer_view.dart
+308 -211
View File
@@ -24,130 +24,156 @@ class ComposerView extends GetWidget<ComposerController> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ResponsiveWidget( return ResponsiveWidget(
responsiveUtils: responsiveUtils, responsiveUtils: responsiveUtils,
mobile: WillPopScope( mobile: _buildComposerViewForMobile(context),
onWillPop: () async { tablet: _buildComposerViewForTablet(context),
controller.saveEmailAsDrafts(context); tabletLarge: _buildComposerViewForTablet(context),
return true; desktop: _buildComposerViewForTablet(context),
}, );
child: GestureDetector( }
onTap: () {
controller.clearFocusEditor(context); Widget _buildComposerViewForMobile(BuildContext context) {
}, return WillPopScope(
child: Scaffold( onWillPop: () async {
backgroundColor: AppColor.primaryLightColor, controller.saveEmailAsDrafts(context);
body: SafeArea( return true;
right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), },
left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context), child: GestureDetector(
child: Container( onTap: () {
color: Colors.white, controller.clearFocusEditor(context);
child: Column(children: [ },
Obx(() => Padding( child: Scaffold(
padding: EdgeInsets.only(left: 8, right: 8, backgroundColor: Colors.white,
top: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context) ? 16 : 0, body: SafeArea(
bottom: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context) ? 8 : 0), right: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
child: _buildAppBar(context, controller.isEnableEmailSendButton.value, controller.expandModeMobile.value),)), left: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
Obx(() => controller.expandModeMobile == ExpandMode.COLLAPSE child: Container(
? Divider(color: AppColor.colorDividerComposer, height: 1) color: Colors.white,
: SizedBox.shrink()), child: Column(children: [
Expanded(child: _buildEditorAndAttachments(context)) Obx(() => _buildAppBar(context, controller.isEnableEmailSendButton.value)),
]) Divider(color: AppColor.colorDividerComposer, height: 1),
) Expanded(child: _buildBodyMobile(context))
), ])
) )
) ),
), )
tablet: WillPopScope( )
onWillPop: () async { );
controller.saveEmailAsDrafts(context); }
return true;
}, Widget _buildComposerViewForTablet(BuildContext context) {
child: GestureDetector( return WillPopScope(
onTap: () { onWillPop: () async {
controller.clearFocusEditor(context); controller.saveEmailAsDrafts(context);
}, return true;
child: Scaffold( },
child: GestureDetector(
onTap: () {
controller.clearFocusEditor(context);
},
child: Scaffold(
backgroundColor: Colors.black38, backgroundColor: Colors.black38,
body: Align(alignment: Alignment.center, child: Card( body: Align(alignment: Alignment.center, child: Card(
color: Colors.transparent, color: Colors.transparent,
elevation: 20, elevation: 20,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(24))),
shadowColor: Colors.transparent,
child: Container( child: Container(
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(10))), decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(24))),
width: responsiveUtils.getSizeScreenWidth(context) * 0.85, width: responsiveUtils.getSizeScreenWidth(context) * 0.9,
height: responsiveUtils.getSizeScreenHeight(context) * 0.85, height: responsiveUtils.getSizeScreenHeight(context) * 0.9,
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)), borderRadius: BorderRadius.all(Radius.circular(24)),
child: SafeArea( child: SafeArea(
child: Column(children: [ child: Column(children: [
Obx(() => Padding( Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildAppBar(context, controller.isEnableEmailSendButton.value)),
padding: EdgeInsets.only(left: 8, right: 8), Padding(padding: EdgeInsets.only(top: 8), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
child: _buildAppBar(context, controller.isEnableEmailSendButton.value, controller.expandModeMobile.value),)), Expanded(child: _buildBodyTablet(context)),
Obx(() => controller.expandModeMobile == ExpandMode.COLLAPSE Divider(color: AppColor.colorDividerComposer, height: 1),
? Divider(color: AppColor.colorDividerComposer, height: 1) Obx(() => _buildBottomBar(context, controller.isEnableEmailSendButton.value)),
: SizedBox.shrink()), ]),
Expanded(child: _buildEditorAndAttachments(context))
])
) )
) )
) )
)) ))
) )
) )
)
); );
} }
Widget _buildAppBar(BuildContext context, bool isEnableSendButton, ExpandMode expandModeMobile) { Widget _buildAppBar(BuildContext context, bool isEnableSendButton) {
return Row(children: [ return Container(
Material( padding: responsiveUtils.isMobile(context) ? EdgeInsets.all(8) : EdgeInsets.zero,
type: MaterialType.circle, color: Colors.white,
color: Colors.transparent, child: Row(
child: TextButton( children: [
child: Text( buildIconWeb(
AppLocalizations.of(context).cancel, icon: SvgPicture.asset(imagePaths.icClose, width: 30, height: 30, fit: BoxFit.fill),
style: TextStyle(fontWeight: FontWeight.normal, fontSize: 17, color: AppColor.colorTextButton)), tooltip: AppLocalizations.of(context).close,
onPressed: () { iconPadding: EdgeInsets.zero,
onTap: () {
controller.saveEmailAsDrafts(context); controller.saveEmailAsDrafts(context);
controller.closeComposer(context); controller.closeComposer();
} }),
) Expanded(child: _buildTitleComposer(context)),
), buildIconWeb(
if (expandModeMobile == ExpandMode.EXPAND) icon: SvgPicture.asset(
Spacer(), isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable,
if (expandModeMobile == ExpandMode.COLLAPSE) fit: BoxFit.fill),
Expanded(child: Text( tooltip: AppLocalizations.of(context).send,
AppLocalizations.of(context).new_message.capitalizeFirstEach, onTap: () => controller.sendEmailAction(context)),
overflow: TextOverflow.ellipsis, ]
textAlign: TextAlign.center, ),
maxLines: 1, );
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600, color: Colors.black),
)),
buildIconWeb(
icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).pick_attachments,
onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
if (expandModeMobile == ExpandMode.COLLAPSE)
buildIconWeb(
icon: SvgPicture.asset(isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable, fit: BoxFit.fill),
tooltip: AppLocalizations.of(context).send,
onTap: () => controller.sendEmailAction(context)),
]);
} }
Widget _buildTitleComposer(BuildContext context, bool isEnableSendButton) { Widget _buildBottomBar(BuildContext context, bool isEnableSendButton) {
return Row(children: [ return Container(
Expanded(child: Text( padding: EdgeInsets.symmetric(vertical: 16),
AppLocalizations.of(context).new_message.capitalizeFirstEach, color: Colors.white,
overflow: TextOverflow.ellipsis, child: Row(mainAxisAlignment: MainAxisAlignment.center,
maxLines: 1, children: [
style: TextStyle(fontSize: 34, fontWeight: FontWeight.w700, color: Colors.black), buildTextButton(
)), AppLocalizations.of(context).cancel,
buildIconWeb( textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.lineItemListColor),
iconSize: 36, backgroundColor: AppColor.emailAddressChipColor,
iconPadding: EdgeInsets.zero, width: 150,
icon: SvgPicture.asset(isEnableSendButton ? imagePaths.icSendMobile : imagePaths.icSendDisable, width: 36, height: 36, fit: BoxFit.fill), height: 44,
tooltip: AppLocalizations.of(context).send, radius: 10,
onTap: () => controller.sendEmailAction(context)), onTap: () => controller.closeComposer()),
]); SizedBox(width: 12),
buildTextButton(
AppLocalizations.of(context).save_to_drafts,
textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 17, color: AppColor.colorTextButton),
backgroundColor: AppColor.emailAddressChipColor,
width: 150,
height: 44,
radius: 10,
onTap: () {
controller.saveEmailAsDrafts(context);
controller.closeComposer();
}),
SizedBox(width: 12),
buildTextButton(
AppLocalizations.of(context).send,
width: 150,
height: 44,
radius: 10,
onTap: () => controller.sendEmailAction(context)),
]
),
);
}
Widget _buildTitleComposer(BuildContext context) {
return Obx(() => Text(
controller.subjectEmail.isNotEmpty == true
? controller.subjectEmail.value ?? ''
: AppLocalizations.of(context).new_message.capitalizeFirstEach,
overflow: TextOverflow.ellipsis,
maxLines: 1,
textAlign: TextAlign.center,
style: TextStyle(fontSize: responsiveUtils.isMobile(context) ? 17 : 24, fontWeight: FontWeight.bold, color: Colors.black),
));
} }
List<Widget> _pickAttachmentsActionTiles(BuildContext context) { List<Widget> _pickAttachmentsActionTiles(BuildContext context) {
@@ -177,122 +203,193 @@ class ComposerView extends GetWidget<ComposerController> {
} }
Widget _buildEmailAddress(BuildContext context) { Widget _buildEmailAddress(BuildContext context) {
return Column(children: [ return Column(
Obx(() => (EmailAddressInputBuilder( children: [
context, Obx(() => Padding(
imagePaths, padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
PrefixEmailAddress.to, child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
controller.listToEmailAddress, PrefixEmailAddress.to,
controller.listEmailAddressType, controller.listToEmailAddress,
controller: controller.toEmailAddressController, controller.listEmailAddressType,
isInitial: controller.isInitialRecipient.value) expandMode: controller.toAddressExpandMode.value,
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress)) controller: controller.toEmailAddressController,
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word))) focusNode: controller.toEmailAddressFocusNode,
.build() isInitial: controller.isInitialRecipient.value)
), ..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
Obx(() => controller.expandMode.value == ExpandMode.EXPAND ..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
? Divider(color: AppColor.colorDividerComposer, height: 1) ..addOnAddEmailAddressTypeAction((prefixEmailAddress) => controller.addEmailAddressType(prefixEmailAddress))
: SizedBox.shrink()), ..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
Obx(() => controller.expandMode.value == ExpandMode.EXPAND ..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
? (EmailAddressInputBuilder( .build()
context, )),
imagePaths, Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
PrefixEmailAddress.cc, ? Divider(color: AppColor.colorDividerComposer, height: 1)
controller.listCcEmailAddress, : SizedBox.shrink()),
controller.listEmailAddressType, Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
controller: controller.ccEmailAddressController, ? Padding(
isInitial: controller.isInitialRecipient.value,) padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress)) child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word))) PrefixEmailAddress.cc,
.build() controller.listCcEmailAddress,
: SizedBox.shrink() controller.listEmailAddressType,
), expandMode: controller.ccAddressExpandMode.value,
Obx(() => controller.expandMode.value == ExpandMode.EXPAND controller: controller.ccEmailAddressController,
? Divider(color: AppColor.colorDividerComposer, height: 1) isInitial: controller.isInitialRecipient.value,)
: SizedBox.shrink()), ..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
Obx(() => controller.expandMode.value == ExpandMode.EXPAND ..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
? (EmailAddressInputBuilder( ..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
context, ..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
imagePaths, ..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
PrefixEmailAddress.bcc, .build())
controller.listBccEmailAddress, : SizedBox.shrink()
controller.listEmailAddressType, ),
controller: controller.bccEmailAddressController, Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
isInitial: controller.isInitialRecipient.value,) ? Divider(color: AppColor.colorDividerComposer, height: 1)
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress)) : SizedBox.shrink()),
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word))) Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
.build() ? Padding(
: SizedBox.shrink() padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
), child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
]); PrefixEmailAddress.bcc,
controller.listBccEmailAddress,
controller.listEmailAddressType,
expandMode: controller.bccAddressExpandMode.value,
controller: controller.bccEmailAddressController,
isInitial: controller.isInitialRecipient.value,)
..addOnFocusEmailAddressChangeAction((prefixEmailAddress, focus) => controller.onEmailAddressFocusChange(prefixEmailAddress, focus))
..addOnShowFullListEmailAddressAction((prefixEmailAddress) => controller.showFullEmailAddress(prefixEmailAddress))
..addOnDeleteEmailAddressTypeAction((prefixEmailAddress) => controller.deleteEmailAddressType(prefixEmailAddress))
..addOnUpdateListEmailAddressAction((prefixEmailAddress, listEmailAddress) => controller.updateListEmailAddress(prefixEmailAddress, listEmailAddress))
..addOnSuggestionEmailAddress((word) => controller.getAutoCompleteSuggestion(word)))
.build())
: SizedBox.shrink()
),
],
);
} }
Widget _buildSubjectEmail(BuildContext context) { Widget _buildSubjectEmail(BuildContext context) {
return Row( return Row(
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ Padding(
Padding( padding: EdgeInsets.only(right: 8),
padding: EdgeInsets.only(right: 8, top: 16), child: Text(
child: Text( '${AppLocalizations.of(context).subject_email}:',
'${AppLocalizations.of(context).subject_email}:', style: TextStyle(fontSize: 15, color: AppColor.colorHintEmailAddressInput))),
style: TextStyle(fontSize: 15, color: AppColor.colorHintEmailAddressInput))), Expanded(
Expanded( child: FocusScope(child: Focus(
child: (TextFieldBuilder() onFocusChange: (focus) => controller.onSubjectEmailFocusChange(focus),
..key(Key('subject_email_input')) child: (TextFieldBuilder()
..cursorColor(AppColor.colorTextButton) ..key(Key('subject_email_input'))
..onChange((value) => controller.setSubjectEmail(value)) ..cursorColor(AppColor.colorTextButton)
..textStyle(TextStyle(color: AppColor.colorEmailAddress, fontSize: 15)) ..maxLines(responsiveUtils.isMobile(context) ? null : 1)
..textDecoration(InputDecoration(contentPadding: EdgeInsets.zero, border: InputBorder.none)) ..onChange((value) => controller.setSubjectEmail(value))
..addController(controller.subjectEmailInputController)) ..textStyle(TextStyle(color: Colors.black, fontSize: 15, fontWeight: FontWeight.normal))
.build() ..textDecoration(InputDecoration(contentPadding: EdgeInsets.zero, border: InputBorder.none))
) ..addController(controller.subjectEmailInputController))
] .build(),
))
)
]
); );
} }
Widget _buildEditorAndAttachments(BuildContext context) { Widget _buildListButton(BuildContext context) {
return NotificationListener<ScrollNotification>( return Transform(
onNotification: (ScrollNotification scrollInfo) { transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
if (scrollInfo is ScrollEndNotification) { child: Padding(
if (scrollInfo.metrics.pixels >= 30) { padding: EdgeInsets.symmetric(vertical: 5),
controller.collapseComposer(ExpandMode.COLLAPSE); child: Row(children: [
} else if (scrollInfo.metrics.pixels <= scrollInfo.metrics.minScrollExtent) { buildIconWeb(
controller.collapseComposer(ExpandMode.EXPAND); icon: SvgPicture.asset(imagePaths.icAttachmentsComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
} tooltip: AppLocalizations.of(context).attach_file,
} onTap: () => controller.openPickAttachmentMenu(context, _pickAttachmentsActionTiles(context))),
return false; ])
},
child: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(children: [
Obx(() => Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: _buildTitleComposer(context, controller.isEnableEmailSendButton.value))),
Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildEmailAddress(context)),
Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildSubjectEmail(context)),
Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: Divider(color: AppColor.colorDividerComposer, height: 1)),
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: _buildAttachmentsTitle(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Obx(() => controller.attachments.isEmpty
? _buildAttachmentsLoadingView()
: SizedBox.shrink()),
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.only(bottom: 8, left: 16, right: 16),
child: _buildAttachmentsList(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Padding(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 20),
child: _buildComposerEditor(context)),
])
) )
); );
} }
Widget _buildBodyMobile(BuildContext context) {
return SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(children: [
_buildEmailAddress(context),
Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: _buildSubjectEmail(context)),
Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: EdgeInsets.symmetric(horizontal: 16), child: _buildListButton(context)),
Divider(color: AppColor.colorDividerComposer, height: 1),
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: _buildAttachmentsTitle(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Obx(() => controller.attachments.isEmpty
? _buildAttachmentsLoadingView()
: SizedBox.shrink()),
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.only(bottom: 8, left: 16, right: 16),
child: _buildAttachmentsList(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Padding(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 20),
child: _buildComposerEditor(context)),
])
);
}
Widget _buildBodyTablet(BuildContext context) {
return SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Column(children: [
Padding(
padding: EdgeInsets.only(left: 16),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Padding(padding: EdgeInsets.only(top: 20),
child: (AvatarBuilder()
..text('${controller.mailboxDashBoardController.userProfile.value?.getAvatarText() ?? ''}')
..size(56)
..addTextStyle(TextStyle(fontWeight: FontWeight.w600, fontSize: 28, color: Colors.white))
..backgroundColor(AppColor.colorAvatar))
.build()),
Expanded(child: Padding(
padding: EdgeInsets.only(left: 16),
child: Column(children: [
_buildEmailAddress(context),
Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(padding: EdgeInsets.only(right: 16), child: _buildSubjectEmail(context)),
Divider(color: AppColor.colorDividerComposer, height: 1),
_buildListButton(context),
]),
))
])),
Divider(color: AppColor.colorDividerComposer, height: 1),
Padding(
padding: EdgeInsets.only(left: 60, right: 25),
child: Column(children: [
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: _buildAttachmentsTitle(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Obx(() => controller.attachments.isEmpty
? _buildAttachmentsLoadingView()
: SizedBox.shrink()),
Obx(() => controller.attachments.isNotEmpty
? Padding(
padding: EdgeInsets.only(bottom: 8, left: 16, right: 16),
child: _buildAttachmentsList(context, controller.attachments, controller.expandModeAttachments.value))
: SizedBox.shrink()),
Padding(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 20, top: 10),
child: _buildComposerEditor(context)),
])
)
])
);
}
Widget _buildComposerEditor(BuildContext context) { Widget _buildComposerEditor(BuildContext context) {
return Obx(() { return Obx(() {
if (controller.composerArguments.value?.emailActionType == EmailActionType.compose) { if (controller.composerArguments.value?.emailActionType == EmailActionType.compose) {
lib/features/composer/presentation/composer_view_web.dart
+3 -3
View File
@@ -310,7 +310,7 @@ class ComposerView extends GetWidget<ComposerController> {
children: [ children: [
Obx(() => Padding( Obx(() => Padding(
padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0), padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
child: (EmailAddressInputBuilder(context, imagePaths, child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
PrefixEmailAddress.to, PrefixEmailAddress.to,
controller.listToEmailAddress, controller.listToEmailAddress,
controller.listEmailAddressType, controller.listEmailAddressType,
@@ -331,7 +331,7 @@ class ComposerView extends GetWidget<ComposerController> {
Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.cc) == true
? Padding( ? Padding(
padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0), padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
child: (EmailAddressInputBuilder(context, imagePaths, child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
PrefixEmailAddress.cc, PrefixEmailAddress.cc,
controller.listCcEmailAddress, controller.listCcEmailAddress,
controller.listEmailAddressType, controller.listEmailAddressType,
@@ -352,7 +352,7 @@ class ComposerView extends GetWidget<ComposerController> {
Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true Obx(() => controller.listEmailAddressType.contains(PrefixEmailAddress.bcc) == true
? Padding( ? Padding(
padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0), padding: EdgeInsets.only(left: responsiveUtils.isMobile(context) ? 16 : 0),
child: (EmailAddressInputBuilder(context, imagePaths, child: (EmailAddressInputBuilder(context, imagePaths, responsiveUtils,
PrefixEmailAddress.bcc, PrefixEmailAddress.bcc,
controller.listBccEmailAddress, controller.listBccEmailAddress,
controller.listEmailAddressType, controller.listEmailAddressType,
lib/features/composer/presentation/widgets/email_address_input_builder.dart
+33 -28
View File
@@ -23,6 +23,7 @@ class EmailAddressInputBuilder {
final BuildContext _context; final BuildContext _context;
final ImagePaths _imagePaths; final ImagePaths _imagePaths;
final ResponsiveUtils _responsiveUtils;
final ExpandMode expandMode; final ExpandMode expandMode;
final PrefixEmailAddress _prefixEmailAddress; final PrefixEmailAddress _prefixEmailAddress;
final List<PrefixEmailAddress> _listEmailAddressType; final List<PrefixEmailAddress> _listEmailAddressType;
@@ -30,7 +31,7 @@ class EmailAddressInputBuilder {
final FocusNode? focusNode; final FocusNode? focusNode;
final bool? isInitial; final bool? isInitial;
List<EmailAddress> _listEmailAddress; List<EmailAddress> _listEmailAddress = <EmailAddress>[];
OnUpdateListEmailAddressAction? _onUpdateListEmailAddressAction; OnUpdateListEmailAddressAction? _onUpdateListEmailAddressAction;
OnSuggestionEmailAddress? _onSuggestionEmailAddress; OnSuggestionEmailAddress? _onSuggestionEmailAddress;
@@ -66,6 +67,7 @@ class EmailAddressInputBuilder {
EmailAddressInputBuilder( EmailAddressInputBuilder(
this._context, this._context,
this._imagePaths, this._imagePaths,
this._responsiveUtils,
this._prefixEmailAddress, this._prefixEmailAddress,
this._listEmailAddress, this._listEmailAddress,
this._listEmailAddressType, this._listEmailAddressType,
@@ -94,7 +96,7 @@ class EmailAddressInputBuilder {
if (!_listEmailAddressType.contains(PrefixEmailAddress.cc)) if (!_listEmailAddressType.contains(PrefixEmailAddress.cc))
Transform( Transform(
transform: Matrix4.translationValues( transform: Matrix4.translationValues(
_listEmailAddressType.contains(PrefixEmailAddress.bcc) ? 0.0 : 16.0, _listEmailAddressType.contains(PrefixEmailAddress.bcc) ? 0.0 : _responsiveUtils.isMobile(_context) ? 24 : 16.0,
0.0, 0.0), 0.0, 0.0),
child: buildTextCircleButton(AppLocalizations.of(_context).cc_email_address_prefix, child: buildTextCircleButton(AppLocalizations.of(_context).cc_email_address_prefix,
textStyle: TextStyle( textStyle: TextStyle(
@@ -217,32 +219,35 @@ class EmailAddressInputBuilder {
} }
Widget _buildSuggestionItem(StateSetter setState, BuildContext context, TagsEditorState<EmailAddress> tagEditorState, EmailAddress emailAddress) { Widget _buildSuggestionItem(StateSetter setState, BuildContext context, TagsEditorState<EmailAddress> tagEditorState, EmailAddress emailAddress) {
return Container( return ListTile(
decoration: BoxDecoration( leading: Container(
borderRadius: BorderRadius.circular(8), width: 40,
border: Border.all(color: Colors.white), height: 40,
color: Colors.white), alignment: Alignment.center,
child: ListTile( decoration: BoxDecoration(
key: ObjectKey(emailAddress), shape: BoxShape.circle,
leading: CircleAvatar( color: AppColor.avatarColor,
backgroundColor: AppColor.avatarColor, border: Border.all(color: AppColor.colorShadowBgContentEmail, width: 1.0)),
child: Text( child: Text(
emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '', emailAddress.asString().isNotEmpty ? emailAddress.asString()[0].toUpperCase() : '',
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600))), style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600))),
title: Text( title: Text(
emailAddress.asString(), emailAddress.asString(),
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal)), maxLines: 1,
subtitle: emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty overflow: kIsWeb ? null : TextOverflow.ellipsis,
? Text( style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal)),
emailAddress.emailAddress, subtitle: emailAddress.displayName.isNotEmpty && emailAddress.emailAddress.isNotEmpty
style: TextStyle(color: AppColor.colorHintSearchBar, fontSize: 13, fontWeight: FontWeight.normal)) ? Text(
: null, emailAddress.emailAddress,
onTap: () { maxLines: 1,
setState(() => _listEmailAddress.add(emailAddress)); overflow: kIsWeb ? null : TextOverflow.ellipsis,
tagEditorState.selectSuggestion(emailAddress); style: TextStyle(color: AppColor.colorHintSearchBar, fontSize: 13, fontWeight: FontWeight.normal))
_onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress); : null,
}, onTap: () {
), setState(() => _listEmailAddress.add(emailAddress));
_onUpdateListEmailAddressAction?.call(_prefixEmailAddress, _listEmailAddress);
tagEditorState.selectSuggestion(emailAddress);
},
); );
} }