Add button "Bold" text option, fix unit tests

This commit is contained in:
Tautvidas Sipavičius
2016-02-15 18:13:18 +02:00
parent 9874e1c371
commit aac2cd6eb8
10 changed files with 52 additions and 7 deletions

View File

@ -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({

View File

@ -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;
}

View File

@ -168,6 +168,7 @@ class FranksRoastHouseTemplate {
"fontColor" => "#ffffff",
"fontFamily" => "Arial",
"fontSize" => "14px",
"fontWeight" => "normal",
"textAlign" => "center"
)
)

View File

@ -325,6 +325,7 @@ class PostNotificationsBlankTemplate {
"fontColor" => "#ffffff",
"fontFamily" => "Arial",
"fontSize" => "18px",
"fontWeight" => "normal",
"textAlign" => "center"
)
)

View File

@ -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';

View File

@ -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});
});

View File

@ -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();

View File

@ -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',
},
},

View File

@ -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>

View File

@ -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 }}" />