Change order of attachment and mail body on mobile

Signed-off-by: dab246 <tdvu@linagora.com>

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

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