Merge pull request #2325 from rhamilto/notification-badge

Automatic merge from submit-queue.

Incorporate badge-pf-bordered on notification drawer bell

IMPORTANT:  #2324 must merge first as it bumps PatternFly to a version
including the upstream change that includes badge-pf-bordered

<img width="67" alt="screen shot 2017-10-20 at 10 11 14 am" src="https://user-images.githubusercontent.com/895728/31825374-1124ba1e-b580-11e7-9d09-f0b0392771a2.PNG">
<img width="253" alt="screen shot 2017-10-20 at 10 11 27 am" src="https://user-images.githubusercontent.com/895728/31825375-11354f00-b580-11e7-85ae-89f77a15c3f0.PNG">

Author: openshift-merge-robot

Diff for: app/styles/_navbar-vertical.less

@@ -53,13 +53,14 @@
     @media(min-width: @screen-sm-min) {
       margin-right: @navbar-header-right-margin;
     }
+    // adjust positioning of notification drawer badge as our header
+    // heights are different, as is the bell icon size
     .badge {
-      margin: 0 !important;
-      position: absolute;
-      right: 13px;
-      top: 9px;
+      left: 14px !important;
+      top: 7px !important;
       @media(min-width: @screen-sm-min) {
-        top: 20px;
+        left: 21px !important;
+        top: 18px !important;
       }
     }
 

Diff for: app/views/directives/notifications/notification-counter.html

@@ -1,4 +1,4 @@
 <li class="drawer-pf-trigger" ng-if="!$ctrl.hide">
   <!-- Cannot have whitespace inside the `a`, so keep everything on one line. -->
-  <a href="" class="nav-item-iconic" ng-click="$ctrl.onClick()"><span class="fa fa-bell" title="Notifications" aria-hidden="true"></span><span ng-if="$ctrl.showUnreadNotificationsIndicator" class="badge"> </span><span class="sr-only">Notifications</span></a>
+  <a href="" class="nav-item-iconic" ng-click="$ctrl.onClick()"><span class="fa fa-bell" title="Notifications" aria-hidden="true"></span><span ng-if="$ctrl.showUnreadNotificationsIndicator" class="badge badge-pf-bordered"> </span><span class="sr-only">Notifications</span></a>
 </li>

Diff for: dist/scripts/templates.js

@@ -7921,7 +7921,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/notifications/notification-counter.html',
     "<li class=\"drawer-pf-trigger\" ng-if=\"!$ctrl.hide\">\n" +
     "\n" +
-    "<a href=\"\" class=\"nav-item-iconic\" ng-click=\"$ctrl.onClick()\"><span class=\"fa fa-bell\" title=\"Notifications\" aria-hidden=\"true\"></span><span ng-if=\"$ctrl.showUnreadNotificationsIndicator\" class=\"badge\"> </span><span class=\"sr-only\">Notifications</span></a>\n" +
+    "<a href=\"\" class=\"nav-item-iconic\" ng-click=\"$ctrl.onClick()\"><span class=\"fa fa-bell\" title=\"Notifications\" aria-hidden=\"true\"></span><span ng-if=\"$ctrl.showUnreadNotificationsIndicator\" class=\"badge badge-pf-bordered\"> </span><span class=\"sr-only\">Notifications</span></a>\n" +
     "</li>"
   );