vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update styling of feedback bar to use the alert styles and string builder

Browse source
This commit is contained in:
Joseph Schorr 2015-07-14 12:22:18 +03:00
parent dcf8922799
commit d74da9a3db
5 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/css/directives/ui/feedback-bar.css
View file

@ -34,19 +34,26 @@
text-align: center; text-align: center;
display: inline-block; display: inline-block;
background: #eee;
padding: 10px;
border: 1px solid #eee;
border-top: 0px;
animation-name: flow-down-up; animation-name: flow-down-up;
animation-duration: 5s; animation-duration: 5s;
} }
.feedback-bar .feedback-bar-element.info { .feedback-bar-element .co-alert {
background-color: #F0FAFF; margin: 0px;
border-top: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
} }
.feedback-bar .feedback-bar-element.warning { .feedback-bar-element .co-alert:before {
background-color: #FFFBF0; top: 5px !important;
}
.feedback-bar-element .co-alert .feedback-text i {
display: inline-block;
margin-left: 6px;
margin-right: 4px;
vertical-align: middle;
} }

4
static/directives/feedback-bar.html
View file

@ -1,3 +1,5 @@
<div class="feedback-bar-element" ng-class="feedback.kind" ng-show="viewCounter"> <div class="feedback-bar-element" ng-class="feedback.kind" ng-show="viewCounter">
{{ feedback.message }} <div class="co-alert" ng-class="'co-alert-' + feedback.kind">
<span class="feedback-text" ng-bind-html="formattedMessage"></span>
</div>
</div> </div>

4
static/js/directives/ui/feedback-bar.js
View file

@ -11,11 +11,13 @@ angular.module('quay').directive('feedbackBar', function () {
scope: { scope: {
'feedback': '=feedback' 'feedback': '=feedback'
}, },
controller: function($scope, $element, AvatarService, Config, UIService, $timeout) { controller: function($scope, $element, AvatarService, Config, UIService, $timeout, StringBuilderService) {
$scope.viewCounter = 0; $scope.viewCounter = 0;
$scope.formattedMessage = '';
$scope.$watch('feedback', function(feedback) { $scope.$watch('feedback', function(feedback) {
if (feedback) { if (feedback) {
$scope.formattedMessage = StringBuilderService.buildString(feedback.message, feedback.data || {}, 'span');
$scope.viewCounter++; $scope.viewCounter++;
} else { } else {
$scope.viewCounter = 0; $scope.viewCounter = 0;

14
static/js/directives/ui/robots-manager.js
View file

@ -119,8 +119,11 @@ angular.module('quay').directive('robotsManager', function () {
created.repositories = []; created.repositories = [];
$scope.robots.push(created); $scope.robots.push(created);
$scope.feedback = { $scope.feedback = {
'kind': 'info', 'kind': 'success',
'message': 'Robot account ' + name + ' was created' 'message': 'Robot account {robot} was created',
'data': {
'robot': name
}
}; };
}); });
}; };
@ -132,8 +135,11 @@ angular.module('quay').directive('robotsManager', function () {
if (index >= 0) { if (index >= 0) {
$scope.robots.splice(index, 1); $scope.robots.splice(index, 1);
$scope.feedback = { $scope.feedback = {
'kind': 'info', 'kind': 'success',
'message': 'Robot account ' + info.name + ' was deleted' 'message': 'Robot account {robot} was deleted',
'data': {
'robot': info.name
}
}; };
} }
}, ApiService.errorDisplay('Cannot delete robot account')); }, ApiService.errorDisplay('Cannot delete robot account'));

6
static/js/services/string-builder-service.js
View file

@ -39,7 +39,7 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
return url; return url;
}; };
stringBuilderService.buildString = function(value_or_func, metadata) { stringBuilderService.buildString = function(value_or_func, metadata, opt_codetag) {
var fieldIcons = { var fieldIcons = {
'inviter': 'user', 'inviter': 'user',
'username': 'user', 'username': 'user',
@ -108,7 +108,9 @@ angular.module('quay').factory('StringBuilderService', ['$sce', 'UtilService', f
markedDown = '<i class="fa ' + icon + '"></i>' + markedDown; markedDown = '<i class="fa ' + icon + '"></i>' + markedDown;
} }
description = description.replace('{' + key + '}', '<code title="' + safe + '">' + markedDown + '</code>'); var codeTag = opt_codetag || 'code';
description = description.replace('{' + key + '}',
'<' + codeTag + ' title="' + safe + '">' + markedDown + '</' + codeTag + '>');
} }
} }
return $sce.trustAsHtml(description.replace('\n', '<br>')); return $sce.trustAsHtml(description.replace('\n', '<br>'));