Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Follow-on updates from jennyhaines #2400

Merged
merged 1 commit into from
Nov 1, 2017
Merged

Follow-on updates from jennyhaines #2400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions app/styles/_kve.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,13 @@
position: relative;
table-layout: fixed;
width: 100%;
@media(min-width: @screen-xs-min) {
.environment-from-editor-button {
.environment-from-editor-button {
top: 26px; // position to align with config-map ui-select when stacked
@media(min-width: @screen-xs-min) {
float: left;
padding: 0 5px;
position: relative;
top: 0; // position when not stacked
width: auto;
}
}
Expand Down Expand Up @@ -185,6 +187,25 @@
}
}

.environment-from-editor-header {
&.config-map-header,
&.prefix-header {
@media(max-width: @screen-xxs-max) {
display: none;
width: 100%;
}
&.config-map-header-mobile,
&.prefix-header-mobile {
display: block;
margin-bottom: 0;
margin-top: 5px;
@media(min-width: @screen-xs-min) {
display: none;
}
}
}
}

.key-value-editor .key-value-editor-input,
.key-value-editor-header,
.environment-from-editor-header {
Expand Down
5 changes: 5 additions & 0 deletions app/styles/_tooltip.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
// Tooltips
// --------------------------------------------------

// TODO Go thru and apply consistantly across pages
.tooltip-default-icon {
cursor: help;
font-size: @font-size-base - 1;
}
.tooltip-inner {
.word-break(); // so that long, unbroken strings don't overflow
}
44 changes: 23 additions & 21 deletions app/views/directives/edit-environment-from.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,17 @@
<div
ng-if="$ctrl.showHeader"
class="environment-from-entry environment-from-editor-entry-header">
<div class="form-group environment-from-editor-header value-header">
<div class="input-group">
<div class="environment-from-editor-header config-map-header">
Config Map/Secret
</div>
</div>
<div class="form-group environment-from-editor-header value-header">
<div class="input-group"
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
<div
class="environment-from-editor-header prefix-header"
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
Prefix
<small class="pficon pficon-help"
<small class="pficon pficon-help tooltip-default-icon"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add a style to switch the cursor to the help icon on hover like other tooltips.

aria-hidden="true"
data-toggle="tooltip"
data-original-title="Optional prefix added to each environment variable name."></small>
</div>
data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
</div>
</div>

Expand All @@ -27,7 +24,12 @@
ng-repeat="entry in $ctrl.envFromEntries"
as-sortable-item>

<div class="form-group environment-from-input">
<div class="environment-from-input">
<div class="environment-from-editor-entry-header">
<div class="environment-from-editor-header config-map-header config-map-header-mobile">
Config Map/Secret
</div>
</div>
<div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
<div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
No config maps or secrets have been added as Environment From.
Expand Down Expand Up @@ -62,7 +64,16 @@
</div>
</div>

<div class="form-group environment-from-input prefix">
<div class="environment-from-input prefix">
<div
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally this is a <label for="..."> for accessibility, but that's a bit tricky since you have to generate IDs. I'm OK leaving that for later.

class="environment-from-editor-header prefix-header prefix-header-mobile"
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
Prefix
<small class="pficon pficon-help tooltip-default-icon"
aria-hidden="true"
data-toggle="tooltip"
data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
</div>
<div class="environment-from-input"
ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
Expand All @@ -79,15 +90,6 @@
<span class="help-block key-validation-error"
ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
<span class="validation-text">Please enter a valid prefix.</span>
<span class="help action-inline">
<a
aria-hidden="true"
data-toggle="tooltip"
data-placement="top"
data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
<span class="pficon pficon-help"></span>
</a>
</span>
</span>
</span>
</div>
Expand Down Expand Up @@ -118,7 +120,7 @@
</div>
</div>

<div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
<div class="environment-from-entry" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
<a
href=""
class="add-row-link"
Expand Down
4 changes: 2 additions & 2 deletions app/views/directives/edit-environment-variables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ <h3>Container {{container.name}}</h3>
show-header>
</key-value-editor>

<h4 class="section-label">
<h4>
Environment From
<span class="pficon pficon-help"
<span class="pficon pficon-help tooltip-default-icon"
aria-hidden="true"
data-toggle="tooltip"
data-original-title="Environment From lets you add all key-value pairs from a config map or secret as environment variables."></span>
Expand Down
12 changes: 4 additions & 8 deletions app/views/directives/key-value-editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@
<div
ng-if="showHeader"
class="key-value-editor-entry key-value-editor-entry-header">
<div class="form-group key-value-editor-header key-header">
<div class="input-group">
<span class="help-block">{{keyPlaceholder}}</span>
</div>
<div class="key-value-editor-header key-header">
{{keyPlaceholder}}
</div>
<div class="form-group key-value-editor-header value-header">
<div class="input-group">
<span class="help-block">{{valuePlaceholder}}</span>
</div>
<div class="key-value-editor-header value-header">
{{valuePlaceholder}}
</div>
</div>

Expand Down
46 changes: 21 additions & 25 deletions dist/scripts/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6696,21 +6696,22 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
$templateCache.put('views/directives/edit-environment-from.html',
"<ng-form name=\"$ctrl.editEnvironmentFromForm\" novalidate>\n" +
"<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
"<div class=\"input-group\">\n" +
"<div class=\"environment-from-editor-header config-map-header\">\n" +
"Config Map/Secret\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
"<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"<div class=\"environment-from-editor-header prefix-header\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"Prefix\n" +
"<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
"</div>\n" +
"<small class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\"></small>\n" +
"</div>\n" +
"</div>\n" +
"<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
"<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
"<div class=\"form-group environment-from-input\">\n" +
"<div class=\"environment-from-input\">\n" +
"<div class=\"environment-from-editor-entry-header\">\n" +
"<div class=\"environment-from-editor-header config-map-header config-map-header-mobile\">\n" +
"Config Map/Secret\n" +
"</div>\n" +
"</div>\n" +
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
"<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
"No config maps or secrets have been added as Environment From.\n" +
Expand Down Expand Up @@ -6738,18 +6739,17 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group environment-from-input prefix\">\n" +
"<div class=\"environment-from-input prefix\">\n" +
"<div class=\"environment-from-editor-header prefix-header prefix-header-mobile\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"Prefix\n" +
"<small class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\"></small>\n" +
"</div>\n" +
"<div class=\"environment-from-input\" ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\" ng-class=\"{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }\">\n" +
"<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
"<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"/^[a-zA-Z0-9_]+$/\">\n" +
"<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
"<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
"<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
"<span class=\"help action-inline\">\n" +
"<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" +
"<span class=\"pficon pficon-help\"></span>\n" +
"</a>\n" +
"</span>\n" +
"</span>\n" +
"</span>\n" +
"</div>\n" +
Expand All @@ -6762,7 +6762,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"<div class=\"environment-from-entry\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
"</div>\n" +
"</div>\n" +
Expand Down Expand Up @@ -6823,9 +6823,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"</div>\n" +
"<key-value-editor ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" entries=\"container.env\" key-placeholder=\"Name\" value-placeholder=\"Value\" value-from-selector-options=\"$ctrl.valueFromObjects\" key-validator=\"[A-Za-z_][A-Za-z0-9_]*\" key-validator-error=\"Please enter a valid key.\" key-validator-error-tooltip=\"A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\" add-row-link=\"Add Value\" add-row-with-selectors-link=\"Add Value from Config Map or Secret\" show-header>\n" +
"</key-value-editor>\n" +
"<h4 class=\"section-label\">\n" +
"<h4>\n" +
"Environment From\n" +
"<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
"<span class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
"</h4>\n" +
"<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
"</edit-environment-from>\n" +
Expand Down Expand Up @@ -7430,15 +7430,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
$templateCache.put('views/directives/key-value-editor.html',
"<ng-form name=\"forms.keyValueEditor\" novalidate ng-if=\"entries\">\n" +
"<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
"<div class=\"form-group key-value-editor-header key-header\">\n" +
"<div class=\"input-group\">\n" +
"<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"form-group key-value-editor-header value-header\">\n" +
"<div class=\"input-group\">\n" +
"<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
"<div class=\"key-value-editor-header key-header\">\n" +
"{{keyPlaceholder}}\n" +
"</div>\n" +
"<div class=\"key-value-editor-header value-header\">\n" +
"{{valuePlaceholder}}\n" +
"</div>\n" +
"</div>\n" +
"<div ng-model=\"entries\" class=\"key-value-editor\" as-sortable=\"dragControlListeners\">\n" +
Expand Down
9 changes: 8 additions & 1 deletion dist/styles/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.