TF-185 [BUG] Fix can not display all parts of email which have multiple html part

2021-10-15 16:14:41 +07:00
parent a6f2a23cec
commit ececc65a26
16 changed files with 282 additions and 154 deletions
@@ -0,0 +1,131 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+const List<Color> _defaultColors = [Color.fromRGBO(0, 0, 0, 0.1), Color(0x44CCCCCC), Color.fromRGBO(0, 0, 0, 0.1)];
+
+Decoration _radiusBoxDecoration({
+  required Animation animation,
+  bool hasCustomColors = false,
+  AlignmentGeometry beginAlign = Alignment.topLeft,
+  AlignmentGeometry endAlign = Alignment.bottomRight,
+  List<Color> colors = _defaultColors,
+  double radius = 10.0
+}) {
+  return BoxDecoration(
+    borderRadius: BorderRadius.circular(radius),
+    shape: BoxShape.rectangle,
+    gradient: LinearGradient(
+      begin: beginAlign,
+      end: endAlign,
+      colors: hasCustomColors
+        ? colors.map((color) {
+            return color;
+          }).toList()
+        : [
+            Color.fromRGBO(0, 0, 0, 0.1),
+            Color(0x32E5E5E5),
+            Color.fromRGBO(0, 0, 0, 0.1),
+          ],
+      stops: [animation.value - 2, animation.value, animation.value + 1]));
+}
+
+class AttachmentsPlaceHolderLoading extends StatefulWidget {
+
+  final ResponsiveUtils responsiveUtils;
+
+  const AttachmentsPlaceHolderLoading({
+    Key? key,
+    required this.responsiveUtils,
+  }) : super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _AttachmentsPlaceHolderLoadingState();
+}
+
+class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLoading> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(duration: Duration(seconds: 1), vsync: this)..repeat();
+    _animation = Tween<double>(begin: -2, end: 2)
+      .animate(CurvedAnimation(curve: Curves.easeInOutSine, parent: _animationController));
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (BuildContext context, Widget? child) {
+        return Container(
+          margin: EdgeInsets.only(top: 20),
+          padding: EdgeInsets.zero,
+          color: Colors.transparent,
+          child: Column(
+            children: [
+              Row(children: [
+                _placeHolderAttachment(context),
+                SizedBox(width: 16),
+                _placeHolderAttachment(context),
+                if (!widget.responsiveUtils.isMobile(context))
+                  SizedBox(width: 16),
+                if (!widget.responsiveUtils.isMobile(context))
+                  _placeHolderAttachment(context),
+                if (widget.responsiveUtils.isTablet(context))
+                  SizedBox(width: 16),
+                if (widget.responsiveUtils.isTablet(context))
+                  _placeHolderAttachment(context),
+              ]),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _placeHolderAttachment(BuildContext context) {
+    double width = MediaQuery.of(context).size.width;
+    final percentAttachment = widget.responsiveUtils.isMobile(context)
+        ? 0.4
+        : widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
+    return Container(
+      height: 55,
+      width: width * percentAttachment,
+      margin: EdgeInsets.zero,
+      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
+      decoration: _radiusBoxDecoration(animation: _animation),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            height: 24,
+            width: 24,
+            decoration: _radiusBoxDecoration(animation: _animation, radius: 12)),
+          SizedBox(width: 8),
+          Expanded(child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                height: 5,
+                decoration: _radiusBoxDecoration(animation: _animation)),
+              SizedBox(height: 10),
+              Container(
+                height: 5,
+                decoration: _radiusBoxDecoration(animation: _animation))
+            ],
+          ))
+        ]
+      )
+    );
+  }
+}
@@ -0,0 +1,51 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:model/model.dart';
+
+class EmailContentItemBuilder {
+
+  final BuildContext _context;
+  final EmailContent _emailContent;
+  final Widget? loadingWidget;
+
+  EmailContentItemBuilder(
+    this._context,
+    this._emailContent,
+    {
+      this.loadingWidget
+    }
+  );
+
+  Widget build() {
+    return Theme(
+      data: ThemeData(
+        splashColor: Colors.transparent,
+        highlightColor: Colors.transparent),
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: _buildItem()
+      )
+    );
+  }
+
+  Widget _buildItem() {
+    switch(_emailContent.type) {
+      case EmailContentType.textHtml:
+        return HtmlContentViewer(
+          widthContent: MediaQuery.of(_context).size.width,
+          contentHtml: _emailContent.content,
+          loadingWidget: loadingWidget,
+          mailtoDelegate: (uri) async {});
+      case EmailContentType.textPlain:
+        return Padding(
+          padding: EdgeInsets.zero,
+          child: Text(
+            _emailContent.content,
+            style: TextStyle(fontSize: 14, color: AppColor.nameUserColor)));
+      case EmailContentType.other:
+        return SizedBox.shrink();
+    }
+  }
+}
@@ -41,7 +41,7 @@ class EmailContentPlaceHolderLoading extends StatefulWidget {
  }) : super(key: key);

  @override
-  _EmailContentPlaceHolderLoadingState createState() => _EmailContentPlaceHolderLoadingState();
+  State<StatefulWidget> createState() => _EmailContentPlaceHolderLoadingState();
 }

 class _EmailContentPlaceHolderLoadingState extends State<EmailContentPlaceHolderLoading> with SingleTickerProviderStateMixin {
@@ -68,25 +68,11 @@ class _EmailContentPlaceHolderLoadingState extends State<EmailContentPlaceHolder
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return Container(
-          margin: EdgeInsets.only(top: 20),
+          margin: EdgeInsets.only(top: 16),
          padding: EdgeInsets.zero,
          color: Colors.transparent,
          child: Column(
            children: [
-              Row(children: [
-                _placeHolderAttachment(context),
-                SizedBox(width: 16),
-                _placeHolderAttachment(context),
-                if (!widget.responsiveUtils.isMobile(context))
-                  SizedBox(width: 16),
-                if (!widget.responsiveUtils.isMobile(context))
-                  _placeHolderAttachment(context),
-                if (widget.responsiveUtils.isTablet(context))
-                  SizedBox(width: 16),
-                if (widget.responsiveUtils.isTablet(context))
-                  _placeHolderAttachment(context),
-              ]),
-              SizedBox(height: 16),
              Container(
                margin: EdgeInsets.only(right: 64),
                height: 10,
@@ -106,40 +92,4 @@ class _EmailContentPlaceHolderLoadingState extends State<EmailContentPlaceHolder
      },
    );
  }
-
-  Widget _placeHolderAttachment(BuildContext context) {
-    double width = MediaQuery.of(context).size.width;
-    final percentAttachment = widget.responsiveUtils.isMobile(context)
-        ? 0.4
-        : widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
-    return Container(
-      height: 55,
-      width: width * percentAttachment,
-      margin: EdgeInsets.zero,
-      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
-      decoration: _radiusBoxDecoration(animation: _animation),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Container(
-            height: 24,
-            width: 24,
-            decoration: _radiusBoxDecoration(animation: _animation, radius: 12)),
-          SizedBox(width: 8),
-          Expanded(child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Container(
-                height: 5,
-                decoration: _radiusBoxDecoration(animation: _animation)),
-              SizedBox(height: 10),
-              Container(
-                height: 5,
-                decoration: _radiusBoxDecoration(animation: _animation))
-            ],
-          ))
-        ]
-      )
-    );
-  }
 }