Added transitions and severity classes

platform/commonUI/dialog/res/templates/message.html

@@ -1,6 +1,5 @@
 <div ng-controller="MessageController"
      class="l-message"
-     title="{{MessageSeverity}}"
      ng-class="{
      'message-severity-info': ngModel.severity===MessageSeverity.INFO,
      'message-severity-error': ngModel.severity===MessageSeverity.ERROR,

platform/commonUI/dialog/src/DialogService.js

@@ -174,21 +174,6 @@ define(
             }
         };
 
-        /**
-         * dialogModel: {
-         *     severity: string "error" | "info" | "alert",
-         *     title: string,
-         *     hint: string,
-         *     actionText: string,
-         *     progress: int,
-         *     progressText: string,
-         *     unknownProgress: boolean,
-         *     actions: [{
-         *         label: String,
-         *         action: function
-         *     }]
-         */
-
         /**
          * A user action that can be performed from a blocking dialog. These
          * actions will be rendered as buttons within a blocking dialog.
@@ -207,9 +192,9 @@ define(
          * @see NotificationService
          *
          * @typedef DialogModel
+         * @property {string} title the title to use for the dialog
          * @property {string} severity the severity level of this message.
          * These are defined in a bundle constant with key 'dialogSeverity'
-         * @property {string} title the title to use for the dialog
          * @property {string} hint the 'hint' message to show below the title
          * @property {string} actionText text that indicates a current action,
          * shown above a progress bar to indicate what's happening.

platform/commonUI/general/res/templates/message-banner.html

@@ -1,7 +1,10 @@
 <div ng-controller="BannerController" ng-show="active.notification"
      class="l-message-banner s-message-banner" ng-class="{
-     'error': highest.severity===MessageSeverity.ERROR,
+     'info': active.notification.severity===MessageSeverity.INFO,
-     'alert': highest.severity===MessageSeverity.ALERT }"
+     'alert': active.notification.severity===MessageSeverity.ALERT,
+     'error': active.notification.severity===MessageSeverity.ERROR,
+     'minimized': active.notification.minimized,
+     'new': !active.notification.minimized}"
      ng-click="maximize(active.notification)">
     <span class="banner-elem label">
         {{active.notification.title}}

platform/commonUI/general/src/controllers/BannerController.js

@@ -22,11 +22,12 @@
 /*global define*/
 
 define(
-    [],
+    ['../../../notification/src/MessageSeverity'],
-    function () {
+    function (MessageSeverity) {
         "use strict";
         function BannerController($scope, notificationService, dialogService) {
             $scope.active = notificationService.active;
+            $scope.MessageSeverity = MessageSeverity;
             $scope.dismiss = function(notification) {
                 notificationService.dismissOrMinimize(notification);
             };

platform/commonUI/notification/bundle.json

@@ -8,6 +8,10 @@
             {
                 "key": "FORCE_AUTO_DISMISS",
                 "value": 1000
+            },
+            {
+                "key": "MINIMIZE_TIMEOUT",
+                "value": 300
             }
         ],
         "templates": [
@@ -38,7 +42,7 @@
                 "key": "notificationService",
                 "implementation": "NotificationService.js",
                 "depends": [ "$timeout", "DEFAULT_AUTO_DISMISS",
-                    "FORCE_AUTO_DISMISS" ]
+                    "MINIMIZE_TIMEOUT" ]
             }
         ]
     }

platform/commonUI/notification/res/notification-indicator.html

@@ -1,12 +1,13 @@
 <span ng-show="notifications.length > 0" class="status block"
       ng-class="{
+     'info': highest.severity===MessageSeverity.INFO,
      'error': highest.severity===MessageSeverity.ERROR,
      'alert': highest.severity===MessageSeverity.ALERT }"
       ng-controller="NotificationIndicatorController">
     <span class="ui-symbol status-indicator">&#xe610;</span>
     <span class="label">
         <a ng-click="showNotificationsList()">{{notifications.length}}
-            Notifications {{highest.severity}}</a>
+            Notifications</a>
     </span>
     <span class="count">{{notifications.length}}</span>
 </span>

platform/commonUI/notification/src/NotificationService.js

@@ -26,7 +26,7 @@
  * show banner notifications to the user. Banner notifications
  * are used to inform users of events in a non-intrusive way. As
  * much as possible, notifications share a model with blocking
- * dialogs so self the same information can be provided in a dialog
+ * dialogs so that the same information can be provided in a dialog
  * and then minimized to a banner notification if needed.
  *
  * @namespace platform/commonUI/dialog
@@ -51,16 +51,16 @@ define(
          * A representation of a banner notification. Banner notifications
          * are used to inform users of events in a non-intrusive way. As
          * much as possible, notifications share a model with blocking
-         * dialogs so self the same information can be provided in a dialog
+         * dialogs so that the same information can be provided in a dialog
          * and then minimized to a banner notification if needed.
          *
          * @typedef {object} Notification
          * @property {string} title The title of the message
+         * @property {MessageSeverity} severity The importance of the
+         * message (eg. error, info)
          * @property {number} progress The completion status of a task
          * represented numerically
-         * @property {MessageSeverity} messageSeverity The importance of the
+         * @property {boolean} unknownProgress a boolean indicating that the
-         * message (eg. error, info)
-         * @property {boolean} unknownProgress a boolean indicating self the
          * progress of the underlying task is unknown. This will result in a
          * visually distinct progress bar.
          * @property {boolean | number} autoDismiss If truthy, dialog will
@@ -72,24 +72,28 @@ define(
          * this message. Will be represented as a button with the provided
          * label and action. May be used by banner notifications to display
          * only the most important option to users.
-         * @property {NotificationAction[]} additionalActions any additional
+         * @property {NotificationAction[]} actions any additional
-         * actions
+         * actions the user can take. Will be represented as additional buttons
-         * self the user can take. Will be represented as additional buttons
+         * that may or may not be available from a banner.
-         * self may or may not be available from a banner.
          */
 
         /**
          * The notification service is responsible for informing the user of
          * events via the use of banner notifications.
-         * @memberof platform/commonUI/notification
+         * @param $timeout the Angular $timeout service
+         * @param DEFAULT_AUTO_DISMISS The period of time that an
+         * auto-dismissed message will be displayed for.
+         * @param MINIMIZE_TIMEOUT When notifications are minimized, a brief
+         * animation is shown. This animation requires some time to execute,
+         * so a timeout is required before the notification is hidden
          * @constructor
          */
-        function NotificationService($timeout, DEFAULT_AUTO_DISMISS, FORCE_AUTO_DISMISS) {
+        function NotificationService($timeout, DEFAULT_AUTO_DISMISS, MINIMIZE_TIMEOUT) {
             this.notifications = [];
             this.$timeout = $timeout;
             this.highest ={ severity: MessageSeverity.INFO };
             this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS;
-            this.FORCE_AUTO_DISMISS = FORCE_AUTO_DISMISS;
+            this.MINIMIZE_TIMEOUT = MINIMIZE_TIMEOUT;
 
             /*
              * A context in which to hold the active notification and a
@@ -99,7 +103,7 @@ define(
         }
 
         /**
-         * Returns the notification self is currently visible in the banner area
+         * Returns the notification that is currently visible in the banner area
          * @returns {Notification}
          */
         NotificationService.prototype.getActiveNotification = function (){
@@ -126,15 +130,16 @@ define(
          * @param {Notification} notification The notification to display
          */
         NotificationService.prototype.notify = function (notification) {
-            /*var notification = new Notification(model),
+            var self = this;
-                self=this; */
-            var self = this,
-                timeout;
 
             if (notification.autoDismiss === true){
                 notification.autoDismiss = this.DEFAULT_AUTO_DISMISS;
             }
 
+            if (notification.severity > this.highest.severity){
+                this.highest.severity = notification.severity;
+            }
+
             this.notifications.push(notification);
             /*
             Check if there is already an active (ie. visible) notification
@@ -155,7 +160,7 @@ define(
                  */
                 this.active.timeout = this.$timeout(function () {
                     self.dismissOrMinimize(self.active.notification);
-                }, this.FORCE_AUTO_DISMISS);
+                }, this.DEFAULT_AUTO_DISMISS);
             }
 
         };
@@ -200,17 +205,12 @@ define(
             var notification,
                 i=0;
 
-            this.highest.severity = MessageSeverity.INFO;
-
             /*
-            Loop through the notifications queue and find the first one self
+            Loop through the notifications queue and find the first one that
             has not already been minimized (manually or otherwise).
              */
             for (; i< this.notifications.length; i++) {
                 notification = this.notifications[i];
-                if (notification.severity > this.highest.severity){
-                    this.highest.severity = notification.severity;
-                }
 
                 if (!notification.minimized
                     && notification!== this.active.notification) {
@@ -232,10 +232,15 @@ define(
          */
         NotificationService.prototype.minimize = function (notification) {
             //Check this is a known notification
-            var index = this.notifications.indexOf(notification);
+            var index = this.notifications.indexOf(notification),
+                self = this;
             if (index >= 0) {
                 notification.minimized=true;
-                this.setActiveNotification(this.selectNextNotification());
+                //Add a brief timeout before showing the next notification
+                // in order to allow the minimize animation to run through.
+                this.$timeout(function() {
+                    self.setActiveNotification(self.selectNextNotification());
+                }, this.MINIMIZE_TIMEOUT);
             }
         };
 
@@ -266,11 +271,16 @@ define(
          * @param notification
          */
         NotificationService.prototype.dismissOrMinimize = function (notification){
-            if (notification.severity > MessageSeverity.INFO){
+
+            //For now minimize everything, and have discussion around which
+            //kind of messages should or should not be in the minimized
+            //notifications list
+            /*if (notification.severity > MessageSeverity.INFO){
                 this.minimize(notification);
             } else {
                 this.dismiss(notification);
-            }
+            }*/
+            this.minimize(notification);
         };
 
         return NotificationService;

testing/dialogTest/src/NotificationLaunchController.js

@@ -99,8 +99,8 @@ define(
             $scope.newAlert = function(){
 
                 notificationService.notify({
-                    title: "Error notification " + messageCounter++ + "!",
+                    title: "Alert notification " + (messageCounter++) + "!",
-                    hint: "An error has occurred",
+                    hint: "This is an alert message",
                     severity: MessageSeverity.ALERT,
                     primaryAction: {
                         label: 'Retry',