Commit d87941ac authored by DMyTryC's avatar DMyTryC Committed by julienmege

Only authorize modal at root page/form/layout level (#2570)

* Adding an implementation for checking if a modal is somewhere other then the page

* Changing function name

* Adding tests

* Changing warning message

* review error message and embedded documentation.
parent f6f8b85a
......@@ -7,7 +7,7 @@
<li translate>Close Modal</li>
</ul>
<p translate>Add a modal ID, as the button will need to open the right modal container. This ID must be unique within a given page, form, or layout.</p>
<p translate>A modal container doesn't work when it is embedded in another modal container.</p>
<p translate>A modal container doesn't work when it is embedded in another container.</p>
<p translate>In a form, a page, or a layout, we recommend to drop modal containers at the bottom of the editor content.</p>
<p translate>To embed a pop-in into another pop-in at runtime, drop the first modal container at the bottom, drop the second modal container below the first one, and drop the button that opens the second pop-in within the first modal container.</p>
</uib-tab>
......
......@@ -30,6 +30,7 @@
getVisibleComponents: getVisibleComponents,
isContainer: isContainer,
getResolutionClasses,
hasModalInSubContainers,
column: {
width: columnWidth,
className: columnClass,
......@@ -184,6 +185,10 @@
}, modalInParents);
}
function hasModalInSubContainers(container) {
return container.type === 'modalContainer' && (container.$$parentContainerRow.container.type === 'fragment' || container.$$parentContainerRow.container.type === 'container');
}
/**
* Returns the CSS column width that must be used by a component in the editor to reflect its width and the currently
* selected resolution.
......
......@@ -109,4 +109,8 @@ angular.module('bonitasoft.designer.editor.whiteboard').controller('ContainerDir
$scope.hasModalContainingModal = function(container) {
return container && (container.type === 'modalContainer' || container.type === 'fragment') && componentUtils.hasModalContainingModal(container);
};
$scope.hasModalInSubContainers = function(container) {
return container && componentUtils.hasModalInSubContainers(container);
};
});
......@@ -15,8 +15,8 @@
</div>
<div ng-repeat="component in row" class="component" ng-class="editor.componentClasses(component)" bo-draggable bo-draggable-data="component" bo-drop-item="dropItem($data, row, rowIndex)">
<i ng-if="hasModalContainingModal(component)" class="fa fa-times-circle Component-marker error-icon" title="{{ 'A modal container cannot contain another modal container.' | translate }}"></i>
<div ng-include="component.$$templateUrl" ng-class="{'error':hasModalContainingModal(component)}"></div>
<i ng-if="hasModalInSubContainers(component)" class="fa fa-times-circle Component-marker error-icon" title="{{ 'A modal container cannot be located in another container. Recommendation: drop all modal containers at the bottom of the whiteboard.' | translate }}"></i>
<div ng-include="component.$$templateUrl" ng-class="{'error':hasModalInSubContainers(component)}"></div>
</div>
<div ng-if="editor.rowSize(row) < 12"
......
......@@ -243,6 +243,6 @@
}
}
.error-icon, .modal-element .error-icon {
.error-icon, .ng-scope .error-icon {
color: @btn-bonita-primary-bg;
}
......@@ -358,6 +358,35 @@ describe('ComponentUtils Service', function() {
expect(service.hasModalContainingModal(modalWithWidgetAndTabsContainerWithContainerInRow)).toBe(false);
});
it('should return true if a modal is not at the root of the page', function() {
modal.$$parentContainerRow = {
container: {
type: 'container'
}
};
expect(service.hasModalInSubContainers(modal)).toBe(true);
});
it('should return false if a modal is at the root of the artifact', function() {
modal.$$parentContainerRow = {
container: {
type: 'page'
}
};
expect(service.hasModalInSubContainers(modal)).toBe(false);
modal.$$parentContainerRow = {
container: {
type: 'form'
}
};
expect(service.hasModalInSubContainers(modal)).toBe(false);
modal.$$parentContainerRow = {
container: {
type: 'layout'
}
};
expect(service.hasModalInSubContainers(modal)).toBe(false);
});
});
describe('test if a component can move', function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment