TF-1801 Change design of email attachment

(cherry picked from commit d2700ab7ebb13cc948a7cbacbd336a04b2f2bc93)

lib/features/email/presentation/email_view.dart

@@ -340,7 +340,9 @@ class EmailView extends GetWidget<SingleEmailController> {
           final attachments = controller.attachments.listAttachmentsDisplayedOutSide;
           if (attachments.isNotEmpty) {
             return EmailAttachmentsWidget(
+              responsiveUtils: responsiveUtils,
               attachments: attachments,
+              imagePaths: imagePaths,
               onDragStarted: () {
                 log('EmailView::_buildEmailMessage:onDragStarted:');
                 controller.mailboxDashBoardController.enableDraggableApp();
@@ -356,6 +358,7 @@ class EmailView extends GetWidget<SingleEmailController> {
                   controller.exportAttachment(context, attachment);
                 }
               },
+              onTapShowAllAttachmentFile: () => controller.openAttachmentList(context, attachments),
             );
           } else {
             return const SizedBox.shrink();

lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart

@@ -3,15 +3,16 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 
 class AttachmentItemWidgetStyle {
-  static const double radius = 10;
+  static const double radius = 8;
   static const double mobileWidth = 224;
-  static const double width = 250;
+  static const double width = 260;
-  static const double height = 60;
+  static const double height = 36;
-  static const double iconSize = 44;
+  static const double iconSize = 20;
   static const double space = 8;
-  static const double downloadIconSize = 24;
+  static const double downloadIconSize = 20;
+  static const double attachmentNameMaxWidth = 130;
 
-  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(end: 12);
+  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(end: 0);
   static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8);
 
   static const Color borderColor = AppColor.attachmentFileBorderColor;

lib/features/email/presentation/styles/email_attachments_styles.dart

@@ -8,16 +8,21 @@ class EmailAttachmentsStyles {
   static const double headerSpace = 4;
   static const double marginHeader = 6;
   static const double buttonTextSize = 13;
+  static const double buttonMoreAttachmentsTextSize = 14;
   static const double buttonBorderRadius = 8;
   static const double listSpace = 12;
-  static const double listHeight = 60;
+  static const double listHeight = 36;
+  static const double mobileListHeight = 100;
+  static const double moreAttachmentsButtonPadding = 8;
 
   static const Color headerTextColor = AppColor.colorTitleHeaderAttachment;
   static const Color headerIconColor = AppColor.colorAttachmentIcon;
   static const Color buttonTextColor = AppColor.primaryColor;
+  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.symmetric(vertical: 12, horizontal: 16);
   static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);

lib/features/email/presentation/widgets/attachment_item_widget.dart

@@ -1,7 +1,6 @@
 
 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:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
@@ -20,7 +19,6 @@ class AttachmentItemWidget extends StatelessWidget {
   final OnDownloadAttachmentFileActionClick? downloadAttachmentAction;
 
   final _imagePaths = Get.find<ImagePaths>();
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   AttachmentItemWidget({
     Key? key,
@@ -30,29 +28,26 @@ class AttachmentItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Material(
-      padding: AttachmentItemWidgetStyle.padding,
+      color: Colors.transparent,
-      child: Material(
+      child: InkWell(
-        color: Colors.transparent,
+        onTap: () => downloadAttachmentAction?.call(attachment),
-        child: InkWell(
+        customBorder: const RoundedRectangleBorder(
-          onTap: () => downloadAttachmentAction?.call(attachment),
+          borderRadius: BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius))
-          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),
           ),
-          child: Container(
+          width: AttachmentItemWidgetStyle.width,
-            padding: AttachmentItemWidgetStyle.contentPadding,
+          height: AttachmentItemWidgetStyle.height,
-            decoration: BoxDecoration(
+          child: Stack(
-              borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
+            children: [
-              border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
+              Positioned.fill(
-            ),
+                child: Row(
-            width: _responsiveUtils.isMobile(context)
+                  children: [
-              ? AttachmentItemWidgetStyle.mobileWidth
-              : AttachmentItemWidgetStyle.width,
-            height: AttachmentItemWidgetStyle.height,
-            child: Stack(
-              children: [
-                Positioned.fill(
-                  child: Row(children: [
                     SvgPicture.asset(
                       attachment.getIcon(_imagePaths),
                       width: AttachmentItemWidgetStyle.iconSize,
@@ -60,26 +55,29 @@ class AttachmentItemWidget extends StatelessWidget {
                       fit: BoxFit.fill
                     ),
                     const SizedBox(width: AttachmentItemWidgetStyle.space),
-                    Expanded(child: Column(
+                    Expanded(child: Row(
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        ExtendedText(
+                        SizedBox(
-                          (attachment.name ?? ''),
+                          width: AttachmentItemWidgetStyle.attachmentNameMaxWidth,
-                          maxLines: 1,
+                          child: ExtendedText(
-                          overflow: CommonTextStyle.defaultTextOverFlow,
+                            (attachment.name ?? ''),
-                          softWrap: CommonTextStyle.defaultSoftWrap,
+                            maxLines: 1,
-                          overflowWidget: TextOverflowWidget(
+                            overflow: CommonTextStyle.defaultTextOverFlow,
-                            position: Directionality.maybeOf(context) == TextDirection.rtl
+                            softWrap: CommonTextStyle.defaultSoftWrap,
-                              ? TextOverflowPosition.start
+                            overflowWidget: TextOverflowWidget(
-                              : TextOverflowPosition.end,
+                              position: Directionality.maybeOf(context) == TextDirection.rtl
-                            child: const Text(
+                                ? TextOverflowPosition.start
-                              "...",
+                                : TextOverflowPosition.end,
-                              style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
+                              child: const Text(
+                                "...",
+                                style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
+                              ),
                             ),
+                            style: AttachmentItemWidgetStyle.labelTextStyle,
                           ),
-                          style: AttachmentItemWidgetStyle.labelTextStyle,
                         ),
-                        const SizedBox(height: 4),
                         Text(
                           filesize(attachment.size?.value),
                           maxLines: 1,
@@ -88,29 +86,26 @@ class AttachmentItemWidget extends StatelessWidget {
                           style: AttachmentItemWidgetStyle.sizeLabelTextStyle,
                         )
                       ]
-                    ))
+                    )),
-                  ]),
+                    Material(
-                ),
+                      color: Colors.transparent,
-                Align(
+                      child: InkWell(
-                  alignment: AlignmentDirectional.bottomEnd,
+                        customBorder: const CircleBorder(),
-                  child: Material(
+                        child: SvgPicture.asset(
-                    color: Colors.transparent,
+                          _imagePaths.icDownloadAttachment,
-                    child: InkWell(
+                          width: AttachmentItemWidgetStyle.downloadIconSize,
-                      customBorder: const CircleBorder(),
+                          height: AttachmentItemWidgetStyle.downloadIconSize,
-                      child: SvgPicture.asset(
+                          colorFilter: AttachmentItemWidgetStyle.downloadIconColor.asFilter(),
-                        _imagePaths.icDownloadAttachment,
+                          fit: BoxFit.fill
-                        width: AttachmentItemWidgetStyle.downloadIconSize,
+                        ),
-                        height: AttachmentItemWidgetStyle.downloadIconSize,
+                        onTap: () => downloadAttachmentAction?.call(attachment)
-                        colorFilter: AttachmentItemWidgetStyle.downloadIconColor.asFilter(),
-                        fit: BoxFit.fill
                       ),
-                      onTap: () => downloadAttachmentAction?.call(attachment)
                     ),
-                  ),
+                  ]
                 ),
-              ]
+              ),          
-            )
+            ]
-          ),
+          )
         ),
       ),
     );

lib/features/email/presentation/widgets/email_attachments_widget.dart

@@ -1,46 +1,52 @@
+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/views/button/tmail_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
 import 'package:model/email/attachment.dart';
 import 'package:model/extensions/list_attachment_extension.dart';
-import 'package:tmail_ui_user/features/base/widget/custom_scroll_behavior.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/draggable_attachment_item_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class EmailAttachmentsWidget extends StatefulWidget {
+class EmailAttachmentsWidget extends StatelessWidget {
 
   final List<Attachment> attachments;
   final OnDragAttachmentStarted? onDragStarted;
   final OnDragAttachmentEnd? onDragEnd;
   final OnDownloadAttachmentFileActionClick? downloadAttachmentAction;
+  final ResponsiveUtils responsiveUtils;
+  final ImagePaths imagePaths;
+  final OnTapActionCallback? onTapShowAllAttachmentFile;
 
   const EmailAttachmentsWidget({
     super.key,
     required this.attachments,
+    required this.responsiveUtils,
+    required this.imagePaths,
     this.onDragStarted,
     this.onDragEnd,
-    this.downloadAttachmentAction
+    this.downloadAttachmentAction,
+    this.onTapShowAllAttachmentFile,
   });
 
-  @override
-  State<EmailAttachmentsWidget> createState() => _EmailAttachmentsWidgetState();
-}
-
-class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
-
-  final _imagePaths = Get.find<ImagePaths>();
-
-  bool _isDisplayAll = false;
-
   @override
   Widget build(BuildContext context) {
+    int getItemCount() {
+      if (attachments.length <= 2) {
+        return attachments.length;
+      }
+      if (attachments.length == 3) {
+        return responsiveUtils.isDesktop(context) ? attachments.length : 2;
+      } 
+      return responsiveUtils.isDesktop(context) ? 4 : 2;
+    }
+    int hideItemsCount = attachments.length - getItemCount();
     return Padding(
       padding: EmailAttachmentsStyles.padding,
       child: Column(
@@ -53,7 +59,7 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
                   children: [
                     const SizedBox(width: EmailAttachmentsStyles.headerSpace),
                     SvgPicture.asset(
-                      _imagePaths.icAttachment,
+                      imagePaths.icAttachment,
                       width: EmailAttachmentsStyles.headerIconSize,
                       height: EmailAttachmentsStyles.headerIconSize,
                       colorFilter: EmailAttachmentsStyles.headerIconColor.asFilter(),
@@ -63,8 +69,8 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
                     Expanded(
                       child: Text(
                         AppLocalizations.of(context).titleHeaderAttachment(
-                          widget.attachments.length,
+                          attachments.length,
-                          filesize(widget.attachments.totalSize(), 1)
+                          filesize(attachments.totalSize(), 1)
                         ),
                         style: const TextStyle(
                           fontSize: EmailAttachmentsStyles.headerTextSize,
@@ -77,11 +83,9 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
                   ]
                 )
               ),
-              if (widget.attachments.length > 2)
+              if (attachments.length > 2)
                 TMailButtonWidget(
-                  text: _isDisplayAll
+                  text: AppLocalizations.of(context).showAll,
-                    ? AppLocalizations.of(context).hide
-                    : AppLocalizations.of(context).showAll,
                   backgroundColor: Colors.transparent,
                   borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
                   padding: EmailAttachmentsStyles.buttonPadding,
@@ -90,59 +94,66 @@ class _EmailAttachmentsWidgetState extends State<EmailAttachmentsWidget> {
                     color: EmailAttachmentsStyles.buttonTextColor,
                     fontWeight: EmailAttachmentsStyles.buttonFontWeight
                   ),
-                  onTapActionCallback: () => setState(() => _isDisplayAll = !_isDisplayAll),
+                  onTapActionCallback: onTapShowAllAttachmentFile,
                 )
             ],
           ),
           const SizedBox(height: EmailAttachmentsStyles.marginHeader),
-          if (_isDisplayAll)
+          SizedBox(
-            Wrap(
+            height: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.mobileListHeight : EmailAttachmentsStyles.listHeight,
-              runSpacing: EmailAttachmentsStyles.listSpace,
+            child: Row(
-              children: widget.attachments
+              children: [
-                .map((attachment) {
+                Flexible(
-                  if (PlatformInfo.isWeb) {
+                  child: ListView.separated(
-                    return DraggableAttachmentItemWidget(
+                    shrinkWrap: true,
-                      attachment: attachment,
+                    scrollDirection: responsiveUtils.isMobile(context) ? Axis.vertical : Axis.horizontal,
-                      onDragStarted: widget.onDragStarted,
+                    itemCount: getItemCount(),
-                      onDragEnd: widget.onDragEnd,
+                    itemBuilder: (context, index) {
-                      downloadAttachmentAction: widget.downloadAttachmentAction,
+                      if (PlatformInfo.isWeb) {
-                    );
+                        return DraggableAttachmentItemWidget(
-                  } else {
+                          attachment: attachments[index],
-                    return AttachmentItemWidget(
+                          onDragStarted: onDragStarted,
-                      attachment: attachment,
+                          onDragEnd: onDragEnd,
-                      downloadAttachmentAction: widget.downloadAttachmentAction
+                          downloadAttachmentAction: downloadAttachmentAction
-                    );
+                        );
-                  }
+                      } else {
-                })
+                        return AttachmentItemWidget(
-                .toList()
+                          attachment: attachments[index],
-            )
+                          downloadAttachmentAction: downloadAttachmentAction
-          else
+                        );
-            SizedBox(
+                      }
-              height: EmailAttachmentsStyles.listHeight,
+                    },
-              child: ScrollConfiguration(
+                    separatorBuilder: (context, index) {
-                behavior: CustomScrollBehavior(),
+                      if (responsiveUtils.isMobile(context)) {
-                child: ListView.builder(
+                        return const SizedBox(height: EmailAttachmentsStyles.listSpace);
-                  shrinkWrap: true,
+                      } else {
-                  scrollDirection: Axis.horizontal,
+                        return const SizedBox(width: EmailAttachmentsStyles.listSpace);
-                  itemCount: widget.attachments.length,
+                      }
-                  itemBuilder: (context, index) {
+                    },
-                    if (PlatformInfo.isWeb) {
+                  ),
-                      return DraggableAttachmentItemWidget(
-                        attachment: widget.attachments[index],
-                        onDragStarted: widget.onDragStarted,
-                        onDragEnd: widget.onDragEnd,
-                        downloadAttachmentAction: widget.downloadAttachmentAction
-                      );
-                    } else {
-                      return AttachmentItemWidget(
-                        attachment: widget.attachments[index],
-                        downloadAttachmentAction: widget.downloadAttachmentAction
-                      );
-                    }
-                  }
                 ),
-              )
+                if (hideItemsCount != 0)
-            ),
+                  Container(
+                    padding: EdgeInsets.only(bottom: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.moreAttachmentsButtonPadding : 0),
+                    alignment: responsiveUtils.isMobile(context)
+                      ? Alignment.bottomRight
+                      : Alignment.centerRight,
+                    child: TMailButtonWidget(
+                      text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
+                      backgroundColor: Colors.transparent,
+                      borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
+                      padding: EmailAttachmentsStyles.buttonPadding,
+                      textStyle: const TextStyle(
+                        fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
+                        color: EmailAttachmentsStyles.ButtonMoreAttachmentsTextColor,
+                        fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
+                      ),
+                      onTapActionCallback: onTapShowAllAttachmentFile,
+                    ),
+                  ),
+              ]
+            )
+          ),
         ],
       ),
     );