Merge pull request #296 from jeff-phillips-18/fixes

Use Patternfly styling for toast, toast list, and notifications drawer

Author: dtaylor113

src/notification/notification-drawer.directive.js

@@ -97,7 +97,7 @@
        <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
      </div>
    </div>
-   <div ng-if="drawerExpanded" class="container-fluid expanded-notification">
+   <div ng-if="drawerExpanded" class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <span class="pull-left {{customScope.getNotficationStatusIconClass(notification)}}"></span>

src/notification/notification-drawer.html

@@ -15,7 +15,7 @@ <h4 class="panel-title">
         </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}"
+            <div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': drawerExpanded}"
                  ng-repeat="notification in notificationGroup.notifications" ng-include src="notificationBodyInclude">
             </div>
             <div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">

src/notification/toast-notification-list.html

@@ -1,4 +1,4 @@
-<div class="toast-notification-list-pf" data-ng-show="notifications.length > 0">
+<div class="toast-notifications-list-pf" data-ng-show="notifications.length > 0">
   <div ng-repeat="notification in notifications">
     <div pf-toast-notification notification-type="{{notification.type}}"
          header="{{notification.header}}"

styles/angular-patternfly.css

@@ -420,49 +420,6 @@ accordion > .panel-group .panel-open .panel-title > a:before {
   line-height: 34px;
 }
 
-.drawer-pf-toggle-expand {
-  color: inherit;
-  cursor: pointer;
-  left: 0;
-  padding: 2px 5px;
-  position: absolute;
-}
-.drawer-pf-toggle-expand:before {
-  content: "\f100";
-  font-family: "FontAwesome";
-}
-.drawer-pf-toggle-expand:hover, .drawer-pf-toggle-expand:focus {
-  text-decoration: none;
-  outline: none;
-}
-
-.drawer-pf.drawer-pf-expanded {
-  left: 270px;
-  width: inherit;
-}
-.drawer-pf.drawer-pf-expanded .drawer-pf-title a.drawer-pf-toggle-expand:before {
-  content: "\f101";
-}
-.drawer-pf-notification .expanded-notification .date {
-  border-right: none;
-  padding-right: 0;
-}
-.drawer-pf-notification .expanded-notification .drawer-pf-notification-info {
-  display: inline-block;
-}
-.drawer-pf-notification .expanded-notification .drawer-pf-notification-message {
-  display: inline-block;
-}
-
-.toast-notification-list-pf {
-  position: fixed;
-  right: 15px;
-  top: 15px;
-  z-index: 1050;
-}
-.toast-notification-list-pf .toast-pf.alert {
-  float: right;
-}
 .toast-pf-action > a {
   cursor: pointer;
 }

test/notification/toast-notification-list.spec.js

@@ -121,7 +121,7 @@ describe('Directive: pfToastNotificationList', function () {
   });
 
   it('should have the correct number of toast notifications', function () {
-    var toasts = element.find('.toast-notification-list-pf .toast-pf');
+    var toasts = element.find('.toast-notifications-list-pf .toast-pf');
     expect(toasts.length).toBe(4);
 
     var okIcon = element.find('.pficon.pficon-ok');
@@ -136,7 +136,7 @@ describe('Directive: pfToastNotificationList', function () {
     $scope.notifications.splice(2, 1);
     $scope.$digest();
 
-    toasts = element.find('.toast-notification-list-pf .toast-pf');
+    toasts = element.find('.toast-notifications-list-pf .toast-pf');
     expect(toasts.length).toBe(3);
 
     okIcon = element.find('.pficon.pficon-ok');
@@ -151,7 +151,7 @@ describe('Directive: pfToastNotificationList', function () {
 
   it('should get the close callback invoked when an item is closed', function () {
     // No close buttons when there are menu actions
-    var closeButton = element.find('.toast-notification-list-pf .toast-pf button.close');
+    var closeButton = element.find('.toast-notifications-list-pf .toast-pf button.close');
     expect(closeButton.length).toBe(0);
 
     // No Menu Actions
@@ -162,7 +162,7 @@ describe('Directive: pfToastNotificationList', function () {
 
     compileHTML(htmlTmp, $scope);
 
-    var closeButton = element.find('.toast-notification-list-pf .toast-pf button.close');
+    var closeButton = element.find('.toast-notifications-list-pf .toast-pf button.close');
     expect(closeButton.length).toBe(3);
 
     expect($scope.closeData).toBeUndefined();
@@ -176,7 +176,7 @@ describe('Directive: pfToastNotificationList', function () {
 
   it('should get the action callback invoked when an action button is closed', function () {
     // No close buttons when there are menu actions
-    var closeButton = element.find('.toast-notification-list-pf .toast-pf .toast-pf-action > a');
+    var closeButton = element.find('.toast-notifications-list-pf .toast-pf .toast-pf-action > a');
     expect(closeButton.length).toBe(4);
 
     expect($scope.actionData).toBeUndefined();