Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add global styles for use in WC header and content blocks [MAILPOET-2521]

Browse Source
This commit is contained in:
wxa
2019-12-09 21:20:58 +03:00
committed by Jack Kitterhing
parent b4ed775a97
commit ed6bc90754
13 changed files with 67 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/js/src/newsletter_editor/components/sidebar.js
View File

@ -77,11 +77,6 @@ SidebarView = Marionette.View.extend({
}
},
},
templateContext: function () {
return {
isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
};
},
initialize: function () {
jQuery(window)
.on('resize', this.updateHorizontalScroll.bind(this))
@ -97,6 +92,7 @@ SidebarView = Marionette.View.extend({
this.showChildView('stylesRegion', new Module.SidebarStylesView({
model: App.getGlobalStyles(),
availableStyles: App.getAvailableStyles(),
isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
}));
this.showChildView('previewRegion', new Module.SidebarPreviewView());
},
@ -213,16 +209,21 @@ Module.SidebarStylesView = Marionette.View.extend({
},
'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
// WooCommerce styles
'change #mailpoet_wc_heading_font_color': _.partial(this.changeColorField, 'woocommerce.headingFontColor'),
'change #mailpoet_wc_branding_color': _.partial(this.changeColorField, 'woocommerce.brandingColor'),
};
},
templateContext: function () {
return {
model: this.model.toJSON(),
availableStyles: this.availableStyles.toJSON(),
isWoocommerceTransactional: this.isWoocommerceTransactional,
};
},
initialize: function (options) {
this.availableStyles = options.availableStyles;
this.isWoocommerceTransactional = options.isWoocommerceTransactional;
App.getChannel().on('historyUpdate', this.render);
},
changeField: function (field, event) {

13
assets/js/src/newsletter_editor/components/styles.js
View File

@ -57,12 +57,20 @@ Module.StylesModel = SuperModel.extend({
Module.StylesView = Marionette.View.extend({
getTemplate: function () { return window.templates.styles; }, // eslint-disable-line func-names
templateContext: function () { // eslint-disable-line func-names
return {
isWoocommerceTransactional: this.isWoocommerceTransactional,
};
},
modelEvents: {
change: 'render',
},
serializeData: function () { // eslint-disable-line func-names
return this.model.toJSON();
},
initialize: function (options) { // eslint-disable-line func-names
this.isWoocommerceTransactional = options.isWoocommerceTransactional;
},
});
Module._globalStyles = new SuperModel();
@ -92,7 +100,10 @@ App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-li
});
App.on('start', function (StartApp) { // eslint-disable-line func-names
var stylesView = new Module.StylesView({ model: StartApp.getGlobalStyles() });
var stylesView = new Module.StylesView({
model: StartApp.getGlobalStyles(),
isWoocommerceTransactional: App.getNewsletter().isWoocommerceTransactional(),
});
StartApp._appView.showChildView('stylesRegion', stylesView);
});

7
lib/WooCommerce/TransactionalEmails.php
View File

@ -23,6 +23,9 @@ class TransactionalEmails {
/** @var Template */
private $template;
/** @var Helper */
private $woocommerce_helper;
/** @var Renderer */
private $renderer;
@ -32,11 +35,12 @@ class TransactionalEmails {
/** @var NewslettersRepository */
private $newsletters_repository;
function __construct(WPFunctions $wp, SettingsController $settings, Template $template, Renderer $renderer, NewslettersRepository $newsletters_repository) {
function __construct(WPFunctions $wp, SettingsController $settings, Template $template, Renderer $renderer, Helper $woocommerce_helper, NewslettersRepository $newsletters_repository) {
$this->wp = $wp;
$this->settings = $settings;
$this->template = $template;
$this->renderer = $renderer;
$this->woocommerce_helper = $woocommerce_helper;
$this->newsletters_repository = $newsletters_repository;
$this->email_headings = [
'new_account' => [
@ -140,6 +144,7 @@ class TransactionalEmails {
$key = preg_replace('/^woocommerce_email_/', '', $name);
$result[$key] = $value ?: $default;
}
$result['base_text_color'] = $this->woocommerce_helper->wcLightOrDark($result['base_color'], '#202020', '#ffffff');
$result['footer_text'] = $this->replacePlaceholders($result['footer_text']);
return $result;
}

5
lib/WooCommerce/TransactionalEmails/Template.php
View File

@ -330,6 +330,11 @@ class Template {
[
'backgroundColor' => $wc_email_settings['background_color'],
],
'woocommerce' =>
[
'brandingColor' => $wc_email_settings['base_color'],
'headingFontColor' => $wc_email_settings['base_text_color'],
],
],
'blockDefaults' =>
[

4
tests/integration/WooCommerce/TransactionalEmailsTest.php
View File

@ -9,6 +9,7 @@ use MailPoet\Models\Newsletter;
use MailPoet\Newsletter\Editor\LayoutHelper as L;
use MailPoet\Newsletter\NewslettersRepository;
use MailPoet\Settings\SettingsController;
use MailPoet\WooCommerce\Helper as WooCommerceHelper;
use MailPoet\WooCommerce\TransactionalEmails\Renderer;
use MailPoet\WooCommerce\TransactionalEmails\Template;
use MailPoet\WP\Functions as WPFunctions;
@ -40,6 +41,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
$this->settings,
ContainerWrapper::getInstance()->get(Template::class),
ContainerWrapper::getInstance()->get(Renderer::class),
Stub::makeEmpty(WooCommerceHelper::class),
$this->newsletters_repository
);
}
@ -71,6 +73,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
$this->settings,
ContainerWrapper::getInstance()->get(Template::class),
ContainerWrapper::getInstance()->get(Renderer::class),
Stub::makeEmpty(WooCommerceHelper::class),
$this->newsletters_repository
);
$transactional_emails->init();
@ -130,6 +133,7 @@ class TransactionalEmailsTest extends \MailPoetTest {
$this->settings,
ContainerWrapper::getInstance()->get(Template::class),
$renderer,
Stub::makeEmpty(WooCommerceHelper::class),
ContainerWrapper::getInstance()->get(NewslettersRepository::class)
);
$transactional_emails->useTemplateForWoocommerceEmails();

4
tests/unit/WooCommerce/TransactionalEmailsTest.php
View File

@ -5,6 +5,7 @@ namespace MailPoet\WooCommerce;
use Codeception\Stub;
use MailPoet\Newsletter\NewslettersRepository;
use MailPoet\Settings\SettingsController;
use MailPoet\WooCommerce\Helper as WooCommerceHelper;
use MailPoet\WooCommerce\TransactionalEmails\Renderer;
use MailPoet\WooCommerce\TransactionalEmails\Template;
use MailPoet\WP\Functions as WPFunctions;
@ -37,8 +38,9 @@ class TransactionalEmailsTest extends \MailPoetUnitTest {
$settings = Stub::make(SettingsController::class);
$template = Stub::make(Template::class);
$renderer = Stub::make(Renderer::class);
$woocommerce_helper = Stub::make(WooCommerceHelper::class);
$newsletters_repository = Stub::make(NewslettersRepository::class);
$transactional_emails = new TransactionalEmails($wp, $settings, $template, $renderer, $newsletters_repository);
$transactional_emails = new TransactionalEmails($wp, $settings, $template, $renderer, $woocommerce_helper, $newsletters_repository);
expect($transactional_emails->getEmailHeadings())->equals([
'new_account' => 'Test: New Order: #0001',
'processing_order' => 'Thank you for your order',

7
views/newsletter/templates/blocks/woocommerceContent/completed_order.hbs
View File

@ -1,11 +1,4 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_woocommerce_content_overlay">
<p><%= __('This content will be autogenerated by WooCommerce') %></p>
</div>

7
views/newsletter/templates/blocks/woocommerceContent/customer_note.hbs
View File

@ -1,11 +1,4 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_woocommerce_content_overlay">
<p><%= __('This content will be autogenerated by WooCommerce') %></p>
</div>

7
views/newsletter/templates/blocks/woocommerceContent/new_account.hbs
View File

@ -1,11 +1,4 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_woocommerce_content_overlay">
<p><%= __('This content will be autogenerated by WooCommerce') %></p>
</div>

7
views/newsletter/templates/blocks/woocommerceContent/processing_order.hbs
View File

@ -1,11 +1,4 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
color: {{ styles.titleColor }};
}
</style>
<div class="mailpoet_woocommerce_content_overlay">
<p><%= __('This content will be autogenerated by WooCommerce') %></p>
</div>

13
views/newsletter/templates/blocks/woocommerceHeading/block.hbs
View File

@ -1,17 +1,4 @@
<div class="mailpoet_tools"></div>
<style type="text/css">
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content {
padding: 30px 20px;
background: {{ styles.backgroundColor }};
}
.mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1 {
line-height: 1.2em;
font-family: 'Source Sans Pro';
font-size: 36px;
color: {{ styles.fontColor }};
margin: 0;
}
</style>
<div class="mailpoet_woocommerce_heading_overlay">
<p><%= __('This content will be autogenerated by WooCommerce') %></p>
</div>

13
views/newsletter/templates/components/sidebar/styles.hbs
View File

@ -2,6 +2,19 @@
<h3><%= __('Styles') %></h3>
<div class="mailpoet_region_content">
<form id="mailpoet_newsletter_styles" action="" method="post" accept-charset="utf-8">
{{#if isWoocommerceTransactional}}
<div class="mailpoet_form_field">
<span>
<span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="wc-heading-font-color" value="{{ model.woocommerce.headingFontColor }}" id="mailpoet_wc_heading_font_color"></span>
</span><%= __('Heading font color') %>
</div>
<div class="mailpoet_form_field">
<span>
<span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="wc-branding-color" value="{{ model.woocommerce.brandingColor }}" id="mailpoet_wc_branding_color"></span>
</span><%= __('Branding color') %>
</div>
<hr />
{{/if}}
<div class="mailpoet_form_field mailpoet_form_narrow_select2">
<span>
<span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="text-color" value="{{ model.text.fontColor }}" id="mailpoet_text_font_color"></span>

18
views/newsletter/templates/components/styles.hbs
View File

@ -34,4 +34,22 @@
#mailpoet_editor_main_wrapper {
background-color: {{ body.backgroundColor }};
}
{{#if isWoocommerceTransactional}}
.mailpoet_woocommerce_heading {
padding: 30px 20px;
background: {{ woocommerce.brandingColor }};
}
.mailpoet_woocommerce_heading h1 {
line-height: 1.2em;
font-family: 'Source Sans Pro';
font-size: 36px;
color: {{ woocommerce.headingFontColor }};
margin: 0;
}
.mailpoet_woocommerce_content h1,
.mailpoet_woocommerce_content h2,
.mailpoet_woocommerce_content h3 {
color: {{ styles.titleColor }};
}
{{/if}}
</style>