diff --git a/assets/js/src/newsletter_editor/blocks/container.js b/assets/js/src/newsletter_editor/blocks/container.js index 3ace6c55d0..bd8b255fad 100644 --- a/assets/js/src/newsletter_editor/blocks/container.js +++ b/assets/js/src/newsletter_editor/blocks/container.js @@ -144,6 +144,7 @@ Module.ContainerBlockView = base.BlockView.extend({ return view.renderOptions.depth === 1; }, }, + HighlightEditingBehavior: {}, }), onDragSubstituteBy: function () { // For two and three column layouts display their respective widgets, @@ -201,11 +202,15 @@ Module.ContainerBlockView = base.BlockView.extend({ } }, hideTools: function () { - if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) { - this.$(this.ui.tools).removeClass('mailpoet_display_tools'); - this.$el.removeClass('mailpoet_highlight'); - this.toolsView.triggerMethod('hideTools'); + if (this.renderOptions.depth !== 1 + || this.$el.hasClass('mailpoet_container_layer_active') + || this._isBeingEdited + ) { + return; } + this.$(this.ui.tools).removeClass('mailpoet_display_tools'); + this.$el.removeClass('mailpoet_highlight'); + this.toolsView.triggerMethod('hideTools'); }, toggleEditingLayer: function (event) { var that = this; @@ -268,7 +273,7 @@ Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({ }, initialize: function () { base.BlockSettingsView.prototype.initialize.apply(this, arguments); - + this.model.trigger('startEditing'); this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({ collection: this.model.get('blocks'), }); diff --git a/tests/javascript/newsletter_editor/blocks/container.spec.js b/tests/javascript/newsletter_editor/blocks/container.spec.js index c91c6b1546..136382e434 100644 --- a/tests/javascript/newsletter_editor/blocks/container.spec.js +++ b/tests/javascript/newsletter_editor/blocks/container.spec.js @@ -274,6 +274,18 @@ describe('Container', function () { expect(model.get('image.src')).to.equal(null); }); + it('displays/hides tools and highlight container block when settings active/inactive', function () { + var settingsView; + var blockView = new (ContainerBlock.ContainerBlockView)({ model: model }); + blockView.render(); + expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false); + settingsView = new (ContainerBlock.ContainerBlockSettingsView)({ model: model }); + settingsView.render(); + expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(true); + settingsView.destroy(); + expect(blockView.$el.hasClass('mailpoet_highlight')).to.equal(false); + }); + it.skip('closes the sidepanel after "Done" is clicked', function () { var mock = sinon.mock().once(); global.MailPoet.Modal.cancel = mock;