Skip to content

Commit e3629cb

Browse files
dtaylor113dtaylor113
committed
Aggregate Status Card - Mini Layout
1 parent a4fe17a commit e3629cb

File tree

5 files changed

+236
-28
lines changed

5 files changed

+236
-28
lines changed

‎dist/angular-patternfly.js

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,25 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", f
141141
* <li>.iconClass - an icon to display to the right of the notification count
142142
* <li>.count - the number count of the notification status
143143
* <li>.href - href to navigate to if one clicks on the notification status icon or count
144-
* <li>.id - unique id of the notificaiton status, appended to the .href
144+
* </ul>
145+
* </ul>
146+
* When layout='mini', only one notification can be specified:<br>
147+
* <ul style='list-style-type: none'>
148+
* <li>...
149+
* <li><strong>.notification</strong> - an <em>object</em> of containing a single notification icon & count
150+
* <ul style='list-style-type: none'>
151+
* <li>.iconClass - an icon to display to the right of the notification count
152+
* <li>.count - the number count of the notification status
153+
* <li>.href - href to navigate to if one clicks on the notification status icon or count
145154
* </ul>
146155
* </ul>
147156
* @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
148-
* @param {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
157+
* @param {string=} layout Various alternative layouts the aggregate status card may have:<br/>
158+
* <ul style='list-style-type: none'>
159+
* <li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
160+
* <li>'tall' displays a tall aggregate status card. This equals the depreciated 'alt-layout' param.</li>
161+
* </ul>
162+
* @deprecated {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
149163
*
150164
* @description
151165
* Directive for easily displaying status information
@@ -154,13 +168,26 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", f
154168
<example module="patternfly.card">
155169
156170
<file name="index.html">
157-
<div ng-controller="CardDemoCtrl">
158-
<h4>Aggregate Status Card - With Top Border<h4>
159-
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
160-
<h4>Aggregate Status Card - No Top Border<h4>
161-
<div pf-aggregate-status-card status="status"></div>
162-
<h4>Aggregate Status Card - Alternate Layout<h4>
163-
<div pf-aggregate-status-card status="aggStatus" show-top-border="true" alt-layout="true"></div>
171+
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
172+
<div class="col-md-10">
173+
<label>With Top Border</label>
174+
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
175+
<br/>
176+
<label>No Top Border</label>
177+
<div pf-aggregate-status-card status="status"></div>
178+
<br/>
179+
<label>layout = "mini"</label>
180+
<div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>
181+
<div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>
182+
<br/>
183+
<label>layout = "tall"</label>
184+
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>
185+
<br/>
186+
<label>Alternate Layout</label>
187+
<i>(depreciated, use layout = 'tall' instead)</i>
188+
</br></br>
189+
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>
190+
</div>
164191
</div>
165192
</file>
166193
@@ -184,7 +211,7 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", f
184211
]
185212
};
186213
187-
$scope.aggStatus = {
214+
$scope.aggStatusAlt = {
188215
"title":"Providers",
189216
"count":3,
190217
"notifications":[
@@ -200,6 +227,27 @@ angular.module('patternfly.autofocus', []).directive('pfFocused', ["$timeout", f
200227
}
201228
]
202229
};
230+
231+
$scope.miniAggStatus = {
232+
"iconClass":"pficon pficon-container-node",
233+
"title":"Nodes",
234+
"count":52,
235+
"href":"#",
236+
"notification": {
237+
"iconClass":"pficon pficon-error-circle-o",
238+
"count":3
239+
}
240+
};
241+
242+
$scope.miniAggStatus2 = {
243+
"iconClass":"pficon pficon-cluster",
244+
"title":"Adipiscing",
245+
"count":9,
246+
"href":"#",
247+
"notification":{
248+
"iconClass":"pficon pficon-ok"
249+
}
250+
};
203251
});
204252
</file>
205253
@@ -213,12 +261,14 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
213261
scope: {
214262
status: '=',
215263
showTopBorder: '@?',
216-
altLayout: '@?'
264+
altLayout: '@?',
265+
layout: '@?'
217266
},
218267
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
219268
link: function (scope) {
220269
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
221-
scope.isAltLayout = (scope.altLayout === 'true');
270+
scope.isAltLayout = (scope.altLayout === 'true' || scope.layout === 'tall');
271+
scope.isMiniLayout = (scope.layout === 'mini');
222272
}
223273
};
224274
});
@@ -4675,7 +4725,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
46754725
'use strict';
46764726

46774727
$templateCache.put('card/aggregate-status/aggregate-status-card.html',
4678-
"<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>"
4728+
"<div ng-if=!isMiniLayout 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><div ng-if=isMiniLayout class=\"card-pf card-pf-aggregate-status card-pf-aggregate-status-mini\" ng-class=\"{'card-pf-accented': shouldShowTopBorder}\"><h2 class=card-pf-title><span ng-if=status.iconClass class={{status.iconClass}}></span> <a ng-if=status.href href=#{{status.href}}><span class=card-pf-aggregate-status-count>{{status.count}}</span> {{status.title}}</a> <span ng-if=!status.href><span class=card-pf-aggregate-status-count>{{status.count}}</span> {{status.title}}</span></h2><div class=card-pf-body><p ng-if=\"status.notification.iconClass || status.notification.count\" class=card-pf-aggregate-status-notifications><span class=card-pf-aggregate-status-notification><a ng-if=status.notification.href href={{status.notification.href}}><span ng-if=status.notification.iconClass class={{status.notification.iconClass}}></span><span ng-if=status.notification.count>{{status.notification.count}}</span></a> <span ng-if=!status.notification.href><span ng-if=status.notification.iconClass class={{status.notification.iconClass}}></span><span ng-if=status.notification.count>{{status.notification.count}}</span></span></span></p></div></div>"
46794729
);
46804730

46814731

‎dist/angular-patternfly.min.js

Lines changed: 2 additions & 2 deletions
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: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,25 @@
1414
* <li>.iconClass - an icon to display to the right of the notification count
1515
* <li>.count - the number count of the notification status
1616
* <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
17+
* </ul>
18+
* </ul>
19+
* When layout='mini', only one notification can be specified:<br>
20+
* <ul style='list-style-type: none'>
21+
* <li>...
22+
* <li><strong>.notification</strong> - an <em>object</em> of containing a single notification icon & count
23+
* <ul style='list-style-type: none'>
24+
* <li>.iconClass - an icon to display to the right of the notification count
25+
* <li>.count - the number count of the notification status
26+
* <li>.href - href to navigate to if one clicks on the notification status icon or count
1827
* </ul>
1928
* </ul>
2029
* @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
30+
* @param {string=} layout Various alternative layouts the aggregate status card may have:<br/>
31+
* <ul style='list-style-type: none'>
32+
* <li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
33+
* <li>'tall' displays a tall aggregate status card. This equals the depreciated 'alt-layout' param.</li>
34+
* </ul>
35+
* @deprecated {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
2236
*
2337
* @description
2438
* Directive for easily displaying status information
@@ -27,13 +41,26 @@
2741
<example module="patternfly.card">
2842
2943
<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>
44+
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
45+
<div class="col-md-10">
46+
<label>With Top Border</label>
47+
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
48+
<br/>
49+
<label>No Top Border</label>
50+
<div pf-aggregate-status-card status="status"></div>
51+
<br/>
52+
<label>layout = "mini"</label>
53+
<div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>
54+
<div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>
55+
<br/>
56+
<label>layout = "tall"</label>
57+
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>
58+
<br/>
59+
<label>Alternate Layout</label>
60+
<i>(depreciated, use layout = 'tall' instead)</i>
61+
</br></br>
62+
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>
63+
</div>
3764
</div>
3865
</file>
3966
@@ -57,7 +84,7 @@
5784
]
5885
};
5986
60-
$scope.aggStatus = {
87+
$scope.aggStatusAlt = {
6188
"title":"Providers",
6289
"count":3,
6390
"notifications":[
@@ -73,6 +100,27 @@
73100
}
74101
]
75102
};
103+
104+
$scope.miniAggStatus = {
105+
"iconClass":"pficon pficon-container-node",
106+
"title":"Nodes",
107+
"count":52,
108+
"href":"#",
109+
"notification": {
110+
"iconClass":"pficon pficon-error-circle-o",
111+
"count":3
112+
}
113+
};
114+
115+
$scope.miniAggStatus2 = {
116+
"iconClass":"pficon pficon-cluster",
117+
"title":"Adipiscing",
118+
"count":9,
119+
"href":"#",
120+
"notification":{
121+
"iconClass":"pficon pficon-ok"
122+
}
123+
};
76124
});
77125
</file>
78126
@@ -86,12 +134,14 @@ angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function
86134
scope: {
87135
status: '=',
88136
showTopBorder: '@?',
89-
altLayout: '@?'
137+
altLayout: '@?',
138+
layout: '@?'
90139
},
91140
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
92141
link: function (scope) {
93142
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
94-
scope.isAltLayout = (scope.altLayout === 'true');
143+
scope.isAltLayout = (scope.altLayout === 'true' || scope.layout === 'tall');
144+
scope.isMiniLayout = (scope.layout === 'mini');
95145
}
96146
};
97147
});

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}">
1+
<div ng-if="!isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}">
22
<h2 class="card-pf-title">
33
<a href="{{status.href}}" ng-if="status.href">
44
<span class="{{status.iconClass}}"></span>
@@ -24,3 +24,28 @@ <h2 class="card-pf-title">
2424
</p>
2525
</div>
2626
</div>
27+
<div ng-if="isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': shouldShowTopBorder}">
28+
<h2 class="card-pf-title">
29+
<span ng-if="status.iconClass" class="{{status.iconClass}}"></span>
30+
<a ng-if="status.href" href="#{{status.href}}">
31+
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
32+
{{status.title}}
33+
</a>
34+
<span ng-if="!status.href">
35+
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
36+
{{status.title}}
37+
</span>
38+
</h2>
39+
<div class="card-pf-body">
40+
<p ng-if="status.notification.iconClass || status.notification.count" class="card-pf-aggregate-status-notifications">
41+
<span class="card-pf-aggregate-status-notification">
42+
<a ng-if="status.notification.href" href="{{status.notification.href}}">
43+
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
44+
</a>
45+
<span ng-if="!status.notification.href">
46+
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
47+
</span>
48+
</span>
49+
</p>
50+
</div>
51+
</div>

‎test/card/aggregate-status/aggregate-status-card.directive.spec.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,89 @@ describe('Directive: pfAggregateStatusCard', function() {
113113
expect(cardClass).toBeFalsy();
114114
});
115115

116+
it("should show mini layout", function() {
117+
118+
$scope.status = {
119+
"title":"Nodes",
120+
"count":793,
121+
"href":"#",
122+
"iconClass": "fa fa-shield",
123+
"notification": {
124+
"iconClass": "pficon pficon-error-circle-o",
125+
"count": 4,
126+
"href": "#"
127+
}
128+
};
129+
130+
element = compileCard('<div pf-aggregate-status-card status="status" layout="mini"></div>', $scope);
131+
132+
// should have the mini layout class
133+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-aggregate-status-mini');
134+
expect(cardClass).toBeTruthy();
135+
136+
// should show the main icon
137+
cardClass = angular.element(element).find('.fa-shield');
138+
expect(cardClass.size()).toBe(1);
139+
140+
notifications = angular.element(element).find('.card-pf-aggregate-status-notification');
141+
142+
//notification should have an icon
143+
expect(notifications.eq(0).find('span').hasClass('pficon-error-circle-o')).toBeTruthy();
144+
145+
//notification should have a count
146+
expect(notifications.eq(0).find('span').eq(1).html()).toBe('4');
147+
148+
});
149+
150+
it("should show mini layout, and hide optional items", function() {
151+
152+
$scope.status = {
153+
"title":"Nodes",
154+
"count":793,
155+
"notification":
156+
{
157+
"count":6
158+
}
159+
};
160+
161+
element = compileCard('<div pf-aggregate-status-card status="status" layout="mini"></div>', $scope);
162+
163+
// should have the mini layout class
164+
cardClass = angular.element(element).find('.card-pf').hasClass('card-pf-aggregate-status-mini');
165+
expect(cardClass).toBeTruthy();
166+
167+
// should not show the main icon
168+
cardClass = angular.element(element).find('.fa-shield');
169+
expect(cardClass.size()).toBe(0);
170+
171+
notifications = angular.element(element).find('.card-pf-aggregate-status-notification');
172+
173+
//notification should not have an icon
174+
expect(notifications.eq(0).find('span').hasClass('pficon-error-circle-o')).toBeFalsy();
175+
176+
//notification should have a count
177+
expect(notifications.eq(0).find('span').eq(1).html()).toBe('6');
178+
179+
180+
$scope.status = {
181+
"title":"Nodes",
182+
"count":793,
183+
"notification":
184+
{
185+
"iconClass":"pficon pficon-error-circle-o"
186+
}
187+
};
188+
189+
element = compileCard('<div pf-aggregate-status-card status="status" layout="mini"></div>', $scope);
190+
191+
notifications = angular.element(element).find('.card-pf-aggregate-status-notification');
192+
193+
//notification should have an icon
194+
expect(notifications.eq(0).find('span').hasClass('pficon-error-circle-o')).toBeTruthy();
195+
196+
//notification should not have a count
197+
expect(notifications.eq(0).find('span').eq(1).html()).not.toBe('6');
198+
});
116199
});
117200

118201
});

0 commit comments

Comments
 (0)