diff --git a/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart b/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart index e7b95b212..e6a89acaf 100644 --- a/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart +++ b/lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart @@ -31,4 +31,23 @@ class AttachmentItemWidgetStyle { 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; + } + } + } } \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/attachment_item_widget.dart b/lib/features/email/presentation/widgets/attachment_item_widget.dart index aa724ceb9..d9b669842 100644 --- a/lib/features/email/presentation/widgets/attachment_item_widget.dart +++ b/lib/features/email/presentation/widgets/attachment_item_widget.dart @@ -57,7 +57,12 @@ class AttachmentItemWidget extends StatelessWidget { borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)), border: Border.all(color: AttachmentItemWidgetStyle.borderColor), ), - width: _getMaxWidthItem(context), + width: AttachmentItemWidgetStyle.getMaxWidthItem( + platformIsMobile: PlatformInfo.isMobile, + responsiveIsMobile: _responsiveUtils.isMobile(context), + responsiveIsTablet: _responsiveUtils.isTablet(context), + responsiveIsTabletLarge: _responsiveUtils.isTabletLarge(context), + ), child: Row( children: [ isLoading @@ -116,20 +121,4 @@ class AttachmentItemWidget extends StatelessWidget { } ); } - - double _getMaxWidthItem(BuildContext context) { - if (PlatformInfo.isMobile) { - return _responsiveUtils.isMobile(context) - ? AttachmentItemWidgetStyle.maxWidthMobile - : AttachmentItemWidgetStyle.maxWidthTablet; - } else { - if (_responsiveUtils.isTabletLarge(context)) { - return AttachmentItemWidgetStyle.maxWidthTabletLarge; - } else if (_responsiveUtils.isTablet(context)) { - return AttachmentItemWidgetStyle.maxWidthTablet; - } else { - return AttachmentItemWidgetStyle.maxWidthMobile; - } - } - } } \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/email_attachments_widget.dart b/lib/features/email/presentation/widgets/email_attachments_widget.dart index f6868729a..a2f8dcc38 100644 --- a/lib/features/email/presentation/widgets/email_attachments_widget.dart +++ b/lib/features/email/presentation/widgets/email_attachments_widget.dart @@ -7,6 +7,7 @@ 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/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/email/presentation/widgets/attachment_item_widget.dart'; import 'package:tmail_ui_user/features/email/presentation/widgets/attachments_info.dart'; @@ -40,135 +41,127 @@ class EmailAttachmentsWidget extends StatelessWidget { this.onTapDownloadAllButton, }); - @override - Widget build(BuildContext context) { - final attachmentDisplayed = _getAttachmentDisplayed(context); - int hideItemsCount = attachments.length - attachmentDisplayed.length; - return Padding( - padding: EmailAttachmentsStyles.padding, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - AttachmentsInfo( - imagePaths: imagePaths, - numberOfAttachments: attachments.length, - totalSizeInfo: filesize(attachments.totalSize, 1), - responsiveUtils: responsiveUtils, - onTapShowAllAttachmentFile: onTapShowAllAttachmentFile, - downloadAllEnabled: showDownloadAllAttachmentsButton, - onTapDownloadAllButton: onTapDownloadAllButton, - ), - 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, - ); - } else { - return AttachmentItemWidget( - attachment: attachment, - downloadAttachmentAction: downloadAttachmentAction, - viewAttachmentAction: viewAttachmentAction, - ); - } - }).toList(), - ), - ), - if (hideItemsCount > 0 && !responsiveUtils.isMobile(context)) - TMailButtonWidget( - text: AppLocalizations.of(context).moreAttachments(hideItemsCount), - backgroundColor: Colors.transparent, - borderRadius: EmailAttachmentsStyles.buttonBorderRadius, - padding: EmailAttachmentsStyles.buttonPadding, - margin: EmailAttachmentsStyles.moreButtonMargin, - textStyle: const TextStyle( - fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize, - color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor, - fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight, - ), - onTapActionCallback: onTapShowAllAttachmentFile, - ), - ] - ), - const SizedBox(height: EmailAttachmentsStyles.marginHeader), - if (responsiveUtils.isMobile(context)) - Row( - children: [ - if (hideItemsCount > 0) - TMailButtonWidget( - text: AppLocalizations.of(context).moreAttachments(hideItemsCount), - backgroundColor: Colors.transparent, - borderRadius: EmailAttachmentsStyles.buttonBorderRadius, - padding: EdgeInsets.zero, - margin: EmailAttachmentsStyles.moreButtonMargin, - textStyle: const TextStyle( - fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize, - color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor, - fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight, - ), - onTapActionCallback: onTapShowAllAttachmentFile, - ), - const Spacer(), - if (showDownloadAllAttachmentsButton) - TMailButtonWidget( - text: AppLocalizations.of(context).downloadAll, - icon: imagePaths.icDownloadAll, - iconAlignment: TextDirection.rtl, - backgroundColor: Colors.transparent, - borderRadius: EmailAttachmentsStyles.buttonBorderRadius, - padding: EmailAttachmentsStyles.buttonPadding, - textStyle: const TextStyle( - fontSize: EmailAttachmentsStyles.buttonTextSize, - color: EmailAttachmentsStyles.buttonTextColor, - fontWeight: EmailAttachmentsStyles.buttonFontWeight - ), - onTapActionCallback: onTapDownloadAllButton, - ), - ] - ), - ], + Widget _buildMoreAttachmentButton( + BuildContext context, + int hideItemsCount, { + EdgeInsetsGeometry padding = EdgeInsets.zero, + }) { + return TMailButtonWidget( + text: AppLocalizations.of(context).moreAttachments(hideItemsCount), + backgroundColor: Colors.transparent, + borderRadius: EmailAttachmentsStyles.buttonBorderRadius, + padding: padding, + margin: EmailAttachmentsStyles.moreButtonMargin, + textStyle: const TextStyle( + fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize, + color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor, + fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight, ), + onTapActionCallback: onTapShowAllAttachmentFile, ); } - List _getAttachmentDisplayed(BuildContext context) { - if (attachments.length <= 2) { - return attachments; - } + @override + Widget build(BuildContext context) { + return LayoutBuilder(builder: (context, constraints) { + final attachmentDisplayed = _getAttachmentDisplayed( + context, + constraints.maxWidth + - EmailAttachmentsStyles.padding.horizontal + - EmailAttachmentsStyles.listSpace * 2); + int hideItemsCount = attachments.length - attachmentDisplayed.length; + return Padding( + padding: EmailAttachmentsStyles.padding, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AttachmentsInfo( + imagePaths: imagePaths, + numberOfAttachments: attachments.length, + totalSizeInfo: filesize(attachments.totalSize, 1), + responsiveUtils: responsiveUtils, + onTapShowAllAttachmentFile: onTapShowAllAttachmentFile, + downloadAllEnabled: showDownloadAllAttachmentsButton, + onTapDownloadAllButton: onTapDownloadAllButton, + ), + 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, + ); + } else { + return AttachmentItemWidget( + attachment: attachment, + downloadAttachmentAction: downloadAttachmentAction, + viewAttachmentAction: viewAttachmentAction, + ); + } + }).toList(), + ), + ), + if (hideItemsCount > 0 && !responsiveUtils.isMobile(context)) + _buildMoreAttachmentButton( + context, + hideItemsCount, + padding: EmailAttachmentsStyles.buttonPadding, + ), + ] + ), + const SizedBox(height: EmailAttachmentsStyles.marginHeader), + if (responsiveUtils.isMobile(context)) + Row( + children: [ + if (hideItemsCount > 0) + _buildMoreAttachmentButton(context, hideItemsCount), + const Spacer(), + if (showDownloadAllAttachmentsButton) + TMailButtonWidget( + text: AppLocalizations.of(context).downloadAll, + icon: imagePaths.icDownloadAll, + iconAlignment: TextDirection.rtl, + backgroundColor: Colors.transparent, + borderRadius: EmailAttachmentsStyles.buttonBorderRadius, + padding: EmailAttachmentsStyles.buttonPadding, + textStyle: const TextStyle( + fontSize: EmailAttachmentsStyles.buttonTextSize, + color: EmailAttachmentsStyles.buttonTextColor, + fontWeight: EmailAttachmentsStyles.buttonFontWeight + ), + onTapActionCallback: onTapDownloadAllButton, + ), + ] + ), + ], + ), + ); + }); + } - if (attachments.length == 3) { - if (PlatformInfo.isWeb) { - return responsiveUtils.isDesktop(context) - ? attachments - : attachments.sublist(0, 2); - } else { - return responsiveUtils.isMobile(context) - ? attachments - : attachments.sublist(0, 2); - } - } - - if (PlatformInfo.isWeb) { - return responsiveUtils.isDesktop(context) || responsiveUtils.isMobile(context) - ? attachments.sublist(0, 4) - : attachments.sublist(0, 2); - } else { - return responsiveUtils.isMobile(context) - ? attachments.sublist(0, 4) - : attachments.sublist(0, 2); - } + List _getAttachmentDisplayed(BuildContext context, double maxWidth) { + const moreAttachmentButtonWidth = 120; // Asumming 999 more items + final maxWidthItem = AttachmentItemWidgetStyle.getMaxWidthItem( + platformIsMobile: PlatformInfo.isMobile, + responsiveIsMobile: responsiveUtils.isMobile(context), + responsiveIsTablet: responsiveUtils.isTablet(context), + responsiveIsTabletLarge: responsiveUtils.isTabletLarge(context), + ); + final possibleNumberOfDisplayedAttachments = (maxWidth - moreAttachmentButtonWidth) ~/ maxWidthItem; + return possibleNumberOfDisplayedAttachments >= attachments.length + ? attachments + : attachments.sublist(0, possibleNumberOfDisplayedAttachments); } }