TF-2116 Support show collapse/expand signature for email view

linagora · Sep 12, 2023 · 508e86c · 508e86c
1 parent 970a2a2
commit 508e86c
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 103 deletions.
diff --git a/core/lib/presentation/utils/html_transformer/html_template.dart b/core/lib/presentation/utils/html_transformer/html_template.dart
@@ -53,6 +53,45 @@ String generateHtml(String content, {
         }
       ''' : ''}
       ${styleCSS ?? ''}
+      
+      .tmail-signature {
+        text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+        margin: 16px 0px 16px 0px;
+      }
+    
+      .tmail-signature-button,
+      .tmail-signature-button * {
+        box-sizing: border-box;
+      }
+    
+      .tmail-signature-button {
+        padding: 6px 40px 6px 16px;
+        border-radius: 4px;
+        color: #fff;
+        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 11.8319L5.53383 8.1098C5.18027 7.81516 4.6548 7.86293 4.36016 8.21649C4.06553 8.57006 4.1133 9.09553 4.46686 9.39016L9.46686 13.5568C9.7759 13.8144 10.2248 13.8144 10.5338 13.5568L15.5338 9.39016C15.8874 9.09553 15.9352 8.57006 15.6405 8.21649C15.3459 7.86293 14.8204 7.81516 14.4669 8.1098L10.0003 11.8319Z' fill='%23AEAEC0'/%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-position: right 16px center;
+        background-color: #FFFFFF;
+        border-radius: 36px;
+        border-style: solid;
+        border-color: var(--m-3-syslight-outline-shadow-outline-variant, #cac4d0);
+        border-width: 0.5px;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+        justify-content: flex-start;
+        flex-shrink: 0;
+        position: relative;
+        cursor: pointer;
+        color: var(--m-3-syslight-tetirary-tertiary, #8c9caf);
+        text-align: left;
+        font: var(--m-3-body-large-2, 400 17px/24px "Inter", sans-serif);
+      }
+    
+      .tmail-signature-content {
+        padding: 12px;
+        overflow: hidden;
+      }
     </style>
     </head>
     <body ${direction == TextDirection.rtl ? 'dir="rtl"' : ''} style = "overflow-x: hidden">

diff --git a/core/lib/presentation/utils/html_transformer/html_transform.dart b/core/lib/presentation/utils/html_transformer/html_transform.dart
@@ -13,10 +13,9 @@ class HtmlTransform {
   /// Transforms this message to HTML code.
   Future<String> transformToHtml({
     required String htmlContent,
+    required TransformConfiguration transformConfiguration,
     Map<String, String>? mapCidImageDownloadUrl,
-    TransformConfiguration? transformConfiguration,
   }) async {
-    transformConfiguration ??= TransformConfiguration.create();
     final transformer = MessageContentTransformer(transformConfiguration, _dioClient, _htmlEscape);
     final document = await transformer.toDocument(
       message: htmlContent,
@@ -28,9 +27,8 @@ class HtmlTransform {
   /// Transforms this message to Text Plain.
   String transformToTextPlain({
     required String content,
-    TransformConfiguration? transformConfiguration
+    required TransformConfiguration transformConfiguration
   }) {
-    transformConfiguration ??= TransformConfiguration.create();
     final transformer = MessageContentTransformer(transformConfiguration, _dioClient, _htmlEscape);
     final message = transformer.toMessage(content);
     return message;

diff --git a/core/lib/presentation/utils/html_transformer/html_utils.dart b/core/lib/presentation/utils/html_transformer/html_utils.dart
@@ -101,20 +101,116 @@ class HtmlUtils {
     </script>
   ''';
 
+  static const runScriptsCollapsedExpandedSignature = '''
+    const signatureNode = document.querySelector('.tmail-content > .tmail-signature');
+    if (signatureNode) {
+      const signatureContainer = document.createElement('div');
+      signatureContainer.setAttribute('class', 'tmail-signature');
+  
+      const signatureContent = document.createElement('div');
+      signatureContent.setAttribute('class', 'tmail-signature-content');
+      signatureContent.innerHTML = signatureNode.innerHTML;
+      signatureContent.style.display = 'none';
+  
+      const signatureButton = document.createElement('button');
+      signatureButton.setAttribute('class', 'tmail-signature-button');
+      signatureButton.textContent = 'Signature';
+      signatureButton.style.backgroundImage = data['iconCollapsed'];
+  
+      signatureContainer.appendChild(signatureButton);
+      signatureContainer.appendChild(signatureContent);
+  
+      if (signatureNode.outerHTML) {
+        signatureNode.outerHTML = signatureContainer.outerHTML;
+      } else {
+        signatureNode.parentNode.replaceChild(signatureContainer, signatureNode);
+      }
+      
+      const newSignatureButton = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-button');
+      newSignatureButton.addEventListener('click', function handleClick(event) {
+        const contentElement = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-content');
+        const buttonElement = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-button');
+        if (contentElement && buttonElement) {
+          if (contentElement.style.display === 'block') {
+            contentElement.style.display = 'none';
+            buttonElement.style.backgroundImage = data['iconCollapsed'];
+          } else {
+            contentElement.style.display = 'block';
+            buttonElement.style.backgroundImage = data['iconExpanded'];
+          }
+        }
+      }, false);
+    }
+  ''';
+
+  static const scriptCollapsedExpandedSignatureOnMobile = '''
+    <script type="text/javascript">
+      function showSignature(iconCollapsed, iconExpanded) {
+        const signatureNode = document.querySelector('.tmail-content > .tmail-signature');
+        if (signatureNode) {
+          const signatureContainer = document.createElement('div');
+          signatureContainer.setAttribute('class', 'tmail-signature');
+      
+          const signatureContent = document.createElement('div');
+          signatureContent.setAttribute('class', 'tmail-signature-content');
+          signatureContent.innerHTML = signatureNode.innerHTML;
+          signatureContent.style.display = 'none';
+      
+          const signatureButton = document.createElement('button');
+          signatureButton.setAttribute('class', 'tmail-signature-button');
+          signatureButton.textContent = 'Signature';
+          signatureButton.style.backgroundImage = iconCollapsed;
+      
+          signatureContainer.appendChild(signatureButton);
+          signatureContainer.appendChild(signatureContent);
+      
+          if (signatureNode.outerHTML) {
+            signatureNode.outerHTML = signatureContainer.outerHTML;
+          } else {
+            signatureNode.parentNode.replaceChild(signatureContainer, signatureNode);
+          }
+          
+          const newSignatureButton = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-button');
+          newSignatureButton.addEventListener('click', function handleClick(event) {
+            const contentElement = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-content');
+            const buttonElement = document.querySelector('.tmail-content > .tmail-signature > .tmail-signature-button');
+            if (contentElement && buttonElement) {
+              if (contentElement.style.display === 'block') {
+                contentElement.style.display = 'none';
+                buttonElement.style.backgroundImage = iconCollapsed;
+              } else {
+                contentElement.style.display = 'block';
+                buttonElement.style.backgroundImage = iconExpanded;
+              }
+            }
+          }, false);
+        }
+      }
+    </script>
+  ''';
+
   static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
     if (PlatformInfo.isWeb) {
       return '''
         <style>
           .note-editable {
             direction: ${direction.name};
           }
+          
+          .note-editable .tmail-signature {
+            text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+          }
         </style>
       ''';
     } else if (PlatformInfo.isMobile) {
       return '''
         #editor {
           direction: ${direction.name};
         }
+        
+        #editor .tmail-signature {
+          text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+        }
       ''';
     } else {
       return '';

diff --git a/core/lib/presentation/utils/html_transformer/transform_configuration.dart b/core/lib/presentation/utils/html_transformer/transform_configuration.dart
@@ -34,6 +34,7 @@ class TransformConfiguration {
       const ReplaceLazyLoadImageTransformer(),
       if (PlatformInfo.isWeb)
         const RemoveTooltipLinkTransformer(),
+      const SignatureTransformer(),
     ]
   );
 
@@ -53,7 +54,22 @@ class TransformConfiguration {
       const BlockQuotedTransformer(),
       const BlockCodeTransformer(),
       const AddTargetBlankInTagATransformer(),
-      const ImageTransformer(useLoadingAttribute: true)
+      const ImageTransformer(useLoadingAttribute: true),
+      const SignatureTransformer(),
+    ]
+  );
+
+  factory TransformConfiguration.forComposeEmail() => TransformConfiguration.create(
+    customDomTransformers: [
+      const RemoveScriptTransformer(),
+      const BlockQuotedTransformer(),
+      const BlockCodeTransformer(),
+      const AddTargetBlankInTagATransformer(),
+      const ImageTransformer(),
+      const SignatureTransformer(),
+    ],
+    customTextTransformers: [
+      const SanitizeAutolinkHtmlTransformers()
     ]
   );
 
@@ -97,7 +113,6 @@ class TransformConfiguration {
 
   static const List<DomTransformer> standardDomTransformers = [
     RemoveScriptTransformer(),
-    SignatureTransformer(),
     BlockQuotedTransformer(),
     BlockCodeTransformer(),
     AddTargetBlankInTagATransformer(),

diff --git a/core/lib/presentation/utils/icon_utils.dart b/core/lib/presentation/utils/icon_utils.dart
@@ -3,4 +3,12 @@ import 'package:core/utils/platform_info.dart';
 
 class IconUtils {
   static const double defaultIconSize = PlatformInfo.isWeb ? 20.0 : 24.0;
+
+  static const String chevronUpSVGIconUrlEncoded = '''
+    url("data:image/svg+xml,%3Csvg class='chevron-down' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M14.5352 11.9709C14.8347 12.2276 15.2857 12.193 15.5424 11.8934C15.7991 11.5939 15.7644 11.143 15.4649 10.8863L10.4649 6.60054C10.1974 6.37127 9.8027 6.37127 9.53521 6.60054L4.53521 10.8863C4.23569 11.143 4.201 11.5939 4.45773 11.8934C4.71446 12.193 5.16539 12.2276 5.46491 11.9709L10.0001 8.08364L14.5352 11.9709Z' fill='%23AEAEC0' /%3E%3C/svg%3E")
+  ''';
+
+  static const String chevronDownSVGIconUrlEncoded = '''
+    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 11.8319L5.53383 8.1098C5.18027 7.81516 4.6548 7.86293 4.36016 8.21649C4.06553 8.57006 4.1133 9.09553 4.46686 9.39016L9.46686 13.5568C9.7759 13.8144 10.2248 13.8144 10.5338 13.5568L15.5338 9.39016C15.8874 9.09553 15.9352 8.57006 15.6405 8.21649C15.3459 7.86293 14.8204 7.81516 14.4669 8.1098L10.0003 11.8319Z' fill='%23AEAEC0'/%3E%3C/svg%3E%0A")
+  ''';
 }