GUAC-928: Add progress bar to notifications.

guacamole/src/main/webapp/app/notification/directives/guacNotification.js

@@ -108,6 +108,15 @@ angular.module('notification').directive('guacNotification', [function guacNotif
              */
             progress : '=',
 
+            /**
+             * Value between 0 and 1 denoting what proportion of the operation
+             * has completed. If known, this value should be 0 if the operation
+             * has not started, and 1 if the operation is complete.
+             *
+             * @type Number
+             */
+            progressRatio : '=',
+
             /**
              * Array of name/callback pairs for each action the user is allowed
              * to take once the notification is shown.
@@ -132,6 +141,11 @@ angular.module('notification').directive('guacNotification', [function guacNotif
         templateUrl: 'app/notification/templates/guacNotification.html',
         controller: ['$scope', '$interval', function guacNotificationController($scope, $interval) {
 
+            // Update progress bar if end known
+            $scope.$watch("progressRatio", function updateProgress(ratio) {
+                $scope.progressPercent = ratio * 100;
+            });
+
             // Set countdown interval when associated property is set
             $scope.$watch("countdown", function resetTimeRemaining(countdown) {
 

guacamole/src/main/webapp/app/notification/styles/notification.css

@@ -104,3 +104,7 @@
     position: relative;
     
 }
+
+.notification .progress .text {
+    position: relative;
+}

guacamole/src/main/webapp/app/notification/templates/guacNotification.html

@@ -32,7 +32,7 @@
         <p ng-show="text" class="text">{{text | translate}}</p>
 
         <!-- Current progress -->
-        <div ng-show="progressText" class="progress">{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}</div>
+        <div ng-show="progressText" class="progress"><div ng-show="progressPercent" ng-style="{'width': progressPercent + '%'}" class="bar"></div><div class="text">{{progressText | translate:"{ PROGRESS: progress, UNIT: progressUnit }"}}</div></div>
 
         <!-- Default action countdown text -->
         <p ng-show="countdownText" class="countdown-text">{{countdownText | translate:"{ REMAINING: timeRemaining }"}}</p>