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

Add classes to container with the new columns

Browse Source 
[MAILPOET-1568]
This commit is contained in:
Pavel Dohnal
2018-10-23 11:09:58 +02:00
parent 056b971f7b
commit b528587b1f
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/src/newsletter_editor/contentBlocks/container.styl
View File

@@ -31,6 +31,8 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
* Enforce column widths:
* 1 column: 20px + 560px + 20px
* 2 columns: 20px + 260px + 20px + 260px + 20px
* 12 columns: 20px + 160px + 20px + 360px + 20px
* 21 columns: 20px + 360px + 20px + 160px + 20px
* 3 columns: 20px + 160px + 20px + 20px + 160px + 20px + 20px + 160px + 20px
*/

25
assets/js/src/newsletter_editor/blocks/container.js
View File

@@ -44,6 +44,7 @@ define([
src: null,
display: 'scale'
},
irregularWidthContents: false,
styles: {
block: {
backgroundColor: 'transparent'
@@ -163,6 +164,7 @@ define([
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
onRender: function () {
var classIrregular = '';
this.toolsView = new Module.ContainerBlockToolsView({
model: this.model,
tools: {
@@ -183,7 +185,12 @@ define([
// Sets child container orientation HTML class here,
// as child CollectionView won't have access to model
// and will overwrite existing region element instead
this.$('> .mailpoet_container').attr('class', 'mailpoet_container mailpoet_container_' + this.model.get('orientation'));
if (typeof this.model.columnLayout === 'string') {
classIrregular = 'mailpoet_irregular_width_contents_container column_layout_' + this.model.columnLayout;
}
this.$('> .mailpoet_container').attr('class',
'mailpoet_container mailpoet_container_' + this.model.get('orientation') + ' ' + classIrregular
);
},
showTools: function () {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
@@ -360,13 +367,15 @@ define([
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
return new Module.ContainerBlockModel({
var block = new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel()
]
});
block.columnLayout = '1_2';
return block;
}
}
}
@@ -379,13 +388,15 @@ define([
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
const block1 = new Module.ContainerBlockModel();
const block2 = new Module.ContainerBlockModel();
block1.
return new Module.ContainerBlockModel({
var block = new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [block1, block2],
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel()
]
});
block.columnLayout = '2_1';
return block;
}
}
}