Add button "Bold" text option, fix unit tests
This commit is contained in:
@ -32,6 +32,7 @@ define([
|
||||
fontColor: '#000000',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: '16px',
|
||||
fontWeight: 'normal', // 'normal'|'bold'
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
@ -72,6 +73,7 @@ define([
|
||||
"change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
|
||||
"change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
|
||||
"change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
|
||||
"change .mailpoet_field_button_font_weight": "changeFontWeight",
|
||||
|
||||
"input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
|
||||
"change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
|
||||
@ -128,6 +130,13 @@ define([
|
||||
this.$(fieldToUpdate).val(jQuery(event.target).val());
|
||||
callable(event);
|
||||
},
|
||||
changeFontWeight: function(event) {
|
||||
var checked = !!jQuery(event.target).prop('checked');
|
||||
this.model.set(
|
||||
'styles.block.fontWeight',
|
||||
(checked) ? jQuery(event.target).val() : 'normal'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Module.ButtonWidgetView = base.WidgetView.extend({
|
||||
|
@ -111,7 +111,7 @@ define([
|
||||
data.posts = this.get('_selectedPosts').pluck('ID');
|
||||
|
||||
if (data.posts.length === 0) {
|
||||
this.get('_transformedPosts.blocks').reset();
|
||||
this.get('_transformedPosts').get('blocks').reset();
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -168,6 +168,7 @@ class FranksRoastHouseTemplate {
|
||||
"fontColor" => "#ffffff",
|
||||
"fontFamily" => "Arial",
|
||||
"fontSize" => "14px",
|
||||
"fontWeight" => "normal",
|
||||
"textAlign" => "center"
|
||||
)
|
||||
)
|
||||
|
@ -325,6 +325,7 @@ class PostNotificationsBlankTemplate {
|
||||
"fontColor" => "#ffffff",
|
||||
"fontFamily" => "Arial",
|
||||
"fontSize" => "18px",
|
||||
"fontWeight" => "normal",
|
||||
"textAlign" => "center"
|
||||
)
|
||||
)
|
||||
|
@ -63,6 +63,10 @@ define([
|
||||
expect(model.get('styles.block.fontSize')).to.match(/^\d+px$/);
|
||||
});
|
||||
|
||||
it("has a text font weight", function () {
|
||||
expect(model.get('styles.block.fontWeight')).to.match(/^(bold|normal)$/);
|
||||
});
|
||||
|
||||
it("has width", function () {
|
||||
expect(model.get('styles.block.width')).to.match(/^\d+px$/);
|
||||
});
|
||||
@ -78,7 +82,7 @@ define([
|
||||
});
|
||||
|
||||
it("triggers autosave if any attribute changes", function () {
|
||||
var mock = sinon.mock().exactly(11).withArgs('autoSave');
|
||||
var mock = sinon.mock().exactly(12).withArgs('autoSave');
|
||||
EditorApplication.getChannel = sinon.stub().returns({
|
||||
trigger: mock,
|
||||
});
|
||||
@ -93,6 +97,7 @@ define([
|
||||
model.set('styles.block.fontColor', '#345678');
|
||||
model.set('styles.block.fontFamily', 'Some other style');
|
||||
model.set('styles.block.fontSize', '10px');
|
||||
model.set('styles.block.fontWeight', 'bold');
|
||||
mock.verify();
|
||||
});
|
||||
|
||||
@ -114,6 +119,7 @@ define([
|
||||
fontColor: '#345678',
|
||||
fontFamily: 'Tahoma',
|
||||
fontSize: '30px',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -133,6 +139,7 @@ define([
|
||||
expect(model.get('styles.block.fontColor')).to.equal('#345678');
|
||||
expect(model.get('styles.block.fontFamily')).to.equal('Tahoma');
|
||||
expect(model.get('styles.block.fontSize')).to.equal('30px');
|
||||
expect(model.get('styles.block.fontWeight')).to.equal('bold');
|
||||
});
|
||||
});
|
||||
|
||||
@ -179,6 +186,7 @@ define([
|
||||
fontColor: '#345678',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -235,6 +243,10 @@ define([
|
||||
it('has a specified font size', function () {
|
||||
expect(view.$('.mailpoet_editor_button').css('font-size')).to.equal(model.get('styles.block.fontSize'));
|
||||
});
|
||||
|
||||
it('has a specified font weight', function () {
|
||||
expect(view.$('.mailpoet_editor_button').css('font-weight')).to.equal(model.get('styles.block.fontWeight'));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -318,6 +330,12 @@ define([
|
||||
expect(model.get('styles.block.fontSize')).to.equal(newValue);
|
||||
});
|
||||
|
||||
it('updates the model when font weight changes', function () {
|
||||
var newValue = 'bold';
|
||||
view.$('.mailpoet_field_button_font_weight').prop('checked', true).change();
|
||||
expect(model.get('styles.block.fontWeight')).to.equal(newValue);
|
||||
});
|
||||
|
||||
it('updates the model when background color changes', function () {
|
||||
var newValue = '#cccccc';
|
||||
|
||||
|
@ -1,8 +1,9 @@
|
||||
define([
|
||||
'newsletter_editor/App',
|
||||
'newsletter_editor/components/communication',
|
||||
'newsletter_editor/blocks/posts'
|
||||
], function(EditorApplication, CommunicationComponent, PostsBlock) {
|
||||
'newsletter_editor/blocks/posts',
|
||||
'newsletter_editor/blocks/container'
|
||||
], function(EditorApplication, CommunicationComponent, PostsBlock, ContainerBlock) {
|
||||
|
||||
describe('Posts', function () {
|
||||
Backbone.Radio = {
|
||||
@ -255,7 +256,7 @@ define([
|
||||
global.stubConfig(EditorApplication, {
|
||||
blockDefaults: {},
|
||||
});
|
||||
EditorApplication.getBlockTypeModel = sinon.stub().returns(Backbone.Model);
|
||||
EditorApplication.getBlockTypeModel = sinon.stub().returns(ContainerBlock.ContainerBlockModel);
|
||||
model = new (PostsBlock.PostsBlockModel)();
|
||||
view = new (PostsBlock.PostsBlockSettingsView)({model: model});
|
||||
});
|
||||
|
@ -147,7 +147,11 @@ define([
|
||||
},
|
||||
},
|
||||
'newsletter_editor/App': EditorApplication,
|
||||
'html2canvas': function() { return html2canvasMock; },
|
||||
'html2canvas': function() {
|
||||
return {
|
||||
then: function() { return html2canvasMock; }
|
||||
};
|
||||
},
|
||||
});
|
||||
var view = new (module.SaveView)();
|
||||
view.render();
|
||||
|
@ -947,6 +947,7 @@
|
||||
fontColor: '#00ddff',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'normal',
|
||||
textAlign: 'center',
|
||||
}
|
||||
}
|
||||
@ -982,6 +983,7 @@
|
||||
fontColor: '#ffffff',
|
||||
fontFamily: 'Verdana',
|
||||
fontSize: '18px',
|
||||
fontWeight: 'normal',
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
@ -1069,6 +1071,7 @@
|
||||
fontColor: '#000000',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'normal',
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div class="mailpoet_tools"></div>
|
||||
<div class="mailpoet_content">
|
||||
<a href="{{ model.url }}" class="mailpoet_editor_button" style="{{#ifCond model.styles.block.textAlign '==' 'left'}}margin: 0 auto 0 0; {{/ifCond}}{{#ifCond model.styles.block.textAlign '==' 'center'}}margin: auto; {{/ifCond}}{{#ifCond model.styles.block.textAlign '==' 'right'}}margin: 0 0 0 auto; {{/ifCond}}line-height: {{ model.styles.block.lineHeight }}; width: {{ model.styles.block.width }}; background-color: {{ model.styles.block.backgroundColor }}; color: {{ model.styles.block.fontColor }}; font-family: {{ model.styles.block.fontFamily }}; font-size: {{ model.styles.block.fontSize }}; border: {{ model.styles.block.borderWidth }} {{ model.styles.block.borderStyle }} {{ model.styles.block.borderColor }}; border-radius: {{ model.styles.block.borderRadius }};" onClick="return false;">{{ model.text }}</a>
|
||||
<a href="{{ model.url }}" class="mailpoet_editor_button" style="{{#ifCond model.styles.block.textAlign '==' 'left'}}margin: 0 auto 0 0; {{/ifCond}}{{#ifCond model.styles.block.textAlign '==' 'center'}}margin: auto; {{/ifCond}}{{#ifCond model.styles.block.textAlign '==' 'right'}}margin: 0 0 0 auto; {{/ifCond}}line-height: {{ model.styles.block.lineHeight }}; width: {{ model.styles.block.width }}; background-color: {{ model.styles.block.backgroundColor }}; color: {{ model.styles.block.fontColor }}; font-family: {{ model.styles.block.fontFamily }}; font-size: {{ model.styles.block.fontSize }}; font-weight: {{ model.styles.block.fontWeight }}; border: {{ model.styles.block.borderWidth }} {{ model.styles.block.borderStyle }} {{ model.styles.block.borderColor }}; border-radius: {{ model.styles.block.borderRadius }};" onClick="return false;">{{ model.text }}</a>
|
||||
</div>
|
||||
<div class="mailpoet_block_highlight"></div>
|
||||
|
@ -56,6 +56,14 @@
|
||||
</div>
|
||||
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Text') %></div>
|
||||
</div>
|
||||
<div class="mailpoet_form_field">
|
||||
<div class="mailpoet_form_field_checkbox_option">
|
||||
<label>
|
||||
<input type="checkbox" name="fontWeight" class="mailpoet_field_button_font_weight" value="bold" {{#ifCond styles.block.fontWeight '===' 'bold'}}CHECKED{{/ifCond}}/>
|
||||
<%= __('Bold') %>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mailpoet_form_field">
|
||||
<div class="mailpoet_form_field_input_option">
|
||||
<input type="text" name="background-color" class="mailpoet_field_button_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
|
||||
|
Reference in New Issue
Block a user