Skip to content

Commit 1038b87

Browse files
dlabrecqdlabrecq
authored
Merge pull request #369 from dgutride/convert-card-module
Convert card module from directives to components
2 parents 831dffd + 3cdec0c commit 1038b87

File tree

9 files changed

+175
-175
lines changed

9 files changed

+175
-175
lines changed

‎src/card/aggregate-status/aggregate-status-card.directive.js renamed to ‎src/card/aggregate-status/aggregate-status-card.component.js

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.card.directive:pfAggregateStatusCard
4-
* @restrict A
5-
* @element ANY
3+
* @name patternfly.card.component:pfAggregateStatusCard
4+
* @restrict E
5+
*
66
* @param {object} status Status configuration information<br/>
77
* <ul style='list-style-type: none'>
88
* <li>.title - the main title of the aggregate status card
@@ -38,7 +38,7 @@
3838
* @deprecated {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
3939
*
4040
* @description
41-
* Directive for easily displaying status information
41+
* Component for easily displaying status information
4242
*
4343
* @example
4444
<example module="patternfly.card">
@@ -47,22 +47,22 @@
4747
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
4848
<div class="col-md-10">
4949
<label>With Top Border</label>
50-
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
50+
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
5151
<br/>
5252
<label>No Top Border</label>
53-
<div pf-aggregate-status-card status="status"></div>
53+
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
5454
<br/>
5555
<label>layout = "mini"</label>
56-
<div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>
57-
<div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>
56+
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
57+
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
5858
<br/>
5959
<label>layout = "tall"</label>
60-
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>
60+
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
6161
<br/>
6262
<label>Alternate Layout</label>
6363
<i>(depreciated, use layout = 'tall' instead)</i>
6464
</br></br>
65-
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>
65+
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
6666
</div>
6767
</div>
6868
</file>
@@ -130,21 +130,21 @@
130130
</example>
131131
*/
132132

133-
angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function () {
134-
'use strict';
135-
return {
136-
restrict: 'A',
137-
scope: {
138-
status: '=',
139-
showTopBorder: '@?',
140-
altLayout: '@?',
141-
layout: '@?'
142-
},
143-
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
144-
link: function (scope) {
145-
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
146-
scope.isAltLayout = (scope.altLayout === 'true' || scope.layout === 'tall');
147-
scope.isMiniLayout = (scope.layout === 'mini');
148-
}
149-
};
133+
angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
134+
bindings: {
135+
status: '=',
136+
showTopBorder: '@?',
137+
altLayout: '@?',
138+
layout: '@?'
139+
},
140+
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
141+
controller: function () {
142+
'use strict';
143+
var ctrl = this;
144+
ctrl.$onInit = function () {
145+
ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
146+
ctrl.isAltLayout = (ctrl.altLayout === 'true' || ctrl.layout === 'tall');
147+
ctrl.isMiniLayout = (ctrl.layout === 'mini');
148+
};
149+
}
150150
});

‎src/card/aggregate-status/aggregate-status-card.html

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
<div ng-if="!isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}">
1+
<div ng-if="!$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder, 'card-pf-aggregate-status-alt': $ctrl.isAltLayout}">
22
<h2 class="card-pf-title">
3-
<a href="{{status.href}}" ng-if="status.href">
4-
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
5-
<span class="{{status.iconClass}}"></span>
6-
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
7-
<span class="card-pf-aggregate-status-title">{{status.title}}</span>
3+
<a href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
4+
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
5+
<span class="{{$ctrl.status.iconClass}}"></span>
6+
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
7+
<span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
88
</a>
9-
<span ng-if="!status.href">
10-
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
11-
<span class="{{status.iconClass}}"></span>
12-
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
13-
<span class="card-pf-aggregate-status-title">{{status.title}}</span>
9+
<span ng-if="!$ctrl.status.href">
10+
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
11+
<span class="{{$ctrl.status.iconClass}}"></span>
12+
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
13+
<span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
1414
</span>
1515
</h2>
1616
<div class="card-pf-body">
1717
<p class="card-pf-aggregate-status-notifications">
18-
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in status.notifications">
18+
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in $ctrl.status.notifications">
1919
<a href="{{notification.href}}" ng-if="notification.href">
2020
<image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
2121
<span class="{{notification.iconClass}}"></span>{{ notification.count }}
@@ -28,29 +28,29 @@ <h2 class="card-pf-title">
2828
</p>
2929
</div>
3030
</div>
31-
<div ng-if="isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': shouldShowTopBorder}">
31+
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
3232
<h2 class="card-pf-title">
33-
<a ng-if="status.href" href="{{status.href}}">
34-
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
35-
<span ng-if="status.iconClass" class="{{status.iconClass}}"></span>
36-
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
37-
{{status.title}}
33+
<a ng-if="$ctrl.status.href" href="{{$ctrl.status.href}}">
34+
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
35+
<span ng-if="$ctrl.status.iconClass" class="{{$ctrl.status.iconClass}}"></span>
36+
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
37+
{{$ctrl.status.title}}
3838
</a>
39-
<span ng-if="!status.href">
40-
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
41-
{{status.title}}
39+
<span ng-if="!$ctrl.status.href">
40+
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
41+
{{$ctrl.status.title}}
4242
</span>
4343
</h2>
4444
<div class="card-pf-body">
45-
<p ng-if="status.notification.iconImage || status.notification.iconClass || status.notification.count" class="card-pf-aggregate-status-notifications">
45+
<p ng-if="$ctrl.status.notification.iconImage || $ctrl.status.notification.iconClass || $ctrl.status.notification.count" class="card-pf-aggregate-status-notifications">
4646
<span class="card-pf-aggregate-status-notification">
47-
<a ng-if="status.notification.href" href="{{status.notification.href}}">
48-
<image ng-if="status.notification.iconImage" ng-src="{{status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
49-
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
47+
<a ng-if="$ctrl.status.notification.href" href="{{$ctrl.status.notification.href}}">
48+
<image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
49+
<span ng-if="$ctrl.status.notification.iconClass" class="{{$ctrl.status.notification.iconClass}}"></span><span ng-if="$ctrl.status.notification.count">{{$ctrl.status.notification.count}}</span>
5050
</a>
51-
<span ng-if="!status.notification.href">
52-
<image ng-if="status.notification.iconImage" ng-src="{{status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
53-
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
51+
<span ng-if="!$ctrl.status.notification.href">
52+
<image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
53+
<span ng-if="$ctrl.status.notification.iconClass" class="{{$ctrl.status.notification.iconClass}}"></span><span ng-if="$ctrl.status.notification.count">{{$ctrl.status.notification.count}}</span>
5454
</span>
5555
</span>
5656
</p>

‎src/card/basic/card-filter.html

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
<button type="button" uib-dropdown-toggle class="btn btn-default">
2-
{{currentFilter.label}}
3-
<span class="caret"></span>
4-
</button>
5-
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
6-
<li ng-repeat="item in filter.filters" ng-class="{'selected': item === currentFilter}">
7-
<a role="menuitem" tabindex="-1" ng-click="filterCallBackFn(item)">
8-
{{item.label}}
9-
</a>
10-
</li>
11-
</ul>
1+
<div uib-dropdown class="card-pf-time-frame-filter">
2+
<button type="button" uib-dropdown-toggle class="btn btn-default">
3+
{{$ctrl.currentFilter.label}}
4+
<span class="caret"></span>
5+
</button>
6+
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
7+
<li ng-repeat="item in $ctrl.filter.filters" ng-class="{'selected': item === $ctrl.currentFilter}">
8+
<a role="menuitem" tabindex="-1" ng-click="$ctrl.filterCallBackFn(item)">
9+
{{item.label}}
10+
</a>
11+
</li>
12+
</ul>
13+
</div>

‎src/card/basic/card.directive.js renamed to ‎src/card/basic/card.component.js

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.card.directive:pfCard - Utilization
4-
* @restrict A
5-
* @element ANY
3+
* @name patternfly.card.component:pfCard - Utilization
4+
* @restrict E
5+
*
66
* @param {string} headTitle Title for the card
77
* @param {string=} subTitle Sub-Title for the card
88
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
@@ -27,20 +27,20 @@
2727
* <li>.callBackFn - user defined function to call when a filter is selected
2828
* </ul>
2929
* @description
30-
* Directive for easily displaying a card with html content
30+
* Component for easily displaying a card with html content
3131
*
3232
* @example
3333
<example module="demo">
3434
3535
<file name="index.html">
3636
<div ng-controller="ChartCtrl">
3737
<label class="label-title">Card With Multiple Utilization Bars</label>
38-
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
38+
<pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
3939
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
4040
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
4141
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
4242
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
43-
</div>
43+
</pf-card>
4444
</div>
4545
</file>
4646
<file name="script.js">
@@ -83,55 +83,53 @@
8383
</file>
8484
</example>
8585
*/
86-
angular.module('patternfly.card').directive('pfCard', function () {
87-
'use strict';
88-
89-
return {
90-
restrict: 'A',
91-
transclude: true,
92-
templateUrl: 'card/basic/card.html',
93-
scope: {
94-
headTitle: '@',
95-
subTitle: '@?',
96-
showTopBorder: '@?',
97-
showTitlesSeparator: '@?',
98-
footer: '=?',
99-
filter: '=?'
100-
},
101-
controller: function ($scope) {
102-
if ($scope.filter && !$scope.currentFilter) {
103-
if ($scope.filter.defaultFilter) {
104-
$scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];
105-
} else {
106-
$scope.currentFilter = $scope.filter.filters[0];
107-
}
86+
angular.module('patternfly.card').component('pfCard', {
87+
transclude: true,
88+
templateUrl: 'card/basic/card.html',
89+
bindings: {
90+
headTitle: '@',
91+
subTitle: '@?',
92+
showTopBorder: '@?',
93+
showTitlesSeparator: '@?',
94+
footer: '=?',
95+
filter: '=?'
96+
},
97+
controller: function () {
98+
'use strict';
99+
var ctrl = this;
100+
if (ctrl.filter && !ctrl.currentFilter) {
101+
if (ctrl.filter.defaultFilter) {
102+
ctrl.currentFilter = ctrl.filter.filters[ctrl.filter.defaultFilter];
103+
} else {
104+
ctrl.currentFilter = ctrl.filter.filters[0];
108105
}
106+
}
109107

110-
$scope.footerCallBackFn = function () {
111-
$scope.footerCallBackResult = $scope.footer.callBackFn();
112-
};
108+
ctrl.footerCallBackFn = function () {
109+
ctrl.footerCallBackResult = ctrl.footer.callBackFn();
110+
};
113111

114-
$scope.filterCallBackFn = function (f) {
115-
$scope.currentFilter = f;
116-
if ($scope.filter.callBackFn) {
117-
$scope.filterCallBackResult = $scope.filter.callBackFn(f);
118-
}
119-
};
112+
ctrl.filterCallBackFn = function (f) {
113+
ctrl.currentFilter = f;
114+
if (ctrl.filter.callBackFn) {
115+
ctrl.filterCallBackResult = ctrl.filter.callBackFn(f);
116+
}
117+
};
120118

121-
$scope.showHeader = function () {
122-
return ($scope.headTitle || $scope.showFilterInHeader());
123-
};
119+
ctrl.showHeader = function () {
120+
return (ctrl.headTitle || ctrl.showFilterInHeader());
121+
};
124122

125-
$scope.showFilterInHeader = function () {
126-
return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
127-
};
123+
ctrl.showFilterInHeader = function () {
124+
return (ctrl.filter && ctrl.filter.filters && ctrl.filter.position && ctrl.filter.position === 'header');
125+
};
128126

129-
$scope.showFilterInFooter = function () {
130-
return ($scope.filter && $scope.filter.filters && (!$scope.filter.position || $scope.filter.position === 'footer'));
131-
};
132-
},
133-
link: function (scope) {
134-
scope.shouldShowTitlesSeparator = (!scope.showTitlesSeparator || scope.showTitlesSeparator === 'true');
135-
}
136-
};
127+
ctrl.showFilterInFooter = function () {
128+
return (ctrl.filter && ctrl.filter.filters && (!ctrl.filter.position || ctrl.filter.position === 'footer'));
129+
};
130+
131+
ctrl.$onInit = function () {
132+
ctrl.shouldShowTitlesSeparator = (!ctrl.showTitlesSeparator || ctrl.showTitlesSeparator === 'true');
133+
};
134+
}
137135
});

‎src/card/basic/card.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
<div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
2-
<div ng-if="showHeader()" ng-class="shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
3-
<div ng-if="showFilterInHeader()" uib-dropdown class="card-pf-time-frame-filter" ng-include="'card/basic/card-filter.html'"></div>
4-
<h2 class="card-pf-title">{{headTitle}}</h2>
1+
<div ng-class="$ctrl.showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
2+
<div ng-if="$ctrl.showHeader()" ng-class="$ctrl.shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
3+
<div ng-if="$ctrl.showFilterInHeader()" ng-include="'card/basic/card-filter.html'"></div>
4+
<h2 class="card-pf-title">{{$ctrl.headTitle}}</h2>
55
</div>
66

7-
<span ng-if="subTitle" class="card-pf-subtitle">{{subTitle}}</span>
7+
<span ng-if="$ctrl.subTitle" class="card-pf-subtitle">{{$ctrl.subTitle}}</span>
88

99
<div class="card-pf-body">
1010
<div ng-transclude></div>
1111
</div>
12-
<div ng-if="footer" class="card-pf-footer">
13-
<div ng-if="showFilterInFooter()" uib-dropdown class="card-pf-time-frame-filter" ng-include="'card/basic/card-filter.html'"></div>
12+
<div ng-if="$ctrl.footer" class="card-pf-footer">
13+
<div ng-if="$ctrl.showFilterInFooter()" ng-include="'card/basic/card-filter.html'"></div>
1414
<p>
15-
<a ng-if="footer.href" href="{{footer.href}}" ng-class="{'card-pf-link-with-icon':footer.iconClass,'card-pf-link':!footer.iconClass}">
16-
<span ng-if="footer.iconClass" class="{{footer.iconClass}} card-pf-footer-text"></span>
17-
<span ng-if="footer.text" class="card-pf-footer-text">{{footer.text}}</span>
15+
<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}">
16+
<span ng-if="$ctrl.footer.iconClass" class="{{$ctrl.footer.iconClass}} card-pf-footer-text"></span>
17+
<span ng-if="$ctrl.footer.text" class="card-pf-footer-text">{{$ctrl.footer.text}}</span>
1818
</a>
19-
<a ng-if="footer.callBackFn && !footer.href" ng-click="footerCallBackFn()" ng-class="{'card-pf-link-with-icon':footer.iconClass,'card-pf-link':!footer.iconClass}">
20-
<span class="{{footer.iconClass}} card-pf-footer-text" ng-if="footer.iconClass"></span>
21-
<span class="card-pf-footer-text" ng-if="footer.text">{{footer.text}}</span>
19+
<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}">
20+
<span class="{{$ctrl.footer.iconClass}} card-pf-footer-text" ng-if="$ctrl.footer.iconClass"></span>
21+
<span class="card-pf-footer-text" ng-if="$ctrl.footer.text">{{$ctrl.footer.text}}</span>
2222
</a>
23-
<span ng-if="!footer.href && !footer.callBackFn">
24-
<span ng-if="footer.iconClass" class="{{footer.iconClass}} card-pf-footer-text" ng-class="{'card-pf-link-with-icon':footer.iconClass,'card-pf-link':!footer.iconClass}"></span>
25-
<span ng-if="footer.text" class="card-pf-footer-text">{{footer.text}}</span>
23+
<span ng-if="!$ctrl.footer.href && !$ctrl.footer.callBackFn">
24+
<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>
25+
<span ng-if="$ctrl.footer.text" class="card-pf-footer-text">{{$ctrl.footer.text}}</span>
2626
</span>
2727
</p>
2828
</div>

0 commit comments

Comments
 (0)