Skip to content

O
origin-web-common
Commit 554a9385 by Robb Hamilton
Options

Updating binding messaging for consistency

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