Merge pull request #1770 from njam/email-template

Breaking: Update email template
cargomedia · May 18, 2015 · a74bfc6 · a74bfc6
2 parents 29ebe41 + b7d5789
commit a74bfc6
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 29 deletions.
diff --git a/layout/default/Component/EmailPreview/default.less b/layout/default/Component/EmailPreview/default.less
@@ -1,3 +1,9 @@
-iframe {
-  border: none;
+.preview {
+  border: 1px solid @colorFgBorderEmphasize3;
+}
+
+.preview-html {
+  width: 100%;
+  height: 530px;
+  margin-bottom: 10px;
 }
diff --git a/layout/default/Component/EmailPreview/default.tpl b/layout/default/Component/EmailPreview/default.tpl
@@ -1,5 +1,2 @@
-<iframe class="htmlPreview" src="" width="100%" height="530" frameborder="1"></iframe>
-<hr />
-<pre>
-{$plainText}
-</pre>
+<iframe class="preview preview-html" src="" width="100%" height="530"></iframe>
+<pre class="preview preview-text">{$plainText}</pre>
diff --git a/layout/default/Mail/Welcome/body.tpl b/layout/default/Mail/Welcome/body.tpl
@@ -1 +1,3 @@
 {translate 'Welcome to {$siteName}!' siteName=$siteName}
+
+{load file='Mail/helper/button.tpl' label={translate 'Example Page'} href={linkUrl page=CM_Page_Example}}
diff --git a/layout/default/Mail/helper/button.tpl b/layout/default/Mail/helper/button.tpl
@@ -0,0 +1,12 @@
+{strip}
+  <a href="{$href|escape}" style="{less}
+    display: inline-block;
+    background-color: @colorBgButtonHighlight;
+    color: @colorFgButtonHighlight;
+    border-style: solid;
+    border-color: @colorBgButtonHighlight;
+    border-width: @sizeButton/4 @sizeButton/2;
+    border-radius: @borderRadiusInput;
+    text-decoration: none !important;
+  {/less}">{$label}</a>
+{/strip}
diff --git a/layout/default/Mail/mailHtml.tpl b/layout/default/Mail/mailHtml.tpl
@@ -1,25 +1,140 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+      {less}
+
+      /* Reset */
+
+      body {
+        width: 100% !important;
+        min-width: 100%;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+        width: auto;
+        max-width: 100%;
+      }
+
+      a img {
+        border: none;
+      }
+
+      p {
+        margin: 0.5em 0 0.5em 0;
+      }
+
+      table {
+        border-spacing: 0;
+        border-collapse: collapse;
+      }
+
+      td {
+        word-break: break-word;
+        -webkit-hyphens: auto;
+        -moz-hyphens: auto;
+        hyphens: auto;
+        border-collapse: collapse !important;
+      }
+
+      table, tr, td {
+        padding: 0;
+        vertical-align: top;
+        text-align: left;
+      }
+
+      hr {
+        color: @colorFgBorderEmphasize1;
+        background-color: @colorFgBorderEmphasize1;
+        height: 1px;
+        border: none;
+      }
+
+      /* Typography */
+
+      body, table, h1, h2, h3, h4, h5, h6, p, td {
+        color: @colorFg;
+        font-family: @fontFamily;
+        font-size: @fontSize;
+        -webkit-font-smoothing: antialiased;
+        line-height: @fontLineHeight;
+      }
+
+      h1, h2, h3, h4, h5 {
+        font-weight: bold;
+        line-height: @fontLineHeightHeading;
+      }
+
+      h1, h2, h3 {
+        font-family: @fontFamilyHeading;
+        color: @fontColorHeading;
+      }
+
+      /* Base styles */
+
+      a {
+        color: @colorFgLink;
+        text-decoration: none
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      {/less}
+    </style>
+    {block name='head'}{/block}
   </head>
-  <body style="margin: 0">
-
-    <p>
-      {if isset($recipient)}
-        {translate 'Dear {$username}' username=$recipient->getDisplayName()|escape},
-      {else}
-        {translate 'Dear user'},
-      {/if}
-    </p>
-
-    <p>
-      {$body}
-    </p>
-
-    <p>
-      {translate 'Thanks'},<br />
-      {$siteName}
-    </p>
+  <body>
+    {block name='body'}
+      <table class="body" style="{less}width: 100%; height: 100%; text-align: center; background-color: @colorBg;{/less}">
+        <tr>
+          <td style="padding: 20px;" valign="top">
+            <!--[if (mso)|(lt IE 9)]>
+            <table class="container-no-maxwidth" width="600" align="center">
+              <tr>
+                <td valign="top">
+            <![endif]-->
+            <table class="container" style="width: 100%; max-width: 600px; margin: 0 auto; text-align: left;">
+              <tr>
+                <td valign="top">
+
+                  {block name='content'}
+                    <p>
+                      {if isset($recipient)}
+                        {translate 'Dear {$username}' username=$recipient->getDisplayName()|escape},
+                      {else}
+                        {translate 'Dear user'},
+                      {/if}
+                    </p>
+                    <p>
+                      {$body}
+                    </p>
+                    <p>
+                      {translate 'Thanks'},<br />
+                      {$siteName|escape}
+                    </p>
+                  {/block}
+
+                </td>
+              </tr>
+            </table>
+            <!--[if (mso)|(lt IE 9)]>
+            </td></tr></table>
+            <![endif]-->
+          </td>
+        </tr>
+      </table>
+    {/block}
   </body>
 </html>
diff --git a/library/CM/Component/EmailPreview.js b/library/CM/Component/EmailPreview.js
@@ -8,7 +8,7 @@ var CM_Component_EmailPreview = CM_Component_Abstract.extend({
   html: null,
 
   ready: function() {
-    var $iframe = this.$('.htmlPreview');
+    var $iframe = this.$('.preview-html');
     $iframe.attr('src', 'data:text/html;charset=utf-8,' + encodeURI(this.html));
   }
 });
diff --git a/tests/library/CM/Mail/WelcomeTest.php b/tests/library/CM/Mail/WelcomeTest.php
@@ -12,5 +12,11 @@ public function testRenderTranslated() {
         $nodeList = new CM_Dom_NodeList($html);
 
         $this->assertContains('foo', $nodeList->getText());
+
+        $nodeLink = $nodeList->find('a');
+        $this->assertSame(1, $nodeLink->count());
+        $this->assertSame('http://www.default.dev/example', $nodeLink->getAttribute('href'));
+        $this->assertSame('Example Page', $nodeLink->getText());
+        $this->assertContains('border-style:solid;', $nodeLink->getAttribute('style'));
     }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		{translate 'Welcome to {$siteName}!' siteName=$siteName}

		{load file='Mail/helper/button.tpl' label={translate 'Example Page'} href={linkUrl page=CM_Page_Example}}