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

Change order of attachment and mail body on mobile

Browse Source 
Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-07-09 11:52:29 +07:00
committed by Dat H. Pham
parent 5e3f4458c5
commit 296065c0b7
28 changed files with 501 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/ic_file_download.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 12.5V15H4.99998V12.5H3.33331V15C3.33331 15.9167 4.08331 16.6667 4.99998 16.6667H15C15.9166 16.6667 16.6666 15.9167 16.6666 15V12.5H15ZM14.1666 9.16668L12.9916 7.99168L10.8333 10.1417V3.33334H9.16665V10.1417L7.00831 7.99168L5.83331 9.16668L9.99998 13.3333L14.1666 9.16668Z" fill="#55687D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 406 B

core/lib/presentation/extensions/color_extension.dart
+4 -2
View File
@@ -142,8 +142,6 @@ extension AppColor on Color {
static const colorShadowLayerTop = Color(0x1F000000);
static const colorDividerHorizontal = Color(0x1F000000);
static const colorEmailAddressFull = Color(0xFF818C99);
static const colorTitleHeaderAttachment = Color(0xFF818C99);
static const colorAttachmentIcon = Color(0xFFAEB7C2);
static const colorDividerDestinationPicker = Color(0x1F000000);
static const colorItemAlreadySelected = Color(0xFF818C99);
static const colorItemSelected = Color(0xFFF2F3F5);
@@ -246,6 +244,8 @@ extension AppColor on Color {
static const blue900 = Color(0xFF0F76E7);
static const m3Tertiary = Color(0xFF8C9CAF);
static const m3Tertiary60 = Color(0xFFD8E1EB);
static const m3Tertiary70 = Color(0xFFE5ECF3);
static const m3Tertiary20 = Color(0xFF71767C);
static const m3Neutral70 = Color(0xFFAEAAAE);
static const m3Neutral90 = Color(0xFFE6E1E5);
static const grayBackgroundColor = Color(0xFFF3F6F9);
@@ -260,9 +260,11 @@ extension AppColor on Color {
static const folderDivider = Color(0xFFE4E8EC);
static const gray424244 = Color(0xFF424244);
static const lightGrayF4F4F4 = Color(0xFFF4F4F4);
static const gray959DAD = Color(0xFF959DAD);
static const redFF3347 = Color(0xFFFF3347);
static const gray686E76 = Color(0xFF686E76);
static const lightGrayEBEDF0 = Color(0xFFEBEDF0);
static const gray99A2AD = Color(0xFF99A2AD);
static const textSecondary = Color(0xFF1C1B1F);
static const profileMenuDivider = Color(0xFF1D192B);
static const popupMenuItemHovered = Color(0xFFF8F8F8);
core/lib/presentation/resources/image_paths.dart
+1
View File
@@ -235,6 +235,7 @@ class ImagePaths {
String get icRadio => _getImagePath('ic_radio.svg');
String get icRadioSelected => _getImagePath('ic_radio_selected.svg');
String get icFileDownload => _getImagePath('ic_file_download.svg');
String get icTwakeWorkplace => _getIconPath('icon_twp.png');
String get animLottieTmail => _getAnimationPath('lottie-tmail.json');
core/lib/presentation/utils/theme_utils.dart
+18
View File
@@ -257,6 +257,24 @@ class ThemeUtils {
color: color ?? AppColor.primaryMain,
);
static TextStyle get textStyleM3LabelSmall => const TextStyle(
fontFamily: ConstantsUI.fontApp,
fontWeight: FontWeight.w500,
letterSpacing: 0.5,
fontSize: 11,
height: 16 / 11,
color: AppColor.m3Tertiary,
);
static TextStyle get textStyleM3TitleSmall => const TextStyle(
fontFamily: ConstantsUI.fontApp,
fontWeight: FontWeight.w500,
letterSpacing: 0.1,
fontSize: 14,
height: 20 / 14,
color: AppColor.m3Tertiary20,
);
static const TextStyle textStyleM3BodyMedium1 = TextStyle(
fontFamily: ConstantsUI.fontApp,
fontWeight: FontWeight.w400,
core/lib/presentation/views/button/tmail_button_widget.dart
-2
View File
@@ -159,7 +159,6 @@ class TMailButtonWidget extends StatelessWidget {
List<BoxShadow>? boxShadow,
EdgeInsetsGeometry? margin,
TextAlign? textAlign,
bool flexibleText = false,
BoxBorder? border,
int? maxLines,
Color? hoverColor,
@@ -186,7 +185,6 @@ class TMailButtonWidget extends StatelessWidget {
boxShadow: boxShadow,
margin: margin,
textAlign: textAlign,
flexibleText: flexibleText,
border: border,
maxLines: maxLines,
hoverColor: hoverColor,
lib/features/email/presentation/email_view.dart
+41 -22
View File
@@ -338,27 +338,6 @@ class EmailView extends GetWidget<SingleEmailController> {
presentationEmail: controller.currentEmail,
emailUnsubscribe: controller.emailUnsubscribe.value
)),
Obx(() {
if (controller.attachments.isNotEmpty) {
return EmailAttachmentsWidget(
responsiveUtils: controller.responsiveUtils,
attachments: controller.attachments,
imagePaths: controller.imagePaths,
onDragStarted: controller.mailboxDashBoardController.enableAttachmentDraggableApp,
onDragEnd: (details) {
controller.mailboxDashBoardController.disableAttachmentDraggableApp();
},
downloadAttachmentAction: (attachment) => controller.handleDownloadAttachmentAction(context, attachment),
viewAttachmentAction: (attachment) => controller.handleViewAttachmentAction(context, attachment),
onTapShowAllAttachmentFile: () => controller.openAttachmentList(context, controller.attachments),
showDownloadAllAttachmentsButton: controller.downloadAllButtonIsEnabled(),
onTapDownloadAllButton: () => controller.handleDownloadAllAttachmentsAction(context, 'TwakeMail-${DateTime.now()}'),
singleEmailControllerTag: tag,
);
} else {
return const SizedBox.shrink();
}
}),
Obx(() => EmailViewLoadingBarWidget(
viewState: controller.emailLoadedViewState.value
)),
@@ -524,7 +503,47 @@ class EmailView extends GetWidget<SingleEmailController> {
} else {
return const SizedBox.shrink();
}
})
}),
Obx(() {
if (controller.attachments.isNotEmpty) {
return EmailAttachmentsWidget(
responsiveUtils: controller.responsiveUtils,
attachments: controller.attachments,
imagePaths: controller.imagePaths,
onDragStarted: controller
.mailboxDashBoardController.enableAttachmentDraggableApp,
onDragEnd: (_) {
controller
.mailboxDashBoardController
.disableAttachmentDraggableApp();
},
downloadAttachmentAction: (attachment) =>
controller.handleDownloadAttachmentAction(
context,
attachment,
),
viewAttachmentAction: (attachment) =>
controller.handleViewAttachmentAction(
context,
attachment,
),
onTapShowAllAttachmentFile: () => controller.openAttachmentList(
context,
controller.attachments,
),
showDownloadAllAttachmentsButton:
controller.downloadAllButtonIsEnabled(),
onTapDownloadAllButton: () =>
controller.handleDownloadAllAttachmentsAction(
context,
'TwakeMail-${DateTime.now()}',
),
singleEmailControllerTag: tag,
);
} else {
return const SizedBox.shrink();
}
}),
],
);
}
lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart
-57
View File
@@ -1,57 +0,0 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:flutter/material.dart';
class AttachmentItemWidgetStyle {
static const double radius = 8;
static const double maxWidthMobile = 260;
static const double maxWidthTablet = 240;
static const double maxWidthTabletLarge = 200;
static const double height = 36;
static const double iconSize = 20;
static const double space = 8;
static const double downloadIconSize = 22;
static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 5);
static const Color borderColor = AppColor.attachmentFileBorderColor;
static TextStyle labelTextStyle =
ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: 14,
color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.w500,
);
static TextStyle dotsLabelTextStyle =
ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: 12,
color: AppColor.attachmentFileNameColor,
fontWeight: FontWeight.w500,
);
static TextStyle sizeLabelTextStyle =
ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: 12,
color: AppColor.attachmentFileSizeColor,
fontWeight: FontWeight.normal,
);
static double getMaxWidthItem({
required bool platformIsMobile,
required bool responsiveIsMobile,
required bool responsiveIsTablet,
required bool responsiveIsTabletLarge,
}) {
if (platformIsMobile) {
return responsiveIsMobile ? maxWidthMobile : maxWidthTablet;
} else {
if (responsiveIsTabletLarge) {
return maxWidthTabletLarge;
} else if (responsiveIsTablet) {
return maxWidthTablet;
} else {
return maxWidthMobile;
}
}
}
}
lib/features/email/presentation/styles/email_attachments_styles.dart
-34
View File
@@ -1,34 +0,0 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:flutter/material.dart';
class EmailAttachmentsStyles {
EmailAttachmentsStyles._();
static const double headerTextSize = 15;
static const double headerIconSize = 20;
static const double headerSpace = 8;
static const double marginHeader = 6;
static const double buttonTextSize = 16;
static const double buttonMoreAttachmentsTextSize = 14;
static const double buttonMoreMaxWidth = 120;
static const double buttonDownloadAllMaxWidth = 200;
static const double buttonBorderRadius = 8;
static const double listSpace = 8;
static const Color headerTextColor = AppColor.colorTitleHeaderAttachment;
static const Color headerIconColor = AppColor.colorAttachmentIcon;
static const Color buttonTextColor = AppColor.colorTextBody;
static const Color buttonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton;
static const FontWeight headerFontWeight = FontWeight.w400;
static const FontWeight buttonFontWeight = FontWeight.w400;
static const FontWeight buttonMoreAttachmentsFontWeight = FontWeight.w500;
static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 12, top: 16);
static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
static const EdgeInsetsGeometry mobileButtonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 3);
static const EdgeInsetsGeometry moreButtonMargin = EdgeInsetsDirectional.only(bottom: 2, start: 8);
static const EdgeInsetsGeometry mobileMoreButtonMargin = EdgeInsetsDirectional.only(end: 8);
static const attachmentsInfoPadding = EdgeInsetsDirectional.only(end: 8);
}
lib/features/email/presentation/utils/email_utils.dart
+4 -13
View File
@@ -18,8 +18,6 @@ import 'package:model/email/attachment.dart';
import 'package:tmail_ui_user/features/email/domain/state/download_attachment_for_web_state.dart';
import 'package:tmail_ui_user/features/email/domain/state/get_html_content_from_attachment_state.dart';
import 'package:tmail_ui_user/features/email/presentation/model/email_unsubscribe.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
import 'package:tmail_ui_user/features/thread/domain/constants/thread_constants.dart';
import 'package:tmail_ui_user/main/error/capability_validator.dart';
import 'package:tmail_ui_user/main/routes/route_utils.dart';
@@ -248,24 +246,17 @@ class EmailUtils {
if (attachments.isEmpty) return [];
final bool isMobile = responsiveUtils.isMobile(context);
log('EmailUtils::getAttachmentDisplayed:isMobile = $isMobile:');
if (isMobile) {
return attachments.length < 3 ? attachments : attachments.sublist(0, 2);
return attachments.length <= 3 ? attachments : attachments.sublist(0, 3);
}
final double maxWidthItem = AttachmentItemWidgetStyle.getMaxWidthItem(
platformIsMobile: platformIsMobile,
responsiveIsMobile: isMobile,
responsiveIsTablet: responsiveUtils.isTablet(context),
responsiveIsTabletLarge: responsiveUtils.isTabletLarge(context),
);
log('EmailUtils::getAttachmentDisplayed:maxWidthItem = $maxWidthItem:');
const double maxWidthItem = 260;
const double buttonMoreMaxWidth = 120;
final int possibleDisplayedCount =
((maxWidth - EmailAttachmentsStyles.buttonMoreMaxWidth) ~/ maxWidthItem)
((maxWidth - buttonMoreMaxWidth) ~/ maxWidthItem)
.clamp(0, attachments.length);
log('EmailUtils::getAttachmentDisplayed:possibleDisplayedCount = $possibleDisplayedCount:');
return possibleDisplayedCount == 0
? [attachments.first]
lib/features/email/presentation/widgets/attachment_item_widget.dart
+104 -88
View File
@@ -1,6 +1,8 @@
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/theme_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/presentation/views/container/tmail_container_widget.dart';
import 'package:core/utils/platform_info.dart';
import 'package:extended_text/extended_text.dart';
import 'package:filesize/filesize.dart';
@@ -10,7 +12,6 @@ import 'package:get/get.dart';
import 'package:model/email/attachment.dart';
import 'package:tmail_ui_user/features/email/presentation/controller/single_email_controller.dart';
import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_item_widget_style.dart';
import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
typedef OnDownloadAttachmentFileAction = void Function(Attachment attachment);
@@ -19,16 +20,17 @@ typedef OnViewAttachmentFileAction = void Function(Attachment attachment);
class AttachmentItemWidget extends StatelessWidget {
final Attachment attachment;
final ImagePaths imagePaths;
final double? width;
final OnDownloadAttachmentFileAction? downloadAttachmentAction;
final OnViewAttachmentFileAction? viewAttachmentAction;
final String? singleEmailControllerTag;
final _imagePaths = Get.find<ImagePaths>();
final _responsiveUtils = Get.find<ResponsiveUtils>();
AttachmentItemWidget({
const AttachmentItemWidget({
Key? key,
required this.attachment,
required this.imagePaths,
this.width,
this.downloadAttachmentAction,
this.viewAttachmentAction,
this.singleEmailControllerTag,
@@ -36,91 +38,105 @@ class AttachmentItemWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Obx(
() {
final controller = Get.find<SingleEmailController>(tag: singleEmailControllerTag);
final attachmentsViewState = controller.attachmentsViewState;
bool isLoading = false;
if (attachment.blobId != null) {
isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
return Obx(() {
final controller = Get.find<SingleEmailController>(tag: singleEmailControllerTag);
final attachmentsViewState = controller.attachmentsViewState;
bool isLoading = false;
if (attachment.blobId != null) {
isLoading = !EmailUtils.checkingIfAttachmentActionIsEnabled(
attachmentsViewState[attachment.blobId!]);
}
}
return Material(
color: Colors.transparent,
child: InkWell(
onTap: isLoading ? null : () => (viewAttachmentAction ?? downloadAttachmentAction)?.call(attachment),
customBorder: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius))
),
child: Container(
padding: AttachmentItemWidgetStyle.contentPadding,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
),
width: AttachmentItemWidgetStyle.getMaxWidthItem(
platformIsMobile: PlatformInfo.isMobile,
responsiveIsMobile: _responsiveUtils.isMobile(context),
responsiveIsTablet: _responsiveUtils.isTablet(context),
responsiveIsTabletLarge: _responsiveUtils.isTabletLarge(context),
),
child: Row(
children: [
isLoading
? const SizedBox(
width: AttachmentItemWidgetStyle.iconSize,
height: AttachmentItemWidgetStyle.iconSize,
child: CircularProgressIndicator(strokeWidth: 2))
: SvgPicture.asset(attachment.getIcon(_imagePaths),
width: AttachmentItemWidgetStyle.iconSize,
height: AttachmentItemWidgetStyle.iconSize,
fit: BoxFit.fill
),
const SizedBox(width: AttachmentItemWidgetStyle.space),
Expanded(
child: PlatformInfo.isCanvasKit
? ExtendedText(
(attachment.name ?? ''),
maxLines: 1,
overflowWidget: TextOverflowWidget(
position: TextOverflowPosition.middle,
clearType: TextOverflowClearType.clipRect,
child: Text(
"...",
style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
),
),
style: AttachmentItemWidgetStyle.labelTextStyle,
)
: Text(
(attachment.name ?? ''),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: AttachmentItemWidgetStyle.labelTextStyle,
)
),
const SizedBox(width: AttachmentItemWidgetStyle.space),
Text(
filesize(attachment.size?.value),
maxLines: 1,
style: AttachmentItemWidgetStyle.sizeLabelTextStyle,
),
TMailButtonWidget.fromIcon(
icon: _imagePaths.icDownloadAttachment,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(5),
iconSize: AttachmentItemWidgetStyle.downloadIconSize,
onTapActionCallback: isLoading
? null
: () => downloadAttachmentAction?.call(attachment)
)
]
)
const loadingIndicator = SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
);
final attachmentIcon = SvgPicture.asset(
attachment.getIcon(imagePaths),
width: 20,
height: 20,
fit: BoxFit.fill,
);
final attachmentTitleWithMiddleDots = ExtendedText(
attachment.generateFileName(),
maxLines: 1,
overflowWidget: TextOverflowWidget(
position: TextOverflowPosition.middle,
clearType: TextOverflowClearType.clipRect,
child: Text(
"...",
style: ThemeUtils.textStyleM3LabelLarge(
color: AppColor.m3SurfaceBackground,
),
),
);
}
);
),
style: ThemeUtils.textStyleM3LabelLarge(
color: AppColor.m3SurfaceBackground,
),
);
final attachmentTitleWithEndDots = Text(
attachment.generateFileName(),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleM3LabelLarge(
color: AppColor.m3SurfaceBackground,
),
);
final bodyItemWidget = Row(
children: [
isLoading ? loadingIndicator : attachmentIcon,
const SizedBox(width: 8),
Expanded(
child: PlatformInfo.isCanvasKit
? attachmentTitleWithMiddleDots
: attachmentTitleWithEndDots,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
filesize(attachment.size?.value),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleM3LabelSmall,
),
),
TMailButtonWidget.fromIcon(
icon: imagePaths.icFileDownload,
backgroundColor: Colors.transparent,
padding: const EdgeInsets.all(5),
iconColor: AppColor.steelGrayA540,
iconSize: 20,
onTapActionCallback:
isLoading ? null : () => _onTapDownloadAction(attachment),
)
],
);
return TMailContainerWidget(
height: 36,
borderRadius: 8,
border: Border.all(color: AppColor.m3Tertiary70),
padding: const EdgeInsets.symmetric(horizontal: 8),
backgroundColor: Colors.transparent,
width: width,
margin: const EdgeInsets.only(top: 8),
onTapActionCallback:
isLoading ? null : () => _onViewOrDownloadAction(attachment),
child: bodyItemWidget,
);
});
}
void _onTapDownloadAction(Attachment attachment) {
downloadAttachmentAction?.call(attachment);
}
void _onViewOrDownloadAction(Attachment attachment) {
(viewAttachmentAction ?? downloadAttachmentAction)?.call(attachment);
}
}
lib/features/email/presentation/widgets/attachments_info.dart
+88 -69
View File
@@ -3,10 +3,8 @@ import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/button/tmail_button_widget.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
class AttachmentsInfo extends StatelessWidget {
@@ -17,7 +15,6 @@ class AttachmentsInfo extends StatelessWidget {
required this.totalSizeInfo,
required this.responsiveUtils,
this.onTapShowAllAttachmentFile,
this.downloadAllEnabled = false,
this.onTapDownloadAllButton,
});
@@ -26,75 +23,97 @@ class AttachmentsInfo extends StatelessWidget {
final String totalSizeInfo;
final ResponsiveUtils responsiveUtils;
final VoidCallback? onTapShowAllAttachmentFile;
final bool downloadAllEnabled;
final VoidCallback? onTapDownloadAllButton;
@override
Widget build(BuildContext context) {
List<Widget> attachmentsAmountAndSize = [
SvgPicture.asset(
imagePaths.icAttachment,
width: EmailAttachmentsStyles.headerIconSize,
height: EmailAttachmentsStyles.headerIconSize,
colorFilter: EmailAttachmentsStyles.headerIconColor.asFilter(),
fit: BoxFit.fill
),
const SizedBox(width: EmailAttachmentsStyles.headerSpace),
Text(
AppLocalizations.of(context).titleHeaderAttachment(
numberOfAttachments,
totalSizeInfo,
),
style: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: EmailAttachmentsStyles.headerTextSize,
fontWeight: EmailAttachmentsStyles.headerFontWeight,
color: EmailAttachmentsStyles.headerTextColor
)
),
];
final showAllAttachments = (numberOfAttachments > 2)
? TMailButtonWidget(
text: AppLocalizations.of(context).showAll,
backgroundColor: Colors.transparent,
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
padding: EmailAttachmentsStyles.buttonPadding,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: EmailAttachmentsStyles.buttonTextSize,
color: EmailAttachmentsStyles.buttonTextColor,
fontWeight: EmailAttachmentsStyles.buttonFontWeight
),
onTapActionCallback: onTapShowAllAttachmentFile,
)
: const SizedBox.shrink();
List<Widget> downloadAllAttachments = downloadAllEnabled && !responsiveUtils.isMobile(context)
? [
const Spacer(),
TMailButtonWidget(
text: AppLocalizations.of(context).downloadAll,
icon: imagePaths.icDownloadAll,
iconAlignment: TextDirection.rtl,
backgroundColor: Colors.transparent,
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
padding: EmailAttachmentsStyles.buttonPadding,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: EmailAttachmentsStyles.buttonTextSize,
color: EmailAttachmentsStyles.buttonTextColor,
fontWeight: EmailAttachmentsStyles.buttonFontWeight
),
onTapActionCallback: onTapDownloadAllButton,
),
]
: const [];
return Row(
children: [
...attachmentsAmountAndSize,
if (!PlatformInfo.isWeb) const Spacer(),
showAllAttachments,
...downloadAllAttachments,
],
final iconAttachment = SvgPicture.asset(
imagePaths.icAttachment,
width: 14,
height: 14,
colorFilter: AppColor.gray959DAD.asFilter(),
fit: BoxFit.fill,
);
final titleHeaderAttachment = Text(
AppLocalizations.of(context).titleHeaderAttachment(
numberOfAttachments,
totalSizeInfo,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: ThemeUtils.textStyleInter400.copyWith(
fontSize: 15,
height: 20 / 15,
color: AppColor.gray99A2AD,
),
);
final showAllButton = TMailButtonWidget.fromText(
text: AppLocalizations.of(context).showAll,
backgroundColor: Colors.transparent,
textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
color: AppColor.steelGray400,
),
borderRadius: 5,
maxLines: 1,
maxWidth: 120,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
onTapActionCallback: onTapShowAllAttachmentFile,
);
if (responsiveUtils.isMobile(context)) {
return Row(
children: [
iconAttachment,
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.only(start: 8, end: 3),
child: titleHeaderAttachment,
),
),
if (numberOfAttachments > 3) showAllButton,
],
);
} else {
return Row(
children: [
iconAttachment,
Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Padding(
padding: const EdgeInsetsDirectional.only(start: 8, end: 3),
child: titleHeaderAttachment,
),
),
if (numberOfAttachments > 4) showAllButton,
],
),
),
if (onTapDownloadAllButton != null)
TMailButtonWidget(
text: AppLocalizations.of(context).archiveAndDownload,
icon: imagePaths.icDownloadAll,
iconSize: 20,
iconColor: AppColor.steelGrayA540,
iconAlignment: TextDirection.rtl,
backgroundColor: Colors.transparent,
borderRadius: 5,
mainAxisSize: MainAxisSize.min,
flexibleText: true,
maxLines: 1,
maxWidth: 300,
padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
color: AppColor.steelGray400,
),
onTapActionCallback: onTapDownloadAllButton,
),
],
);
}
}
}
}
lib/features/email/presentation/widgets/draggable_attachment_item_widget.dart
+4
View File
@@ -1,4 +1,5 @@
import 'package:core/presentation/resources/image_paths.dart';
import 'package:flutter/material.dart';
import 'package:model/email/attachment.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
@@ -10,6 +11,7 @@ typedef OnDragAttachmentEnd = Function(DraggableDetails details);
class DraggableAttachmentItemWidget extends StatelessWidget{
final Attachment attachment;
final ImagePaths imagePaths;
final OnDragAttachmentStarted? onDragStarted;
final OnDragAttachmentEnd? onDragEnd;
final OnDownloadAttachmentFileAction? downloadAttachmentAction;
@@ -19,6 +21,7 @@ class DraggableAttachmentItemWidget extends StatelessWidget{
const DraggableAttachmentItemWidget({
Key? key,
required this.attachment,
required this.imagePaths,
this.onDragStarted,
this.onDragEnd,
this.downloadAttachmentAction,
@@ -35,6 +38,7 @@ class DraggableAttachmentItemWidget extends StatelessWidget{
onDragEnd: onDragEnd,
child: AttachmentItemWidget(
attachment: attachment,
imagePaths: imagePaths,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
lib/features/email/presentation/widgets/email_attachments_widget.dart
+201 -111
View File
@@ -1,4 +1,5 @@
import 'package:core/presentation/action/action_callback_define.dart';
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/theme_utils.dart';
@@ -8,7 +9,6 @@ import 'package:filesize/filesize.dart';
import 'package:flutter/material.dart';
import 'package:model/email/attachment.dart';
import 'package:model/extensions/list_attachment_extension.dart';
import 'package:tmail_ui_user/features/email/presentation/styles/email_attachments_styles.dart';
import 'package:tmail_ui_user/features/email/presentation/utils/email_utils.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_item_widget.dart';
import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_info.dart';
@@ -44,135 +44,225 @@ class EmailAttachmentsWidget extends StatelessWidget {
this.singleEmailControllerTag,
});
Widget _buildMoreAttachmentButton(
BuildContext context,
int hideItemsCount, {
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
}) {
return TMailButtonWidget(
text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
backgroundColor: Colors.transparent,
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
padding: padding,
maxWidth: EmailAttachmentsStyles.buttonMoreMaxWidth,
margin: margin,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor,
fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
),
maxLines: 1,
onTapActionCallback: onTapShowAllAttachmentFile,
);
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
final attachmentDisplayed = EmailUtils.getAttachmentDisplayed(
context: context,
maxWidth: constraints.maxWidth
- EmailAttachmentsStyles.padding.horizontal
- EmailAttachmentsStyles.listSpace * 2,
platformIsMobile: PlatformInfo.isMobile,
attachments: attachments,
responsiveUtils: responsiveUtils,
final attachmentRecord = _getDisplayedAndHiddenAttachment(
context,
constraints.maxWidth,
);
int hideItemsCount = attachments.length - attachmentDisplayed.length;
if (hideItemsCount > 999) {
hideItemsCount = 999;
}
return Padding(
padding: EmailAttachmentsStyles.padding,
child: Column(
final attachmentHeader = AttachmentsInfo(
imagePaths: imagePaths,
numberOfAttachments: attachments.length,
totalSizeInfo: filesize(attachments.totalSize, 1),
responsiveUtils: responsiveUtils,
onTapShowAllAttachmentFile: onTapShowAllAttachmentFile,
onTapDownloadAllButton: showDownloadAllAttachmentsButton
? onTapDownloadAllButton
: null,
);
late Widget attachmentWidget;
if (responsiveUtils.isMobile(context)) {
attachmentWidget = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AttachmentsInfo(
imagePaths: imagePaths,
numberOfAttachments: attachments.length,
totalSizeInfo: filesize(attachments.totalSize, 1),
responsiveUtils: responsiveUtils,
onTapShowAllAttachmentFile: onTapShowAllAttachmentFile,
downloadAllEnabled: showDownloadAllAttachmentsButton,
onTapDownloadAllButton: onTapDownloadAllButton,
Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
child: attachmentHeader,
),
const SizedBox(height: EmailAttachmentsStyles.marginHeader),
Row(
crossAxisAlignment: responsiveUtils.isMobile(context)
? CrossAxisAlignment.end
: CrossAxisAlignment.center,
children: [
Flexible(
child: Wrap(
spacing: EmailAttachmentsStyles.listSpace,
runSpacing: EmailAttachmentsStyles.listSpace,
children: attachmentDisplayed.map((attachment) {
if (PlatformInfo.isWeb) {
return DraggableAttachmentItemWidget(
attachment: attachment,
onDragStarted: onDragStarted,
onDragEnd: onDragEnd,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
);
} else {
return AttachmentItemWidget(
attachment: attachment,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
);
}
}).toList(),
),
),
if (hideItemsCount > 0 && !responsiveUtils.isMobile(context))
_buildMoreAttachmentButton(
context,
hideItemsCount,
padding: EmailAttachmentsStyles.buttonPadding,
margin: EmailAttachmentsStyles.moreButtonMargin,
),
]
const SizedBox(height: 4),
Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
child: Column(
children: attachmentRecord.displayedAttachments.map((attachment) {
return AttachmentItemWidget(
attachment: attachment,
imagePaths: imagePaths,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
);
}).toList(),
),
),
const SizedBox(height: EmailAttachmentsStyles.marginHeader),
if (responsiveUtils.isMobile(context))
Row(
children: [
if (hideItemsCount > 0)
_buildMoreAttachmentButton(
context,
hideItemsCount,
padding: EmailAttachmentsStyles.mobileButtonPadding,
margin: EmailAttachmentsStyles.mobileMoreButtonMargin,
const SizedBox(height: 12),
if (attachmentRecord.hiddenItemsCount > 0 &&
showDownloadAllAttachmentsButton)
Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 8),
child: Row(
children: [
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).moreAttachments(
attachmentRecord.hiddenItemsCount,
),
backgroundColor: Colors.transparent,
borderRadius: 5,
maxWidth: 120,
maxLines: 1,
textStyle: ThemeUtils.textStyleM3TitleSmall,
padding: const EdgeInsets.symmetric(
vertical: 3,
horizontal: 5,
),
onTapActionCallback: onTapShowAllAttachmentFile,
),
const Spacer(),
if (showDownloadAllAttachmentsButton)
TMailButtonWidget(
text: AppLocalizations.of(context).downloadAll,
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: TMailButtonWidget(
text: AppLocalizations.of(context).archiveAndDownload,
icon: imagePaths.icDownloadAll,
iconSize: 20,
iconColor: AppColor.steelGrayA540,
iconAlignment: TextDirection.rtl,
backgroundColor: Colors.transparent,
borderRadius: 5,
mainAxisSize: MainAxisSize.min,
maxLines: 1,
flexibleText: true,
padding: const EdgeInsets.symmetric(
vertical: 3,
horizontal: 5,
),
textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
color: AppColor.steelGray400,
),
onTapActionCallback: onTapDownloadAllButton,
),
),
],
),
),
],
),
)
else if (attachmentRecord.hiddenItemsCount > 0)
TMailButtonWidget.fromText(
text: AppLocalizations.of(context).moreAttachments(
attachmentRecord.hiddenItemsCount,
),
backgroundColor: Colors.transparent,
borderRadius: 5,
maxLines: 1,
textStyle: ThemeUtils.textStyleM3TitleSmall,
padding: const EdgeInsets.symmetric(
vertical: 3,
horizontal: 5,
),
margin: const EdgeInsetsDirectional.symmetric(horizontal: 8),
onTapActionCallback: onTapShowAllAttachmentFile,
)
else if (showDownloadAllAttachmentsButton)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: TMailButtonWidget(
text: AppLocalizations.of(context).archiveAndDownload,
icon: imagePaths.icDownloadAll,
iconSize: 20,
iconColor: AppColor.steelGrayA540,
iconAlignment: TextDirection.rtl,
backgroundColor: Colors.transparent,
borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
padding: EmailAttachmentsStyles.mobileButtonPadding,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontSize: EmailAttachmentsStyles.buttonTextSize,
color: EmailAttachmentsStyles.buttonTextColor,
fontWeight: EmailAttachmentsStyles.buttonFontWeight
),
maxWidth: EmailAttachmentsStyles.buttonDownloadAllMaxWidth,
maxLines: 1,
borderRadius: 5,
mainAxisSize: MainAxisSize.min,
maxLines: 1,
flexibleText: true,
padding: const EdgeInsets.symmetric(
vertical: 3,
horizontal: 5,
),
margin: const EdgeInsetsDirectional.symmetric(horizontal: 8),
textStyle: ThemeUtils.textStyleBodyBody1().copyWith(
color: AppColor.steelGray400,
),
onTapActionCallback: onTapDownloadAllButton,
),
]
),
],
),
],
),
);
} else {
attachmentWidget = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
child: attachmentHeader,
),
const SizedBox(height: 4),
Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: attachmentRecord.displayedAttachments.map((attachment) {
if (responsiveUtils.isDesktop(context)) {
return DraggableAttachmentItemWidget(
attachment: attachment,
imagePaths: imagePaths,
onDragStarted: onDragStarted,
onDragEnd: onDragEnd,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
);
} else {
return AttachmentItemWidget(
attachment: attachment,
imagePaths: imagePaths,
width: 260,
downloadAttachmentAction: downloadAttachmentAction,
viewAttachmentAction: viewAttachmentAction,
singleEmailControllerTag: singleEmailControllerTag,
);
}
}).toList(),
),
),
],
);
}
return Padding(
padding: const EdgeInsetsDirectional.only(top: 12, bottom: 24),
child: attachmentWidget,
);
});
}
({List<Attachment> displayedAttachments, int hiddenItemsCount})
_getDisplayedAndHiddenAttachment(BuildContext context, double maxWidth) {
const itemSpace = 8.0;
const itemHorizontalPadding = 24;
final maxWidthDesktop = maxWidth - itemHorizontalPadding - itemSpace * 2;
final displayedAttachments = EmailUtils.getAttachmentDisplayed(
context: context,
maxWidth: maxWidthDesktop,
platformIsMobile: PlatformInfo.isMobile,
attachments: attachments,
responsiveUtils: responsiveUtils,
);
int hiddenItemsCount = attachments.length - displayedAttachments.length;
if (hiddenItemsCount > 999) {
hiddenItemsCount = 999;
} else if (hiddenItemsCount < 0) {
hiddenItemsCount = 0;
}
return (
displayedAttachments: displayedAttachments,
hiddenItemsCount: hiddenItemsCount,
);
}
}
lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart
+2 -2
View File
@@ -147,7 +147,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
padding: const EdgeInsetsDirectional.only(start: 16),
child: SvgPicture.asset(
imagePaths.icAttachment,
colorFilter: AppColor.colorAttachmentIcon.asFilter(),
colorFilter: AppColor.steelGray200.asFilter(),
width: 20,
height: 20,
),
@@ -215,7 +215,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
padding: const EdgeInsetsDirectional.only(end: 8),
child: SvgPicture.asset(
imagePaths.icAttachment,
colorFilter: AppColor.colorAttachmentIcon.asFilter(),
colorFilter: AppColor.steelGray200.asFilter(),
width: 20,
height: 20,
),
lib/l10n/intl_ar.arb
+1 -1
View File
@@ -793,7 +793,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} المرفقات ({totalSize}):",
"titleHeaderAttachment": "{count} المرفقات ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_de.arb
+1 -1
View File
@@ -921,7 +921,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Anhänge ({totalSize}):",
"titleHeaderAttachment": "{count} Anhänge ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_en.arb
+1 -1
View File
@@ -351,7 +351,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Attachments ({totalSize}):",
"titleHeaderAttachment": "{count} Attachments ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_fr.arb
+1 -1
View File
@@ -2108,7 +2108,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Pièces jointes ({totalSize}) :",
"titleHeaderAttachment": "{count} Pièces jointes ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_ga.arb
+1 -1
View File
@@ -3621,7 +3621,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Ceangaltáin ({totalSize}):",
"titleHeaderAttachment": "{count} Ceangaltáin ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_it.arb
+1 -1
View File
@@ -2179,7 +2179,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Allegati ({totalSize}):",
"titleHeaderAttachment": "{count} Allegati ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_messages.arb
+7 -1
View File
@@ -378,7 +378,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Attachments ({totalSize}):",
"titleHeaderAttachment": "{count} Attachments ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
@@ -4576,6 +4576,12 @@
"placeholders_order": [],
"placeholders": {}
},
"archiveAndDownload": "Archive and download",
"@archiveAndDownload": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"countMessageInSpam": "{count} message in spam",
"@countMessageInSpam": {
"type": "text",
lib/l10n/intl_mfe.arb
+1 -1
View File
@@ -2471,7 +2471,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Atasman ({totalSize}):",
"titleHeaderAttachment": "{count} Atasman ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_ru.arb
+1 -1
View File
@@ -2212,7 +2212,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Приложения(-ий) ({totalSize}):",
"titleHeaderAttachment": "{count} Приложения(-ий) ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_ta.arb
+1 -1
View File
@@ -3727,7 +3727,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} இணைப்புகள் ({totalSize}):",
"titleHeaderAttachment": "{count} இணைப்புகள் ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_vi.arb
+1 -1
View File
@@ -2608,7 +2608,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} Tệp đính kèm ({totalSize}):",
"titleHeaderAttachment": "{count} Tệp đính kèm ({totalSize})",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/l10n/intl_zh_Hans.arb
+1 -1
View File
@@ -341,7 +341,7 @@
"placeholders_order": [],
"placeholders": {}
},
"titleHeaderAttachment": "{count} 个附件（{totalSize}）：",
"titleHeaderAttachment": "{count} 个附件（{totalSize}",
"@titleHeaderAttachment": {
"type": "text",
"placeholders_order": [
lib/main/localizations/app_localizations.dart
+8 -1
View File
@@ -386,7 +386,7 @@ class AppLocalizations {
String titleHeaderAttachment(int count, String totalSize) {
return Intl.message(
'$count Attachments ($totalSize):',
'$count Attachments ($totalSize)',
name: 'titleHeaderAttachment',
args: [count, totalSize]
);
@@ -4905,4 +4905,11 @@ class AppLocalizations {
name: 'enterEmailAddress',
);
}
String get archiveAndDownload {
return Intl.message(
'Archive and download',
name: 'archiveAndDownload',
);
}
}
test/features/email/presentation/get_attachment_displayed_test.dart
+5 -5
View File
@@ -49,7 +49,7 @@ void main() {
expect(result, attachments.sublist(0, 2));
});
test('should return first 2 attachments when mobile and attachments >= 3', () {
test('should return first 3 attachments when mobile and attachments >= 4', () {
when(mockResponsiveUtils.isMobile(mockContext)).thenReturn(true);
final result = EmailUtils.getAttachmentDisplayed(
@@ -59,8 +59,8 @@ void main() {
platformIsMobile: true,
attachments: attachments,
);
expect(result.length, 2);
expect(result, attachments.sublist(0, 2));
expect(result.length, 3);
expect(result, attachments.sublist(0, 3));
});
test('should return sublist based on maxWidthTabletLarge when responsiveIsTabletLarge is true', () {
@@ -122,8 +122,8 @@ void main() {
platformIsMobile: true,
attachments: attachments,
);
expect(result.length, 2);
expect(result, attachments.sublist(0, 2));
expect(result.length, 3);
expect(result, attachments.sublist(0, 3));
});
test('should return sublist based on maxWidthTablet when platformIsMobile is true and responsiveIsMobile is false', () {