TF-3410 Update color, dimensions and alignments in EmailView

Signed-off-by: dab246 <tdvu@linagora.com>
2025-01-08 16:07:00 +07:00
parent d9def92781
commit b3aaef83a5
16 changed files with 92 additions and 58 deletions
@@ -241,6 +241,7 @@ extension AppColor on Color {
  static const steelGrayA540 = Color(0xFF55687D);
  static const steelGray200 = Color(0xFFAEB7C2);
  static const blue700 = Color(0xFF208BFF);
+  static const steelGray400 = Color(0xFF818C99);

  static const mapGradientColor = [
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -20,6 +20,8 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
  final double widthContent;
  final double heightContent;
  final TextDirection? direction;
+  final double? contentPadding;
+  final bool useDefaultFont;

  /// Handler for mailto: links
  final OnMailtoClicked? mailtoDelegate;
@@ -37,10 +39,12 @@ class HtmlContentViewerOnWeb extends StatefulWidget {
    required this.widthContent,
    required this.heightContent,
    this.allowResizeToDocumentSize = true,
+    this.useDefaultFont = false,
    this.mailtoDelegate,
    this.direction,
    this.onClickHyperLinkAction,
    this.keepWidthWhileLoading = false,
+    this.contentPadding,
  }) : super(key: key);

  @override
@@ -264,7 +268,10 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
      minWidth: _minWidth,
      styleCSS: HtmlTemplate.tooltipLinkCss,
      javaScripts: webViewActionScripts + scriptsDisableZoom + HtmlInteraction.scriptsHandleLazyLoadingBackgroundImage,
-      direction: widget.direction);
+      direction: widget.direction,
+      contentPadding: widget.contentPadding,
+      useDefaultFont: widget.useDefaultFont,
+    );

    return htmlTemplate;
  }
@@ -26,6 +26,8 @@ class HtmlContentViewer extends StatefulWidget {
  final double? initialWidth;
  final TextDirection? direction;
  final bool keepWidthWhileLoading;
+  final double? contentPadding;
+  final bool useDefaultFont;

  final OnLoadWidthHtmlViewerAction? onLoadWidthHtmlViewer;
  final OnMailtoDelegateAction? onMailtoDelegateAction;
@@ -39,6 +41,8 @@ class HtmlContentViewer extends StatefulWidget {
    this.initialWidth,
    this.direction,
    this.keepWidthWhileLoading = false,
+    this.contentPadding,
+    this.useDefaultFont = false,
    this.onLoadWidthHtmlViewer,
    this.onMailtoDelegateAction,
    this.onScrollHorizontalEnd,
@@ -105,7 +109,9 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
    _htmlData = HtmlUtils.generateHtmlDocument(
      content: widget.contentHtml,
      direction: widget.direction,
-      javaScripts: _customScripts
+      javaScripts: _customScripts,
+      contentPadding: widget.contentPadding,
+      useDefaultFont: widget.useDefaultFont,
    );
  }

@@ -94,7 +94,9 @@ class HtmlUtils {
    String? styleCSS,
    String? javaScripts,
    bool hideScrollBar = true,
-    TextDirection? direction
+    bool useDefaultFont = false,
+    TextDirection? direction,
+    double? contentPadding,
  }) {
    return '''
      <!DOCTYPE html>
@@ -103,6 +105,13 @@ class HtmlUtils {
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style>
+        ${useDefaultFont ? '''
+          body {
+            font-family: Arial, 'Inter', sans-serif; /* Fall back to sans-serif if fonts aren't available */
+            font-size: 16pt;
+            line-height: 24pt;
+          }
+        ''' : ''}
        .tmail-content {
          min-height: ${minHeight ?? 0}px;
          min-width: ${minWidth ?? 0}px;
@@ -120,7 +129,7 @@ class HtmlUtils {
        ${styleCSS ?? ''}
      </style>
      </head>
-      <body ${direction == TextDirection.rtl ? 'dir="rtl"' : ''} style = "overflow-x: hidden">
+      <body ${direction == TextDirection.rtl ? 'dir="rtl"' : ''} style = "overflow-x: hidden; ${contentPadding != null ? 'margin: $contentPadding;' : ''}";>
      <div class="tmail-content">$content</div>
      ${javaScripts ?? ''}
      </body>