Skip to content

Commit ffba784

Browse files
patternfly-buildpatternfly-build
committed
Merge branch 'master-local' into master-dist
2 parents cad561a + 7bb5651 commit ffba784

File tree

69 files changed

+456
-174
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+456
-174
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3035,9 +3035,11 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
30353035
*
30363036
* @param {string} headTitle Title for the card
30373037
* @param {string=} subTitle Sub-Title for the card
3038+
* @param {string=} spinnerText Text for the card spinner
30383039
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
30393040
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
30403041
* True (default) shows the line, false hides the line
3042+
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
30413043
* @param {object=} footer footer configuration properties:<br/>
30423044
* <ul style='list-style-type: none'>
30433045
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
@@ -3065,7 +3067,7 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
30653067
<file name="index.html">
30663068
<div ng-controller="ChartCtrl">
30673069
<label class="label-title">Card With Multiple Utilization Bars</label>
3068-
<pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
3070+
<pf-card head-title="System Resources" show-spinner="dataLoading" spinner-text="Loading" show-top-border="true">
30693071
<pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
30703072
<pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
30713073
<pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
@@ -3074,37 +3076,44 @@ angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
30743076
</div>
30753077
</file>
30763078
<file name="script.js">
3077-
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
3079+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
3080+
3081+
$scope.dataLoading = true;
30783082

30793083
$scope.title2 = 'Memory';
30803084
$scope.units2 = 'GB';
30813085

3082-
$scope.data2 = {
3083-
'used': '25',
3084-
'total': '100'
3085-
};
3086-
30873086
$scope.title3 = 'CPU Usage';
30883087
$scope.units3 = 'MHz';
30893088

3090-
$scope.data3 = {
3091-
'used': '420',
3092-
'total': '500'
3093-
};
3094-
30953089
$scope.title4 = 'Disk Usage';
30963090
$scope.units4 = 'TB';
3097-
$scope.data4 = {
3098-
'used': '350',
3099-
'total': '500'
3100-
};
31013091

31023092
$scope.title5 = 'Disk I/O';
3103-
$scope.units5 = 'I/Ops';
3104-
$scope.data5 = {
3105-
'used': '450',
3106-
'total': '500'
3107-
};
3093+
$scope.units5 = 'I/Ops';
3094+
3095+
$timeout(function () {
3096+
$scope.dataLoading = false;
3097+
3098+
$scope.data2 = {
3099+
'used': '25',
3100+
'total': '100'
3101+
};
3102+
3103+
$scope.data3 = {
3104+
'used': '420',
3105+
'total': '500'
3106+
};
3107+
3108+
$scope.data4 = {
3109+
'used': '350',
3110+
'total': '500'
3111+
};
3112+
$scope.data5 = {
3113+
'used': '450',
3114+
'total': '500'
3115+
};
3116+
}, 3000 );
31083117

31093118
$scope.layoutInline = {
31103119
'type': 'inline'
@@ -3121,6 +3130,8 @@ angular.module('patternfly.card').component('pfCard', {
31213130
subTitle: '@?',
31223131
showTopBorder: '@?',
31233132
showTitlesSeparator: '@?',
3133+
showSpinner: '<?',
3134+
spinnerText: '@?',
31243135
footer: '=?',
31253136
filter: '=?'
31263137
},
@@ -3134,11 +3145,9 @@ angular.module('patternfly.card').component('pfCard', {
31343145
ctrl.currentFilter = ctrl.filter.filters[0];
31353146
}
31363147
}
3137-
31383148
ctrl.footerCallBackFn = function () {
31393149
ctrl.footerCallBackResult = ctrl.footer.callBackFn();
31403150
};
3141-
31423151
ctrl.filterCallBackFn = function (f) {
31433152
ctrl.currentFilter = f;
31443153
if (ctrl.filter.callBackFn) {
@@ -3160,6 +3169,7 @@ angular.module('patternfly.card').component('pfCard', {
31603169

31613170
ctrl.$onInit = function () {
31623171
ctrl.shouldShowTitlesSeparator = (!ctrl.showTitlesSeparator || ctrl.showTitlesSeparator === 'true');
3172+
ctrl.showSpinner = ctrl.showSpinner === true;
31633173
};
31643174
}
31653175
});
@@ -3170,9 +3180,11 @@ angular.module('patternfly.card').component('pfCard', {
31703180
*
31713181
* @param {string} headTitle Title for the card
31723182
* @param {string=} subTitle Sub-Title for the card
3183+
* @param {string=} spinnerText Text for the card spinner
31733184
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
31743185
* @param {boolean=} showTitlesSeparator Show/Hide the grey line between the title and sub-title.
31753186
* True (default) shows the line, false hides the line
3187+
* @param {boolean=} showSpinner Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner
31763188
* @param {object=} footer footer configuration properties:<br/>
31773189
* <ul style='list-style-type: none'>
31783190
* <li>.iconClass - (optional) the icon to show on the bottom left of the footer panel
@@ -3210,10 +3222,20 @@ angular.module('patternfly.card').component('pfCard', {
32103222
footer="footerConfig" filter="filterConfig" style="width: 50%">
32113223
Card Contents
32123224
</pf-card>
3225+
<label class="label-title">Loading State</label>
3226+
<pf-card show-spinner="dataLoading" spinner-text="Loading" head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
3227+
Card Contents
3228+
</pf-card>
32133229
</div>
32143230
</file>
32153231
<file name="script.js">
3216-
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
3232+
angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope, $timeout ) {
3233+
3234+
$scope.dataLoading = true;
3235+
3236+
$timeout(function () {
3237+
$scope.dataLoading = false;
3238+
}, 3000 );
32173239

32183240
$scope.footerConfig = {
32193241
'iconClass' : 'fa fa-flag',
@@ -6918,8 +6940,16 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
69186940
prevChartData = angular.copy(ctrl.chartData);
69196941
prevLayout = angular.copy(ctrl.layout);
69206942

6943+
if (!ctrl.chartData) {
6944+
return;
6945+
}
6946+
69216947
//Calculate the percentage used
6922-
ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
6948+
if (!isNaN(ctrl.chartData.used) && !isNaN(ctrl.chartData.total) && (ctrl.chartData.total > 0)) {
6949+
ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
6950+
} else {
6951+
ctrl.chartData.percentageUsed = 0;
6952+
}
69236953

69246954
if (ctrl.thresholdError || ctrl.thresholdWarning) {
69256955
ctrl.isError = (ctrl.chartData.percentageUsed >= ctrl.thresholdError);
@@ -6947,11 +6977,11 @@ angular.module('patternfly.charts').component('pfUtilizationBarChart', {
69476977
};
69486978

69496979
ctrl.usedTooltipMessage = function () {
6950-
return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : ctrl.chartData.percentageUsed + '% Used';
6980+
return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : _.get(ctrl.chartData, 'percentageUsed', 'N/A') + '% Used';
69516981
};
69526982

69536983
ctrl.availableTooltipMessage = function () {
6954-
return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - ctrl.chartData.percentageUsed) + '% Available';
6984+
return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - _.get(ctrl.chartData, 'percentageUsed', 0)) + '% Available';
69556985
};
69566986
}]
69576987
});
@@ -18394,7 +18424,7 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
1839418424

1839518425

1839618426
$templateCache.put('card/basic/card.html',
18397-
"<div ng-class=\"$ctrl.showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div ng-if=$ctrl.showHeader() ng-class=\"$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'\"><div ng-if=$ctrl.showFilterInHeader() ng-include=\"'card/basic/card-filter.html'\"></div><h2 class=card-pf-title>{{$ctrl.headTitle}}</h2></div><span ng-if=$ctrl.subTitle class=card-pf-subtitle>{{$ctrl.subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div><div ng-if=$ctrl.footer class=card-pf-footer><div ng-if=$ctrl.showFilterInFooter() ng-include=\"'card/basic/card-filter.html'\"></div><p><a ng-if=$ctrl.footer.href href={{$ctrl.footer.href}} ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"><span ng-if=$ctrl.footer.iconClass class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\"></span> <span ng-if=$ctrl.footer.text class=card-pf-footer-text>{{$ctrl.footer.text}}</span></a> <a ng-if=\"$ctrl.footer.callBackFn && !$ctrl.footer.href\" ng-click=$ctrl.footerCallBackFn() ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"><span class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\" ng-if=$ctrl.footer.iconClass></span> <span class=card-pf-footer-text ng-if=$ctrl.footer.text>{{$ctrl.footer.text}}</span></a> <span ng-if=\"!$ctrl.footer.href && !$ctrl.footer.callBackFn\"><span ng-if=$ctrl.footer.iconClass class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\" ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"></span> <span ng-if=$ctrl.footer.text class=card-pf-footer-text>{{$ctrl.footer.text}}</span></span></p></div></div>"
18427+
"<div class=card-pf ng-class=\"{'card-pf-accented': $ctrl.showTopBorder === 'true'}\"><div ng-if=$ctrl.showHeader() ng-class=\"$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'\"><div ng-if=$ctrl.showFilterInHeader() class=card-pf-footer-in-header ng-class=\"{'hide-for-spinner': $ctrl.showSpinner}\" ng-include=\"'card/basic/card-filter.html'\"></div><h2 class=card-pf-title>{{$ctrl.headTitle}}</h2></div><span ng-if=$ctrl.subTitle class=card-pf-subtitle>{{$ctrl.subTitle}}</span><div class=card-pf-body ng-class=\"{'show-spinner': $ctrl.showSpinner}\"><div ng-class=\"{'hide-for-spinner': $ctrl.showSpinner}\" ng-transclude></div><div ng-if=$ctrl.showSpinner class=spinner-container><div class=loading-indicator><span class=\"spinner spinner-lg\" aria-hidden=true></span> <span ng-if=$ctrl.spinnerText class=loading-text>{{$ctrl.spinnerText}}</span><label ng-if=!$ctrl.spinnerText class=sr-only>Loading</label></div></div></div><div ng-if=$ctrl.footer class=card-pf-footer ng-class=\"{'hide-for-spinner': $ctrl.showSpinner}\"><div ng-if=$ctrl.showFilterInFooter() ng-include=\"'card/basic/card-filter.html'\"></div><p><a ng-if=$ctrl.footer.href href={{$ctrl.footer.href}} ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"><span ng-if=$ctrl.footer.iconClass class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\"></span> <span ng-if=$ctrl.footer.text class=card-pf-footer-text>{{$ctrl.footer.text}}</span></a> <a ng-if=\"$ctrl.footer.callBackFn && !$ctrl.footer.href\" ng-click=$ctrl.footerCallBackFn() ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"><span class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\" ng-if=$ctrl.footer.iconClass></span> <span class=card-pf-footer-text ng-if=$ctrl.footer.text>{{$ctrl.footer.text}}</span></a> <span ng-if=\"!$ctrl.footer.href && !$ctrl.footer.callBackFn\"><span ng-if=$ctrl.footer.iconClass class=\"{{$ctrl.footer.iconClass}} card-pf-footer-text\" ng-class=\"{'card-pf-link-with-icon':$ctrl.footer.iconClass,'card-pf-link':!$ctrl.footer.iconClass}\"></span> <span ng-if=$ctrl.footer.text class=card-pf-footer-text>{{$ctrl.footer.text}}</span></span></p></div></div>"
1839818428
);
1839918429

1840018430

‎dist/angular-patternfly.min.js‎

Lines changed: 7 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/docs/css/angular-patternfly.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,33 @@ accordion > .panel-group .panel-open .panel-title > a:before {
3535
position: relative;
3636
top: -1px;
3737
}
38+
.card-pf .hide-for-spinner {
39+
opacity: 0;
40+
}
41+
.card-pf .card-pf-body.show-spinner {
42+
position: relative;
43+
}
44+
.card-pf .card-pf-body .spinner-container {
45+
display: flex;
46+
justify-content: center;
47+
left: 0;
48+
position: absolute;
49+
right: 0;
50+
top: -20px;
51+
bottom: 0;
52+
}
53+
.card-pf .card-pf-body .spinner-container .loading-indicator {
54+
align-items: center;
55+
justify-content: center;
56+
display: flex;
57+
}
58+
.card-pf .card-pf-body .spinner-container .loading-indicator .loading-text {
59+
font-size: 16px;
60+
margin-left: 10px;
61+
}
62+
.card-pf .card-pf-body .spinner-container .loading-indicator .spinner.spinner-lg {
63+
display: inline-block;
64+
}
3865
.card-pf-heading-no-bottom {
3966
margin: 0 -20px 0px;
4067
padding: 0 20px 0;

0 commit comments

Comments
 (0)