Commit d9dd526c authored by benjaminParisel's avatar benjaminParisel Committed by julienmege

feat(modal): Improve modal properties (#2534)

* feat(modal): Improve modal properties

* Add size property
* Hide With and hidden properties
* Apply css class set in properties
* remove unused css class
parent 37b3d0ea
<div pb-property-values='{{ reference }}' class="modal-container">
<pb-modal-container>
<script type="text/ng-template" id="{{{modalidHtml}}}-modalContent.html">
<div class="modal-body bonita-modal-body" id="modal-body">
<div ng-class="properties.cssClasses" class="bonita-modal" id="modal-body">
{{{ content }}}
</div>
</script>
......
......@@ -14,6 +14,7 @@ function PbModalContainerCtrl($scope, $log, $modal, modalService) {
ctrl.open=function (){
var modalInstance = $modal.open({
scope: $scope,
size: $scope.properties.size,
animation: $scope.properties.animation,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
......
{
"id": "pbModalContainer",
"name": "ModalContainer",
"name": "Modal container",
"type": "container",
"controller":"@pbModalContainer.ctrl.js",
"controller": "@pbModalContainer.ctrl.js",
"template": "",
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"20\"><rect x=\"-1\" y=\"-1\" width=\"5.1\" height=\"3.2\" fill=\"none\"/><path d=\"m49.5 5.9l0-2.5 -0.9 0 0 2.5 0.9 0zm0 4.1l0-2.4 -0.9 0 0 2.5 0.9 0 0-0.1zm0 4.2l0-2.5 -0.9 0 0 2.5 0.9 0zm-0.9 3.3l0.9 0 0-1.7 -0.9 0 0 0.9 0 0.8zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6-1.7l0 1.7 2.7 0 0-0.9 -1.8 0 0-0.9 -0.9 0 0 0.1zm0-4.2l0 2.5 0.9 0 0-2.5 -0.9 0zm0-4.1l0 2.5 0.9 0 0-2.5 -0.9 0zm0-4.2l0 2.5 0.9 0 0-2.5 -0.9 0zm2.7-3.3l-2.7 0 0 1.7 0.9 0 0-0.8 1.9 0 0-0.9 -0.1 0zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.7 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm2.7 0l-0.9 0 0 0.9 0 0.9 0.9 0 0-1.7z\" style=\"fill:#fff;stroke:null\"/><rect x=\"0.6\" y=\"3.7\" width=\"0.9\" height=\"15.3\" style=\"fill:#fff;stroke-width:null;stroke:#fff\"/><rect y=\"18.7\" width=\"45\" height=\"1.2\" style=\"fill-opacity:null;fill:#fff;stroke-width:null;stroke:#fff\"/></svg>",
"description": "Group of widgets used to define the arrangement of the page elements. Its content can be repeated over an array",
"description": "Group of widgets used to define the arrangement of the page elements. Its content is display like in modal.",
"order": 0,
"properties": [
{
......@@ -16,6 +16,27 @@
"type": "text",
"bond": "constant"
},
{
"label": "Size",
"name": "size",
"type": "choice",
"choiceValues": [
{
"value": "sm",
"label": "small"
},
{
"value": "",
"label": "medium"
},
{
"value": "lg",
"label": "large"
}
],
"defaultValue": "",
"bond": "constant"
},
{
"label": "Animation",
"name": "animation",
......
<div pb-property-values="modal-container-reference" class="modal-container">
<pb-modal-container>
<script type="text/ng-template" id="modal1-modalContent.html">
<div class="modal-body bonita-modal-body" id="modal-body">
<div ng-class="properties.cssClasses" class="bonita-modal" id="modal-body">
<div pb-property-values='container-reference'>
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden" ></div>
</div>
......
<div pb-property-values="modalContainer-reference" class="modal-container">
<pb-modal-container>
<script type="text/ng-template" id="modal1-modalContent.html">
<div
class="modal-body bonita-modal-body" id="modal-body">
<div ng-class="properties.cssClasses" class="bonita-modal" id="modal-body">
<div pb-property-values='first-container'>
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden" >
<div class="row"></div>
......
......@@ -21,8 +21,7 @@
.factory('properties', propertiesService);
function propertiesService(gettext) {
var commonProperties = [
var cssProperty = [
{
label: gettext('CSS classes'),
caption: gettext('Space-separated list'),
......@@ -31,7 +30,11 @@
defaultValue: '',
bond: 'expression',
help: gettext('Any accessible CSS classes. By default UI Designer comes with Bootstrap http://getbootstrap.com/css/#helper-classes')
},
}
];
var commonProperties = [
cssProperty[0],
{
label: gettext('Hidden'),
name: gettext('hidden'),
......@@ -45,6 +48,7 @@
computeValues: computeValues,
computeValue: computeValue,
addCommonPropertiesTo: addCommonPropertiesTo,
addCssPropertyTo: addCssPropertyTo,
isBound
};
......@@ -67,6 +71,11 @@
return component;
}
function addCssPropertyTo(component) {
component.properties = cssProperty.concat(component.properties || []);
return component;
}
function isBound(propertyValue) {
return propertyValue.type === 'expression' || propertyValue.type === 'variable';
}
......
......@@ -113,7 +113,13 @@
}
};
var extended = properties.addCommonPropertiesTo(component);
var extended;
if (component.id === 'pbModalContainer') {
extended = properties.addCssPropertyTo(component);
} else {
extended = properties.addCommonPropertiesTo(component);
}
return {
component: extended,
......
<property-field
ng-repeat="property in currentComponent.$$widget.properties"
property="property"
property-value="currentComponent.propertyValues[property.name]"
properties="currentComponent.propertyValues"
page-data="page.data"></property-field>
......@@ -143,7 +143,7 @@
$$id: componentId.getNextId(modalContainer.id),
$$widget: angular.copy(modalContainer),
$$templateUrl: 'js/editor/whiteboard/modal-container-template.html',
$$propertiesTemplateUrl: 'js/editor/properties-panel/component-properties-template.html',
$$propertiesTemplateUrl: 'js/editor/properties-panel/modal-container-properties-template.html',
$$parentContainerRow: parentRow,
triggerRemoved: whiteboardService.onRemoveModalContainer.bind(null, element),
triggerAdded: angular.noop
......
describe('properties service', function() {
describe('properties service', function () {
var service;
beforeEach(angular.mock.module('bonitasoft.designer.editor.common'));
beforeEach(inject(function(properties) {
beforeEach(inject(function (properties) {
service = properties;
}));
describe('should compute a property value from widget property', function() {
describe('should compute a property value from widget property', function () {
it('and populate propertyValue value with property default value', function() {
expect(service.computeValue({ defaultValue: 'default' }).value).toEqual('default');
it('and populate propertyValue value with property default value', function () {
expect(service.computeValue({defaultValue: 'default'}).value).toEqual('default');
});
it('and set propertyValue type to constant when property bond is expression', function() {
expect(service.computeValue({ bond: 'expression' }).type).toEqual('constant');
it('and set propertyValue type to constant when property bond is expression', function () {
expect(service.computeValue({bond: 'expression'}).type).toEqual('constant');
});
it('and set propertyValue type to property bond otherwise', function() {
expect(service.computeValue({ bond: 'constant' }).type).toEqual('constant');
expect(service.computeValue({ bond: 'interpolation' }).type).toEqual('interpolation');
expect(service.computeValue({ bond: 'variable' }).type).toEqual('variable');
it('and set propertyValue type to property bond otherwise', function () {
expect(service.computeValue({bond: 'constant'}).type).toEqual('constant');
expect(service.computeValue({bond: 'interpolation'}).type).toEqual('interpolation');
expect(service.computeValue({bond: 'variable'}).type).toEqual('variable');
});
});
it('should compute all property values of a component', function() {
it('should compute all property values of a component', function () {
var properties = [
{ name: 'anExpression', defaultValue: 'default expression', bond: 'expression' },
{ name: 'aConstant', defaultValue: 'default constant', bond: 'constant' },
{ name: 'anInterpolation', defaultValue: 'default interpolation', bond: 'interpolation' },
{ name: 'aVariable', defaultValue: 'default variable', bond: 'variable' }
{name: 'anExpression', defaultValue: 'default expression', bond: 'expression'},
{name: 'aConstant', defaultValue: 'default constant', bond: 'constant'},
{name: 'anInterpolation', defaultValue: 'default interpolation', bond: 'interpolation'},
{name: 'aVariable', defaultValue: 'default variable', bond: 'variable'}
];
var propertyValues = service.computeValues(properties);
expect(propertyValues).toEqual({
anExpression: { value: 'default expression', type: 'constant' },
aConstant: { value: 'default constant', type: 'constant' },
anInterpolation: { value: 'default interpolation', type: 'interpolation' },
aVariable: { value: 'default variable', type: 'variable' }
anExpression: {value: 'default expression', type: 'constant'},
aConstant: {value: 'default constant', type: 'constant'},
anInterpolation: {value: 'default interpolation', type: 'interpolation'},
aVariable: {value: 'default variable', type: 'variable'}
});
it('should concat common properties to a component properties', function() {
it('should concat common properties to a component properties', function () {
var properties = [
{ name: 'anExpression', defaultValue: 'default expression', bond: 'expression' },
{ name: 'aConstant', defaultValue: 'default constant', bond: 'constant' }
{name: 'anExpression', defaultValue: 'default expression', bond: 'expression'},
{name: 'aConstant', defaultValue: 'default constant', bond: 'constant'}
];
var aComponent = { properties };
var aComponent = {properties};
service.addCommonPropertiesTo(aComponent);
......@@ -70,22 +70,43 @@ describe('properties service', function() {
bond: 'expression'
}]);
});
});
it('should say that a property value with type expression is bound', function() {
expect(service.isBound({ type: 'expression' })).toBeTruthy();
it('should concat default css properties to a component properties', function () {
var properties = [
{name: 'anExpression', defaultValue: 'default expression', bond: 'expression'},
{name: 'aConstant', defaultValue: 'default constant', bond: 'constant'}
];
var aComponent = {properties};
service.addCssPropertyTo(aComponent);
console.log(aComponent.properties);
expect(aComponent.properties).toContain(properties);
expect(aComponent.properties).toContain(
{
label: 'CSS classes',
caption: 'Space-separated list',
name: 'cssClasses',
type: 'string',
defaultValue: '',
bond: 'expression',
help: 'Any accessible CSS classes. By default UI Designer comes with Bootstrap http://getbootstrap.com/css/#helper-classes'
});
});
});
it('should say that a property value with type variable is bound', function() {
expect(service.isBound({ type: 'variable' })).toBeTruthy();
it('should say that a property value with type expression is bound', function () {
expect(service.isBound({type: 'expression'})).toBeTruthy();
});
it('should say that a property value with type constant is not bound', function() {
expect(service.isBound({ type: 'constant' })).toBeFalsy();
it('should say that a property value with type variable is bound', function () {
expect(service.isBound({type: 'variable'})).toBeTruthy();
});
it('should say that a property value with type interpolation is not bound', function() {
expect(service.isBound({ type: 'interpolation' })).toBeFalsy();
it('should say that a property value with type constant is not bound', function () {
expect(service.isBound({type: 'constant'})).toBeFalsy();
});
it('should say that a property value with type interpolation is not bound', function () {
expect(service.isBound({type: 'interpolation'})).toBeFalsy();
});
});
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