From dcf89227995372e25a8f61c13d3e4fa8d4886d99 Mon Sep 17 00:00:00 2001 From: Joseph Schorr 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 @@ +
+ {{ feedback.message }} +
\ 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 @@
+
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')); };