From 7f7dba14fbd6ed78cfb6d5b223efd535fcb8c5a7 Mon Sep 17 00:00:00 2001 From: dab246 Date: Fri, 25 Jul 2025 11:09:31 +0700 Subject: [PATCH] TF-2666 Improve new UI for edit recipient card on web Signed-off-by: dab246 --- .../email_address_with_copy_widget.dart | 3 + .../handle_edit_recipient_extension.dart | 63 ++++++++----------- .../view/edit_recipients_view.dart | 51 ++++++++------- 3 files changed, 59 insertions(+), 58 deletions(-) diff --git a/lib/features/base/widget/email_address_with_copy_widget.dart b/lib/features/base/widget/email_address_with_copy_widget.dart index e2c79b5d5..1642bb6ec 100644 --- a/lib/features/base/widget/email_address_with_copy_widget.dart +++ b/lib/features/base/widget/email_address_with_copy_widget.dart @@ -11,6 +11,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget { final OnCopyButtonAction onCopyButtonAction; final TextStyle? textStyle; final Color? copyIconColor; + final EdgeInsetsGeometry? copyIconMargin; const EmailAddressWithCopyWidget({ super.key, @@ -19,6 +20,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget { required this.onCopyButtonAction, this.textStyle, this.copyIconColor, + this.copyIconMargin, }); @override @@ -41,6 +43,7 @@ class EmailAddressWithCopyWidget extends StatelessWidget { iconColor: copyIconColor ?? AppColor.textSecondary.withOpacity(0.48), padding: const EdgeInsets.all(5), + margin: copyIconMargin, onTapActionCallback: onCopyButtonAction, ), ], diff --git a/lib/features/composer/presentation/extensions/handle_edit_recipient_extension.dart b/lib/features/composer/presentation/extensions/handle_edit_recipient_extension.dart index 9c436ec76..e15b82df8 100644 --- a/lib/features/composer/presentation/extensions/handle_edit_recipient_extension.dart +++ b/lib/features/composer/presentation/extensions/handle_edit_recipient_extension.dart @@ -90,71 +90,62 @@ extension HandleEditRecipientExtension on ComposerController { listToEmailAddress.remove(emailAddress); toAddressExpandMode.value = ExpandMode.EXPAND; toAddressExpandMode.refresh(); - - toEmailAddressController.text = emailAddress.emailAddress; - toEmailAddressController.value = toEmailAddressController.value.copyWith( + _setTextAndFocus( + controller: toEmailAddressController, + focusNode: toAddressFocusNode, text: emailAddress.emailAddress, - selection: TextSelection( - baseOffset: emailAddress.emailAddress.length, - extentOffset: emailAddress.emailAddress.length, - ), - composing: TextRange.empty, ); - toAddressFocusNode?.requestFocus(); break; case PrefixEmailAddress.cc: listCcEmailAddress.remove(emailAddress); ccAddressExpandMode.value = ExpandMode.EXPAND; ccAddressExpandMode.refresh(); - - ccEmailAddressController.text = emailAddress.emailAddress; - ccEmailAddressController.value = ccEmailAddressController.value.copyWith( + _setTextAndFocus( + controller: ccEmailAddressController, + focusNode: ccAddressFocusNode, text: emailAddress.emailAddress, - selection: TextSelection( - baseOffset: emailAddress.emailAddress.length, - extentOffset: emailAddress.emailAddress.length, - ), - composing: TextRange.empty, ); - ccAddressFocusNode?.requestFocus(); break; case PrefixEmailAddress.bcc: listBccEmailAddress.remove(emailAddress); bccAddressExpandMode.value = ExpandMode.EXPAND; bccAddressExpandMode.refresh(); - - bccEmailAddressController.text = emailAddress.emailAddress; - bccEmailAddressController.value = bccEmailAddressController.value.copyWith( + _setTextAndFocus( + controller: bccEmailAddressController, + focusNode: bccAddressFocusNode, text: emailAddress.emailAddress, - selection: TextSelection( - baseOffset: emailAddress.emailAddress.length, - extentOffset: emailAddress.emailAddress.length, - ), - composing: TextRange.empty, ); - bccAddressFocusNode?.requestFocus(); break; case PrefixEmailAddress.replyTo: listReplyToEmailAddress.remove(emailAddress); replyToAddressExpandMode.value = ExpandMode.EXPAND; replyToAddressExpandMode.refresh(); - - replyToEmailAddressController.text = emailAddress.emailAddress; - replyToEmailAddressController.value = replyToEmailAddressController.value.copyWith( + _setTextAndFocus( + controller: replyToEmailAddressController, + focusNode: replyToAddressFocusNode, text: emailAddress.emailAddress, - selection: TextSelection( - baseOffset: emailAddress.emailAddress.length, - extentOffset: emailAddress.emailAddress.length, - ), - composing: TextRange.empty, ); - replyToAddressFocusNode?.requestFocus(); break; default: break; } } + void _setTextAndFocus({ + required TextEditingController controller, + required FocusNode? focusNode, + required String text, + }) { + controller.text = text; + controller.selection = const TextSelection.collapsed(offset: -1); + WidgetsBinding.instance.addPostFrameCallback((_) { + focusNode?.requestFocus(); + Future.delayed(const Duration(milliseconds: 150), () { + controller.selection = TextSelection.collapsed(offset: text.length); + },); + }); + } + Future _createRuleFromEmailAddress(EmailAddress emailAddress) async { await mailboxDashBoardController.openCreateEmailRuleView( emailAddress: emailAddress, diff --git a/lib/features/composer/presentation/view/edit_recipients_view.dart b/lib/features/composer/presentation/view/edit_recipients_view.dart index f6c8341c6..81a1cf422 100644 --- a/lib/features/composer/presentation/view/edit_recipients_view.dart +++ b/lib/features/composer/presentation/view/edit_recipients_view.dart @@ -57,9 +57,9 @@ class EditRecipientsView extends StatelessWidget { Padding( padding: const EdgeInsetsDirectional.only( start: 16, - end: 24, - top: 16, - bottom: 16, + end: 16, + top: 21, + bottom: 21, ), child: Column( mainAxisSize: MainAxisSize.min, @@ -68,14 +68,14 @@ class EditRecipientsView extends StatelessWidget { children: [ UserAvatarBuilder( username: emailAddress.asString().firstLetterToUpperCase, - size: 67, - textStyle: ThemeUtils.textStyleInter500().copyWith( - fontSize: 33.5, - height: 50.25 / 33.5, - letterSpacing: 0.31, - color: AppColor.secondaryContrastText, + size: 42, + textStyle: ThemeUtils.textStyleInter600().copyWith( + fontSize: 16, + height: 22 / 16, + letterSpacing: -0.41, + color: Colors.white, ), - padding: const EdgeInsetsDirectional.only(end: 21), + padding: const EdgeInsetsDirectional.only(end: 16), ), Expanded( child: Column( @@ -84,10 +84,10 @@ class EditRecipientsView extends StatelessWidget { children: [ if (emailAddress.displayName.isNotEmpty) Padding( - padding: const EdgeInsetsDirectional.only(end: 12), + padding: const EdgeInsetsDirectional.only(end: 24), child: Text( emailAddress.displayName, - style: Theme.of(context).textTheme.headlineSmall?.copyWith( + style: Theme.of(context).textTheme.titleMedium?.copyWith( color: AppColor.textPrimary, ), overflow: TextOverflow.ellipsis, @@ -97,6 +97,13 @@ class EditRecipientsView extends StatelessWidget { EmailAddressWithCopyWidget( label: emailAddress.emailAddress, copyLabelIcon: imagePaths.icCopy, + textStyle: ThemeUtils.textStyleBodyBody2( + color: AppColor.steelGray400, + ), + copyIconMargin: const EdgeInsetsDirectional.only( + start: 7, + ), + copyIconColor: AppColor.steelGray400, onCopyButtonAction: onCopyAction, ), ], @@ -104,13 +111,14 @@ class EditRecipientsView extends StatelessWidget { ), ], ), - const SizedBox(height: 13), + const SizedBox(height: 12), Row( children: [ - Expanded( - child: SizedBox( - width: double.infinity, - height: 48, + Flexible( + child: Container( + constraints: const BoxConstraints(minWidth: 127), + margin: const EdgeInsetsDirectional.only(end: 8), + height: 36, child: ConfirmDialogButton( label: AppLocalizations.of(context).editEmail, backgroundColor: AppColor.primaryMain, @@ -119,11 +127,10 @@ class EditRecipientsView extends StatelessWidget { ), ), ), - const SizedBox(width: 8), - Expanded( - child: SizedBox( - width: double.infinity, - height: 48, + Flexible( + child: Container( + constraints: const BoxConstraints(minWidth: 134), + height: 36, child: ConfirmDialogButton( label: AppLocalizations.of(context).createARule, backgroundColor: Colors.white,