From 90382bc86d346f0c59ec41a0339c5672a859f44f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tautvidas=20Sipavi=C4=8Dius?= <t.9b5as@gmail.com>
Date: Wed, 11 Nov 2015 16:55:44 +0200
Subject: [PATCH] Add layout block bg color, remove bg colors of individual
 columns

---
 .../src/newsletter_editor/blocks/container.js | 39 ++++++++++++++++++-
 tests/javascript/mochaTestHelper.js           |  2 +
 views/newsletter/form.html                    |  7 ++++
 .../blocks/container/columnSettings.hbs       |  0
 .../templates/blocks/container/settings.hbs   |  4 +-
 5 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 views/newsletter/templates/blocks/container/columnSettings.hbs

diff --git a/assets/js/src/newsletter_editor/blocks/container.js b/assets/js/src/newsletter_editor/blocks/container.js
index 5ea23d5ba8..f06b345dc6 100644
--- a/assets/js/src/newsletter_editor/blocks/container.js
+++ b/assets/js/src/newsletter_editor/blocks/container.js
@@ -162,10 +162,10 @@ define([
       this.toolsView = new Module.ContainerBlockToolsView({
         model: this.model,
         tools: {
-          settings: this.renderOptions.depth > 1,
+          settings: this.renderOptions.depth === 1,
           delete: this.renderOptions.depth === 1,
           move: this.renderOptions.depth === 1,
-          layerSelector: this.renderOptions.depth === 1,
+          layerSelector: false,
         },
       });
       this.toolsRegion.show(this.toolsView);
@@ -265,6 +265,41 @@ define([
     behaviors: {
       ColorPickerBehavior: {},
     },
+    regions: {
+      columnsSettingsRegion: '.mailpoet_container_columns_settings',
+    },
+    initialize: function() {
+      base.BlockSettingsView.prototype.initialize.apply(this, arguments);
+
+      this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
+        collection: this.model.get('blocks'),
+      });
+    },
+    onRender: function() {
+      this.columnsSettingsRegion.show(this._columnsSettingsView);
+    },
+  });
+
+  Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
+    getChildView: function() { return Module.ContainerBlockColumnSettingsView; },
+    childViewOptions: function(model, index) {
+      return {
+        columnIndex: index,
+      };
+    },
+  });
+
+  Module.ContainerBlockColumnSettingsView = Marionette.ItemView.extend({
+    getTemplate: function() { return templates.containerBlockColumnSettings; },
+    initialize: function(options) {
+      this.columnNumber = (options.columnIndex || 0) + 1;
+    },
+    templateHelpers: function() {
+      return {
+        model: this.model.toJSON(),
+        columnNumber: this.columnNumber,
+      };
+    },
   });
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({
diff --git a/tests/javascript/mochaTestHelper.js b/tests/javascript/mochaTestHelper.js
index bc636da119..187f8a67b4 100644
--- a/tests/javascript/mochaTestHelper.js
+++ b/tests/javascript/mochaTestHelper.js
@@ -83,6 +83,7 @@ testHelpers.loadTemplate('blocks/container/oneColumnLayoutWidget.hbs', window, {
 testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_two_column_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'});
 
 testHelpers.loadTemplate('blocks/divider/block.hbs', window, {id: 'newsletter_editor_template_divider_block'});
 testHelpers.loadTemplate('blocks/divider/widget.hbs', window, {id: 'newsletter_editor_template_divider_widget'});
@@ -154,6 +155,7 @@ global.templates = {
   twoColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_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()),
 
   buttonBlock: Handlebars.compile(jQuery('#newsletter_editor_template_button_block').html()),
   buttonInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_button_widget').html()),
diff --git a/views/newsletter/form.html b/views/newsletter/form.html
index 373041aa00..30d89ab810 100644
--- a/views/newsletter/form.html
+++ b/views/newsletter/form.html
@@ -148,6 +148,10 @@
     'newsletter_editor_template_container_settings',
     'newsletter/templates/blocks/container/settings.hbs'
   ) %>
+  <%= partial(
+    'newsletter_editor_template_container_column_settings',
+    'newsletter/templates/blocks/container/columnSettings.hbs'
+  ) %>
   <%= partial(
     'newsletter_editor_template_divider_block',
     'newsletter/templates/blocks/divider/block.hbs'
@@ -374,6 +378,9 @@
       containerBlockSettings: Handlebars.compile(
         jQuery('#newsletter_editor_template_container_settings').html()
       ),
+      containerBlockColumnSettings: Handlebars.compile(
+        jQuery('#newsletter_editor_template_container_column_settings').html()
+      ),
 
       buttonBlock: Handlebars.compile(
         jQuery('#newsletter_editor_template_button_block').html()
diff --git a/views/newsletter/templates/blocks/container/columnSettings.hbs b/views/newsletter/templates/blocks/container/columnSettings.hbs
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/views/newsletter/templates/blocks/container/settings.hbs b/views/newsletter/templates/blocks/container/settings.hbs
index b165a3fa29..62e26f22fb 100644
--- a/views/newsletter/templates/blocks/container/settings.hbs
+++ b/views/newsletter/templates/blocks/container/settings.hbs
@@ -1,4 +1,4 @@
-<h3><%= __('Column background color') %></h3>
+<h3><%= __('Layout') %></h3>
 <div class="mailpoet_form_field">
     <label>
         <div class="mailpoet_form_field_input_option">
@@ -8,6 +8,8 @@
     </label>
 </div>
 
+<div class="mailpoet_container_columns_settings"></div>
+
 <div class="mailpoet_form_field">
     <input type="button" class="mailpoet_button mailpoet_button_primary mailpoet_done_editing" value="<%= __('Done') %>" />
 </div>