Skip to content

Commit 9b85d2f

Browse files
committed
Follow-on updates from @jennyhaines
#2362 (comment)
1 parent e865849 commit 9b85d2f

File tree

7 files changed

+86
-59
lines changed

7 files changed

+86
-59
lines changed

app/styles/_kve.less

+23-2
Original file line numberDiff line numberDiff line change
@@ -125,11 +125,13 @@
125125
position: relative;
126126
table-layout: fixed;
127127
width: 100%;
128-
@media(min-width: @screen-xs-min) {
129-
.environment-from-editor-button {
128+
.environment-from-editor-button {
129+
top: 26px; // position to align with config-map ui-select when stacked
130+
@media(min-width: @screen-xs-min) {
130131
float: left;
131132
padding: 0 5px;
132133
position: relative;
134+
top: 0; // position when not stacked
133135
width: auto;
134136
}
135137
}
@@ -185,6 +187,25 @@
185187
}
186188
}
187189

190+
.environment-from-editor-header {
191+
&.config-map-header,
192+
&.prefix-header {
193+
@media(max-width: @screen-xxs-max) {
194+
display: none;
195+
width: 100%;
196+
}
197+
&.config-map-header-mobile,
198+
&.prefix-header-mobile {
199+
display: block;
200+
margin-bottom: 0;
201+
margin-top: 5px;
202+
@media(min-width: @screen-xs-min) {
203+
display: none;
204+
}
205+
}
206+
}
207+
}
208+
188209
.key-value-editor .key-value-editor-input,
189210
.key-value-editor-header,
190211
.environment-from-editor-header {

app/styles/_tooltip.less

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
// Tooltips
33
// --------------------------------------------------
44

5+
// TODO Go thru and apply consistantly across pages
6+
.tooltip-default-icon {
7+
cursor: help;
8+
font-size: @font-size-base - 1;
9+
}
510
.tooltip-inner {
611
.word-break(); // so that long, unbroken strings don't overflow
712
}

app/views/directives/edit-environment-from.html

+23-21
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,17 @@
22
<div
33
ng-if="$ctrl.showHeader"
44
class="environment-from-entry environment-from-editor-entry-header">
5-
<div class="form-group environment-from-editor-header value-header">
6-
<div class="input-group">
5+
<div class="environment-from-editor-header config-map-header">
76
Config Map/Secret
8-
</div>
97
</div>
10-
<div class="form-group environment-from-editor-header value-header">
11-
<div class="input-group"
12-
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
8+
<div
9+
class="environment-from-editor-header prefix-header"
10+
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
1311
Prefix
14-
<small class="pficon pficon-help"
12+
<small class="pficon pficon-help tooltip-default-icon"
1513
aria-hidden="true"
1614
data-toggle="tooltip"
17-
data-original-title="Optional prefix added to each environment variable name."></small>
18-
</div>
15+
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>
1916
</div>
2017
</div>
2118

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

30-
<div class="form-group environment-from-input">
27+
<div class="environment-from-input">
28+
<div class="environment-from-editor-entry-header">
29+
<div class="environment-from-editor-header config-map-header config-map-header-mobile">
30+
Config Map/Secret
31+
</div>
32+
</div>
3133
<div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
3234
<div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
3335
No config maps or secrets have been added as Environment From.
@@ -62,7 +64,16 @@
6264
</div>
6365
</div>
6466

65-
<div class="form-group environment-from-input prefix">
67+
<div class="environment-from-input prefix">
68+
<div
69+
class="environment-from-editor-header prefix-header prefix-header-mobile"
70+
ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
71+
Prefix
72+
<small class="pficon pficon-help tooltip-default-icon"
73+
aria-hidden="true"
74+
data-toggle="tooltip"
75+
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>
76+
</div>
6677
<div class="environment-from-input"
6778
ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
6879
ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
@@ -79,15 +90,6 @@
7990
<span class="help-block key-validation-error"
8091
ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
8192
<span class="validation-text">Please enter a valid prefix.</span>
82-
<span class="help action-inline">
83-
<a
84-
aria-hidden="true"
85-
data-toggle="tooltip"
86-
data-placement="top"
87-
data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
88-
<span class="pficon pficon-help"></span>
89-
</a>
90-
</span>
9193
</span>
9294
</span>
9395
</div>
@@ -118,7 +120,7 @@
118120
</div>
119121
</div>
120122

121-
<div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
123+
<div class="environment-from-entry" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
122124
<a
123125
href=""
124126
class="add-row-link"

app/views/directives/edit-environment-variables.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ <h3>Container {{container.name}}</h3>
3434
show-header>
3535
</key-value-editor>
3636

37-
<h4 class="section-label">
37+
<h4>
3838
Environment From
39-
<span class="pficon pficon-help"
39+
<span class="pficon pficon-help tooltip-default-icon"
4040
aria-hidden="true"
4141
data-toggle="tooltip"
4242
data-original-title="Environment From lets you add all key-value pairs from a config map or secret as environment variables."></span>

app/views/directives/key-value-editor.html

+4-8
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,11 @@
33
<div
44
ng-if="showHeader"
55
class="key-value-editor-entry key-value-editor-entry-header">
6-
<div class="form-group key-value-editor-header key-header">
7-
<div class="input-group">
8-
<span class="help-block">{{keyPlaceholder}}</span>
9-
</div>
6+
<div class="key-value-editor-header key-header">
7+
{{keyPlaceholder}}
108
</div>
11-
<div class="form-group key-value-editor-header value-header">
12-
<div class="input-group">
13-
<span class="help-block">{{valuePlaceholder}}</span>
14-
</div>
9+
<div class="key-value-editor-header value-header">
10+
{{valuePlaceholder}}
1511
</div>
1612
</div>
1713

dist/scripts/templates.js

+21-25
Original file line numberDiff line numberDiff line change
@@ -6696,21 +6696,22 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
66966696
$templateCache.put('views/directives/edit-environment-from.html',
66976697
"<ng-form name=\"$ctrl.editEnvironmentFromForm\" novalidate>\n" +
66986698
"<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
6699-
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
6700-
"<div class=\"input-group\">\n" +
6699+
"<div class=\"environment-from-editor-header config-map-header\">\n" +
67016700
"Config Map/Secret\n" +
67026701
"</div>\n" +
6703-
"</div>\n" +
6704-
"<div class=\"form-group environment-from-editor-header value-header\">\n" +
6705-
"<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6702+
"<div class=\"environment-from-editor-header prefix-header\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
67066703
"Prefix\n" +
6707-
"<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
6708-
"</div>\n" +
6704+
"<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" +
67096705
"</div>\n" +
67106706
"</div>\n" +
67116707
"<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
67126708
"<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
6713-
"<div class=\"form-group environment-from-input\">\n" +
6709+
"<div class=\"environment-from-input\">\n" +
6710+
"<div class=\"environment-from-editor-entry-header\">\n" +
6711+
"<div class=\"environment-from-editor-header config-map-header config-map-header-mobile\">\n" +
6712+
"Config Map/Secret\n" +
6713+
"</div>\n" +
6714+
"</div>\n" +
67146715
"<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
67156716
"<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
67166717
"No config maps or secrets have been added as Environment From.\n" +
@@ -6738,18 +6739,17 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67386739
"</div>\n" +
67396740
"</div>\n" +
67406741
"</div>\n" +
6741-
"<div class=\"form-group environment-from-input prefix\">\n" +
6742+
"<div class=\"environment-from-input prefix\">\n" +
6743+
"<div class=\"environment-from-editor-header prefix-header prefix-header-mobile\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6744+
"Prefix\n" +
6745+
"<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" +
6746+
"</div>\n" +
67426747
"<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" +
67436748
"<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
67446749
"<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" +
67456750
"<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
67466751
"<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
67476752
"<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
6748-
"<span class=\"help action-inline\">\n" +
6749-
"<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" +
6750-
"<span class=\"pficon pficon-help\"></span>\n" +
6751-
"</a>\n" +
6752-
"</span>\n" +
67536753
"</span>\n" +
67546754
"</span>\n" +
67556755
"</div>\n" +
@@ -6762,7 +6762,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
67626762
"</div>\n" +
67636763
"</div>\n" +
67646764
"</div>\n" +
6765-
"<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
6765+
"<div class=\"environment-from-entry\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
67666766
"<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
67676767
"</div>\n" +
67686768
"</div>\n" +
@@ -6823,9 +6823,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
68236823
"</div>\n" +
68246824
"<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" +
68256825
"</key-value-editor>\n" +
6826-
"<h4 class=\"section-label\">\n" +
6826+
"<h4>\n" +
68276827
"Environment From\n" +
6828-
"<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" +
6828+
"<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" +
68296829
"</h4>\n" +
68306830
"<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
68316831
"</edit-environment-from>\n" +
@@ -7430,15 +7430,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
74307430
$templateCache.put('views/directives/key-value-editor.html',
74317431
"<ng-form name=\"forms.keyValueEditor\" novalidate ng-if=\"entries\">\n" +
74327432
"<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
7433-
"<div class=\"form-group key-value-editor-header key-header\">\n" +
7434-
"<div class=\"input-group\">\n" +
7435-
"<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
7436-
"</div>\n" +
7437-
"</div>\n" +
7438-
"<div class=\"form-group key-value-editor-header value-header\">\n" +
7439-
"<div class=\"input-group\">\n" +
7440-
"<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
7433+
"<div class=\"key-value-editor-header key-header\">\n" +
7434+
"{{keyPlaceholder}}\n" +
74417435
"</div>\n" +
7436+
"<div class=\"key-value-editor-header value-header\">\n" +
7437+
"{{valuePlaceholder}}\n" +
74427438
"</div>\n" +
74437439
"</div>\n" +
74447440
"<div ng-model=\"entries\" class=\"key-value-editor\" as-sortable=\"dragControlListeners\">\n" +

dist/styles/main.css

+8-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)