Replace collapsible panels with angular directive
Change-Id: Ib27adf29574260666421461ff45959d65cabe901
This commit is contained in:
parent
525477601b
commit
eb55cfaf87
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="panel panel-default merlin-panel">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title">
|
||||||
|
<a data-toggle="collapse" data-target="#{$ panelId $}" href="#">{$ panelTitle $}</a>
|
||||||
|
<i ng-show="removable" class="fa fa-times-circle pull-right"></i></h4>
|
||||||
|
</div>
|
||||||
|
<div id="{$ panelId $}" class="panel-collapse collapse in">
|
||||||
|
<div class="panel-body" ng-transclude>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,71 @@
|
||||||
|
/**
|
||||||
|
* Created by tsufiev on 12/29/14.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
angular.module('hz')
|
||||||
|
|
||||||
|
.controller('actionsCtrl', function($scope) {
|
||||||
|
$scope.actions = [
|
||||||
|
[{
|
||||||
|
name: 'Name',
|
||||||
|
type: 'string',
|
||||||
|
value: 'Action1'
|
||||||
|
}, {
|
||||||
|
name: 'Base',
|
||||||
|
type: 'string',
|
||||||
|
value: 'nova.create_server'
|
||||||
|
}, {
|
||||||
|
name: 'Base Input',
|
||||||
|
type: 'fixedlist'
|
||||||
|
}, {
|
||||||
|
name: 'Input',
|
||||||
|
type: 'list',
|
||||||
|
value: [{
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
name: 'Output',
|
||||||
|
type: 'varlist',
|
||||||
|
value: [{
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}, {
|
||||||
|
type: 'dictionary',
|
||||||
|
value: [{
|
||||||
|
name: 'key1',
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}, {
|
||||||
|
name: 'key2',
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
type: 'list',
|
||||||
|
value: [{
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}, {
|
||||||
|
type: 'string',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}]];
|
||||||
|
|
||||||
|
$scope.baseTypes = {
|
||||||
|
'nova.create_server': [{
|
||||||
|
name: 'Flavor Id',
|
||||||
|
type: 'string'
|
||||||
|
}, {
|
||||||
|
name: 'Image Id',
|
||||||
|
type: 'string'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
.controller('workflowsCtrl', function() {
|
||||||
|
|
||||||
|
});
|
||||||
|
})();
|
|
@ -52,4 +52,26 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
.directive('action', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
.directive('collapsiblePanel', function($parse, idGenerator) {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
templateUrl: '/static/mistral/js/angular-templates/collapsible-panel.html',
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
panelTitle: '@',
|
||||||
|
removable: '='
|
||||||
|
},
|
||||||
|
link: function(scope) {
|
||||||
|
scope.panelId = idGenerator();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
/**
|
||||||
|
* Created by tsufiev on 12/29/14.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
angular.module('hz')
|
||||||
|
.factory('idGenerator', function() {
|
||||||
|
var id = 0;
|
||||||
|
return function() {
|
||||||
|
id++;
|
||||||
|
return 'elem-id-'+id;
|
||||||
|
};
|
||||||
|
})
|
||||||
|
})();
|
|
@ -22,7 +22,9 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/services.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/directives.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/directives.js"></script>
|
||||||
|
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/controllers.js"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block css %}
|
{% block css %}
|
||||||
|
@ -81,15 +83,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Action added -->
|
<!-- Action added -->
|
||||||
<div class="panel panel-default merlin-panel" id="panel1">
|
<div ng-controller="actionsCtrl">
|
||||||
<div class="panel-heading">
|
<collapsible-panel panel-title="Action1" removable="true">
|
||||||
<h4 class="panel-title">
|
|
||||||
<a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">
|
|
||||||
Action1</a>
|
|
||||||
<i class="fa fa-times-circle pull-right"></i></h4>
|
|
||||||
</div>
|
|
||||||
<div id="collapseOne" class="panel-collapse collapse in">
|
|
||||||
<div class="panel-body">
|
|
||||||
<!-- 2 simple inputs in a single row -->
|
<!-- 2 simple inputs in a single row -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
|
@ -259,19 +254,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</collapsible-panel>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- panel with workflow -->
|
<!-- panel with workflow -->
|
||||||
<div class="panel panel-default merlin-panel" id="panel2">
|
<div ng-controller="workflowsCtrl">
|
||||||
<div class="panel-heading">
|
<collapsible-panel panel-title="Workflow1" removable="true">
|
||||||
<h4 class="panel-title">
|
|
||||||
<a data-toggle="collapse" data-target="#collapseFive" href="#">
|
|
||||||
Workflow1</a>
|
|
||||||
<i class="fa fa-times-circle pull-right"></i></h4>
|
|
||||||
</div>
|
|
||||||
<div id="collapseFive" class="panel-collapse collapse in">
|
|
||||||
<div class="panel-body">
|
|
||||||
<!-- 2 simple inputs in a single row -->
|
<!-- 2 simple inputs in a single row -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 col-sm-5 col-lg-5">
|
<div class="col-md-5 col-sm-5 col-lg-5">
|
||||||
|
@ -601,13 +588,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</collapsible-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue