TF-3472 Prevent attachments from wrapping 2nd line

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;
+      }
+    }
+  }
 }

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;
-      }
-    }
-  }
 }

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 _buildMoreAttachmentButton(
-  Widget build(BuildContext context) {
+    BuildContext context,
-    final attachmentDisplayed = _getAttachmentDisplayed(context);
+    int hideItemsCount, {
-    int hideItemsCount = attachments.length - attachmentDisplayed.length;
+    EdgeInsetsGeometry padding = EdgeInsets.zero,
-    return Padding(
+  }) {
-      padding: EmailAttachmentsStyles.padding,
+    return TMailButtonWidget(
-      child: Column(
+      text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
-        crossAxisAlignment: CrossAxisAlignment.start,
+      backgroundColor: Colors.transparent,
-        children: [
+      borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
-          AttachmentsInfo(
+      padding: padding,
-            imagePaths: imagePaths,
+      margin: EmailAttachmentsStyles.moreButtonMargin,
-            numberOfAttachments: attachments.length,
+      textStyle: const TextStyle(
-            totalSizeInfo: filesize(attachments.totalSize, 1),
+        fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
-            responsiveUtils: responsiveUtils,
+        color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor,
-            onTapShowAllAttachmentFile: onTapShowAllAttachmentFile,
+        fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
-            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,
-                  ),
-              ]
-            ),
-        ],
       ),
+      onTapActionCallback: onTapShowAllAttachmentFile,
     );
   }
 
-  List<Attachment> _getAttachmentDisplayed(BuildContext context) {
+  @override
-    if (attachments.length <= 2) {
+  Widget build(BuildContext context) {
-      return attachments;
+    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) {
+  List<Attachment> _getAttachmentDisplayed(BuildContext context, double maxWidth) {
-      if (PlatformInfo.isWeb) {
+    const moreAttachmentButtonWidth = 120; // Asumming 999 more items 
-        return responsiveUtils.isDesktop(context)
+    final maxWidthItem = AttachmentItemWidgetStyle.getMaxWidthItem(
-          ? attachments
+      platformIsMobile: PlatformInfo.isMobile,
-          : attachments.sublist(0, 2);
+      responsiveIsMobile: responsiveUtils.isMobile(context),
-      } else {
+      responsiveIsTablet: responsiveUtils.isTablet(context),
-        return responsiveUtils.isMobile(context)
+      responsiveIsTabletLarge: responsiveUtils.isTabletLarge(context),
-          ? attachments
+    );
-          : attachments.sublist(0, 2);
+    final possibleNumberOfDisplayedAttachments = (maxWidth - moreAttachmentButtonWidth) ~/ maxWidthItem;
-      }
+    return possibleNumberOfDisplayedAttachments >= attachments.length
-    }
+      ? attachments
-
+      : attachments.sublist(0, possibleNumberOfDisplayedAttachments);
-    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);
-    }
   }
 }