Skip to content

Convert card module from directives to components #369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 14, 2016
Merged

Convert card module from directives to components #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6fc678
Commit card module from 1.4 directive to 1.5 component style
dgutride Dec 9, 2016
a67adda
Convert card examples to component style
dgutride Dec 9, 2016
5d99685
Convert card unit tests to new component style
dgutride Dec 9, 2016
3cdec0c
Pull in changes from PR on master that modifies card layout a bit
dgutride Dec 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions ...status/aggregate-status-card.directive.js → ...status/aggregate-status-card.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* @ngdoc directive
* @name patternfly.card.directive:pfAggregateStatusCard
* @restrict A
* @element ANY
* @name patternfly.card.component:pfAggregateStatusCard
* @restrict E
*
* @param {object} status Status configuration information<br/>
* <ul style='list-style-type: none'>
* <li>.title - the main title of the aggregate status card
Expand Down Expand Up @@ -38,7 +38,7 @@
* @deprecated {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout
*
* @description
* Directive for easily displaying status information
* Component for easily displaying status information
*
* @example
<example module="patternfly.card">
Expand All @@ -47,22 +47,22 @@
<div ng-controller="CardDemoCtrl" style="display:inline-block;">
<div class="col-md-10">
<label>With Top Border</label>
<div pf-aggregate-status-card status="status" show-top-border="true"></div>
<pf-aggregate-status-card status="status" show-top-border="true"></pf-aggregate-status-card>
<br/>
<label>No Top Border</label>
<div pf-aggregate-status-card status="status"></div>
<pf-aggregate-status-card status="status"></pf-aggregate-status-card>
<br/>
<label>layout = "mini"</label>
<div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>
<div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>
<pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></pf-aggregate-status-card>
<pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></pf-aggregate-status-card>
<br/>
<label>layout = "tall"</label>
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></pf-aggregate-status-card>
<br/>
<label>Alternate Layout</label>
<i>(depreciated, use layout = 'tall' instead)</i>
</br></br>
<div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>
<pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></pf-aggregate-status-card>
</div>
</div>
</file>
Expand Down Expand Up @@ -130,21 +130,21 @@
</example>
*/

angular.module( 'patternfly.card' ).directive('pfAggregateStatusCard', function () {
'use strict';
return {
restrict: 'A',
scope: {
status: '=',
showTopBorder: '@?',
altLayout: '@?',
layout: '@?'
},
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
link: function (scope) {
scope.shouldShowTopBorder = (scope.showTopBorder === 'true');
scope.isAltLayout = (scope.altLayout === 'true' || scope.layout === 'tall');
scope.isMiniLayout = (scope.layout === 'mini');
}
};
angular.module( 'patternfly.card' ).component('pfAggregateStatusCard', {
bindings: {
status: '=',
showTopBorder: '@?',
altLayout: '@?',
layout: '@?'
},
templateUrl: 'card/aggregate-status/aggregate-status-card.html',
controller: function () {
'use strict';
var ctrl = this;
ctrl.$onInit = function () {
ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
ctrl.isAltLayout = (ctrl.altLayout === 'true' || ctrl.layout === 'tall');
ctrl.isMiniLayout = (ctrl.layout === 'mini');
};
}
});
56 changes: 28 additions & 28 deletions src/card/aggregate-status/aggregate-status-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<div ng-if="!isMiniLayout" class="card-pf card-pf-aggregate-status" ng-class="{'card-pf-accented': shouldShowTopBorder, 'card-pf-aggregate-status-alt': isAltLayout}">
<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}">
<h2 class="card-pf-title">
<a href="{{status.href}}" ng-if="status.href">
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<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 href="{{$ctrl.status.href}}" ng-if="$ctrl.status.href">
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span class="{{$ctrl.status.iconClass}}"></span>
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
<span class="card-pf-aggregate-status-title">{{$ctrl.status.title}}</span>
</a>
<span ng-if="!status.href">
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<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 ng-if="!$ctrl.status.href">
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span class="{{$ctrl.status.iconClass}}"></span>
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
<span class="card-pf-aggregate-status-title">{{$ctrl.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">
<span class="card-pf-aggregate-status-notification" ng-repeat="notification in $ctrl.status.notifications">
<a href="{{notification.href}}" ng-if="notification.href">
<image ng-if="notification.iconImage" ng-src="{{notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span class="{{notification.iconClass}}"></span>{{ notification.count }}
Expand All @@ -28,29 +28,29 @@ <h2 class="card-pf-title">
</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}">
<div ng-if="$ctrl.isMiniLayout" class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini" ng-class="{'card-pf-accented': $ctrl.shouldShowTopBorder}">
<h2 class="card-pf-title">
<a ng-if="status.href" href="{{status.href}}">
<image ng-if="status.iconImage" ng-src="{{status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span ng-if="status.iconClass" class="{{status.iconClass}}"></span>
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
{{status.title}}
<a ng-if="$ctrl.status.href" href="{{$ctrl.status.href}}">
<image ng-if="$ctrl.status.iconImage" ng-src="{{$ctrl.status.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span ng-if="$ctrl.status.iconClass" class="{{$ctrl.status.iconClass}}"></span>
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
{{$ctrl.status.title}}
</a>
<span ng-if="!status.href">
<span class="card-pf-aggregate-status-count">{{status.count}}</span>
{{status.title}}
<span ng-if="!$ctrl.status.href">
<span class="card-pf-aggregate-status-count">{{$ctrl.status.count}}</span>
{{$ctrl.status.title}}
</span>
</h2>
<div class="card-pf-body">
<p ng-if="status.notification.iconImage || status.notification.iconClass || status.notification.count" class="card-pf-aggregate-status-notifications">
<p ng-if="$ctrl.status.notification.iconImage || $ctrl.status.notification.iconClass || $ctrl.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}}">
<image ng-if="status.notification.iconImage" ng-src="{{status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
<a ng-if="$ctrl.status.notification.href" href="{{$ctrl.status.notification.href}}">
<image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
<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>
</a>
<span ng-if="!status.notification.href">
<image ng-if="status.notification.iconImage" ng-src="{{status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
<span ng-if="status.notification.iconClass" class="{{status.notification.iconClass}}"></span><span ng-if="status.notification.count">{{status.notification.count}}</span>
<span ng-if="!$ctrl.status.notification.href">
<image ng-if="$ctrl.status.notification.iconImage" ng-src="{{$ctrl.status.notification.iconImage}}" alt="" class="card-pf-icon-image"></image>
<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>
</span>
</span>
</p>
Expand Down
24 changes: 13 additions & 11 deletions src/card/basic/card-filter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<button type="button" uib-dropdown-toggle class="btn btn-default">
{{currentFilter.label}}
<span class="caret"></span>
</button>
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
<li ng-repeat="item in filter.filters" ng-class="{'selected': item === currentFilter}">
<a role="menuitem" tabindex="-1" ng-click="filterCallBackFn(item)">
{{item.label}}
</a>
</li>
</ul>
<div uib-dropdown class="card-pf-time-frame-filter">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious. Was this change because we upgraded to UI Bootstrap?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah - it actually came in from master (it was a contributed change after we branched for 4.0) - I ported it in so I wouldn't lose the change.

@dlabrecq

<button type="button" uib-dropdown-toggle class="btn btn-default">
{{$ctrl.currentFilter.label}}
<span class="caret"></span>
</button>
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
<li ng-repeat="item in $ctrl.filter.filters" ng-class="{'selected': item === $ctrl.currentFilter}">
<a role="menuitem" tabindex="-1" ng-click="$ctrl.filterCallBackFn(item)">
{{item.label}}
</a>
</li>
</ul>
</div>
100 changes: 49 additions & 51 deletions src/card/basic/card.directive.js → src/card/basic/card.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* @ngdoc directive
* @name patternfly.card.directive:pfCard - Utilization
* @restrict A
* @element ANY
* @name patternfly.card.component:pfCard - Utilization
* @restrict E
*
* @param {string} headTitle Title for the card
* @param {string=} subTitle Sub-Title for the card
* @param {boolean=} showTopBorder Show/Hide the blue top border. True shows top border, false (default) hides top border
Expand All @@ -27,20 +27,20 @@
* <li>.callBackFn - user defined function to call when a filter is selected
* </ul>
* @description
* Directive for easily displaying a card with html content
* Component for easily displaying a card with html content
*
* @example
<example module="demo">

<file name="index.html">
<div ng-controller="ChartCtrl">
<label class="label-title">Card With Multiple Utilization Bars</label>
<div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
<pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
<div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
<div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
</div>
</pf-card>
</div>
</file>
<file name="script.js">
Expand Down Expand Up @@ -83,55 +83,53 @@
</file>
</example>
*/
angular.module('patternfly.card').directive('pfCard', function () {
'use strict';

return {
restrict: 'A',
transclude: true,
templateUrl: 'card/basic/card.html',
scope: {
headTitle: '@',
subTitle: '@?',
showTopBorder: '@?',
showTitlesSeparator: '@?',
footer: '=?',
filter: '=?'
},
controller: function ($scope) {
if ($scope.filter && !$scope.currentFilter) {
if ($scope.filter.defaultFilter) {
$scope.currentFilter = $scope.filter.filters[$scope.filter.defaultFilter];
} else {
$scope.currentFilter = $scope.filter.filters[0];
}
angular.module('patternfly.card').component('pfCard', {
transclude: true,
templateUrl: 'card/basic/card.html',
bindings: {
headTitle: '@',
subTitle: '@?',
showTopBorder: '@?',
showTitlesSeparator: '@?',
footer: '=?',
filter: '=?'
},
controller: function () {
'use strict';
var ctrl = this;
if (ctrl.filter && !ctrl.currentFilter) {
if (ctrl.filter.defaultFilter) {
ctrl.currentFilter = ctrl.filter.filters[ctrl.filter.defaultFilter];
} else {
ctrl.currentFilter = ctrl.filter.filters[0];
}
}

$scope.footerCallBackFn = function () {
$scope.footerCallBackResult = $scope.footer.callBackFn();
};
ctrl.footerCallBackFn = function () {
ctrl.footerCallBackResult = ctrl.footer.callBackFn();
};

$scope.filterCallBackFn = function (f) {
$scope.currentFilter = f;
if ($scope.filter.callBackFn) {
$scope.filterCallBackResult = $scope.filter.callBackFn(f);
}
};
ctrl.filterCallBackFn = function (f) {
ctrl.currentFilter = f;
if (ctrl.filter.callBackFn) {
ctrl.filterCallBackResult = ctrl.filter.callBackFn(f);
}
};

$scope.showHeader = function () {
return ($scope.headTitle || $scope.showFilterInHeader());
};
ctrl.showHeader = function () {
return (ctrl.headTitle || ctrl.showFilterInHeader());
};

$scope.showFilterInHeader = function () {
return ($scope.filter && $scope.filter.filters && $scope.filter.position && $scope.filter.position === 'header');
};
ctrl.showFilterInHeader = function () {
return (ctrl.filter && ctrl.filter.filters && ctrl.filter.position && ctrl.filter.position === 'header');
};

$scope.showFilterInFooter = function () {
return ($scope.filter && $scope.filter.filters && (!$scope.filter.position || $scope.filter.position === 'footer'));
};
},
link: function (scope) {
scope.shouldShowTitlesSeparator = (!scope.showTitlesSeparator || scope.showTitlesSeparator === 'true');
}
};
ctrl.showFilterInFooter = function () {
return (ctrl.filter && ctrl.filter.filters && (!ctrl.filter.position || ctrl.filter.position === 'footer'));
};

ctrl.$onInit = function () {
ctrl.shouldShowTitlesSeparator = (!ctrl.showTitlesSeparator || ctrl.showTitlesSeparator === 'true');
};
}
});
32 changes: 16 additions & 16 deletions src/card/basic/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
<div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
<div ng-if="showHeader()" ng-class="shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
<div ng-if="showFilterInHeader()" uib-dropdown class="card-pf-time-frame-filter" ng-include="'card/basic/card-filter.html'"></div>
<h2 class="card-pf-title">{{headTitle}}</h2>
<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="subTitle" class="card-pf-subtitle">{{subTitle}}</span>
<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="footer" class="card-pf-footer">
<div ng-if="showFilterInFooter()" uib-dropdown class="card-pf-time-frame-filter" ng-include="'card/basic/card-filter.html'"></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="footer.href" href="{{footer.href}}" ng-class="{'card-pf-link-with-icon':footer.iconClass,'card-pf-link':!footer.iconClass}">
<span ng-if="footer.iconClass" class="{{footer.iconClass}} card-pf-footer-text"></span>
<span ng-if="footer.text" class="card-pf-footer-text">{{footer.text}}</span>
<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="footer.callBackFn && !footer.href" ng-click="footerCallBackFn()" ng-class="{'card-pf-link-with-icon':footer.iconClass,'card-pf-link':!footer.iconClass}">
<span class="{{footer.iconClass}} card-pf-footer-text" ng-if="footer.iconClass"></span>
<span class="card-pf-footer-text" ng-if="footer.text">{{footer.text}}</span>
<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="!footer.href && !footer.callBackFn">
<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>
<span ng-if="footer.text" class="card-pf-footer-text">{{footer.text}}</span>
<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>
Expand Down
Loading