TF-985 Apply new design for list attachment in EmailView

assets/images/ic_download_attachment.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M18.0002 18.8572C18.4736 18.8572 18.8574 19.241 18.8574 19.7144C18.8574 20.1877 18.4736 20.5715 18.0002 20.5715H6.00021C5.52682 20.5715 5.14307 20.1877 5.14307 19.7144C5.14307 19.241 5.52682 18.8572 6.00021 18.8572H18.0002ZM12.0002 1.71436C12.4736 1.71436 12.8574 2.09811 12.8574 2.5715V14.2158L17.3941 9.67969C17.7289 9.34496 18.2716 9.34496 18.6063 9.67969C18.941 10.0144 18.941 10.5571 18.6063 10.8919L12.6063 16.8919C12.2716 17.2266 11.7289 17.2266 11.3941 16.8919L5.39412 10.8919C5.05938 10.5571 5.05938 10.0144 5.39412 9.67969C5.72885 9.34496 6.27157 9.34496 6.6063 9.67969L11.1431 14.2158V2.5715C11.1431 2.09811 11.5268 1.71436 12.0002 1.71436Z"
+        fill="#007AFF" />
+</svg>

core/lib/presentation/extensions/color_extension.dart

@@ -46,9 +46,9 @@ extension AppColor on Color {
   static const bgMailboxListMail = Color(0xFFFBFBFF);
   static const bgMessenger = Color(0xFFF2F2F5);
   static const textButtonColor = Color(0xFF182952);
-  static const attachmentFileBorderColor = Color(0xFFEAEAEA);
+  static const attachmentFileBorderColor = Color(0x1F000000);
-  static const attachmentFileNameColor = Color(0xFF182952);
+  static const attachmentFileNameColor = Color(0xFF000000);
-  static const attachmentFileSizeColor = Color(0xFF7E869B);
+  static const attachmentFileSizeColor = Color(0xFF818C99);
   static const avatarColor = Color(0xFFF8F8F8);
   static const avatarTextColor = Color(0xFF3840F7);
   static const sentTimeTextColorUnRead = Color(0xFF182952);
@@ -152,6 +152,8 @@ 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 mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/resources/image_paths.dart

@@ -162,6 +162,7 @@ class ImagePaths {
   String get icAddEmailForward => _getImagePath('ic_add_email_forwards.svg');
   String get icChevronDownOutline => _getImagePath('ic_chevron_down_outline.svg');
   String get icUndo => _getImagePath('ic_undo.svg');
+  String get icDownloadAttachment => _getImagePath('ic_download_attachment.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

lib/features/composer/presentation/composer_view.dart

@@ -708,7 +708,7 @@ class ComposerView extends GetWidget<ComposerController>
                 child: Text(
                     expandModeAttachment == ExpandMode.EXPAND
                         ? AppLocalizations.of(context).hide
-                        : '${AppLocalizations.of(context).show_all} (${uploadFilesState.length})',
+                        : '${AppLocalizations.of(context).showAll} (${uploadFilesState.length})',
                     style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 12, color: AppColor.colorTextButton)),
                 onPressed: () => controller.toggleDisplayAttachments()
             )

lib/features/composer/presentation/composer_view_web.dart

@@ -704,7 +704,7 @@ class ComposerView extends GetWidget<ComposerController>
                 child: Text(
                     expandModeAttachment == ExpandMode.EXPAND
                         ? AppLocalizations.of(context).hide
-                        : '${AppLocalizations.of(context).show_all} (${uploadFilesState.length})',
+                        : '${AppLocalizations.of(context).showAll} (${uploadFilesState.length})',
                     style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 12, color: AppColor.colorTextButton)),
                 onPressed: () => controller.toggleDisplayAttachments()
             )

lib/features/email/presentation/email_controller.dart

@@ -84,6 +84,8 @@ class EmailController extends BaseController with AppLoaderMixin {
 
   bool get isDisplayFullEmailAddress => emailAddressExpandMode.value == ExpandMode.EXPAND;
 
+  bool get isDisplayFullAttachments => attachmentsExpandMode.value == ExpandMode.EXPAND;
+
   EmailController(
     this._getEmailContentInteractor,
     this._markAsEmailReadInteractor,

lib/features/email/presentation/email_view.dart

@@ -1,7 +1,6 @@
 import 'package:core/core.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -579,115 +578,112 @@ class EmailView extends GetWidget<EmailController> with NetworkConnectionMixin {
    });
   }
 
-  int _getAttachmentLimitDisplayed(BuildContext context) {
-    if (responsiveUtils.isMobile(context)
-        || responsiveUtils.isLandscapeMobile(context)) {
-      return 2;
-    } else if (responsiveUtils.isTablet(context) ||
-        responsiveUtils.isLandscapeTablet(context)) {
-      return 3;
-    } else {
-      return 4;
-    }
-  }
-
   Widget _buildAttachmentsBody(BuildContext context, List<Attachment> attachments) {
-    final attachmentLimitDisplayed = _getAttachmentLimitDisplayed(context);
+    return Container(
-    final countAttachments = _getListAttachmentsSize(
+      color: Colors.white,
-        context,
+      padding: const EdgeInsets.only(left: 16, right: 16, bottom: 12, top: 10),
-        controller.attachmentsExpandMode.value,
+      child: Column(crossAxisAlignment: CrossAxisAlignment.start,
-        attachments,
+        children: [
-        attachmentLimitDisplayed);
+          _buildAttachmentsHeader(context, attachments),
-    final isExpand = controller.attachmentsExpandMode.value == ExpandMode.EXPAND
+          _buildAttachmentsList(context, attachments, controller.isDisplayFullAttachments)
-        && attachments.length > attachmentLimitDisplayed;
+        ],
-    return Column(
+      ),
-      mainAxisAlignment: MainAxisAlignment.center,
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        if (isExpand)
-          Padding(
-            padding: EdgeInsets.zero,
-            child: _buildAttachmentsHeader(context, attachments)),
-        GridView.builder(
-          key: const Key('list_attachment'),
-          primary: false,
-          shrinkWrap: true,
-          padding: EdgeInsets.only(top: isExpand ? 0 : 16, bottom: 16),
-          itemCount: countAttachments,
-          gridDelegate: SliverGridDelegateFixedHeight(
-            height: 60,
-            crossAxisCount: attachmentLimitDisplayed,
-            crossAxisSpacing: 16.0,
-            mainAxisSpacing: 8.0),
-          itemBuilder: (context, index) =>
-                (AttachmentFileTileBuilder(
-                    imagePaths,
-                    attachments[index],
-                    attachments.length,
-                    attachmentLimitDisplayed)
-                ..setExpandMode((countAttachments - 1 == index) ? controller.attachmentsExpandMode.value : null)
-                ..onExpandAttachmentActionClick(() => controller.toggleDisplayAttachmentsAction())
-                ..onDownloadAttachmentFileActionClick((attachment) {
-                  if (kIsWeb) {
-                    controller.downloadAttachmentForWeb(context, attachment);
-                  } else {
-                    controller.exportAttachment(context, attachment);
-                  }
-                }))
-            .build())
-      ],
     );
   }
 
-  int _getListAttachmentsSize(
-      BuildContext context,
-      ExpandMode expandMode,
-      List<Attachment> attachments,
-      int limitDisplayAttachment
-  ) {
-    if (attachments.length > limitDisplayAttachment) {
-      return expandMode == ExpandMode.EXPAND
-        ? attachments.length
-        : attachments.sublist(0, limitDisplayAttachment).length;
-    } else {
-      return attachments.length;
-    }
-  }
-
   Widget _buildAttachmentsHeader(BuildContext context, List<Attachment> attachments) {
-    return Row(
+    return Container(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      color: Colors.white,
-      crossAxisAlignment: CrossAxisAlignment.center,
+      child: Row(
-      children: [
+        children: [
-        Row(
+          Expanded(child: Container(
-          mainAxisAlignment: MainAxisAlignment.center,
+              margin: const EdgeInsets.symmetric(vertical: 4),
-          crossAxisAlignment: CrossAxisAlignment.start,
+              child: Row(children: [
-          children: [
+                SvgPicture.asset(imagePaths.icAttachment,
-            Text(
+                    width: 20,
-              AppLocalizations.of(context).count_attachment(attachments.length),
+                    height: 20,
-              style: const TextStyle(fontSize: 12, color: AppColor.baseTextColor)),
+                    color: AppColor.colorAttachmentIcon,
-            Padding(
+                    fit: BoxFit.fill),
-              padding: const EdgeInsets.only(left: 8),
+                const SizedBox(width: 5),
-              child: Text(
+                Expanded(child: Text(
-                '(${filesize(attachments.totalSize(), 1)})',
+                    AppLocalizations.of(context).titleHeaderAttachment(
-                style: const TextStyle(fontSize: 12, color: AppColor.nameUserColor, fontWeight: FontWeight.w500)))
+                        attachments.length,
-          ],
+                        filesize(attachments.totalSize(), 1)),
-        ),
+                    style: const TextStyle(
-        if (attachments.length > 2)
+                        fontSize: 15,
-          Padding(
+                        fontWeight: FontWeight.normal,
-            padding: const EdgeInsets.only(left: 8),
+                        color: AppColor.colorTitleHeaderAttachment)))
-            child: IconButton(
+              ])
-              icon: SvgPicture.asset(imagePaths.icExpandAttachment,
+          )),
-                width: 20,
+          if (attachments.length > 2)
-                height: 20,
+            Obx(() => Material(
-                color: AppColor.primaryColor,
+              color: Colors.transparent,
-                fit: BoxFit.fill),
+              child: InkWell(
-              onPressed: () => controller.toggleDisplayAttachmentsAction()
+                onTap: controller.toggleDisplayAttachmentsAction,
+                customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+                  child: Text(
+                      controller.isDisplayFullAttachments
+                          ? AppLocalizations.of(context).hide
+                          : AppLocalizations.of(context).showAll,
+                      style: const TextStyle(
+                          fontSize: 13,
+                          color: AppColor.colorTextButton,
+                          fontWeight: FontWeight.normal)),
+                ),
+              ),
             ))
-      ],
+        ],
+      ),
     );
   }
 
+  Widget _buildAttachmentsList(
+      BuildContext context,
+      List<Attachment> attachments,
+      bool isDisplayAll
+  ) {
+    return LayoutBuilder(builder: (context, constraints) {
+      if (isDisplayAll) {
+        return Wrap(
+          runSpacing: 12,
+          children: attachments
+            .map((attachment) => AttachmentFileTileBuilder(
+              attachment,
+              onDownloadAttachmentFileActionClick: (attachment) {
+                if (BuildUtils.isWeb) {
+                  controller.downloadAttachmentForWeb(context, attachment);
+                } else {
+                  controller.exportAttachment(context, attachment);
+                }
+              }))
+            .toList());
+      } else {
+        return Container(
+            height: 60,
+            color: Colors.transparent,
+            child: ListView.builder(
+                key: const Key('list_attachment_minimize_in_email'),
+                shrinkWrap: true,
+                physics: const ClampingScrollPhysics(),
+                scrollDirection: Axis.horizontal,
+                itemCount: attachments.length,
+                itemBuilder: (context, index) => AttachmentFileTileBuilder(
+                    attachments[index],
+                    onDownloadAttachmentFileActionClick: (attachment) {
+                      if (BuildUtils.isWeb) {
+                        controller.downloadAttachmentForWeb(context, attachment);
+                      } else {
+                        controller.exportAttachment(context, attachment);
+                      }
+                    })
+            )
+        );
+      }
+    });
+  }
+
   Widget _buildEmailContent(BuildContext context, BoxConstraints constraints) {
     return Obx(() {
       if (controller.emailContents.isNotEmpty) {

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

@@ -3,157 +3,102 @@ import 'package:core/core.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/model.dart';
 import 'package:tmail_ui_user/features/email/presentation/extensions/attachment_extension.dart';
 
 typedef OnDownloadAttachmentFileActionClick = void Function(Attachment attachment);
 typedef OnExpandAttachmentActionClick = void Function();
 
-class AttachmentFileTileBuilder {
+class AttachmentFileTileBuilder extends StatelessWidget{
 
-  final ImagePaths _imagePaths;
   final Attachment _attachment;
-  final int _attachmentSize;
+  final OnDownloadAttachmentFileActionClick? onDownloadAttachmentFileActionClick;
-  final int _limitDisplayAttachment;
-  ExpandMode? _expandMode;
 
-  OnDownloadAttachmentFileActionClick? _onDownloadAttachmentFileActionClick;
+  const AttachmentFileTileBuilder(
-  OnExpandAttachmentActionClick? _onExpandAttachmentActionClick;
+    this._attachment, {
+    Key? key,
+    this.onDownloadAttachmentFileActionClick,
+  }) : super(key: key);
 
-  Widget? buttonAction;
+  @override
-  double? heightItem;
+  Widget build(BuildContext context) {
+    final imagePaths = Get.find<ImagePaths>();
+    final responsiveUtils = Get.find<ResponsiveUtils>();
 
-  AttachmentFileTileBuilder(
+    return Padding(
-    this._imagePaths,
+      padding: const EdgeInsets.only(right: 12),
-    this._attachment,
+      child: Material(
-    this._attachmentSize,
+        color: Colors.transparent,
-    this._limitDisplayAttachment,
+        child: InkWell(
-  );
+          onTap: () => onDownloadAttachmentFileActionClick?.call(_attachment),
-
+          customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-  void onDownloadAttachmentFileActionClick(OnDownloadAttachmentFileActionClick onDownloadAttachmentFileActionClick) {
+          child: Container(
-    _onDownloadAttachmentFileActionClick = onDownloadAttachmentFileActionClick;
+            padding: const EdgeInsets.all(8),
-  }
+            decoration: BoxDecoration(
-
+              borderRadius: BorderRadius.circular(10),
-  void onExpandAttachmentActionClick(OnExpandAttachmentActionClick onExpandAttachmentActionClick) {
+              border: Border.all(color: AppColor.attachmentFileBorderColor),
-    _onExpandAttachmentActionClick = onExpandAttachmentActionClick;
+              color: Colors.transparent),
-  }
+            width: responsiveUtils.isMobile(context) ? 224 : 250,
-
+            height: 60,
-  void setExpandMode(ExpandMode? expandMode) {
+            child: Stack(
-    _expandMode = expandMode;
+              children: [
-  }
+                Positioned.fill(
-
+                  child: Row(children: [
-  void addButtonAction(Widget action) {
+                    SvgPicture.asset(
-    buttonAction = action;
+                        _attachment.getIcon(imagePaths),
-  }
+                        width: 44,
-
+                        height: 44,
-  void height(double height) {
+                        fit: BoxFit.fill),
-    heightItem = height;
+                    const SizedBox(width: 8),
-  }
+                    Expanded(child: Column(
-
+                        crossAxisAlignment: CrossAxisAlignment.start,
-  Widget build() {
+                        children: [
-    return Theme(
+                            Text(
-      data: ThemeData(
+                              _attachment.name ?? '',
-        splashColor: Colors.transparent ,
+                              maxLines: 1,
-        highlightColor: Colors.transparent),
+                              overflow: CommonTextStyle.defaultTextOverFlow,
-      child: Container(
+                              softWrap: CommonTextStyle.defaultSoftWrap,
-        key: const Key('attach_file_tile'),
+                              style: const TextStyle(
-        alignment: Alignment.center,
+                                  fontSize: 14,
-        margin: EdgeInsets.only(top:heightItem != null ? 8 : 0),
+                                  color: AppColor.attachmentFileNameColor,
-        height: heightItem,
+                                  fontWeight: FontWeight.normal),
-        padding: EdgeInsets.zero,
+                            ),
-        decoration: BoxDecoration(
+                            const SizedBox(height: 4),
-          borderRadius: BorderRadius.circular(8),
+                            Text(
-          border: Border.all(color: AppColor.attachmentFileBorderColor),
+                              filesize(_attachment.size?.value),
-          color: Colors.white),
+                              maxLines: 1,
-        child: MediaQuery(
+                              overflow: CommonTextStyle.defaultTextOverFlow,
-          data: const MediaQueryData(padding: EdgeInsets.zero),
+                              softWrap: CommonTextStyle.defaultSoftWrap,
-          child: Stack(
+                              style: const TextStyle(
-            alignment: AlignmentDirectional.bottomEnd,
+                                  fontSize: 12,
-            children: [
+                                  color: AppColor.attachmentFileSizeColor,
-              ListTile(
+                                  fontWeight: FontWeight.normal),
-                contentPadding: EdgeInsets.zero,
+                            )
-                focusColor: AppColor.primaryColor,
+                        ]
-                hoverColor: AppColor.primaryColor,
+                    ))
-                onTap: () {
+                  ]),
-                  if (_onDownloadAttachmentFileActionClick != null) {
-                    _onDownloadAttachmentFileActionClick!(_attachment);
-                  }},
-                leading: Padding(
-                  padding: const EdgeInsets.only(left: 8, bottom: BuildUtils.isWeb ? 6 : 14),
-                  child: SvgPicture.asset(
-                      _attachment.getIcon(_imagePaths),
-                      width: 40,
-                      height: 40,
-                      fit: BoxFit.fill),
                 ),
-                title: Transform(
+                Align(
-                  transform: Matrix4.translationValues(
+                  alignment: Alignment.bottomRight,
-                      BuildUtils.isWeb ? 0.0 : -8.0,
+                  child: Material(
-                      BuildUtils.isWeb ? -8.0 : -10.0,
+                    color: Colors.transparent,
-                      0.0),
+                    child: InkWell(
-                  child: Text(
+                      customBorder: const CircleBorder(),
-                    _attachment.name ?? '',
+                      child: SvgPicture.asset(
-                    maxLines: 1,
+                        imagePaths.icDownloadAttachment,
-                    overflow: TextOverflow.ellipsis,
-                    style: const TextStyle(fontSize: 12, color: AppColor.attachmentFileNameColor, fontWeight: FontWeight.w500),
-                  )),
-                subtitle: _attachment.size != null && _attachment.size?.value != 0
-                  ? Transform(
-                      transform: Matrix4.translationValues(
-                          BuildUtils.isWeb ? 0.0 : -8.0,
-                          BuildUtils.isWeb ? -8.0 : -10.0,
-                          0.0),
-                      child: Text(
-                        filesize(_attachment.size?.value),
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                        style: const TextStyle(fontSize: 12, color: AppColor.attachmentFileSizeColor)))
-                  : null,
-                trailing: buttonAction != null
-                  ? Transform(
-                      transform: Matrix4.translationValues(-5.0, heightItem != null ? -6.0 : 0.0, 0.0),
-                      child: buttonAction)
-                  : null
-              ),
-              if (buttonAction == null)
-                Transform(
-                  transform: Matrix4.translationValues(5.0, 5.0, 0.0),
-                  child: IconButton(
-                    icon: SvgPicture.asset(
-                        _imagePaths.icDownload,
                         width: 24,
                         height: 24,
                         color: AppColor.primaryColor,
                         fit: BoxFit.fill),
-                    onPressed: () {
+                      onTap: () => onDownloadAttachmentFileActionClick?.call(_attachment)
-                      if (_onDownloadAttachmentFileActionClick != null) {
+                    ),
-                        _onDownloadAttachmentFileActionClick!(_attachment);
+                  ),
-                      }
+                ),
-                    }
+              ]
-                  )),
+            )
-              if (_attachmentSize > _limitDisplayAttachment && _expandMode == ExpandMode.COLLAPSE) _buildItemBackground()
+          ),
-            ]
+        ),
-          )
-        )
-      )
-    );
-  }
-
-  Widget _buildItemBackground() {
-    return GestureDetector(
-      onTap: () {
-        if (_onExpandAttachmentActionClick != null) {
-          _onExpandAttachmentActionClick!();
-        }
-      },
-      child: Stack(
-        alignment: AlignmentDirectional.center,
-        children: [
-          Container(color: AppColor.backgroundCountAttachment),
-          Text(
-            '+${_attachmentSize - _limitDisplayAttachment + 1}',
-            style: const TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.bold))
-        ],
       ),
     );
   }

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

@@ -28,7 +28,13 @@ class BottomBarMailWidgetBuilder extends StatelessWidget {
 
     return Container(
       alignment: Alignment.center,
-      color: Colors.white,
+      decoration: responsiveUtils.isWebDesktop(context)
+        ? const BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.only(
+                 bottomRight: Radius.circular(20),
+                 bottomLeft: Radius.circular(20)))
+        : const BoxDecoration(color: Colors.white),
       child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-10-12T11:51:14.324607",
+  "@@last_modified": "2022-10-12T16:44:35.025767",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -358,14 +358,16 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "count_attachment": "{count} attachments",
+  "titleHeaderAttachment": "{count} Attachments ({totalSize}):",
-  "@count_attachment": {
+  "@titleHeaderAttachment": {
     "type": "text",
     "placeholders_order": [
-      "count"
+      "count",
+      "totalSize"
     ],
     "placeholders": {
-      "count": {}
+      "count": {},
+      "totalSize": {}
     }
   },
   "attach_file_prepare_text": "Preparing to attach file...",
@@ -792,8 +794,8 @@
     "placeholders_order": [],
     "placeholders": {}
   },
-  "show_all": "Show all",
+  "showAll": "Show all",
-  "@show_all": {
+  "@showAll": {
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}

lib/main/localizations/app_localizations.dart

@@ -374,11 +374,11 @@ class AppLocalizations {
     );
   }
 
-  String count_attachment(int count) {
+  String titleHeaderAttachment(int count, String totalSize) {
     return Intl.message(
-        '$count attachments',
+        '$count Attachments ($totalSize):',
-        name: 'count_attachment',
+        name: 'titleHeaderAttachment',
-        args: [count]
+        args: [count, totalSize]
     );
   }
 
@@ -821,10 +821,10 @@ class AppLocalizations {
         name: 'attachments');
   }
 
-  String get show_all {
+  String get showAll {
     return Intl.message(
         'Show all',
-        name: 'show_all');
+        name: 'showAll');
   }
 
   String get message_dialog_send_email_without_a_subject {