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