Skip to content

O
origin-web-common
Commit f73a9fb4 by Sam Padgett Committed by GitHub
Options

Merge pull request #204 from rhamilto/results 

Updating binding messaging for consistency
parents 0a562558 554a9385
Showing with 121 additions and 191 deletions
dist/less/_bind-service.less
......@@ -41,50 +41,34 @@
}
}
.bind-info {
.bind-service-selection {
margin-bottom: 5px;
}
// the following rules are shared by origin-web-catalog
.results-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-service-selection {
margin-bottom: 5px;
.results-message {
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
strong {
.word-break();
}
}
.bind-status {
.results-status {
display: flex;
font-size: 16px;
margin-top: 0;
.bind-message {
flex: 1;
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.pficon {
margin-top: 3px;
}
&.show-progress {
display: block;
.bind-message {
padding-left: 0;
}
}
.spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
margin: 3px 0 0;
width: 16px;
}
}
.bind-pending-message {
margin-top: 15px;
&.progress-inline {
margin-top: 0;
}
}
dist/origin-web-common-ui.js
......@@ -92,21 +92,25 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
$templateCache.put('src/components/binding/bindResults.html',
"<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"bind-status\" ng-class=\"{'text-center': !ctrl.progressInline, 'show-progress': !ctrl.progressInline}\">\n" +
" <div class=\"spinner\" ng-class=\"{'spinner-sm': ctrl.progressInline, 'spinner-inline': ctrl.progressInline, 'spinner-lg': !ctrl.progressInline}\" aria-hidden=\"true\"></div>\n" +
" <h3 class=\"bind-message\">\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <div class=\"bind-pending-message\" ng-class=\"{'progress-inline': ctrl.progressInline}\">The binding was created but is not ready yet.</div>\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding is being created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" <h3 class=\"results-message\">\n" +
" <span ng-if=\"ctrl.bindType === 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
" <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
" </span>\n" +
" <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" </div>\n" +
" <div class=\"sub-title\">\n" +
......@@ -116,7 +120,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" that you may need to reference in your application.\n" +
" <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
" </div>\n" +
" <div class=\"alert alert-info bind-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Info</span>\n" +
" The binding secret will only be available to new pods. You will need to redeploy your application.\n" +
......@@ -124,11 +128,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </div>\n" +
"</div>\n" +
"<div ng-if=\"ctrl.error || (ctrl.binding | isBindingFailed)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Error</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <span>Binding Failed</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
......@@ -504,29 +508,14 @@ angular.module('openshiftCommonUI').component('bindResults', {
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
bindType: '@',
applicationToBind: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
templateUrl: 'src/components/binding/bindResults.html'
});
;'use strict';
angular.module('openshiftCommonUI').component('bindServiceForm', {
......
dist/origin-web-common.css
......@@ -55,45 +55,36 @@
.bind-form .radio label[disabled] {
cursor: not-allowed;
}
.bind-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-service-selection {
margin-bottom: 5px;
}
.bind-status {
display: flex;
font-size: 16px;
margin-top: 0;
.results-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-status .bind-message {
flex: 1;
.results-message {
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.bind-status .pficon {
margin-top: 3px;
.results-message strong {
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.bind-status.show-progress {
display: block;
.results-status {
display: flex;
font-size: 16px;
}
.bind-status.show-progress .bind-message {
padding-left: 0;
.results-status .pficon {
margin-top: 3px;
}
.bind-status .spinner.spinner-sm {
.results-status .spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
margin: 3px 0 0;
width: 16px;
}
.bind-pending-message {
margin-top: 15px;
}
.bind-pending-message.progress-inline {
margin-top: 0;
}
.delete-resource-modal {
background-color: #f1f1f1;
}
......
dist/origin-web-common.js
......@@ -263,21 +263,25 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
$templateCache.put('src/components/binding/bindResults.html',
"<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"bind-status\" ng-class=\"{'text-center': !ctrl.progressInline, 'show-progress': !ctrl.progressInline}\">\n" +
" <div class=\"spinner\" ng-class=\"{'spinner-sm': ctrl.progressInline, 'spinner-inline': ctrl.progressInline, 'spinner-lg': !ctrl.progressInline}\" aria-hidden=\"true\"></div>\n" +
" <h3 class=\"bind-message\">\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <div class=\"bind-pending-message\" ng-class=\"{'progress-inline': ctrl.progressInline}\">The binding was created but is not ready yet.</div>\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding is being created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" <h3 class=\"results-message\">\n" +
" <span ng-if=\"ctrl.bindType === 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
" <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
" </span>\n" +
" <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" </div>\n" +
" <div class=\"sub-title\">\n" +
......@@ -287,7 +291,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" that you may need to reference in your application.\n" +
" <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
" </div>\n" +
" <div class=\"alert alert-info bind-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Info</span>\n" +
" The binding secret will only be available to new pods. You will need to redeploy your application.\n" +
......@@ -295,11 +299,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </div>\n" +
"</div>\n" +
"<div ng-if=\"ctrl.error || (ctrl.binding | isBindingFailed)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Error</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <span>Binding Failed</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
......@@ -675,29 +679,14 @@ angular.module('openshiftCommonUI').component('bindResults', {
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
bindType: '@',
applicationToBind: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
templateUrl: 'src/components/binding/bindResults.html'
});
;'use strict';
angular.module('openshiftCommonUI').component('bindServiceForm', {
......
dist/scripts/templates.js
......@@ -63,21 +63,25 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
$templateCache.put('src/components/binding/bindResults.html',
"<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"bind-status\" ng-class=\"{'text-center': !ctrl.progressInline, 'show-progress': !ctrl.progressInline}\">\n" +
" <div class=\"spinner\" ng-class=\"{'spinner-sm': ctrl.progressInline, 'spinner-inline': ctrl.progressInline, 'spinner-lg': !ctrl.progressInline}\" aria-hidden=\"true\"></div>\n" +
" <h3 class=\"bind-message\">\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <div class=\"bind-pending-message\" ng-class=\"{'progress-inline': ctrl.progressInline}\">The binding was created but is not ready yet.</div>\n" +
" <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Pending</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding is being created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Success</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong>\n" +
" <span>has been bound</span>\n" +
" <span ng-if=\"ctrl.bindType === 'application'\"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>\n" +
" <h3 class=\"results-message\">\n" +
" <span ng-if=\"ctrl.bindType === 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
" <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
" </span>\n" +
" <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
" <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" </div>\n" +
" <div class=\"sub-title\">\n" +
......@@ -87,7 +91,7 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" that you may need to reference in your application.\n" +
" <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
" </div>\n" +
" <div class=\"alert alert-info bind-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Info</span>\n" +
" The binding secret will only be available to new pods. You will need to redeploy your application.\n" +
......@@ -95,11 +99,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" </div>\n" +
"</div>\n" +
"<div ng-if=\"ctrl.error || (ctrl.binding | isBindingFailed)\">\n" +
" <div class=\"bind-status\">\n" +
" <div class=\"results-status\">\n" +
" <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">Error</span>\n" +
" <h3 class=\"bind-message\">\n" +
" <span>Binding Failed</span>\n" +
" <h3 class=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
......
src/components/binding/bindResults.html
<div ng-if="!ctrl.error && !(ctrl.binding | isBindingFailed)">
<div ng-if="ctrl.binding && !(ctrl.binding | isBindingReady)" class="bind-status" ng-class="{'text-center': !ctrl.progressInline, 'show-progress': !ctrl.progressInline}">
<div class="spinner" ng-class="{'spinner-sm': ctrl.progressInline, 'spinner-inline': ctrl.progressInline, 'spinner-lg': !ctrl.progressInline}" aria-hidden="true"></div>
<h3 class="bind-message">
<span class="sr-only">Pending</span>
<div class="bind-pending-message" ng-class="{'progress-inline': ctrl.progressInline}">The binding was created but is not ready yet.</div>
<div ng-if="ctrl.binding && !(ctrl.binding | isBindingReady)" class="results-status">
<span class="spinner spinner-sm" aria-hidden="true"></span>
<span class="sr-only">Pending</span>
<h3 class="results-message">
The binding is being created.
</h3>
</div>
<div ng-if="(ctrl.binding | isBindingReady)">
<div class="bind-status">
<div class="results-status">
<span class="pficon pficon-ok" aria-hidden="true"></span>
<span class="sr-only">Success</span>
<h3 class="bind-message">
<strong>{{ctrl.serviceToBind}}</strong>
<span>has been bound</span>
<span ng-if="ctrl.bindType === 'application'"> to <strong>{{ctrl.applicationToBind}}</strong> successfully</span>
<h3 class="results-message">
<span ng-if="ctrl.bindType === 'application'">
<strong>{{ctrl.serviceToBind}}</strong> has been bound to
<strong>{{ctrl.applicationToBind}}</strong> successfully.
</span>
<span ng-if="ctrl.bindType !== 'application'">
<strong>{{ctrl.serviceToBind}}</strong> binding created successfully.
</span>
</h3>
</div>
<div class="sub-title">
......@@ -23,7 +27,7 @@
that you may need to reference in your application.
<span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>
</div>
<div class="alert alert-info bind-info" ng-if="ctrl.bindType === 'application'">
<div class="alert alert-info results-info" ng-if="ctrl.bindType === 'application'">
<span class="pficon pficon-info" aria-hidden="true"></span>
<span class="sr-only">Info</span>
The binding secret will only be available to new pods. You will need to redeploy your application.
......@@ -31,11 +35,11 @@
</div>
</div>
<div ng-if="ctrl.error || (ctrl.binding | isBindingFailed)">
<div class="bind-status">
<div class="results-status">
<span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
<span class="sr-only">Error</span>
<h3 class="bind-message">
<span>Binding Failed</span>
<h3 class="results-message">
The binding could not be created.
</h3>
</div>
<div ng-if="ctrl.error" class="sub-title">
......
src/components/binding/bindResults.js
......@@ -5,26 +5,11 @@ angular.module('openshiftCommonUI').component('bindResults', {
bindings: {
error: '<',
binding: '<',
progressInline: '@',
serviceToBind: '<',
bindType: '@',
applicationToBind: '<',
showPodPresets: '<',
secretHref: '<'
},
templateUrl: 'src/components/binding/bindResults.html',
controller: function() {
var ctrl = this;
ctrl.$onInit = function () {
ctrl.progressInline = ctrl.progressInline === 'true';
};
ctrl.$onChanges = function(onChangesObj) {
if (onChangesObj.progressInline) {
ctrl.progressInline = ctrl.progressInline === 'true';
}
}
}
templateUrl: 'src/components/binding/bindResults.html'
});
src/styles/_bind-service.less
......@@ -41,50 +41,34 @@
}
}
.bind-info {
.bind-service-selection {
margin-bottom: 5px;
}
// the following rules are shared by origin-web-catalog
.results-info {
margin-bottom: 20px;
margin-top: 30px;
}
.bind-service-selection {
margin-bottom: 5px;
.results-message {
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
strong {
.word-break();
}
}
.bind-status {
.results-status {
display: flex;
font-size: 16px;
margin-top: 0;
.bind-message {
flex: 1;
line-height: 1.4;
margin-top: 0;
padding-left: 10px;
}
.pficon {
margin-top: 3px;
}
&.show-progress {
display: block;
.bind-message {
padding-left: 0;
}
}
.spinner.spinner-sm {
height: 16px;
margin-right: 0;
margin-top: 3px;
margin: 3px 0 0;
width: 16px;
}
}
.bind-pending-message {
margin-top: 15px;
&.progress-inline {
margin-top: 0;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment