Merge pull request #281 from thevoiceofzeke/doug

Adjust appearance of priority notifications with buttons

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

@@ -138,7 +138,7 @@
       > .arrow-down {
         border-left: 7px solid transparent;
         border-right: 7px solid transparent;
-        border-top: 7px solid lighten(@color1, 20%);
+        border-top: 7px solid @grayscale2;
         z-index:2000;
         position: absolute;
         top:-14px;
@@ -166,12 +166,13 @@
 .hidden-xs .priority-notifications {
   height: 46px;
   width: 100%;
-  background-color: lighten(@color1, 20%);
+  background-color: @grayscale2;
   z-index:100;
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 1px solid @black;
   .notification-message {
     font-size:15px;
   }
@@ -186,25 +187,36 @@
   top: 0;
   margin:0px -15px;
   padding:15px 20px 12px;
-  background-color: lighten(@color1, 20%);
+  background-color: @grayscale2;
   .notification-message {
     font-size:13px;
   }
 }
 
-.hidden-xs .priority-notifications .notification-message,
-.visible-xs .priority-notifications .notification-message {
-  color:@white;
-  text-align:center;
-  display: block;
-  margin-bottom:0;
-  a {
-    color:#eee;
-    border-bottom:1px solid #eee;
-  }
-  a:hover {
-    color:#fff;
-    border-bottom:1px solid #fff;
+.hidden-xs .priority-notifications,
+.visible-xs .priority-notifications {
+  .notification-message {
+    color:@black;
+    text-align:center;
+    display: block;
+    margin-bottom:0;
+    a {
+      color:#eee;
+      border-bottom:1px solid #eee;
+    }
+    a:hover {
+      color:#fff;
+      border-bottom:1px solid #fff;
+    }
+  }
+  .notification-buttons {
+    margin-left: 26px;
+    .md-button {
+      text-transform: none;
+      min-height: 0;
+      max-height: 26px;
+      line-height: 26px;
+    }
   }
 }
 

uw-frame-components/js/frame-config.js

@@ -348,7 +348,7 @@ define(['angular'], function(angular) {
             }
           },
           {
-            "name" : "uw-oskhosh",
+            "name" : "uw-oshkosh",
             "crest" : "img/uw-oshkosh-2016.png",
             "title" : "MyUW",
             "subtitle" : null,

uw-frame-components/js/override.js

@@ -2,13 +2,13 @@ define(['angular'], function(angular) {
 
   /*Keep in sync with docs/markdown/configuration.md*/
 
-    var config = angular.module('override', []);
-    config
-        //see configuration.md for howto
-        .constant('OVERRIDE', {
-
-        });
+  var config = angular.module('override', []);
+  config
+    //see configuration.md for howto
+    .constant('OVERRIDE', {
 
-    return config;
+    });
 
-});
+  return config;
+
+});

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

@@ -31,7 +31,19 @@
 
   <!-- Priority notifications -->
   <div class="priority-notifications" ng-if='notificationsEnabled && (directiveMode === "priority")' ng-repeat="priority in priorityNotifications | limitTo: 1">
-    <a ng-href="{{priority.actionURL}}" alt="{{priority.actionAlt}}" ng-if='priorityNotifications.length == 1' class="notification-message">{{priority.title}}</a>
+    <div ng-if='priorityNotifications.length == 1' layout="row" layout-align="center center" layout-fill>
+      <a ng-href="{{priority.actionURL}}" alt="{{priority.actionAlt}}" class="notification-message">{{priority.title}}</a>
+      <div layout="row" layout-align="center center" ng-if="priority.actionButtons && priority.actionButtons.length > 0" class="notification-buttons">
+        <md-button class="md-raised"
+                   ng-href="button.url"
+                   ng-repeat="button in priority.buttonText track by button.caption"
+                   ng-class="{'md-primary' : $index === 0, 'md-accent' : $index > priority.buttonText.length / 2 - 1}"
+                   ng-click="button.action"
+                   aria-label="{{button.label}}">
+          {{button.label}}
+        </md-button>
+      </div>
+    </div>
     <p ng-if='priorityNotifications.length > 1' class="notification-message">
       You have {{priorityNotifications.length}} important notifications. <a href="notifications" alt="{{priority.actionAlt}}">View your notifications.</a>
     </p>

uw-frame-components/staticFeeds/notifications.json

@@ -1,5 +1,5 @@
 {"notifications" :
     [
-      
+
     ]
 }

uw-frame-components/staticFeeds/sample_notifications.json

@@ -1,31 +1,37 @@
 {"notifications" :
     [
-      {
-        "id"     : 1,
-        "groups" : ["Portal Administrators"],
-        "title"  : "This is an admin notification smoke test",
-        "actionURL" : "http://www.google.com",
-        "actionAlt" : "Google",
-        "dismissable" : true,
-        "priority" : false
-      },
       {
         "id"     : 2,
         "groups" : ["Users - Student SSN Update"],
         "title"  : "Our records indicate the Social Security Number in your Personal Information is invalid or missing. Please provide your Social Security Number or select to not provide your Social Security Number.",
         "actionURL" : "/portal/p/my-info-student-center-ssn.ctf1/max/action.uP?pP_action=loginAction",
         "actionAlt" : "UW-Madison Student Information",
         "dismissable" : true,
-        "priority" : false
+        "priority" : false,
+		"actionButtons" : []
       },
       {
         "id"     : 3,
-        "groups" : ["Users - Service Activation Required"], 
+        "groups" : ["Users - Service Activation Required"],
         "title"  : "You need to modify your NetID account to activate essential UW Services.",
         "actionURL" : "https://www.mynetid.wisc.edu/modify",
         "actionAlt" : "Activate Services",
         "dismissable" : true,
-        "priority" : true
-      }
+        "priority" : true,
+		"actionButtons" : []
+      },
+	  {
+		"id"     : 1,
+		"groups" : ["Everyone"],
+		"title"  : "This is an admin notification smoke test.",
+		"actionURL" : "http://www.google.com",
+		"actionAlt" : "Google",
+		"dismissable" : false,
+		"priority" : true,
+		"actionButtons" : [
+		  {"label" : "Feedback", "url" : "/exclusive/feedback", "action" : ""},
+		  {"label" : "Return To Old", "url" : "my.wisconsin.edu",  "action" : ""}
+		]
+	  }
     ]
 }