From 29ee53ca4f5ada286b95ab3332fe037413a512f6 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Thu, 15 Dec 2016 10:56:26 -0500 Subject: [PATCH 1/7] Convert inline notifications and toast notifications from directive to component style --- ...ve.js => inline-notification.component.js} | 64 ++++---- src/notification/inline-notification.html | 18 +-- ...s => toast-notification-list.component.js} | 0 src/notification/toast-notification-list.html | 4 +- ...ive.js => toast-notification.component.js} | 145 ++++++++++-------- src/notification/toast-notification.html | 32 ++-- test/notification/toast-notification.spec.js | 6 +- 7 files changed, 141 insertions(+), 128 deletions(-) rename src/notification/{inline-notification.directive.js => inline-notification.component.js} (60%) rename src/notification/{toast-notification-list.directive.js => toast-notification-list.component.js} (100%) rename src/notification/{toast-notification.directive.js => toast-notification.component.js} (76%) diff --git a/src/notification/inline-notification.directive.js b/src/notification/inline-notification.component.js similarity index 60% rename from src/notification/inline-notification.directive.js rename to src/notification/inline-notification.component.js index e19e63fdd..352b5e9be 100644 --- a/src/notification/inline-notification.directive.js +++ b/src/notification/inline-notification.component.js @@ -1,6 +1,6 @@ /** * @ngdoc directive - * @name patternfly.notification.directive:pfInlineNotification + * @name patternfly.notification.component:pfInlineNotification * @restrict E * @scope * @@ -18,23 +18,24 @@
- +
- +
- +
@@ -42,11 +43,11 @@
- + {{notification.message}}
{{notification.timeStamp | date:'MM/dd/yyyy'}} diff --git a/test/notification/notification-drawer.spec.js b/test/notification/notification-drawer.spec.js index 589ec0786..545125aea 100644 --- a/test/notification/notification-drawer.spec.js +++ b/test/notification/notification-drawer.spec.js @@ -1,4 +1,4 @@ -describe('Directive: pfNotificationDrawer', function () { +describe('Component: pfNotificationDrawer', function () { var $scope; var $compile; var element; @@ -314,11 +314,11 @@ describe('Directive: pfNotificationDrawer', function () { $scope.actionPerformed = action; }; - var htmlTmp = '
' + - '
'; + ''; compileHTML(htmlTmp, $scope); }); @@ -447,11 +447,11 @@ describe('Directive: pfNotificationDrawer', function () { var expandToggle = element.find('.drawer-pf-toggle-expand'); expect(expandToggle.length).toBe(0); - var htmlTmp = '
' + - '
'; + ''; compileHTML(htmlTmp, $scope); @@ -463,11 +463,11 @@ describe('Directive: pfNotificationDrawer', function () { var expandedDrawer = element.find('.drawer-pf.drawer-pf-expanded'); expect(expandedDrawer.length).toBe(0); - var htmlTmp = '
' + - '
'; + ''; compileHTML(htmlTmp, $scope); diff --git a/test/notification/notification-footer.html b/test/notification/notification-footer.html index 16efe9995..1b028779c 100644 --- a/test/notification/notification-footer.html +++ b/test/notification/notification-footer.html @@ -1,4 +1,4 @@ - + Clear All From b1eefcda04ddb8857705e5665b091c76e80cc6b1 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Wed, 21 Dec 2016 15:14:31 -0500 Subject: [PATCH 5/7] Convert notification directive and service to not use scope --- src/notification/notification-list.html | 4 +-- src/notification/notification.js | 47 ++++++++++--------------- test/notification/notification.spec.js | 34 +++++++++--------- 3 files changed, 38 insertions(+), 47 deletions(-) diff --git a/src/notification/notification-list.html b/src/notification/notification-list.html index 3ad1677e2..571527c7c 100644 --- a/src/notification/notification-list.html +++ b/src/notification/notification-list.html @@ -1,5 +1,5 @@ -
-
+
+
@@ -298,16 +291,14 @@ angular.module('patternfly.notification').provider('Notifications', function () */ -angular.module('patternfly.notification').directive('pfNotificationList', function () { - 'use strict'; - - return { - restrict: 'E', - controller: NotificationListController, - templateUrl: 'notification/notification-list.html' - }; - - function NotificationListController ($scope, $rootScope) { - $scope.notifications = $rootScope.notifications; +angular.module('patternfly.notification').component('pfNotificationList', { + templateUrl: 'notification/notification-list.html', + controller: function (Notifications) { + 'use strict'; + var ctrl = this; + + ctrl.$onInit = function () { + ctrl.notifications = Notifications; + }; } }); diff --git a/test/notification/notification.spec.js b/test/notification/notification.spec.js index 17de3bb22..3e4434bae 100644 --- a/test/notification/notification.spec.js +++ b/test/notification/notification.spec.js @@ -19,42 +19,42 @@ describe('pf-notification', function () { it('should propagate to the $rootScope correctly', function () { - expect($scope.notifications.data.length).toBe(0); + expect(Notifications.data.length).toBe(0); Notifications.info('aloha'); - expect($scope.notifications.data.length).toBe(1); - expect($scope.notifications.data[0].type).toBe('info'); - expect($scope.notifications.data[0].message).toBe('aloha'); + expect(Notifications.data.length).toBe(1); + expect(Notifications.data[0].type).toBe('info'); + expect(Notifications.data[0].message).toBe('aloha'); Notifications.warn('achtung'); - expect($scope.notifications.data.length).toBe(2); - expect($scope.notifications.data[1].type).toBe('warning'); - expect($scope.notifications.data[1].message).toBe('achtung'); + expect(Notifications.data.length).toBe(2); + expect(Notifications.data[1].type).toBe('warning'); + expect(Notifications.data[1].message).toBe('achtung'); Notifications.success('allright'); - expect($scope.notifications.data.length).toBe(3); - expect($scope.notifications.data[2].type).toBe('success'); - expect($scope.notifications.data[2].message).toBe('allright'); + expect(Notifications.data.length).toBe(3); + expect(Notifications.data[2].type).toBe('success'); + expect(Notifications.data[2].message).toBe('allright'); Notifications.error('noway'); - expect($scope.notifications.data.length).toBe(4); - expect($scope.notifications.data[3].type).toBe('danger'); - expect($scope.notifications.data[3].message).toBe('noway'); + expect(Notifications.data.length).toBe(4); + expect(Notifications.data[3].type).toBe('danger'); + expect(Notifications.data[3].message).toBe('noway'); var httpResponse = {data:{message: 'http'}}; Notifications.httpError('error', httpResponse); - expect($scope.notifications.data.length).toBe(5); - expect($scope.notifications.data[4].type).toBe('danger'); - expect($scope.notifications.data[4].message).toBe('error (http)'); + expect(Notifications.data.length).toBe(5); + expect(Notifications.data[4].type).toBe('danger'); + expect(Notifications.data[4].message).toBe('error (http)'); $timeout.flush(); - expect($scope.notifications.data.length).toBe(2); + expect(Notifications.data.length).toBe(2); }); }); From d2aa17d4429d25707ce5eb4251fd99235a23773d Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Wed, 21 Dec 2016 15:16:16 -0500 Subject: [PATCH 6/7] Rename directive to component for notification-drawer --- ...ation-drawer.directive.js => notification-drawer.component.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/notification/{notification-drawer.directive.js => notification-drawer.component.js} (100%) diff --git a/src/notification/notification-drawer.directive.js b/src/notification/notification-drawer.component.js similarity index 100% rename from src/notification/notification-drawer.directive.js rename to src/notification/notification-drawer.component.js From bb58f42420ac42b33b6c7cf76b4bf89b753ed3b9 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Tue, 3 Jan 2017 10:33:32 -0500 Subject: [PATCH 7/7] Modify demo to re-add notification after it has been dismissed. --- .../inline-notification.component.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/notification/inline-notification.component.js b/src/notification/inline-notification.component.js index d3f7e3d94..f49156fa9 100644 --- a/src/notification/inline-notification.component.js +++ b/src/notification/inline-notification.component.js @@ -68,23 +68,30 @@ - angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications, $rootScope ) { + angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, $timeout ) { $scope.types = ['success','info','danger', 'warning']; - $scope.notifications = $rootScope.notifications; - $scope.notification = { - type: $scope.types[0], - isPersistent: false, - header: 'Default Header.', - message: 'Default Message.' - } $scope.updateType = function(item) { $scope.notification.type = item; }; $scope.removeNotification = function () { - $scope.notification = null; + $scope.notification = undefined; + // Add notification back for demo purposes + $timeout(function() { + createNotification(); + }, 1000); }; + + var createNotification = function () { + $scope.notification = { + type: $scope.types[0], + isPersistent: false, + header: 'Default Header.', + message: 'Default Message.' + }; + }; + createNotification(); });