Add cor progress bar
This commit is contained in:
parent
13293ecdea
commit
d5db3462b9
10 changed files with 140 additions and 1504 deletions
|
@ -0,0 +1,4 @@
|
|||
<div class="cor-progress-bar-element progress">
|
||||
<div class="progress-bar" ng-style="{'width': (progress * 100) + '%'}"
|
||||
aria-valuenow="{{ (progress * 100) }}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
|
||||
const corStepBarUrl = require('./cor-step-bar.html');
|
||||
const corStepUrl = require('./cor-step.html');
|
||||
const corProgressBarUrl = require('./cor-progress-bar.html');
|
||||
|
||||
angular.module('quay-config')
|
||||
.directive('corStepBar', () => {
|
||||
const directiveDefinitionObject = {
|
||||
priority: 4,
|
||||
templateUrl: corStepBarUrl,
|
||||
replace: true,
|
||||
transclude: true,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'progress': '=progress'
|
||||
},
|
||||
controller: function($rootScope, $scope, $element) {
|
||||
$scope.$watch('progress', function(progress) {
|
||||
if (!progress) { return; }
|
||||
|
||||
var index = 0;
|
||||
for (var i = 0; i < progress.length; ++i) {
|
||||
if (progress[i]) {
|
||||
index = i;
|
||||
}
|
||||
}
|
||||
|
||||
$element.find('.transclude').children('.co-step-element').each(function(i, elem) {
|
||||
$(elem).removeClass('active');
|
||||
if (i <= index) {
|
||||
$(elem).addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
})
|
||||
|
||||
.directive('corStep', function() {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 4,
|
||||
templateUrl: corStepUrl,
|
||||
replace: true,
|
||||
transclude: false,
|
||||
requires: '^corStepBar',
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'icon': '@icon',
|
||||
'title': '@title',
|
||||
'text': '@text'
|
||||
},
|
||||
controller: function($rootScope, $scope, $element) {
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
})
|
||||
|
||||
.directive('corProgressBar', function() {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 4,
|
||||
templateUrl: corProgressBarUrl,
|
||||
replace: true,
|
||||
transclude: true,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'progress': '=progress'
|
||||
},
|
||||
controller: function($rootScope, $scope, $element) {
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
3
config_app/js/components/cor-progress/cor-step-bar.html
Normal file
3
config_app/js/components/cor-progress/cor-step-bar.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<div class="co-step-bar">
|
||||
<span class="transclude" ng-transclude/>
|
||||
</div>
|
6
config_app/js/components/cor-progress/cor-step.html
Normal file
6
config_app/js/components/cor-progress/cor-step.html
Normal file
|
@ -0,0 +1,6 @@
|
|||
<span ng-class="text ? 'co-step-element text' : 'co-step-element icon'">
|
||||
<span data-title="{{ title }}" bs-tooltip>
|
||||
<span class="text" ng-if="text">{{ text }}</span>
|
||||
<i class="fa fa-lg" ng-if="icon" ng-class="'fa-' + icon"></i>
|
||||
</span>
|
||||
</span>
|
Reference in a new issue