Skip to content

Commit b74bfc6

Browse files
jeff-phillips-18jeff-phillips-18
authored
Merge pull request #380 from dgutride/convert-notification-module
Convert notification module
2 parents 20fddcc + bb58f42 commit b74bfc6

18 files changed

+316
-310
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ Enhancements
1010

1111
Bug Fixes
1212
- Update layout for sort, filter, and toolbar to match patternfly markup
13+
14+
15+
Breaking Changes
16+
- pfInlineNotification - pfNotificationRemove function added which ties the click event of the close button to a user specified function. Previously, this used to be hardcoded to use the Notifications service, this is now optional.

‎src/notification/inline-notification.directive.js renamed to ‎src/notification/inline-notification.component.js

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.notification.directive:pfInlineNotification
3+
* @name patternfly.notification.component:pfInlineNotification
44
* @restrict E
55
* @scope
66
*
77
* @param {expression=} pfNotificationType The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'.
88
* @param {expression=} pfNotificationMessage The main text message of the notification.
99
* @param {expression=} pfNotificationHeader The header text of the notification.
1010
* @param {expression=} pfNotificationPersistent The notification won't disappear after delay timeout, but has to be closed manually with the close button.
11+
* @param {expression=} pfNotificationRemove The function to remove the notification (called by the close button when clicked).
1112
*
1213
* @description
1314
* The main visual element of the notification message.
@@ -18,35 +19,36 @@
1819
<file name="index.html">
1920
<div ng-controller="NotificationDemoCtrl">
2021
21-
<pf-inline-notification pf-notification-type="type"
22-
pf-notification-header="header"
23-
pf-notification-message="message"
24-
pf-notification-persistent="isPersistent">
22+
<pf-inline-notification pf-notification-type="notification.type"
23+
pf-notification-header="notification.header"
24+
pf-notification-message="notification.message"
25+
pf-notification-persistent="notification.isPersistent"
26+
pf-notification-remove="removeNotification()">
2527
</pf-inline-notification>
2628
2729
<form class="form-horizontal">
2830
<div class="form-group">
2931
<label class="col-sm-2 control-label" for="header">Header:</label>
3032
<div class="col-sm-10">
31-
<input type="text" class="form-control" ng-model="header" id="header"/>
33+
<input type="text" class="form-control" ng-model="notification.header" id="header"/>
3234
</div>
3335
</div>
3436
<div class="form-group">
3537
<label class="col-sm-2 control-label" for="message">Message:</label>
3638
<div class="col-sm-10">
37-
<input type="text" class="form-control" ng-model="message" id="message"/>
39+
<input type="text" class="form-control" ng-model="notification.message" id="message"/>
3840
</div>
3941
</div>
4042
<div class="form-group">
4143
<label class="col-sm-2 control-label" for="type">Type:</label>
4244
<div class="col-sm-10">
4345
<div class="btn-group" uib-dropdown>
4446
<button type="button" uib-dropdown-toggle class="btn btn-default">
45-
{{type}}
47+
{{notification.type}}
4648
<span class="caret"></span>
4749
</button>
4850
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
49-
<li ng-repeat="item in types" ng-class="{'selected': item === type}">
51+
<li ng-repeat="item in types" ng-class="{'selected': item === notification.type}">
5052
<a role="menuitem" tabindex="-1" ng-click="updateType(item)">
5153
{{item}}
5254
</a>
@@ -58,41 +60,51 @@
5860
<div class="form-group">
5961
<label class="col-sm-2 control-label" for="type">Persistent:</label>
6062
<div class="col-sm-10">
61-
<input type="checkbox" ng-model="isPersistent"></input>
63+
<input type="checkbox" ng-model="notification.isPersistent"></input>
6264
</div>
6365
</div>
6466
</form>
6567
</div>
6668
</file>
6769
6870
<file name="script.js">
69-
angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) {
71+
angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, $timeout ) {
7072
$scope.types = ['success','info','danger', 'warning'];
71-
$scope.type = $scope.types[0];
72-
$scope.isPersistent = false;
7373
7474
$scope.updateType = function(item) {
75-
$scope.type = item;
75+
$scope.notification.type = item;
7676
};
77-
$scope.header = 'Default Header.';
78-
$scope.message = 'Default Message.';
77+
78+
$scope.removeNotification = function () {
79+
$scope.notification = undefined;
80+
// Add notification back for demo purposes
81+
$timeout(function() {
82+
createNotification();
83+
}, 1000);
84+
};
85+
86+
var createNotification = function () {
87+
$scope.notification = {
88+
type: $scope.types[0],
89+
isPersistent: false,
90+
header: 'Default Header.',
91+
message: 'Default Message.'
92+
};
93+
};
94+
createNotification();
7995
});
8096
</file>
8197
8298
</example>
8399
*/
84-
angular.module( 'patternfly.notification' ).directive('pfInlineNotification', function () {
85-
'use strict';
86-
87-
return {
88-
scope: {
89-
'pfNotificationType': '=',
90-
'pfNotificationMessage': '=',
91-
'pfNotificationHeader': '=',
92-
'pfNotificationPersistent': '=',
93-
'pfNotificationIndex': '='
94-
},
95-
restrict: 'E',
96-
templateUrl: 'notification/inline-notification.html'
97-
};
100+
angular.module( 'patternfly.notification' ).component('pfInlineNotification', {
101+
bindings: {
102+
'pfNotificationType': '=',
103+
'pfNotificationMessage': '=',
104+
'pfNotificationHeader': '=',
105+
'pfNotificationPersistent': '=',
106+
'pfNotificationIndex': '=',
107+
'pfNotificationRemove': '&?'
108+
},
109+
templateUrl: 'notification/inline-notification.html'
98110
});

‎src/notification/inline-notification.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<div class="alert alert-{{pfNotificationType}}"
2-
ng-class="{'alert-dismissable': pfNotificationPersistent === true}">
3-
<button ng-show="pfNotificationPersistent"
4-
ng-click="$parent.notifications.remove($index)"
1+
<div class="alert alert-{{$ctrl.pfNotificationType}}"
2+
ng-class="{'alert-dismissable': $ctrl.pfNotificationPersistent === true}">
3+
<button ng-show="$ctrl.pfNotificationPersistent"
4+
ng-click="$ctrl.pfNotificationRemove()"
55
type="button" class="close" data-dismiss="alert" aria-hidden="true">
66
<span class="pficon pficon-close"></span>
77
</button>
8-
<span class="pficon pficon-ok" ng-show="pfNotificationType === 'success'"></span>
9-
<span class="pficon pficon-info" ng-show="pfNotificationType === 'info'"></span>
10-
<span class="pficon pficon-error-circle-o" ng-show="pfNotificationType === 'danger'"></span>
11-
<span class="pficon pficon-warning-triangle-o" ng-show="pfNotificationType === 'warning'"></span>
8+
<span class="pficon pficon-ok" ng-show="$ctrl.pfNotificationType === 'success'"></span>
9+
<span class="pficon pficon-info" ng-show="$ctrl.pfNotificationType === 'info'"></span>
10+
<span class="pficon pficon-error-circle-o" ng-show="$ctrl.pfNotificationType === 'danger'"></span>
11+
<span class="pficon pficon-warning-triangle-o" ng-show="$ctrl.pfNotificationType === 'warning'"></span>
1212

13-
<strong>{{pfNotificationHeader}}</strong> {{pfNotificationMessage}}
13+
<strong>{{$ctrl.pfNotificationHeader}}</strong> {{$ctrl.pfNotificationMessage}}
1414
</div>

‎src/notification/notification-drawer.directive.js renamed to ‎src/notification/notification-drawer.component.js

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.notification.directive:pfNotificationDrawer
3+
* @name patternfly.notification.component:pfNotificationDrawer
4+
* @restrict E
45
*
56
* @description
6-
* Directive for rendering a notification drawer. This provides a common mechanism to handle how the notification
7+
* Component for rendering a notification drawer. This provides a common mechanism to handle how the notification
78
* drawer should look and behave without mandating the look of the notification group heading or notification body.
89
* <br><br>
910
* An array of notification groups must be passed to create each group in the drawer. Each notification
@@ -47,11 +48,11 @@
4748
</div>
4849
<div class="layout-pf-fixed">
4950
<div class="navbar-pf-vertical">
50-
<div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
51+
<pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
5152
action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"
5253
heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
5354
notification-footer-include="notification-footer.html" custom-scope="customScope">
54-
</div>
55+
</pf-notification-drawer>
5556
</div>
5657
</div>
5758
<div class="col-md-12">
@@ -69,7 +70,7 @@
6970
{{notificationGroup.subHeading}}
7071
</file>
7172
<file name="notification-footer.html">
72-
<a class="btn btn-link btn-block" role="button" ng-click="customScope.clearAll(notificationGroup)">
73+
<a class="btn btn-link btn-block" role="button" ng-click="$ctrl.customScope.clearAll(notificationGroup)">
7374
<span class="pficon pficon-close"></span>
7475
<span> Clear All</span>
7576
</a>
@@ -84,23 +85,23 @@
8485
<li ng-repeat="action in notification.actions"
8586
role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
8687
ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
87-
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
88+
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
8889
{{action.name}}
8990
</a>
9091
</li>
9192
</ul>
9293
</div>
93-
<span ng-if="notification.status" class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}" ng-click="customScope.markRead(notification)"></span>
94-
<span class="drawer-pf-notification-message" ng-click="customScope.markRead(notification)">{{notification.message}}</span>
95-
<div class="drawer-pf-notification-info" ng-click="customScope.markRead(notification)">
94+
<span ng-if="notification.status" class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}" ng-click="$ctrl.customScope.markRead(notification)"></span>
95+
<span class="drawer-pf-notification-message" ng-click="$ctrl.customScope.markRead(notification)">{{notification.message}}</span>
96+
<div class="drawer-pf-notification-info" ng-click="$ctrl.customScope.markRead(notification)">
9697
<span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
9798
<span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
9899
</div>
99100
</div>
100101
<div ng-if="drawerExpanded" class="container-fluid">
101102
<div class="row">
102103
<div class="col-sm-6">
103-
<span class="pull-left {{customScope.getNotficationStatusIconClass(notification)}}"></span>
104+
<span class="pull-left {{$ctrl.customScope.getNotficationStatusIconClass(notification)}}"></span>
104105
<span class="drawer-pf-notification-message notification-message"
105106
tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
106107
{{notification.message}}
@@ -119,7 +120,7 @@
119120
<li ng-repeat="action in notification.actions"
120121
role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
121122
ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
122-
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
123+
<a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="$ctrl.customScope.handleAction(notification, action)">
123124
{{action.name}}
124125
</a>
125126
</li>
@@ -471,36 +472,52 @@
471472
</file>
472473
</example>
473474
*/
474-
angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) {
475-
'use strict';
476-
return {
477-
restrict: 'A',
478-
scope: {
479-
drawerHidden: '=?',
480-
allowExpand: '=?',
481-
drawerExpanded: '=?',
482-
drawerTitle: '@',
483-
notificationGroups: '=',
484-
actionButtonTitle: '@',
485-
actionButtonCallback: '=?',
486-
titleInclude: '@',
487-
headingInclude: '@',
488-
subheadingInclude: '@',
489-
notificationBodyInclude: '@',
490-
notificationFooterInclude: '@',
491-
customScope: '=?'
492-
},
493-
templateUrl: 'notification/notification-drawer.html',
494-
controller: function ($scope) {
495-
if (!$scope.allowExpand || angular.isUndefined($scope.drawerExpanded)) {
496-
$scope.drawerExpanded = false;
475+
angular.module('patternfly.notification').component('pfNotificationDrawer', {
476+
bindings: {
477+
drawerHidden: '<?',
478+
allowExpand: '=?',
479+
drawerExpanded: '=?',
480+
drawerTitle: '@',
481+
notificationGroups: '<',
482+
actionButtonTitle: '@',
483+
actionButtonCallback: '=?',
484+
titleInclude: '@',
485+
headingInclude: '@',
486+
subheadingInclude: '@',
487+
notificationBodyInclude: '@',
488+
notificationFooterInclude: '@',
489+
customScope: '=?'
490+
},
491+
templateUrl: 'notification/notification-drawer.html',
492+
controller: function ($window, $timeout, $element) {
493+
'use strict';
494+
var ctrl = this;
495+
496+
ctrl.toggleCollapse = function (selectedGroup) {
497+
if (selectedGroup.open) {
498+
selectedGroup.open = false;
499+
} else {
500+
ctrl.notificationGroups.forEach(function (group) {
501+
group.open = false;
502+
});
503+
selectedGroup.open = true;
504+
}
505+
};
506+
507+
ctrl.toggleExpandDrawer = function () {
508+
ctrl.drawerExpanded = !ctrl.drawerExpanded;
509+
};
510+
511+
ctrl.$onInit = function () {
512+
if (!ctrl.allowExpand || angular.isUndefined(ctrl.drawerExpanded)) {
513+
ctrl.drawerExpanded = false;
497514
}
498-
},
499-
link: function (scope, element) {
515+
};
500516

501-
scope.$watch('notificationGroups', function () {
502-
var openFound = false;
503-
scope.notificationGroups.forEach(function (group) {
517+
ctrl.$onChanges = function (changesObj) {
518+
var openFound = false;
519+
if (changesObj.notificationGroups) {
520+
changesObj.notificationGroups.currentValue.forEach(function (group) {
504521
if (group.open) {
505522
if (openFound) {
506523
group.open = false;
@@ -509,35 +526,22 @@ angular.module('patternfly.notification').directive('pfNotificationDrawer', func
509526
}
510527
}
511528
});
512-
});
529+
}
513530

514-
scope.$watch('drawerHidden', function () {
531+
if (changesObj.drawerHidden) {
515532
$timeout(function () {
516533
angular.element($window).triggerHandler('resize');
517534
}, 100);
518-
});
519-
520-
scope.toggleCollapse = function (selectedGroup) {
521-
if (selectedGroup.open) {
522-
selectedGroup.open = false;
523-
} else {
524-
scope.notificationGroups.forEach(function (group) {
525-
group.open = false;
526-
});
527-
selectedGroup.open = true;
528-
}
529-
};
530-
531-
scope.toggleExpandDrawer = function () {
532-
scope.drawerExpanded = !scope.drawerExpanded;
533-
};
535+
}
536+
};
534537

535-
if (scope.groupHeight) {
536-
element.find('.panel-group').css("height", scope.groupHeight);
538+
ctrl.$postLink = function () {
539+
if (ctrl.groupHeight) {
540+
$element.find('.panel-group').css("height", ctrl.groupHeight);
537541
}
538-
if (scope.groupClass) {
539-
element.find('.panel-group').addClass(scope.groupClass);
542+
if (ctrl.groupClass) {
543+
$element.find('.panel-group').addClass(ctrl.groupClass);
540544
}
541-
}
542-
};
545+
};
546+
}
543547
});

0 commit comments

Comments
 (0)