From dcf89227995372e25a8f61c13d3e4fa8d4886d99 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 13 Jul 2015 15:34:46 +0300
Subject: [PATCH] Feedback bar for showing response to user actions

Fixes #215
---
 static/css/directives/ui/feedback-bar.css | 52 +++++++++++++++++++++++
 static/directives/feedback-bar.html       |  3 ++
 static/directives/robots-manager.html     |  1 +
 static/js/directives/ui/feedback-bar.js   | 35 +++++++++++++++
 static/js/directives/ui/robots-manager.js |  9 ++++
 5 files changed, 100 insertions(+)
 create mode 100644 static/css/directives/ui/feedback-bar.css
 create mode 100644 static/directives/feedback-bar.html
 create mode 100644 static/js/directives/ui/feedback-bar.js

diff --git a/static/css/directives/ui/feedback-bar.css b/static/css/directives/ui/feedback-bar.css
new file mode 100644
index 000000000..81c08b49a
--- /dev/null
+++ b/static/css/directives/ui/feedback-bar.css
@@ -0,0 +1,52 @@
+.feedback-bar {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 50;
+  overflow: hidden;
+  text-align: center;
+  height: 42px;
+}
+
+@keyframes flow-down-up {
+    0%   {
+      top: -40px;
+    }
+
+    25%  {
+      top: 0px;
+    }
+
+    75%  {
+      top: 0px;
+    }
+
+    100% {
+      top: -40px;
+    }
+}
+
+.feedback-bar-element {
+  position: relative;
+  top: -40px;
+
+  text-align: center;
+  display: inline-block;
+
+  background: #eee;
+  padding: 10px;
+  border: 1px solid #eee;
+  border-top: 0px;
+
+  animation-name: flow-down-up;
+  animation-duration: 5s;
+}
+
+.feedback-bar .feedback-bar-element.info {
+  background-color: #F0FAFF;
+}
+
+.feedback-bar .feedback-bar-element.warning {
+  background-color: #FFFBF0;
+}
\ No newline at end of file
diff --git a/static/directives/feedback-bar.html b/static/directives/feedback-bar.html
new file mode 100644
index 000000000..15522ff08
--- /dev/null
+++ b/static/directives/feedback-bar.html
@@ -0,0 +1,3 @@
+<div class="feedback-bar-element" ng-class="feedback.kind" ng-show="viewCounter">
+  {{ feedback.message }}
+</div>
\ No newline at end of file
diff --git a/static/directives/robots-manager.html b/static/directives/robots-manager.html
index ebe9821ea..f2ebe0c55 100644
--- a/static/directives/robots-manager.html
+++ b/static/directives/robots-manager.html
@@ -1,4 +1,5 @@
 <div class="robots-manager-element">
+  <div class="feedback-bar" feedback="feedback"></div>
   <div class="cor-loader" ng-show="loading"></div>
 
   <div ng-show="!loading">
diff --git a/static/js/directives/ui/feedback-bar.js b/static/js/directives/ui/feedback-bar.js
new file mode 100644
index 000000000..32da0a24f
--- /dev/null
+++ b/static/js/directives/ui/feedback-bar.js
@@ -0,0 +1,35 @@
+/**
+ * An element which displays a feedback bar when an action has been taken.
+ */
+angular.module('quay').directive('feedbackBar', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/feedback-bar.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'feedback': '=feedback'
+    },
+    controller: function($scope, $element, AvatarService, Config, UIService, $timeout) {
+      $scope.viewCounter = 0;
+
+      $scope.$watch('feedback', function(feedback) {
+        if (feedback) {
+          $scope.viewCounter++;
+        } else {
+          $scope.viewCounter = 0;
+        }
+      });
+
+      $($element).find('.feedback-bar-element')
+                 .on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
+        function(e) {
+          $scope.$apply(function() {
+            $scope.viewCounter = 0;
+          });
+        });
+    }
+  };
+  return directiveDefinitionObject;
+});
\ No newline at end of file
diff --git a/static/js/directives/ui/robots-manager.js b/static/js/directives/ui/robots-manager.js
index f3ba51b41..075b0ea86 100644
--- a/static/js/directives/ui/robots-manager.js
+++ b/static/js/directives/ui/robots-manager.js
@@ -22,6 +22,7 @@ angular.module('quay').directive('robotsManager', function () {
       $scope.shownRobot = null;
       $scope.showRobotCounter = 0;
       $scope.Config = Config;
+      $scope.feedback = null;
 
       // Listen for route changes and update the tabs accordingly.
       var locationListener = $rootScope.$on('$routeUpdate', function(){
@@ -117,6 +118,10 @@ angular.module('quay').directive('robotsManager', function () {
             created.teams = [];
             created.repositories = [];
             $scope.robots.push(created);
+            $scope.feedback = {
+              'kind': 'info',
+              'message': 'Robot account ' + name + ' was created'
+            };
           });
       };
 
@@ -126,6 +131,10 @@ angular.module('quay').directive('robotsManager', function () {
           var index = $scope.findRobotIndexByName(info.name);
           if (index >= 0) {
             $scope.robots.splice(index, 1);
+            $scope.feedback = {
+              'kind': 'info',
+              'message': 'Robot account ' + info.name + ' was deleted'
+            };
           }
         }, ApiService.errorDisplay('Cannot delete robot account'));
       };