Include .environment-from-* classes to control single ui-select inputs and buttons

Author: sg00dwin

app/styles/_kve.less

@@ -1,6 +1,7 @@
 // Angular Key Value Editor styles
 
-.key-value-editor {
+.key-value-editor,
+.environment-from-editor {
   &.as-sortable-dragging {
     .as-sortable-item-delete,
     .input-group-addon,
@@ -101,6 +102,9 @@
     border-collapse: separate;
     display: table;
     position: relative;
+    &.faux-input-single-input {
+      width: 100%;
+    }
   }
 
   .key-value-editor-buttons {
@@ -110,12 +114,23 @@
     width: (@as-sortable-item-button-width * 2);
   }
 
-  .key-value-editor-entry {
+  .key-value-editor-entry,
+  .environment-from-entry {
     display: table;
     padding-right: (@as-sortable-item-button-width * 2);
     position: relative;
     table-layout: fixed;
     width: 100%;
+    .environment-from-input {
+      float: left;
+      padding-right: 5px;
+      width: 50%;
+      .faux-input-group,
+      .ui-select {
+        float: left;
+        width: 100%;
+      }
+    }
   }
 
   .key-value-editor-input .ui-select {
@@ -140,10 +155,12 @@
   width: 50%;
 }
 
-.key-value-editor-entry-header {
+.key-value-editor-entry-header,
+.environment-from-editor-entry-header {
   padding-right: (@as-sortable-item-button-width * 2);
 }
 
-.key-value-editor-header {
+.key-value-editor-header,
+.environment-from-editor-header {
   margin-bottom: 5px;
 }

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

@@ -1,24 +1,24 @@
 <ng-form name="$ctrl.editEnvironmentFromForm" novalidate>
   <div
     ng-if="$ctrl.showHeader"
-    class="key-value-editor-entry key-value-editor-entry-header">
-    <div class="form-group key-value-editor-header value-header">
+    class="environment-from-entry environment-from-editor-entry-header">
+    <div class="form-group environment-from-editor-header value-header">
       <div class="input-group">
         <span class="help-block">{{$ctrl.selectorPlaceholder}}</span>
       </div>
     </div>
   </div>
 
-  <div ng-model="$ctrl.entries" class="key-value-editor" as-sortable="$ctrl.dragControlListeners">
+  <div ng-model="$ctrl.entries" class="environment-from-editor" as-sortable="$ctrl.dragControlListeners">
     <div
-      class="key-value-editor-entry"
+      class="environment-from-entry"
       ng-class-odd="'odd'"
       ng-class-even="'even'"
       ng-repeat="entry in $ctrl.envFromEntries"
       as-sortable-item>
 
       <div
-        class="form-group key-value-editor-input"
+        class="form-group environment-from-input"
         ng-class="{ 'has-error': (forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$invalid && forms.editEnvironmentFrom[uniqueForValue(unique, $index)].$touched) }">
         <div ng-if="$ctrl.isEnvFromReadonly(entry)" class="faux-input-group">
           <div class="faux-form-control readonly">
@@ -57,31 +57,31 @@
           </div>
         </div>
 
-        <div>
-          <span
-            ng-if="(!$ctrl.cannotSort) && ($ctrl.entries.length > 1)"
-            class="fa fa-bars sort-row"
-            role="button"
-            aria-label="Move row"
-            aria-grabbed="false"
-            as-sortable-item-handle></span>
-          <a
-            href=""
-            class="pficon pficon-close delete-row as-sortable-item-delete"
-            role="button"
-            aria-label="Delete row"
-            ng-hide="$ctrl.cannotDeleteAny"
-            ng-click="$ctrl.deleteEntry($index, 1)"></a>
-          <a
-            ng-href="{{entry.selectedEnvFrom | navigateResourceURL}}"
-            class="pficon"
-            ng-show="entry.selectedEnvFrom"
-            ng-click="$ctrl.viewDetail(entry)">View {{entry.selectedEnvFrom.kind | humanizeKind : true}}</a>
-        </div>
+      </div>
+      <div class="environment-from-input">
+        <span
+        ng-if="(!$ctrl.cannotSort) && ($ctrl.entries.length > 1)"
+        class="fa fa-bars sort-row"
+        role="button"
+        aria-label="Move row"
+        aria-grabbed="false"
+        as-sortable-item-handle></span>
+        <a
+        href=""
+        class="pficon pficon-close delete-row as-sortable-item-delete"
+        role="button"
+        aria-label="Delete row"
+        ng-hide="$ctrl.cannotDeleteAny || $ctrl.isReadonlyAny"
+        ng-click="$ctrl.deleteEntry($index, 1)"></a>
+        <a
+        ng-href="{{entry.selectedEnvFrom | navigateResourceURL}}"
+        class="pficon"
+        ng-show="entry.selectedEnvFrom"
+        ng-click="$ctrl.viewDetail(entry)">View {{entry.selectedEnvFrom.kind | humanizeKind : true}}</a>
       </div>
     </div>
 
-    <div class="key-value-editor-entry form-group" ng-if="(!$ctrl.cannotAdd)">
+    <div class="environment-from-entry form-group" ng-if="(!$ctrl.cannotAdd)">
       <a
         href=""
         class="add-row-link"
@@ -91,4 +91,3 @@
     </div>
   </div>
 </ng-form>
-

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

@@ -37,7 +37,7 @@ <h4>Variables</h4>
 
     <h4>
       Environment From
-      <span class="pficon pficon-info"
+      <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>