diff --git a/CHANGELOG.md b/CHANGELOG.md index 44d10fb67..77f6185be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,3 +10,7 @@ Enhancements Bug Fixes - Update layout for sort, filter, and toolbar to match patternfly markup + + +Breaking Changes +- 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. diff --git a/src/notification/inline-notification.directive.js b/src/notification/inline-notification.component.js similarity index 55% rename from src/notification/inline-notification.directive.js rename to src/notification/inline-notification.component.js index e19e63fdd..f49156fa9 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 * @@ -8,6 +8,7 @@ * @param {expression=} pfNotificationMessage The main text message of the notification. * @param {expression=} pfNotificationHeader The header text of the notification. * @param {expression=} pfNotificationPersistent The notification won't disappear after delay timeout, but has to be closed manually with the close button. + * @param {expression=} pfNotificationRemove The function to remove the notification (called by the close button when clicked). * * @description * The main visual element of the notification message. @@ -18,23 +19,24 @@
- +
- +
- +
@@ -42,11 +44,11 @@
-
-
+
@@ -69,7 +70,7 @@ {{notificationGroup.subHeading}} - + Clear All @@ -84,15 +85,15 @@
  • - + {{action.name}}
    • - - {{notification.message}} -
    + + {{notification.message}} +
    {{notification.timeStamp | date:'MM/dd/yyyy'}} {{notification.timeStamp | date:'h:mm:ss a'}}
    @@ -100,7 +101,7 @@
    - + {{notification.message}} @@ -119,7 +120,7 @@
  • - + {{action.name}}
    • @@ -471,36 +472,52 @@ */ -angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) { - 'use strict'; - return { - restrict: 'A', - scope: { - drawerHidden: '=?', - allowExpand: '=?', - drawerExpanded: '=?', - drawerTitle: '@', - notificationGroups: '=', - actionButtonTitle: '@', - actionButtonCallback: '=?', - titleInclude: '@', - headingInclude: '@', - subheadingInclude: '@', - notificationBodyInclude: '@', - notificationFooterInclude: '@', - customScope: '=?' - }, - templateUrl: 'notification/notification-drawer.html', - controller: function ($scope) { - if (!$scope.allowExpand || angular.isUndefined($scope.drawerExpanded)) { - $scope.drawerExpanded = false; +angular.module('patternfly.notification').component('pfNotificationDrawer', { + bindings: { + drawerHidden: ' -
    - -

    {{drawerTitle}}

    +
    +
    + +

    {{$ctrl.drawerTitle}}

    -
    +
    -
    +

    - +

    - +
    -
    +
    Loading More
    -
    - {{actionButtonTitle}} +
    + {{$ctrl.actionButtonTitle}}
    -
    +
    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 @@ -
    -
    +
    +
    - - - - - - - {{pfNotificationHeader}} {{pfNotificationMessage}} -
    diff --git a/src/notification/notification.js b/src/notification/notification.js index f1deaea4a..b8a95fc56 100644 --- a/src/notification/notification.js +++ b/src/notification/notification.js @@ -103,6 +103,7 @@ angular.module('patternfly.notification').provider('Notifications', function () this.delay = 8000; this.verbose = true; this.notifications = {}; + this.notifications.data = []; this.persist = {'error': true, 'httpError': true}; this.setDelay = function (delay) { @@ -119,7 +120,7 @@ angular.module('patternfly.notification').provider('Notifications', function () this.persist = persist; }; - this.$get = ['$rootScope', '$timeout', '$log', function ($rootScope, $timeout, $log) { + this.$get = ['$timeout', '$log', function ($timeout, $log) { var delay = this.delay; var notifications = this.notifications; var verbose = this.verbose; @@ -132,15 +133,8 @@ angular.module('patternfly.notification').provider('Notifications', function () warn: { type: 'warning', header: 'Warning!', log: 'warn'} }; - $rootScope.notifications = {}; - $rootScope.notifications.data = []; - - $rootScope.notifications.remove = function (index) { - $rootScope.notifications.data.splice(index, 1); - }; - - if (!$rootScope.notifications) { - $rootScope.notifications.data = []; + if (!notifications) { + notifications.data = []; } notifications.message = function (type, header, message, isPersistent, closeCallback, actionTitle, actionCallback, menuActions) { @@ -156,7 +150,7 @@ angular.module('patternfly.notification').provider('Notifications', function () }; notification.show = true; - $rootScope.notifications.data.push(notification); + notifications.data.push(notification); if (!notification.isPersistent) { notification.viewing = false; @@ -198,14 +192,15 @@ angular.module('patternfly.notification').provider('Notifications', function () }; notifications.remove = function (notification) { - var index = $rootScope.notifications.data.indexOf(notification); + var index = notifications.data.indexOf(notification); if (index !== -1) { notifications.removeIndex(index); } }; notifications.removeIndex = function (index) { - $rootScope.notifications.remove(index); + //notifications.remove(index); + notifications.data.splice(index, 1); }; notifications.setViewing = function (notification, viewing) { @@ -215,8 +210,6 @@ angular.module('patternfly.notification').provider('Notifications', function () } }; - notifications.data = $rootScope.notifications.data; - return notifications; }]; @@ -224,11 +217,11 @@ angular.module('patternfly.notification').provider('Notifications', function () /** * @ngdoc directive - * @name patternfly.notification.directive:pfNotificationList + * @name patternfly.notification.component:pfNotificationList * @restrict E * * @description - * Using this directive automatically creates a list of notifications generated by the {@link api/patternfly.notification.Notification notification} service. + * Using this component automatically creates a list of notifications generated by the {@link api/patternfly.notification.Notification notification} service. * * @example @@ -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/src/notification/toast-notification-list.directive.js b/src/notification/toast-notification-list.component.js similarity index 86% rename from src/notification/toast-notification-list.directive.js rename to src/notification/toast-notification-list.component.js index 36bf30021..775f6d6c3 100644 --- a/src/notification/toast-notification-list.directive.js +++ b/src/notification/toast-notification-list.component.js @@ -1,10 +1,10 @@ /** * @ngdoc directive - * @name patternfly.notification.directive:pfToastNotificationList - * @restrict A + * @name patternfly.notification.component:pfToastNotificationList + * @restrict E * @scope * - * @param {Array} notifications The list of current notifcations to display. Each notification should have the following (see pfToastNotification): + * @param {Array} notifications The list of current notifications to display. Each notification should have the following (see pfToastNotification): *
      *
    • .type - (String) The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning' *
    • .header - (String) The header to display for the notification (optional) @@ -25,14 +25,14 @@ * @param {function} updateViewing (function(boolean, data)) Function to invoke when user is viewing/not-viewing (hovering on) a toast notification * * @description - * Using this directive displayes a list of toast notifications + * Using this component displayes a list of toast notifications * * @example
      -
      +
      @@ -201,29 +201,27 @@ */ -angular.module('patternfly.notification').directive('pfToastNotificationList', function () { - 'use strict'; +angular.module('patternfly.notification').component('pfToastNotificationList', { + bindings: { + notifications: '=', + showClose: '=?', + closeCallback: '=?', + updateViewing: '=?' + }, + templateUrl: 'notification/toast-notification-list.html', + controller: function () { + 'use strict'; + var ctrl = this; - return { - restrict: 'A', - scope: { - notifications: '=', - showClose: '=?', - closeCallback: '=?', - updateViewing: '=?' - }, - templateUrl: 'notification/toast-notification-list.html', - controller: function ($scope) { - $scope.handleClose = function (notification) { - if (angular.isFunction($scope.closeCallback)) { - $scope.closeCallback(notification); - } - }; - $scope.handleViewingChange = function (isViewing, notification) { - if (angular.isFunction($scope.updateViewing)) { - $scope.updateViewing(isViewing, notification); - } - }; - } - }; + ctrl.handleClose = function (notification) { + if (angular.isFunction(ctrl.closeCallback)) { + ctrl.closeCallback(notification); + } + }; + ctrl.handleViewingChange = function (isViewing, notification) { + if (angular.isFunction(ctrl.updateViewing)) { + ctrl.updateViewing(isViewing, notification); + } + }; + } }); diff --git a/src/notification/toast-notification-list.html b/src/notification/toast-notification-list.html index 6588dfc64..6f7d6ab1c 100644 --- a/src/notification/toast-notification-list.html +++ b/src/notification/toast-notification-list.html @@ -1,15 +1,15 @@ -
      -
      -
      +
      + -
      +
      diff --git a/src/notification/toast-notification.directive.js b/src/notification/toast-notification.component.js similarity index 76% rename from src/notification/toast-notification.directive.js rename to src/notification/toast-notification.component.js index 9d95f1f73..0c811e214 100644 --- a/src/notification/toast-notification.directive.js +++ b/src/notification/toast-notification.component.js @@ -1,6 +1,6 @@ /** * @ngdoc directive - * @name patternfly.notification.directive:pfToastNotification + * @name patternfly.notification.component:pfToastNotification * @restrict E * @scope * @@ -36,11 +36,11 @@
      -
      -
      +
      @@ -176,69 +176,78 @@ */ -angular.module( 'patternfly.notification' ).directive('pfToastNotification', function () { - 'use strict'; - - return { - scope: { - 'notificationType': '@', - 'message': '@', - 'header': '@', - 'showClose': '@', - 'closeCallback': '=?', - 'actionTitle': '@', - 'actionCallback': '=?', - 'menuActions': '=?', - 'updateViewing': '=?', - 'data': '=?' - }, - restrict: 'A', - templateUrl: 'notification/toast-notification.html', - controller: function ($scope) { - $scope.notificationType = $scope.notificationType || 'info'; - - $scope.updateShowClose = function () { - $scope.showCloseButton = ($scope.showClose === 'true') && (angular.isUndefined($scope.menuActions) || $scope.menuActions.length < 1); - }; - - $scope.handleClose = function () { - if (angular.isFunction($scope.closeCallback)) { - $scope.closeCallback($scope.data); - } - }; - - $scope.handleAction = function () { - if (angular.isFunction($scope.actionCallback)) { - $scope.actionCallback($scope.data); - } - }; - - $scope.handleMenuAction = function (menuAction) { - if (menuAction && angular.isFunction(menuAction.actionFn) && (menuAction.isDisabled !== true)) { - menuAction.actionFn(menuAction, $scope.data); - } - }; - - $scope.handleEnter = function () { - if (angular.isFunction($scope.updateViewing)) { - $scope.updateViewing(true, $scope.data); - } - }; - $scope.handleLeave = function () { - if (angular.isFunction($scope.updateViewing)) { - $scope.updateViewing(false, $scope.data); - } - }; - - $scope.updateShowClose (); - }, - link: function (scope) { - scope.$watch('showClose', function () { - scope.updateShowClose(); - }); - scope.$watch('menuActions', function () { - scope.updateShowClose(); - }); - } - }; +angular.module( 'patternfly.notification' ).component('pfToastNotification', { + bindings: { + 'notificationType': '@', + 'message': '@', + 'header': '@', + 'showClose': '@', + 'closeCallback': '=?', + 'actionTitle': '@', + 'actionCallback': '=?', + 'menuActions': ' -
      +
      +
      - -
      - {{actionTitle}} +
      + {{$ctrl.actionTitle}}
      - - - - - - {{header}} {{message}} + + + + + + {{$ctrl.header}} {{$ctrl.message}} - - {{message}} + + {{$ctrl.message}}
      diff --git a/test/notification/notification-body.html b/test/notification/notification-body.html index 93968b4c0..1a36f136b 100644 --- a/test/notification/notification-body.html +++ b/test/notification/notification-body.html @@ -6,13 +6,13 @@
    • - + {{action.name}}
    - + {{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 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); }); }); diff --git a/test/notification/toast-notification-list.spec.js b/test/notification/toast-notification-list.spec.js index 00051fbe0..ff7537a18 100644 --- a/test/notification/toast-notification-list.spec.js +++ b/test/notification/toast-notification-list.spec.js @@ -1,4 +1,4 @@ -describe('Directive: pfToastNotificationList', function () { +describe('Component: pfToastNotificationList', function () { var $scope; var $compile; @@ -115,7 +115,7 @@ describe('Directive: pfToastNotificationList', function () { } ]; - var htmlTmp = '
    '; + var htmlTmp = ''; compileHTML(htmlTmp, $scope); }); @@ -158,7 +158,7 @@ describe('Directive: pfToastNotificationList', function () { $scope.notifications.forEach(function(nextItem) { nextItem.menuActions = undefined; }) - var htmlTmp = '
    '; + var htmlTmp = ''; compileHTML(htmlTmp, $scope); diff --git a/test/notification/toast-notification.spec.js b/test/notification/toast-notification.spec.js index 574f1aa17..d1d178299 100644 --- a/test/notification/toast-notification.spec.js +++ b/test/notification/toast-notification.spec.js @@ -1,4 +1,4 @@ -describe('Directive: pfToastNotification', function () { +describe('Component: pfToastNotification', function () { var $scope; var $compile; @@ -90,11 +90,11 @@ describe('Directive: pfToastNotification', function () { $scope.data = { title: "Test Notification" }; - var htmlTmp = '
    ' + - '
    '; + ' '; compileHTML(htmlTmp, $scope); };