Update colors when changed from settings

[MAILPOET-2278]
This commit is contained in:
Amine Ben hammou
2019-10-17 02:28:17 +01:00
committed by Jack Kitterhing
parent b56cee8b7d
commit af902e93f4
2 changed files with 38 additions and 1 deletions

View File

@ -17,6 +17,19 @@ const BlockModel = BaseBlock.BlockModel.extend({
const SettingsView = BaseBlock.BlockSettingsView.extend({
getTemplate: function getTemplate() { return window.templates.woocommerceHeadingBlockSettings; },
templateContext() {
return {
model: this.model.toJSON(),
styles: this.model.get('styles').toJSON(),
};
},
events: function events() {
return {
'change .mailpoet_field_wc_heading_font_color': _.partial(this.changeColorField, 'styles.fontColor'),
'change .mailpoet_field_wc_heading_background_color': _.partial(this.changeColorField, 'styles.backgroundColor'),
'click .mailpoet_done_editing': 'close',
};
},
});
const BlockToolsView = BaseBlock.BlockToolsView.extend({
@ -42,6 +55,12 @@ const WidgetView = BaseBlock.WidgetView.extend({
const BlockView = BaseBlock.BlockView.extend({
className: 'mailpoet_block mailpoet_woocommerce_heading_block mailpoet_droppable_block',
initialize: function initialize() {
BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:styles.fontColor', this.render);
this.listenTo(this.model, 'change:styles.backgroundColor', this.render);
},
modelEvents: _.omit(BaseBlock.BlockView.prototype.modelEvents, 'change'),
getTemplate() { return window.templates.woocommerceHeadingBlock; },
behaviors: _.defaults({
ShowSettingsBehavior: {},

View File

@ -1,3 +1,21 @@
<h3><%= _x('WooCommerce Email Heading', 'Name of a widget in the email editor. This widget is used to display WooCommerce messages (like ”Thanks for your order!”)') %></h3>
<p>Settings fields here...</p>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_input_option">
<input type="text" name="font-color" class="mailpoet_field_wc_heading_font_color mailpoet_color" value="{{ styles.fontColor }}" />
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Font color') %></div>
</div>
<div class="mailpoet_form_field">
<div class="mailpoet_form_field_input_option">
<input type="text" name="background-color" class="mailpoet_field_wc_heading_background_color mailpoet_color" value="{{ styles.backgroundColor }}" />
</div>
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background color') %></div>
</div>
<a href="?page=wc-settings&tab=email" target="_blank"><%= __('Customize WooCommerce email headings.') %></a>
<div class="mailpoet_form_field">
<input type="button" class="button button-primary mailpoet_done_editing" data-automation-id="spacer_done_button" value="<%= __('Done') | escape('html_attr') %>" />
</div>