Add new column layouts to editor

[MAILPOET-1568]

assets/js/src/newsletter_editor/blocks/container.js

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

tests/javascript/mochaTestHelper.js

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

views/newsletter/editor.html

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

views/newsletter/templates/blocks/container/twoColumnLayoutWidget12.hbs

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

views/newsletter/templates/blocks/container/twoColumnLayoutWidget21.hbs

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

views/newsletter/templates/svg/layout-icons/2-column-12.svg

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

views/newsletter/templates/svg/layout-icons/2-column-21.svg

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