@@ -550,11 +550,11 @@ angular.module('patternfly.card').directive('pfCard', function () {
550
550
551
551
<file name="index.html">
552
552
<div ng-controller="ChartCtrl">
553
- <label class="label-title">Card With Single Trend Chart </label>
553
+ <label class="label-title">Card With Single Trend</label>
554
554
<div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
555
555
<div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
556
556
</div>
557
- <label class="label-title">Card With Multiple Trends</label>
557
+ <label class="label-title">Card with Multiple Trends</label>
558
558
<div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
559
559
show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
560
560
<div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
@@ -3656,9 +3656,11 @@ angular.module( 'patternfly.notification' ).directive('pfInlineNotification', fu
3656
3656
* @param {object } notificationGroups Array of notification groups to add to the drawer
3657
3657
* @param {string } actionButtonTitle Text for the lower action button of the drawer (optional, if not specified there will be no action button)
3658
3658
* @param {function } actionButtonCallback function(notificationGroup) Callback method for action button for each group, the notificationGroup is passed (Optional)
3659
+ * @param {string } titleInclude Include src for the title area for the notification drawer, use this to customize the drawer title area
3659
3660
* @param {string } headingInclude Include src for the heading area for each notification group, access the group via notificationGroup
3660
3661
* @param {string } subheadingInclude Include src for the sub-heading area for each notification group, access the group via notificationGroup
3661
- * @param {string } notificationBodyInclude Include src for the notification body for each notification, access the group via notification
3662
+ * @param {string } notificationBodyInclude Include src for the notification body for each notification, access the notification via notification
3663
+ * @param {string } notificationFooterInclude Include src for the notification footer for each notification, access the notification via notification
3662
3664
* @param {object } customScope Object containing any variables/functions used by the included src, access via customScope.<xxx>
3663
3665
*
3664
3666
* @example
@@ -3684,7 +3686,7 @@ angular.module( 'patternfly.notification' ).directive('pfInlineNotification', fu
3684
3686
<div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer"
3685
3687
action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"
3686
3688
heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
3687
- custom-scope="customScope">
3689
+ notification-footer-include="notification-footer.html" custom-scope="customScope">
3688
3690
</div>
3689
3691
</div>
3690
3692
</div>
@@ -3702,6 +3704,12 @@ angular.module( 'patternfly.notification' ).directive('pfInlineNotification', fu
3702
3704
<file name="subheading.html">
3703
3705
{{notificationGroup.subHeading}}
3704
3706
</file>
3707
+ <file name="notification-footer.html">
3708
+ <a class="btn btn-link btn-block" role="button" ng-click="customScope.clearAll(notificationGroup)">
3709
+ <span class="pficon pficon-close"></span>
3710
+ <span> Clear All</span>
3711
+ </a>
3712
+ </file>
3705
3713
<file name="notification-body.html">
3706
3714
<div class="dropdown pull-right dropdown-kebab-pf" ng-if="notification.actions && notification.actions.length > 0">
3707
3715
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -4035,6 +4043,10 @@ angular.module( 'patternfly.notification' ).directive('pfInlineNotification', fu
4035
4043
var newText = notification.message + " - " + action.name;
4036
4044
$scope.actionsText = newText + "\n" + $scope.actionsText;
4037
4045
};
4046
+ $scope.customScope.clearAll = function (group) {
4047
+ var newText = group.heading + " - Clear All";
4048
+ $scope.actionsText = newText + "\n" + $scope.actionsText;
4049
+ };
4038
4050
4039
4051
}
4040
4052
]);
@@ -4051,9 +4063,11 @@ angular.module('patternfly.notification').directive('pfNotificationDrawer', ["$w
4051
4063
notificationGroups : '=' ,
4052
4064
actionButtonTitle : '@' ,
4053
4065
actionButtonCallback : '=?' ,
4066
+ titleInclude : '@' ,
4054
4067
headingInclude : '@' ,
4055
4068
subheadingInclude : '@' ,
4056
4069
notificationBodyInclude : '@' ,
4070
+ notificationFooterInclude : '@' ,
4057
4071
customScope : '=?'
4058
4072
} ,
4059
4073
templateUrl : 'notification/notification-drawer.html' ,
@@ -6540,7 +6554,7 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
6540
6554
'use strict' ;
6541
6555
6542
6556
$templateCache . put ( 'card/aggregate-status/aggregate-status-card.html' ,
6543
- "<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><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> <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></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><image ng-if=notification.iconImage ng-src={{notification.iconImage}} alt=\"\" class=card-pf-icon-image></image><span class={{notification.iconClass}}></span>{{ notification.count }}</a> <span 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 }}</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><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> <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.iconImage || 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}}><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> <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></span></p></div></div>"
6557
+ "<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><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> <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></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><image ng-if=notification.iconImage ng-src={{notification.iconImage}} alt=\"\" class=card-pf-icon-image></image><span class={{notification.iconClass}}></span>{{ notification.count }}</a> <span 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 }}</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><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> <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.iconImage || 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}}><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> <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></span></p></div></div>"
6544
6558
) ;
6545
6559
6546
6560
@@ -6648,7 +6662,7 @@ angular.module('patternfly.views').directive('pfListView', ["$timeout", "$window
6648
6662
6649
6663
6650
6664
$templateCache . put ( 'notification/notification-drawer.html' ,
6651
- "<div class=drawer-pf ng-class=\"{hide: drawerHidden}\"><div class=drawer-pf-title><h3 class=text-center>{{drawerTitle}}</h3></div><div pf-fixed-accordion scroll-selector=.panel-body><div class=panel-group><div class=\"panel panel-default\" ng-repeat=\"notificationGroup in notificationGroups track by $index\"><div class=panel-heading><h4 class=panel-title><a ng-click=toggleCollapse(notificationGroup) ng-class=\"{collapsed: !notificationGroup.open}\" ng-include src=headingInclude></a></h4><span class=panel-counter ng-include src=subheadingInclude></span></div><div class=\"panel-collapse collapse\" ng-class=\"{in: notificationGroup.open}\"><div class=panel-body><div class=drawer-pf-notification ng-class=\"{unread: notification.unread}\" ng-repeat=\"notification in notificationGroup.notifications\" ng-include src=notificationBodyInclude></div><div ng-if=notificationGroup.isLoading class=\"drawer-pf-loading text-center\"><span class=\"spinner spinner-xs spinner-inline\"></span> Loading More</div></div><div class=drawer-pf-action ng-if=actionButtonTitle><a class=\"btn btn-link btn-block\" ng-click=actionButtonCallback(notificationGroup)>{{actionButtonTitle}}</a></div></div></div></div></div></div>"
6665
+ "<div class=drawer-pf ng-class=\"{'hide': drawerHidden}\"><div ng-if=drawerTitle class=drawer-pf-title><h3 class=text-center>{{drawerTitle}}</h3></div><div ng-if=titleInclude class=drawer-pf-title ng-include src=titleInclude></div><div pf-fixed-accordion scroll-selector=.panel-body><div class=panel-group><div class=\"panel panel-default\" ng-repeat=\"notificationGroup in notificationGroups track by $index\"><div class=panel-heading><h4 class=panel-title><a ng-click=toggleCollapse(notificationGroup) ng-class=\"{collapsed: !notificationGroup.open}\" ng-include src=headingInclude></a></h4><span class=panel-counter ng-include src=subheadingInclude></span></div><div class=\"panel-collapse collapse\" ng-class=\"{in: notificationGroup.open}\"><div class=panel-body><div class=drawer-pf-notification ng-class=\"{unread: notification.unread}\" ng-repeat=\"notification in notificationGroup.notifications\" ng-include src=notificationBodyInclude></div><div ng-if=notificationGroup.isLoading class=\"drawer-pf-loading text-center\"><span class=\"spinner spinner-xs spinner-inline\"></span> Loading More</div></div><div class=drawer-pf-action ng-if=actionButtonTitle><a class=\"btn btn-link btn-block\" ng-click=actionButtonCallback(notificationGroup)>{{actionButtonTitle}}</a></div><div ng-if=notificationFooterInclude ng-include src=notificationFooterInclude></div></div></div></div></div></div>"
6652
6666
) ;
6653
6667
6654
6668
0 commit comments