diff --git a/modules/system/ServiceProvider.php b/modules/system/ServiceProvider.php index fe05f1de9..c1c7df05b 100644 --- a/modules/system/ServiceProvider.php +++ b/modules/system/ServiceProvider.php @@ -297,8 +297,13 @@ class ServiceProvider extends ModuleServiceProvider ]); $manager->registerMailPartials([ + 'header' => 'system::mail.partial-header', + 'footer' => 'system::mail.partial-footer', 'button' => 'system::mail.partial-button', + 'panel' => 'system::mail.partial-panel', 'table' => 'system::mail.partial-table', + 'subcopy' => 'system::mail.partial-subcopy', + 'promotion' => 'system::mail.partial-promotion', ]); }); diff --git a/modules/system/assets/js/mailbrandsettings/mailbrandsettings.js b/modules/system/assets/js/mailbrandsettings/mailbrandsettings.js index 5c02b5f49..fe47e8d8c 100644 --- a/modules/system/assets/js/mailbrandsettings/mailbrandsettings.js +++ b/modules/system/assets/js/mailbrandsettings/mailbrandsettings.js @@ -1,40 +1,37 @@ +var previewIframe $(document).on('change', '.field-colorpicker', function() { - $('#brandSettingsForm').request('onRefresh', { - data: { 'fields': ['_mail_preview'] } + $('#brandSettingsForm').request('onUpdateSampleMessage').done(function(data) { + updatePreviewContent(data.previewHtml) }) }) -function createPreviewContainer(el, content) { - var newiframe - - // Shadow DOM ignores media queries - // if (document.body.attachShadow) { - if (false) { - var shadow = el.attachShadow({ mode: 'open' }) - shadow.innerHTML = content - } - else { - newiframe = document.createElement('iframe') - - 'srcdoc' in newiframe - ? newiframe.srcdoc = content - : newiframe.src = 'data:text/html;charset=UTF-8,' + content - - var parent = el.parentNode - parent.replaceChild(newiframe, el) - - newiframe.style.width = '100%' - newiframe.setAttribute('frameborder', 0) - - newiframe.onload = adjustIframeHeight - } - - function adjustIframeHeight() { - newiframe.style.height = '500px' - newiframe.style.height = 1 + (newiframe.contentWindow.document.getElementsByTagName('body')[0].scrollHeight) +'px' - } - - $(document).render(adjustIframeHeight) - $(window).resize(adjustIframeHeight) +function updatePreviewContent(content) { + 'srcdoc' in previewIframe + ? previewIframe.srcdoc = content + : previewIframe.src = 'data:text/html;charset=UTF-8,' + content +} + +function adjustPreviewHeight() { + previewIframe.style.height = (previewIframe.contentWindow.document.getElementsByTagName('body')[0].scrollHeight) +'px' +} + +function createPreviewContainer(el, content) { + previewIframe = document.createElement('iframe') + + updatePreviewContent(content) + + previewIframe.style.width = '100%' + previewIframe.setAttribute('frameborder', 0) + previewIframe.setAttribute('id', el.id) + previewIframe.onload = adjustPreviewHeight + + var parent = el.parentNode + parent.replaceChild(previewIframe, el) + + /* + * Auto adjust height + */ + $(document).render(adjustPreviewHeight) + $(window).resize(adjustPreviewHeight) } diff --git a/modules/system/classes/MailManager.php b/modules/system/classes/MailManager.php index 574c90700..96711eacc 100644 --- a/modules/system/classes/MailManager.php +++ b/modules/system/classes/MailManager.php @@ -1,6 +1,7 @@ subject(Twig::parse($template->subject, $data)); } - if (!isset($data['subject'])) { - $data['subject'] = $swiftMessage->getSubject(); - } + $data += [ + 'subject' => $swiftMessage->getSubject(), + 'appName' => Config::get('app.name') + ]; /* * HTML contents @@ -199,7 +201,7 @@ class MailManager public function renderPartial($code, $params) { - if (!$partial = MailPartial::whereCode($code)->first()) { + if (!$partial = MailPartial::findOrMakePartial($code)) { return ''; } diff --git a/modules/system/controllers/MailBrandSettings.php b/modules/system/controllers/MailBrandSettings.php index b0539a5b6..608c191c6 100644 --- a/modules/system/controllers/MailBrandSettings.php +++ b/modules/system/controllers/MailBrandSettings.php @@ -2,6 +2,7 @@ use File; use Flash; +use Config; use Backend; use BackendMenu; use ApplicationException; @@ -60,8 +61,22 @@ class MailBrandSettings extends Controller } } + public function onUpdateSampleMessage() + { + $this->pageAction(); + + $this->formGetWidget()->setFormValues(); + + return ['previewHtml' => $this->renderSampleMessage()]; + } + public function renderSampleMessage() { + $data = [ + 'subject' => Config::get('app.name'), + 'appName' => Config::get('app.name'), + ]; + $layout = new MailLayout; $layout->fillFromCode('default'); @@ -69,7 +84,7 @@ class MailBrandSettings extends Controller $template->layout = $layout; $template->content_html = File::get(base_path('modules/system/models/mailbrandsetting/sample_template.htm')); - return MailManager::instance()->renderTemplate($template); + return MailManager::instance()->renderTemplate($template, $data); } public function formCreateModelObject() diff --git a/modules/system/models/MailPartial.php b/modules/system/models/MailPartial.php index 09c38aeb6..d0295e06a 100644 --- a/modules/system/models/MailPartial.php +++ b/modules/system/models/MailPartial.php @@ -8,6 +8,7 @@ use Markdown; use System\Classes\MailManager; use October\Rain\Mail\MailParser; use ApplicationException; +use Exception; /** * Mail partial @@ -50,6 +51,22 @@ class MailPartial extends Model } } + public static function findOrMakePartial($code) + { + try { + if (!$template = self::whereCode($code)->first()) { + $template = new self; + $template->code = $code; + $template->fillFromCode($code); + } + + return $template; + } + catch (Exception $ex) { + return null; + } + } + /** * Loops over each mail layout and ensures the system has a layout, * if the layout does not exist, it will create one. diff --git a/modules/system/models/mailbrandsetting/custom.less b/modules/system/models/mailbrandsetting/custom.less index f491d1717..b1471ab17 100644 --- a/modules/system/models/mailbrandsetting/custom.less +++ b/modules/system/models/mailbrandsetting/custom.less @@ -7,7 +7,7 @@ body, body *:not(html):not(style):not(br):not(tr):not(code) { body { background-color: @body-bg; - color: #74787E; + color: @text-color; height: 100%; hyphens: auto; line-height: 1.4; @@ -64,7 +64,7 @@ h3 { } p { - color: #74787E; + color: @text-color; font-size: 16px; line-height: 1.5em; margin-top: 0; @@ -107,12 +107,11 @@ img { text-align: center; } -.header a { +.header a, .header span { color: #bbbfc3; font-size: 19px; font-weight: bold; text-decoration: none; - text-shadow: 0 1px 0 white; } /* Body */ @@ -185,7 +184,7 @@ img { } .table td { - color: #74787E; + color: @text-color; font-size: 15px; line-height: 18px; padding: 10px 0; diff --git a/modules/system/models/mailbrandsetting/fields.yaml b/modules/system/models/mailbrandsetting/fields.yaml index a58ca61cb..f2f52349f 100644 --- a/modules/system/models/mailbrandsetting/fields.yaml +++ b/modules/system/models/mailbrandsetting/fields.yaml @@ -59,12 +59,12 @@ secondaryTabs: type: section header_color: - label: Site name color + label: Header color type: colorpicker availableColors: [] heading_color: - label: Heading color + label: Headings color type: colorpicker availableColors: [] diff --git a/modules/system/models/mailbrandsetting/sample_template.htm b/modules/system/models/mailbrandsetting/sample_template.htm index 66fc96dc2..91ecc71ea 100644 --- a/modules/system/models/mailbrandsetting/sample_template.htm +++ b/modules/system/models/mailbrandsetting/sample_template.htm @@ -1,7 +1,3 @@ -{% component 'header' %} -October CMS -{% endcomponent %} - # Heading 1 This is a paragraph filled with Lorem Ipsum and a link. @@ -44,12 +40,8 @@ Coupon code: OCTOBER {% endcomponent %} Thanks, -October CMS +{{ appName }} {% component 'subcopy' %} This is the subcopy of the email {% endcomponent %} - -{% component 'footer' %} -© 2017 October CMS. All rights reserved. -{% endcomponent %} diff --git a/modules/system/views/mail/layout-default.htm b/modules/system/views/mail/layout-default.htm index 4157b8c2e..4da719f7b 100644 --- a/modules/system/views/mail/layout-default.htm +++ b/modules/system/views/mail/layout-default.htm @@ -15,6 +15,12 @@ name = "Default layout" + + +{% component 'header' %} +{{ subject }} +{% endcomponent %} + + + +{% component 'footer' %} +© 2017 {{ appName }}. All rights reserved. +{% endcomponent %} +
@@ -34,6 +40,12 @@ name = "Default layout"
diff --git a/modules/system/views/mail/partial-footer.htm b/modules/system/views/mail/partial-footer.htm new file mode 100644 index 000000000..a64782166 --- /dev/null +++ b/modules/system/views/mail/partial-footer.htm @@ -0,0 +1,16 @@ +name = "Footer" +== +------------------- +{{ body }} +== + + + + + + +
+ {{ body|md }} +
+ + diff --git a/modules/system/views/mail/partial-header.htm b/modules/system/views/mail/partial-header.htm new file mode 100644 index 000000000..f0a845029 --- /dev/null +++ b/modules/system/views/mail/partial-header.htm @@ -0,0 +1,17 @@ +name = "Header" +== +*** {{ body }} <{{ url }}> +== + + + {% if url %} + + {{ body }} + + {% else %} + + {{ body }} + + {% endif %} + + diff --git a/modules/system/views/mail/partial-panel.htm b/modules/system/views/mail/partial-panel.htm new file mode 100644 index 000000000..2318a724b --- /dev/null +++ b/modules/system/views/mail/partial-panel.htm @@ -0,0 +1,17 @@ +name = "Panel" +== +{{ body }} +== + + + + +
+ + + + +
+ {{ body|md }} +
+
diff --git a/modules/system/views/mail/partial-promotion.htm b/modules/system/views/mail/partial-promotion.htm new file mode 100644 index 000000000..6f31df700 --- /dev/null +++ b/modules/system/views/mail/partial-promotion.htm @@ -0,0 +1,11 @@ +name = "Promotion" +== +{{ body }} +== + + + + +
+ {{ body|md }} +
diff --git a/modules/system/views/mail/partial-subcopy.htm b/modules/system/views/mail/partial-subcopy.htm new file mode 100644 index 000000000..5ea495e35 --- /dev/null +++ b/modules/system/views/mail/partial-subcopy.htm @@ -0,0 +1,7 @@ + + + + +
+ {{ body|md }} +