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

Add new column layouts to editor

Browse Source 
[MAILPOET-1568]
This commit is contained in:
Pavel Dohnal
2018-10-22 08:54:45 +02:00
parent fcfd6f1f09
commit 056b971f7b
7 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -353,6 +353,44 @@ define([
}
});
Module.TwoColumn12ContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function () { return window.templates.twoColumn12LayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [
new Module.ContainerBlockModel(),
new Module.ContainerBlockModel()
]
});
}
}
}
});
Module.TwoColumn21ContainerWidgetView = base.WidgetView.extend({
className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
getTemplate: function () { return window.templates.twoColumn21LayoutInsertion; },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
const block1 = new Module.ContainerBlockModel();
const block2 = new Module.ContainerBlockModel();
block1.
return new Module.ContainerBlockModel({
orientation: 'horizontal',
blocks: [block1, block2],
});
}
}
}
});
App.on('before:start', function (BeforeStartApp) {
BeforeStartApp.registerBlockType('container', {
blockModel: Module.ContainerBlockModel,
@@ -376,6 +414,18 @@ define([
priority: 100,
widgetView: Module.ThreeColumnContainerWidgetView
});
BeforeStartApp.registerLayoutWidget({
name: 'twoColumn12Layout',
priority: 100,
widgetView: Module.TwoColumn12ContainerWidgetView
});
BeforeStartApp.registerLayoutWidget({
name: 'twoColumn21Layout',
priority: 100,
widgetView: Module.TwoColumn21ContainerWidgetView
});
});
return Module;

4
tests/javascript/mochaTestHelper.js
View File

@@ -106,6 +106,8 @@ testHelpers.loadTemplate('blocks/container/block.hbs', window, { id: 'newsletter
testHelpers.loadTemplate('blocks/container/emptyBlock.hbs', window, { id: 'newsletter_editor_template_container_block_empty' });
testHelpers.loadTemplate('blocks/container/oneColumnLayoutWidget.hbs', window, { id: 'newsletter_editor_template_container_one_column_widget' });
testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget.hbs', window, { id: 'newsletter_editor_template_container_two_column_widget' });
testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget12.hbs', window, { id: 'newsletter_editor_template_container_two_column_12_widget' });
testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget21.hbs', window, { id: 'newsletter_editor_template_container_two_column_21_widget' });
testHelpers.loadTemplate('blocks/container/threeColumnLayoutWidget.hbs', window, { id: 'newsletter_editor_template_container_three_column_widget' });
testHelpers.loadTemplate('blocks/container/settings.hbs', window, { id: 'newsletter_editor_template_container_settings' });
testHelpers.loadTemplate('blocks/container/columnSettings.hbs', window, { id: 'newsletter_editor_template_container_column_settings' });
@@ -178,6 +180,8 @@ global.templates = {
containerEmpty: Handlebars.compile(jQuery('#newsletter_editor_template_container_block_empty').html()),
oneColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_one_column_widget').html()),
twoColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_widget').html()),
twoColumn12LayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_12_widget').html()),
twoColumn21LayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_21_widget').html()),
threeColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_three_column_widget').html()),
containerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_container_settings').html()),
containerBlockColumnSettings: Handlebars.compile(jQuery('#newsletter_editor_template_container_column_settings').html()),

14
views/newsletter/editor.html
View File

@@ -57,6 +57,14 @@
'newsletter_editor_template_container_two_column_widget',
'newsletter/templates/blocks/container/twoColumnLayoutWidget.hbs'
) %>
<%= partial(
'newsletter_editor_template_container_two_column_12_widget',
'newsletter/templates/blocks/container/twoColumnLayoutWidget12.hbs'
) %>
<%= partial(
'newsletter_editor_template_container_two_column_21_widget',
'newsletter/templates/blocks/container/twoColumnLayoutWidget21.hbs'
) %>
<%= partial(
'newsletter_editor_template_container_three_column_widget',
'newsletter/templates/blocks/container/threeColumnLayoutWidget.hbs'
@@ -435,6 +443,12 @@
twoColumnLayoutInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_container_two_column_widget').html()
),
twoColumn12LayoutInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_container_two_column_12_widget').html()
),
twoColumn21LayoutInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_container_two_column_21_widget').html()
),
threeColumnLayoutInsertion: Handlebars.compile(
jQuery('#newsletter_editor_template_container_three_column_widget').html()
),

4
views/newsletter/templates/blocks/container/twoColumnLayoutWidget12.hbs Normal file
View File

@@ -0,0 +1,4 @@
<div class="mailpoet_widget_icon">
<%= source('newsletter/templates/svg/layout-icons/2-column-12.svg') %>
</div>
<div class="mailpoet_widget_title"><%= __('1:2 columns') %></div>

4
views/newsletter/templates/blocks/container/twoColumnLayoutWidget21.hbs Normal file
View File

@@ -0,0 +1,4 @@
<div class="mailpoet_widget_icon">
<%= source('newsletter/templates/svg/layout-icons/2-column-21.svg') %>
</div>
<div class="mailpoet_widget_title"><%= __('2:1 columns') %></div>

10
views/newsletter/templates/svg/layout-icons/2-column-12.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="623.622px" height="850.394px" viewBox="283.464 -4.251 623.622 850.394"
enable-background="new 283.464 -4.251 623.622 850.394" xml:space="preserve">
<path d="M439.753-0.251H319.041c-14.522,0-26.311,11.787-26.311,26.309V815.33c0,14.522,11.787,26.311,26.311,26.311h120.712
c14.521,0,26.309-11.787,26.309-26.311V26.058C466.061,11.536,454.274-0.251,439.753-0.251z"/>
<path d="M871.616-0.251H750.904c-0.007,0-0.013,0-0.02,0h-95.223c-0.008,0-0.014,0-0.021,0H534.929
c-14.521,0-26.309,11.787-26.309,26.309V815.33c0,14.522,11.785,26.311,26.309,26.311h120.713c0.013,0,0.025-0.001,0.038-0.001
h95.187c0.014,0,0.025,0.001,0.038,0.001h120.712c14.523,0,26.311-11.787,26.311-26.311V26.058
C897.926,11.536,886.14-0.251,871.616-0.251z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 879 B

10
views/newsletter/templates/svg/layout-icons/2-column-21.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="623.621px" height="850.394px" viewBox="676.702 185.676 623.621 850.394"
enable-background="new 676.702 185.676 623.621 850.394" xml:space="preserve">
<path d="M1265.656,187.676h-120.713c-14.521,0-26.309,11.787-26.309,26.309v789.273c0,14.523,11.787,26.311,26.309,26.311h120.713
c14.523,0,26.311-11.787,26.311-26.311V213.985C1291.966,199.463,1280.179,187.676,1265.656,187.676z"/>
<path d="M1049.681,187.676H928.968c-0.006,0-0.012,0-0.02,0h-95.137c-0.006,0-0.012,0-0.02,0H713.081
c-14.521,0-26.311,11.787-26.311,26.309v789.273c0,14.523,11.787,26.311,26.311,26.311h120.713c0.012,0,0.023,0,0.039,0h95.098
c0.012,0,0.025,0,0.037,0h120.713c14.523,0,26.311-11.787,26.311-26.311V213.985C1075.99,199.463,1064.204,187.676,1049.681,187.676
z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 891 B