Notification panel transitions and visual enhancements

Update to PatternFly 3.27.1

Author: sg00dwin

app/styles/_navbar-vertical.less

@@ -56,11 +56,15 @@
     @media(min-width: @screen-sm-min) {
       margin-right: @navbar-header-right-margin;
     }
-    .badge {
+    .nav-item-iconic .badge {
+      background-color: @color-pf-blue-300;
+      border: 2px solid @navbar-os-bg-color;
+      height: 12px;
       margin: 0 !important;
       position: absolute;
-      top: 9px;
       right: 13px;
+      top: 9px;
+      width: 12px;
       @media(min-width: @screen-sm-min) {
         top: 20px;
       }

app/styles/_notifications.less

@@ -5,8 +5,11 @@
 notification-drawer-wrapper {
   .drawer-pf {
     height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile));
+    opacity: 1;
     position: fixed;
+    right: 0;
     top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
+    transition: top 150ms ease-in-out, opacity 150ms;
     z-index: @zindex-navbar-fixed - 2; // two less than navbar, one less than project-bar
     @media(max-width: 350px) {
       left: 0;
@@ -22,6 +25,14 @@ notification-drawer-wrapper {
         left: 270px;
       }
     }
+    &.hide {
+      opacity: 0;
+      top: 38px;
+    }
+    &.hide-add,
+    &.hide-remove {
+      display: block !important;
+    }
     .tech-preview & {
       height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height));
       top: (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height);
@@ -31,6 +42,9 @@ notification-drawer-wrapper {
       }
     }
   }
+  .drawer-pf-close, .drawer-pf-toggle-expand {
+    padding: 2px 10px;
+  }
   // the whole block is clickable, need to set pointer on all of these
   // for the correct visual
   .drawer-pf-notification,
@@ -48,34 +62,69 @@ notification-drawer-wrapper {
       }
     }
   }
+  .drawer-pf-notification-info {
+    font-size: @font-size-small;
+  }
   .drawer-pf-notification-inner {
     padding: 15px;
     .pficon-close {
-      color: @color-pf-black;
+      color: @color-pf-black-400;
+      &:hover,&:focus,&:active {
+        color: @color-pf-black-700;
+      }
     }
   }
-  .expanded-notification .drawer-pf-notification-message {
-    max-width: 35%; // keeps flex in check in case of a really long message
+  .drawer-pf-title h3 {
+    font-size: @font-size-base - 1;
+  }
+  .expanded-notification {
+    .drawer-pf-notification-info {
+      .text-muted;
+    }
+    .drawer-pf-notification-message-expanded {
+      font-size: @font-size-base - 1;
+      padding: 10px 10px 10px 42px;
+      .text-muted;
+    }
+    &.unread {
+      .drawer-pf-notification-info {
+        color: inherit;
+      }
+      .drawer-pf-notification-message-expanded {
+        color: inherit;
+        font-weight: normal;
+        .word-break();
+      }
+    }
   }
 }
 
 .panel-heading {
   .panel-title {
+    color: @color-pf-black-700;
+    font-size: @font-size-h4;
+    font-weight: bold;
+    line-height: normal;
     // TODO: hack to eliminate side-to-side wobble
     // There is a hard-coded <h4> that wraps the header:
     //   - https://github.com/patternfly/angular-patternfly/issues/539
     // I'm putting quite a bit of markup inside the header,
     // need to tinker to eliminate this rule.
-    overflow: hidden;
+    overflow:hidden;
     .container-fluid {
       margin-left: 0;
       margin-right: 0;
       padding-left: 0;
       padding-right: 0;
     }
-  }
-  .small {
-    .small();
-    color: @color-pf-black;
+    .panel-counter {
+      font-size: @font-size-small;
+      font-weight: normal;
+      padding: 0;
+      a {
+        display: inline-block;
+        font-style: normal;
+      }
+    }
   }
 }

app/views/directives/notifications/header.html

@@ -1,9 +1,12 @@
 <div class="container-fluid">
-  <div class="row">
+  <div class="truncate">
+    {{notificationGroup.heading}}
+  </div>
+  <div class="row mar-top-md panel-counter">
     <div class="col-xs-6">
-      <strong>{{notificationGroup.heading}}</strong>
+      {{notificationGroup.totalUnread}} Unread
     </div>
-    <div class="col-xs-6 text-right small">
+    <div class="col-xs-6 text-right">
       <a
         title="All Events"
         ng-href="project/{{$ctrl.customScope.projectName}}/browse/events"
@@ -12,9 +15,4 @@
       </a>
     </div>
   </div>
-  <div class="row mar-top-md">
-    <div class="col-xs-12">
-      <em>{{notificationGroup.totalUnread}} Unread</em>
-    </div>
-  </div>
 </div>

app/views/directives/notifications/notification-body.html

@@ -78,12 +78,12 @@
       </div>
     </div>
 
-    <span ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message text-muted small word-break">
-      {{notification.event.message}}
-    </span>
     <div class="drawer-pf-notification-info">
       <span class="date">{{notification.event.lastTimestamp | date:'shortDate'}}</span>
       <span class="time">{{notification.event.lastTimestamp | date:'mediumTime'}}</span>
     </div>
   </div>
+  <div ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message drawer-pf-notification-message-expanded">
+    {{notification.event.message}}
+  </div>
 </div>

bower.json

@@ -18,7 +18,7 @@
     "uri.js": "1.18.12",
     "moment": "2.14.2",
     "moment-timezone": "0.5.3",
-    "patternfly": "3.26.6",
+    "patternfly": "3.27.1",
     "hawtio-core": "2.0.37",
     "hawtio-extension-service": "2.0.2",
     "jquery": "3.2.1",