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

TF-1167 Improve more button in recipients of EmailView

Browse Source
This commit is contained in:
dab246
2023-01-17 17:03:00 +07:00
committed by Dat H. Pham
parent 3b3c2cc871
commit 5424479526
7 changed files with 522 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/email/presentation/widgets/email_receiver_builder.dart
+247
View File
@@ -0,0 +1,247 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
import 'package:model/email/prefix_email_address.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/extensions/email_address_extension.dart';
import 'package:model/extensions/list_email_address_extension.dart';
import 'package:model/extensions/presentation_email_extension.dart';
import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class EmailReceiverBuilder extends StatelessWidget {
static const double _maxSizeFullDisplayEmailAddressArrowDownButton = 30.0;
final PresentationEmail emailSelected;
final SingleEmailController controller;
final ResponsiveUtils responsiveUtils;
final ImagePaths imagePaths;
final double maxWidth;
const EmailReceiverBuilder({
Key? key,
required this.emailSelected,
required this.controller,
required this.responsiveUtils,
required this.imagePaths,
this.maxWidth = 200,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Obx(() => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: _buildEmailAddressOfReceiver(
context,
emailSelected,
controller.isDisplayFullEmailAddress,
maxWidth
)),
if (controller.isDisplayFullEmailAddress)
Padding(
padding: const EdgeInsets.only(top: 8),
child: MaterialTextButton(
onTap: controller.collapseEmailAddress,
label: AppLocalizations.of(context).hide,
)
)
]
));
}
Widget _buildEmailAddressOfReceiver(
BuildContext context,
PresentationEmail presentationEmail,
bool isDisplayFull,
double maxWidth
) {
if (!isDisplayFull && presentationEmail.numberOfAllEmailAddress() > 1) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 40,
color: Colors.white,
constraints: BoxConstraints(maxWidth: _getMaxWidthEmailAddressDisplayed(context, maxWidth)),
child: ListView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
children: [
if (presentationEmail.to.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.to,
isDisplayFull
),
if (presentationEmail.cc.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.cc,
isDisplayFull
),
if (presentationEmail.bcc.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.bcc,
isDisplayFull
),
]
),
),
_buildArrowDownButton()
]
);
} else {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (presentationEmail.to.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.to,
isDisplayFull
),
if (presentationEmail.cc.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.cc,
isDisplayFull
),
if (presentationEmail.bcc.numberEmailAddress() > 0)
_buildEmailAddressByPrefix(
context,
presentationEmail,
PrefixEmailAddress.bcc,
isDisplayFull
),
],
);
}
}
Widget _buildEmailAddressByPrefix(
BuildContext context,
PresentationEmail presentationEmail,
PrefixEmailAddress prefixEmailAddress,
bool isDisplayFull
) {
return Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
'${prefixEmailAddress.asName(context)}:',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: AppColor.colorEmailAddressFull
)
),
),
if (!isDisplayFull && presentationEmail.numberOfAllEmailAddress() > 1)
_buildListEmailAddressWidget(
context,
prefixEmailAddress.listEmailAddress(presentationEmail),
isDisplayFull
)
else
Expanded(child: _buildListEmailAddressWidget(
context,
prefixEmailAddress.listEmailAddress(presentationEmail),
isDisplayFull
))
]
),
);
}
Widget _buildListEmailAddressWidget(
BuildContext context,
List<EmailAddress> listEmailAddress,
bool isDisplayFull
) {
final lastEmailAddress = listEmailAddress.last;
final emailAddressWidgets = listEmailAddress.map((emailAddress) {
return MaterialTextButton(
label: lastEmailAddress == emailAddress
? emailAddress.asString()
: '${emailAddress.asString()},',
onTap: () => controller.openEmailAddressDialog(context, emailAddress),
borderRadius: 8,
labelColor: Colors.black,
labelSize: 16,
softWrap: CommonTextStyle.defaultSoftWrap,
overflow: CommonTextStyle.defaultTextOverFlow,
);
}).toList();
if (isDisplayFull) {
return Wrap(children: emailAddressWidgets);
} else {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
crossAxisAlignment:CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: emailAddressWidgets
),
);
}
}
double _getMaxWidthEmailAddressDisplayed(BuildContext context, double maxWidth) {
if (responsiveUtils.isPortraitMobile(context)) {
return maxWidth - _maxSizeFullDisplayEmailAddressArrowDownButton;
} else if (responsiveUtils.isWebDesktop(context)) {
return maxWidth / 2;
} else {
return maxWidth * 3/4;
}
}
Widget _buildArrowDownButton() {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: controller.expandEmailAddress,
customBorder: const CircleBorder(),
child: Container(
padding: const EdgeInsets.all(5),
color: Colors.transparent,
constraints: const BoxConstraints(
maxHeight: _maxSizeFullDisplayEmailAddressArrowDownButton,
maxWidth: _maxSizeFullDisplayEmailAddressArrowDownButton
),
child: SvgPicture.asset(
imagePaths.icChevronDown,
width: 16,
height: 16,
fit: BoxFit.fill
),
),
),
);
}
}
lib/features/email/presentation/widgets/email_sender_builder.dart
+61
View File
@@ -0,0 +1,61 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:flutter/material.dart';
import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
import 'package:model/extensions/email_address_extension.dart';
import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
typedef OnOpenEmailAddressDetailAction = Function(BuildContext context, EmailAddress emailAddress);
class EmailSenderBuilder extends StatelessWidget {
final EmailAddress emailAddress;
final OnOpenEmailAddressDetailAction? openEmailAddressDetailAction;
const EmailSenderBuilder({
Key? key,
required this.emailAddress,
this.openEmailAddressDetailAction,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (emailAddress.displayName.isNotEmpty)
MaterialTextButton(
label: emailAddress.displayName,
onTap: () => openEmailAddressDetailAction?.call(context, emailAddress),
borderRadius: 8,
padding: const EdgeInsets.all(3),
labelSize: 20,
labelColor: Colors.black,
labelWeight: FontWeight.bold,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: MaterialTextButton(
label: '<${emailAddress.emailAddress}>',
onTap: () => openEmailAddressDetailAction?.call(context, emailAddress),
borderRadius: 8,
padding: const EdgeInsets.all(3),
labelSize: 16,
labelColor: AppColor.colorEmailAddressFull,
labelWeight: FontWeight.w500,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap
),
)
]
)
);
}
}
lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart
+74
View File
@@ -0,0 +1,74 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:flutter/material.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/extensions/presentation_email_extension.dart';
import 'package:tmail_ui_user/features/base/widget/email_avatar_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_receiver_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/email_sender_builder.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/received_time_builder.dart';
class InformationSenderAndReceiverBuilder extends StatelessWidget {
final SingleEmailController controller;
final PresentationEmail emailSelected;
final ResponsiveUtils responsiveUtils;
final ImagePaths imagePaths;
const InformationSenderAndReceiverBuilder({
Key? key,
required this.controller,
required this.emailSelected,
required this.responsiveUtils,
required this.imagePaths
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
crossAxisAlignment: emailSelected.numberOfAllEmailAddress() > 0
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
EmailAvatarBuilder(emailSelected: emailSelected),
const SizedBox(width: 16),
Expanded(child: LayoutBuilder(builder: (context, constraints) {
return Transform(
transform: Matrix4.translationValues(0.0, -5.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (emailSelected.from?.isNotEmpty == true)
Row(children: [
Expanded(child: Transform(
transform: Matrix4.translationValues(-5.0, 0.0, 0.0),
child: EmailSenderBuilder(
emailAddress: emailSelected.from!.first,
openEmailAddressDetailAction: controller.openEmailAddressDialog,
)
)),
const SizedBox(width: 12),
ReceivedTimeBuilder(emailSelected),
]),
if (emailSelected.numberOfAllEmailAddress() > 0)
EmailReceiverBuilder(
controller: controller,
emailSelected: emailSelected,
responsiveUtils: responsiveUtils,
imagePaths: imagePaths,
maxWidth: constraints.maxWidth,
)
]
),
);
})),
]
),
);
}
}
lib/features/email/presentation/widgets/received_time_builder.dart
+39
View File
@@ -0,0 +1,39 @@
import 'package:core/domain/extensions/datetime_extension.dart';
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/style_utils.dart';
import 'package:flutter/material.dart';
import 'package:model/email/presentation_email.dart';
import 'package:model/extensions/presentation_email_extension.dart';
class ReceivedTimeBuilder extends StatelessWidget {
final PresentationEmail emailSelected;
const ReceivedTimeBuilder(
this.emailSelected, {
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints(maxWidth: 100),
color: Colors.transparent,
child: Text(
emailSelected.getReceivedAt(
Localizations.localeOf(context).toLanguageTag(),
pattern: emailSelected.receivedAt?.value.toLocal().toPatternForEmailView()
),
maxLines: 1,
overflow: CommonTextStyle.defaultTextOverFlow,
softWrap: CommonTextStyle.defaultSoftWrap,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: AppColor.colorEmailAddressFull
)
),
);
}
}