Skip to content

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

Merge pull request #211 from rhamilto/results-styling 

Improving display of binding status message
parents 605a7144 8f2f49b8
Showing with 244 additions and 120 deletions
dist/less/_bind-service.less
......@@ -52,23 +52,52 @@
}
.results-message {
line-height: 1.4;
margin-top: 0;
flex: 1 1 0%; // IE
padding-left: 10px;
strong {
.word-break();
@media(min-width: @screen-sm-min) {
padding-left: 15px;
}
h3,
.h3 {
font-size: 15px;
line-height: 1.4;
margin-bottom: 0;
margin-top: 0;
@media(min-width: @screen-sm-min) {
font-size: 20px;
font-weight: 300;
}
strong {
font-weight: 600;
.word-break();
}
}
.results-status-unknown & {
padding-left: 0;
}
}
.results-message-details {
font-style: italic;
margin-bottom: 0;
}
.results-status {
align-items: center;
display: flex;
font-size: 16px;
margin-bottom: 15px;
.fa,
.pficon {
margin-top: 3px;
font-size: 24px;
@media(min-width: @screen-sm-min) {
font-size: 32px;
}
}
.spinner.spinner-sm {
height: 16px;
margin: 3px 0 0;
width: 16px;
// make fa-clock-o slightly bigger so it matches pficon-ok, pficon-error-circle-o
.fa-clock-o {
font-size: 30px;
@media(min-width: @screen-sm-min) {
font-size: 36px;
}
}
}
dist/origin-web-common-ui.js
......@@ -93,32 +93,37 @@ 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=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"fa fa-clock-o text-muted\" 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 class=\"results-message\">\n" +
" <h3>\n" +
" The binding is being created.\n" +
" </h3>\n" +
" <p class=\"results-message-details\">This may take several minutes.</p>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\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=\"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" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" <div class=\"results-message\">\n" +
" <h3>\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" +
" The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" <p class=\"results-message-details\">\n" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" </p>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
......@@ -131,9 +136,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <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=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" <div class=\"results-message\">\n" +
" <h3>\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
" <span ng-if=\"ctrl.error.data.message\">\n" +
......
dist/origin-web-common.css
......@@ -63,27 +63,65 @@
margin-top: 30px;
}
.results-message {
flex: 1 1 0%;
padding-left: 10px;
}
@media (min-width: 768px) {
.results-message {
padding-left: 15px;
}
}
.results-message h3,
.results-message .h3 {
font-size: 15px;
line-height: 1.4;
margin-bottom: 0;
margin-top: 0;
padding-left: 10px;
}
.results-message strong {
@media (min-width: 768px) {
.results-message h3,
.results-message .h3 {
font-size: 20px;
font-weight: 300;
}
}
.results-message h3 strong,
.results-message .h3 strong {
font-weight: 600;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
min-width: 0;
}
.results-status-unknown .results-message {
padding-left: 0;
}
.results-message-details {
font-style: italic;
margin-bottom: 0;
}
.results-status {
align-items: center;
display: flex;
font-size: 16px;
margin-bottom: 15px;
}
.results-status .fa,
.results-status .pficon {
margin-top: 3px;
font-size: 24px;
}
.results-status .spinner.spinner-sm {
height: 16px;
margin: 3px 0 0;
width: 16px;
@media (min-width: 768px) {
.results-status .fa,
.results-status .pficon {
font-size: 32px;
}
}
.results-status .fa-clock-o {
font-size: 30px;
}
@media (min-width: 768px) {
.results-status .fa-clock-o {
font-size: 36px;
}
}
.delete-resource-modal {
background-color: #f1f1f1;
......
dist/origin-web-common.js
......@@ -264,32 +264,37 @@ 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=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"fa fa-clock-o text-muted\" 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 class=\"results-message\">\n" +
" <h3>\n" +
" The binding is being created.\n" +
" </h3>\n" +
" <p class=\"results-message-details\">This may take several minutes.</p>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\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=\"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" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" <div class=\"results-message\">\n" +
" <h3>\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" +
" The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" <p class=\"results-message-details\">\n" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" </p>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
......@@ -302,9 +307,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <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=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" <div class=\"results-message\">\n" +
" <h3>\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
" <span ng-if=\"ctrl.error.data.message\">\n" +
......
dist/scripts/templates.js
......@@ -64,32 +64,37 @@ 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=\"results-status\">\n" +
" <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
" <span class=\"fa fa-clock-o text-muted\" 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 class=\"results-message\">\n" +
" <h3>\n" +
" The binding is being created.\n" +
" </h3>\n" +
" <p class=\"results-message-details\">This may take several minutes.</p>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"(ctrl.binding | isBindingReady)\">\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=\"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" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" <div class=\"results-message\">\n" +
" <h3>\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" +
" The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
" </span>\n" +
" </h3>\n" +
" <p class=\"results-message-details\">\n" +
" The binding operation created the secret\n" +
" <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
" <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\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" +
" </p>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
" <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
......@@ -102,9 +107,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <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=\"results-message\">\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" <div class=\"results-message\">\n" +
" <h3>\n" +
" The binding could not be created.\n" +
" </h3>\n" +
" </div>\n" +
" </div>\n" +
" <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
" <span ng-if=\"ctrl.error.data.message\">\n" +
......
src/components/binding/bindResults.html
<div ng-if="!ctrl.error && !(ctrl.binding | isBindingFailed)">
<div ng-if="ctrl.binding && !(ctrl.binding | isBindingReady)" class="results-status">
<span class="spinner spinner-sm" aria-hidden="true"></span>
<span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
<span class="sr-only">Pending</span>
<h3 class="results-message">
The binding is being created.
</h3>
<div class="results-message">
<h3>
The binding is being created.
</h3>
<p class="results-message-details">This may take several minutes.</p>
</div>
</div>
<div ng-if="(ctrl.binding | isBindingReady)">
<div class="results-status">
<span class="pficon pficon-ok" aria-hidden="true"></span>
<span class="sr-only">Success</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">
The binding operation created the secret
<a ng-if="ctrl.secretHref" ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>
<span ng-if="!ctrl.secretHref">{{ctrl.binding.spec.secretName}}</span>
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 class="results-message">
<h3>
<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'">
The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.
</span>
</h3>
<p class="results-message-details">
The binding operation created the secret
<a ng-if="ctrl.secretHref" ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>
<span ng-if="!ctrl.secretHref">{{ctrl.binding.spec.secretName}}</span>
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>
</p>
</div>
</div>
<div class="alert alert-info results-info" ng-if="ctrl.bindType === 'application'">
<span class="pficon pficon-info" aria-hidden="true"></span>
......@@ -38,9 +43,11 @@
<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="results-message">
The binding could not be created.
</h3>
<div class="results-message">
<h3>
The binding could not be created.
</h3>
</div>
</div>
<div ng-if="ctrl.error" class="sub-title">
<span ng-if="ctrl.error.data.message">
......
src/styles/_bind-service.less
......@@ -52,23 +52,52 @@
}
.results-message {
line-height: 1.4;
margin-top: 0;
flex: 1 1 0%; // IE
padding-left: 10px;
strong {
.word-break();
@media(min-width: @screen-sm-min) {
padding-left: 15px;
}
h3,
.h3 {
font-size: 15px;
line-height: 1.4;
margin-bottom: 0;
margin-top: 0;
@media(min-width: @screen-sm-min) {
font-size: 20px;
font-weight: 300;
}
strong {
font-weight: 600;
.word-break();
}
}
.results-status-unknown & {
padding-left: 0;
}
}
.results-message-details {
font-style: italic;
margin-bottom: 0;
}
.results-status {
align-items: center;
display: flex;
font-size: 16px;
margin-bottom: 15px;
.fa,
.pficon {
margin-top: 3px;
font-size: 24px;
@media(min-width: @screen-sm-min) {
font-size: 32px;
}
}
.spinner.spinner-sm {
height: 16px;
margin: 3px 0 0;
width: 16px;
// make fa-clock-o slightly bigger so it matches pficon-ok, pficon-error-circle-o
.fa-clock-o {
font-size: 30px;
@media(min-width: @screen-sm-min) {
font-size: 36px;
}
}
}
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