Animate priority notifications [nice-to-have]

uw-frame-components/css/buckyless/directives/username-menu.less

@@ -11,6 +11,7 @@ portal-header {
           min-width: initial;
           margin-left: 8px;
           padding: 4px;
+          text-transform: uppercase;
 
           > span {
             color: @username-menu-color;

uw-frame-components/css/buckyless/features.less

@@ -64,7 +64,7 @@ portal-header md-toolbar .md-toolbar-tools mascot-announcement {
     position: relative;
 
     img {
-      transition: @mascot-transition;
+      transition: @transition-all;
       position: relative;
       top: 26px;
     }

uw-frame-components/css/buckyless/frame.less

@@ -5,11 +5,8 @@
   min-height: 90vh;
 
   .page-content {
-    padding: 56px 0 48px;
-
-    &.has-priority-nots {
-      padding: 102px 0 48px;
-    }
+    transition: padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    padding: 60px 0 48px;
 
     .white-page {
       background-color: @white;

uw-frame-components/css/buckyless/general.less

@@ -1,7 +1,7 @@
 /* General MyUW Styles */
 
 a {
-  transition: @link-hover-transition;
+  transition: @transition-color;
 
   &:not(.md-button):not(.btn):not(.launch-app-button):not(.full-width) {
     text-decoration: none;

uw-frame-components/css/buckyless/header.less

@@ -1,5 +1,11 @@
 portal-header {
   display: block;
+  position: fixed;
+  width: 100%;
+  z-index: 80;
+  top: 0;
+  overflow-y: hidden;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
 
   a {
     &:not(.md-button):not(.btn):not(.launch-app-button):not(.full-width) {
@@ -13,16 +19,12 @@ portal-header {
 
   md-toolbar {
     min-height: 56px;
-    position: fixed;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    z-index: 98;
-    top: 0;
-    overflow-y: hidden;
 
     .md-toolbar-tools {
       padding-left: 0;
       height: 56px;
       max-height: 56px;
+      overflow-y: hidden;
 
       .title-link {
         h1 {
@@ -62,13 +64,9 @@ portal-header {
     }
   }
 
-  &.has-priority-nots {
-    @media (min-width: @xs) {
-      padding-top: 46px;
-
-      md-toolbar {
-        top: 46px;
-      }
+  @media (min-width: @xs) {
+    &.has-priority-nots + .page-content {
+      padding-top: 102px;
     }
   }
 
@@ -77,9 +75,9 @@ portal-header {
       width: 100%;
       position: absolute;
       top: 56px;
-      z-index: 98;
+      z-index: 80;
       overflow: hidden;
-      transition: @search-transition;
+      transition: @transition-height;
       background: rgba(0, 0, 0, 0.4);
 
       &:not(.search-expanded) {

uw-frame-components/css/buckyless/md-generated.less

@@ -90,6 +90,7 @@ md-menu-content.top-bar-menu-content {
       .display-name {
         font-weight: 600;
         margin: 0;
+        text-transform: capitalize;
       }
 
       .campus-id {
@@ -122,7 +123,7 @@ md-menu-content.top-bar-menu-content {
       text-align: right;
 
       md-icon {
-        transition: @link-hover-transition;
+        transition: @transition-color;
       }
 
       &:hover {

uw-frame-components/css/buckyless/notifications.less

@@ -57,7 +57,7 @@
 
       .md-secondary {
         color: @grayscale7;
-        transition: @link-hover-transition;
+        transition: @transition-color;
 
         &:hover {
           color: @grayscale9;
@@ -101,7 +101,7 @@
       border-radius: 50%;
       padding: 0;
       color: @color1;
-      z-index: 98;
+      z-index: 80;
       top: 0;
       right: 26px;
 
@@ -123,7 +123,7 @@
       color: @color1;
       font-weight: 400;
       font-size: 20px;
-      z-index: 98;
+      z-index: 80;
       position: absolute;
       line-height: 40px;
       left: 14px;
@@ -139,7 +139,7 @@
   .notification-desktop {
     .notification-badge {
       position: relative;
-      transition: @link-hover-transition;
+      transition: @transition-color;
 
       .material-icons {
         width: 40px;
@@ -160,54 +160,43 @@
 .priority-gt-xs .priority-notifications {
   height: 46px;
   width: 100%;
-  background-color: @grayscale2;
-  z-index: 98;
-  position: fixed;
+  z-index: 80;
+  padding: 4px 4px 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid @black;
   top: 0;
+  transition: @transition-all;
 
-  .notification-message {
-    font-size: 15px;
+  &.animate-hide {
+    opacity: 0;
+    height: 0;
   }
 
-  p {
-    margin-bottom: 0;
+  .priority-bubble {
+    box-shadow: @box-shadow-4;
+    background-color: @grayscale2;
+    border-radius: 6px;
   }
-}
-
-.priority-xs .priority-notifications {
-  min-height: 40px;
-  position: relative;
-  top: 0;
-  margin: 0 -15px;
-  padding: 12px 20px;
-  background-color: @grayscale2;
 
-  .notification-message {
-    font-size: 13px;
-  }
-}
-
-.priority-gt-xs .priority-notifications,
-.priority-xs .priority-notifications {
   .notification-message {
     color: @black;
+    padding: 4px 26px;
+    font-size: 14px;
+    line-height: 1;
     text-align: center;
     display: block;
     margin-bottom: 0;
-
-    a {
-      color: @link-color;
-    }
   }
 
   a.notification-message {
     color: @link-color;
   }
 
+  p {
+    margin-bottom: 0;
+  }
+
   .notification-buttons {
     margin-left: 26px;
 
@@ -229,8 +218,9 @@
       width: 30px;
       padding: 0;
 
-      .md-icon {
+      .material-icons {
         font-size: 22px;
+        color: @grayscale10;
       }
     }
   }

uw-frame-components/css/buckyless/widget.less

@@ -52,7 +52,7 @@
       color: @grayscale8;
       border-radius: 0 0 4px 4px;
       box-shadow: none;
-      transition: @mascot-transition;
+      transition: @transition-all;
 
       &:hover {
         background-color: @color1;
@@ -441,7 +441,7 @@
     opacity: 0;
     top: 0;
     margin: 0;
-    transition: @opacity-transition;
+    transition: @transition-opacity;
 
     &.widget-info {
       left: 0;

uw-frame-components/css/themes/common-variables.less

@@ -25,7 +25,12 @@
 @md: 1280px;
 @lg: 1920px;
 
-@border: 1px solid @grayscale3;
+/* Shadow depths */
+@box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+@box-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+@box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+@box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+@box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
 
 /* Footer */
 @footer-background-color: #404040;
@@ -35,12 +40,13 @@
   Transitions
 */
 @background-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-@link-hover-transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-@search-transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-@mascot-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-@opacity-transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-height: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-opacity: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-all: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+@transition-color: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
 /* Custom mix-ins */
 .border (@color: @grayscale3, @size: 1px) {
   border: @size solid @color;
 }
+@border: 1px solid @grayscale3;

uw-frame-components/portal/main/controllers.js

@@ -109,7 +109,7 @@ define(['angular', 'require'], function(angular, require) {
 
       if (vm.user.firstName || vm.user.displayName) {
         vm.username = vm.user.firstName ?
-          vm.user.firstName : vm.user.displayName;
+          vm.user.firstName.toLowerCase() : vm.user.displayName.toLowerCase();
       }
       vm.firstLetter = vm.username.substring(0, 1);
 

uw-frame-components/portal/messages/partials/notifications-bell.html

@@ -1,12 +1,12 @@
 <div class="notifications">
   <!-- Mobile bell in hamburger -->
   <div class="notification-badge notification-badge-mobile" aria-label="{{ status }}"
-       ng-if="directiveMode === 'mobile-bell' && vm.notifications.length !== 0">
+       ng-show="directiveMode === 'mobile-bell' && vm.notifications.length !== 0">
     <md-icon>notifications</md-icon>
   </div>
 
   <!-- MOBILE MENU ROW -->
-  <md-menu-item ng-if="directiveMode === 'mobile-menu'">
+  <md-menu-item ng-show="directiveMode === 'mobile-menu'">
     <md-button title="click to view notifications"
                class="md-default"
                ng-href="{{ vm.notificationsUrl }}"
@@ -20,7 +20,7 @@
   <!-- DESKTOP NOTIFICATION BELL -->
   <!-- MENU: IF THERE ARE NEW NOTIFICATIONS TO VIEW -->
   <md-menu class="notifications-menu"
-           ng-if="directiveMode === 'bell' && vm.notifications.length > 0"
+           ng-show="directiveMode === 'bell' && vm.notifications.length > 0"
            md-offset="-200 0"
            md-position-mode="target bottom">
     <md-button ng-click="$mdOpenMenu($event)"
@@ -29,7 +29,7 @@
                md-menu-origin>
       <md-tooltip class="top-bar-tooltip" md-direction="bottom" md-delay="500">Notifications</md-tooltip>
       <div class="notification-badge" aria-label="{{status}}" ng-class="{ 'notification-badge-empty' : vm.notifications.length === 0 }">
-        <span class="number-of-nots" ng-if="vm.notifications.length > 0"
+        <span class="number-of-nots" ng-show="vm.notifications.length > 0"
               ng-class="{ 'more-than-10-nots' : (vm.notifications.length > 9) }">{{ vm.notifications.length }}</span>
         <md-icon>notifications</md-icon>
       </div>
@@ -75,7 +75,7 @@
   </md-menu>
 
   <!-- LINK: IF THERE ARE NO NEW NOTIFICATIONS -->
-  <a ng-if="directiveMode === 'bell' && vm.notifications.length === 0"
+  <a ng-show="directiveMode === 'bell' && vm.notifications.length === 0"
      class="notification-desktop"
      ng-click="vm.pushGAEvent('Top Bar', 'Click Link', 'Notification Bell');"
      ng-href="{{ vm.notificationsUrl }}">
@@ -86,8 +86,13 @@
   </a>
 
   <!-- PRIORITY NOTIFICATIONS (FIXED-TOP) -->
-  <div class="priority-notifications" ng-if="directiveMode === 'priority'" ng-repeat="priority in vm.priorityNotifications | limitTo: 1">
-    <div ng-if="vm.priorityNotifications.length == 1" layout="row" layout-align="center center" layout-fill>
+  <div class="priority-notifications"
+       ng-class="{ 'animate-hide': vm.priorityNotifications.length === 0 }"
+       ng-if="directiveMode === 'priority'">
+    <div class="priority-bubble"
+         ng-if="vm.priorityNotifications.length == 1"
+         ng-repeat="priority in vm.priorityNotifications | limitTo: 1"
+         layout="row" layout-align="center center" layout-fill>
       <a ng-href="{{ priority.actionButton.url }}" alt="{{ priority.actionButton.label }}" class="notification-message">{{ priority.title }}</a>
       <div layout="row" layout-align="center center" ng-if="priority.moreInfoButton" class="notification-buttons">
         <md-button class="md-raised md-default"
@@ -105,9 +110,11 @@
         </md-button>
       </div>
     </div>
-    <p ng-if="vm.priorityNotifications.length > 1" class="notification-message">
-      You have {{ vm.priorityNotifications.length }} important notifications. <a href="notifications">View your notifications.</a>
-    </p>
+    <div class="priority-bubble" ng-if="vm.priorityNotifications.length > 1" layout="row" layout-align="center center" layout-fill>
+      <p class="notification-message">
+        You have {{ vm.priorityNotifications.length }} important notifications. <a href="notifications">View your notifications.</a>
+      </p>
+    </div>
   </div>
 
 </div>

uw-frame-components/portal/misc/partials/app-header.html

@@ -1,11 +1,11 @@
 <md-subheader role="toolbar" class="app-header">
-  <h1 flex="50" flex-xs="85" class="app-title">
+  <h1 flex="50" flex-xs="75" class="app-title">
     <i ng-if="icon.indexOf('fa-') > -1" class="fa {{::icon}}" aria-hidden="true"></i>
     <md-icon ng-if="icon.indexOf('fa-') <= -1" aria-label="">{{ ::icon }}</md-icon>
     {{::title}}
   </h1>
 
-  <div flex="50" flex-xs="15" class="header-links" ng-controller="AppHeaderOptionsController as vm">
+  <div flex="50" flex-xs="25" class="header-links" ng-controller="AppHeaderOptionsController as vm">
     <div ng-if="vm.optionsTemplate" ng-include="vm.optionsTemplate"></div>
 
      <!--ADD TO HOME BUTTON (HIDDEN XS) -->

uw-frame-components/portal/misc/partials/frame-page.html

@@ -1,5 +1,4 @@
 <div class="row portlet-frame">
-  <notifications-bell mode="priority" class="priority-xs" hide-gt-xs></notifications-bell>
   <app-header
     app-title="{{appTitle}}"
     app-icon="{{appIcon}}"