Skip to content

Commit ca78d35

Browse files
author
erundle
committed
Adding AggStatus Card
1 parent 66cae0b commit ca78d35

File tree

9 files changed

+402
-11
lines changed

9 files changed

+402
-11
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,6 @@
4040
"angular-sanitize": "1.3.*",
4141
"angular-touch": "1.3.*",
4242
"angular-route": "1.3.*",
43-
"patternfly": "~2.0.0"
43+
"patternfly": "2.1.0"
4444
}
4545
}

‎dist/angular-patternfly.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,103 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", f
9595
}
9696
};
9797
}]);
98+
;/**
99+
* @ngdoc directive
100+
* @name patternfly.card:pfAggregateStatusCard
101+
* @restrict A
102+
* @element ANY
103+
* @param {object} status Status configuration information<br/>
104+
* <ul style='list-style-type: none'>
105+
* <li>.title - the main title of the aggregate status card
106+
* <li>.count - the number count of the main statuses
107+
* <li>.href - the href to navigate to if one clicks on the title or count
108+
* <li>.iconClass - an icon to display to the left of the count
109+
* <li>.notifications - an array of status icons & counts
110+
* <ul style='list-style-type: none'>
111+
* <li>.iconClass - an icon to display to the right of the notification count
112+
* <li>.count - the number count of the notification status
113+
* <li>.href - href to navigate to if one clicks on the notification status icon or count
114+
* <li>.id - unique id of the notificaiton status, appended to the .href
115+
* </ul>
116+
* </ul>
117+
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
118+
* @param {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
119+
*
120+
* @description
121+
* Directive for easily displaying status information
122+
*
123+
* @example
124+
<example module="patternfly.card">
125+
126+
<file name="index.html">
127+
<div ng-controller="CardDemoCtrl">
128+
<h4>Aggregate Status Card - With Top Border<h4>
129+
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
130+
<h4>Aggregate Status Card - No Top Border<h4>
131+
<div pf-aggregate-status-card status="status"></div>
132+
<h4>Aggregate Status Card - Alternate Layout<h4>
133+
<div pf-aggregate-status-card status="aggStatus" show-top-border="true" alt-layout="true"></div>
134+
</div>
135+
</file>
136+
137+
<file name="script.js">
138+
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope ) {
139+
$scope.status = {
140+
"title":"Nodes",
141+
"count":793,
142+
"href":"#",
143+
"iconClass": "fa fa-shield",
144+
"notifications":[
145+
{
146+
"iconClass":"pficon pficon-error-circle-o",
147+
"count":4,
148+
"href":"#"
149+
},
150+
{
151+
"iconClass":"pficon pficon-warning-triangle-o",
152+
"count":1
153+
}
154+
]
155+
};
156+
157+
$scope.aggStatus = {
158+
"title":"Providers",
159+
"count":3,
160+
"notifications":[
161+
{
162+
"iconClass":"pficon pficon-openshift",
163+
"count":1,
164+
"href":"#"
165+
},
166+
{
167+
"iconClass":"pficon pficon-kubernetes",
168+
"count":2,
169+
"href":"#"
170+
}
171+
]
172+
};
173+
});
174+
</file>
175+
176+
</example>
177+
*/
178+
179+
angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function () {
180+
'use strict';
181+
return {
182+
restrict: 'A',
183+
scope: {
184+
status: '=',
185+
showTopBorder: '@?',
186+
altLayout: '@?'
187+
},
188+
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
189+
link: function (scope) {
190+
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
191+
scope.isAltLayout = (scope.altLayout === 'true');
192+
}
193+
};
194+
});
98195
;/**
99196
* @ngdoc directive
100197
* @name patternfly.card:pfCard
@@ -2130,6 +2227,11 @@ angular.module('patternfly.validation', []).directive('pfValidation', ["$timeout
21302227
;angular.module('patternfly.card').run(['$templateCache', function($templateCache) {
21312228
'use strict';
21322229

2230+
$templateCache.put('card/aggregate-status/aggregate-status-card.html',
2231+
"<div class=\"card-pf card-pf-aggregate-status\" ng-class=\"{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}\"><h2 class=card-pf-title><a href={{status.href}} ng-if=status.href><span class={{status.iconClass}}></span> <span class=card-pf-aggregate-status-count>{{status.count}}</span> <span class=card-pf-aggregate-status-title>{{status.title}}</span></a> <span ng-if=!status.href><span class={{status.iconClass}}></span> <span class=card-pf-aggregate-status-count>{{status.count}}</span> <span class=card-pf-aggregate-status-title>{{status.title}}</span></span></h2><div class=card-pf-body><p class=card-pf-aggregate-status-notifications><span class=card-pf-aggregate-status-notification ng-repeat=\"notification in status.notifications\"><a href={{notification.href}} ng-if=notification.href><span class={{notification.iconClass}}></span>{{ notification.count }}</a> <span ng-if=!notification.href><span class={{notification.iconClass}}></span>{{ notification.count }}</span></span></p></div></div>"
2232+
);
2233+
2234+
21332235
$templateCache.put('card/basic/card.html',
21342236
"<div ng-class=\"showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'\"><div class=card-pf-heading><h2 class=card-pf-title>{{headTitle}}</h2></div><span ng-if=subTitle class=card-pf-subtitle>{{subTitle}}</span><div class=card-pf-body><div ng-transclude></div></div></div>"
21352237
);

‎dist/angular-patternfly.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/styles/angular-patternfly.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
.card-pf-aggregate-status-alt .card-pf-body {
2+
padding-bottom: 20px;
3+
}
4+
5+
.card-pf-aggregate-status-alt .card-pf-title {
6+
line-height: 22px;
7+
margin: 20px 0 10px 0;
8+
font-weight: 300;
9+
}
10+
11+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-count {
12+
font-size: 24px;
13+
}
14+
15+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-title {
16+
display: block;
17+
font-size: 12px;
18+
}
19+
20+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .card-pf-aggregate-status-notification {
21+
border-left: none;
22+
}
23+
24+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .fa, .card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .pficon {
25+
position: relative;
26+
top: -1px;
27+
}
28+
129
.donut-chart-pf {
230
width: 100%;
331
float: left;
@@ -24,9 +52,6 @@
2452
color: #333;
2553
}
2654

27-
.utilization-chart-pf {
28-
}
29-
3055
.utilization-chart-pf .current-values {
3156
border-bottom: 1px solid #d1d1d1;
3257
float: left;
@@ -78,4 +103,3 @@
78103
font-weight: 400;
79104
margin-left: 0;
80105
}
81-

‎dist/styles/angular-patternfly.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/card/aggregate-status/aggregate-status-card.directive.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.card:pfAggregateStatusCard
4+
* @restrict A
5+
* @element ANY
6+
* @param {object} status Status configuration information<br/>
7+
* <ul style='list-style-type: none'>
8+
* <li>.title - the main title of the aggregate status card
9+
* <li>.count - the number count of the main statuses
10+
* <li>.href - the href to navigate to if one clicks on the title or count
11+
* <li>.iconClass - an icon to display to the left of the count
12+
* <li>.notifications - an array of status icons & counts
13+
* <ul style='list-style-type: none'>
14+
* <li>.iconClass - an icon to display to the right of the notification count
15+
* <li>.count - the number count of the notification status
16+
* <li>.href - href to navigate to if one clicks on the notification status icon or count
17+
* <li>.id - unique id of the notificaiton status, appended to the .href
18+
* </ul>
19+
* </ul>
20+
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
21+
* @param {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
22+
*
23+
* @description
24+
* Directive for easily displaying status information
25+
*
26+
* @example
27+
<example module="patternfly.card">
28+
29+
<file name="index.html">
30+
<div ng-controller="CardDemoCtrl">
31+
<h4>Aggregate Status Card - With Top Border<h4>
32+
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
33+
<h4>Aggregate Status Card - No Top Border<h4>
34+
<div pf-aggregate-status-card status="status"></div>
35+
<h4>Aggregate Status Card - Alternate Layout<h4>
36+
<div pf-aggregate-status-card status="aggStatus" show-top-border="true" alt-layout="true"></div>
37+
</div>
38+
</file>
39+
40+
<file name="script.js">
41+
angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope ) {
42+
$scope.status = {
43+
"title":"Nodes",
44+
"count":793,
45+
"href":"#",
46+
"iconClass": "fa fa-shield",
47+
"notifications":[
48+
{
49+
"iconClass":"pficon pficon-error-circle-o",
50+
"count":4,
51+
"href":"#"
52+
},
53+
{
54+
"iconClass":"pficon pficon-warning-triangle-o",
55+
"count":1
56+
}
57+
]
58+
};
59+
60+
$scope.aggStatus = {
61+
"title":"Providers",
62+
"count":3,
63+
"notifications":[
64+
{
65+
"iconClass":"pficon pficon-openshift",
66+
"count":1,
67+
"href":"#"
68+
},
69+
{
70+
"iconClass":"pficon pficon-kubernetes",
71+
"count":2,
72+
"href":"#"
73+
}
74+
]
75+
};
76+
});
77+
</file>
78+
79+
</example>
80+
*/
81+
82+
angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function () {
83+
'use strict';
84+
return {
85+
restrict: 'A',
86+
scope: {
87+
status: '=',
88+
showTopBorder: '@?',
89+
altLayout: '@?'
90+
},
91+
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
92+
link: function (scope) {
93+
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
94+
scope.isAltLayout = (scope.altLayout === 'true');
95+
}
96+
};
97+
});

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}">
2+
<h2 class="card-pf-title">
3+
<a href="{{status.href}}" ng-if="status.href">
4+
<span class="{{status.iconClass}}"></span>
5+
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
6+
<span class="card-pf-aggregate-status-title">{{status.title}}</span>
7+
</a>
8+
<span ng-if="!status.href">
9+
<span class="{{status.iconClass}}"></span>
10+
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
11+
<span class="card-pf-aggregate-status-title">{{status.title}}</span>
12+
</span>
13+
</h2>
14+
<div class="card-pf-body">
15+
<p class="card-pf-aggregate-status-notifications">
16+
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in status.notifications">
17+
<a href="{{notification.href}}" ng-if="notification.href">
18+
<span class="{{notification.iconClass}}"></span>{{ notification.count }}
19+
</a>
20+
<span ng-if="!notification.href">
21+
<span class="{{notification.iconClass}}"></span>{{ notification.count }}
22+
</span>
23+
</span>
24+
</p>
25+
</div>
26+
</div>

‎styles/angular-patternfly.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
.card-pf-aggregate-status-alt .card-pf-body {
2+
padding-bottom: 20px;
3+
}
4+
5+
.card-pf-aggregate-status-alt .card-pf-title {
6+
line-height: 22px;
7+
margin: 20px 0 10px 0;
8+
font-weight: 300;
9+
}
10+
11+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-count {
12+
font-size: 24px;
13+
}
14+
15+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-title {
16+
display: block;
17+
font-size: 12px;
18+
}
19+
20+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .card-pf-aggregate-status-notification {
21+
border-left: none;
22+
}
23+
24+
.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .fa, .card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .pficon {
25+
position: relative;
26+
top: -1px;
27+
}
28+
129
.donut-chart-pf {
230
width: 100%;
331
float: left;
@@ -24,9 +52,6 @@
2452
color: #333;
2553
}
2654

27-
.utilization-chart-pf {
28-
}
29-
3055
.utilization-chart-pf .current-values {
3156
border-bottom: 1px solid #d1d1d1;
3257
float: left;
@@ -78,4 +103,3 @@
78103
font-weight: 400;
79104
margin-left: 0;
80105
}
81-

0 commit comments

Comments
 (0)