Keep container block highlighted and tools displayed when editing settings

[MAILPOET-1805]
This commit is contained in:
Rostislav Wolny
2019-02-26 10:24:00 +01:00
committed by M. Shull
parent 6662f4e4d2
commit c9a70c4870
2 changed files with 22 additions and 5 deletions

View File

@ -144,6 +144,7 @@ Module.ContainerBlockView = base.BlockView.extend({
return view.renderOptions.depth === 1; return view.renderOptions.depth === 1;
}, },
}, },
HighlightEditingBehavior: {},
}), }),
onDragSubstituteBy: function () { onDragSubstituteBy: function () {
// For two and three column layouts display their respective widgets, // For two and three column layouts display their respective widgets,
@ -201,11 +202,15 @@ Module.ContainerBlockView = base.BlockView.extend({
} }
}, },
hideTools: function () { hideTools: function () {
if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) { if (this.renderOptions.depth !== 1
this.$(this.ui.tools).removeClass('mailpoet_display_tools'); || this.$el.hasClass('mailpoet_container_layer_active')
this.$el.removeClass('mailpoet_highlight'); || this._isBeingEdited
this.toolsView.triggerMethod('hideTools'); ) {
return;
} }
this.$(this.ui.tools).removeClass('mailpoet_display_tools');
this.$el.removeClass('mailpoet_highlight');
this.toolsView.triggerMethod('hideTools');
}, },
toggleEditingLayer: function (event) { toggleEditingLayer: function (event) {
var that = this; var that = this;
@ -268,7 +273,7 @@ Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
}, },
initialize: function () { initialize: function () {
base.BlockSettingsView.prototype.initialize.apply(this, arguments); base.BlockSettingsView.prototype.initialize.apply(this, arguments);
this.model.trigger('startEditing');
this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({ this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
collection: this.model.get('blocks'), collection: this.model.get('blocks'),
}); });

View File

@ -274,6 +274,18 @@ describe('Container', function () {
expect(model.get('image.src')).to.equal(null); 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 () { it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once(); var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock; global.MailPoet.Modal.cancel = mock;