Merge pull request #1962 from benjaminapetersen/bpeterse/issue/1863-kve-sorting-bugs

Merged by openshift-bot

Author: OpenShift Bot

Diff for: app/styles/_kve.less

@@ -118,13 +118,6 @@
     width: 100%;
   }
 
-  .key-value-editor-input,
-  .key-value-editor-header {
-    float: left;
-    padding-right: 5px;
-    width: 50%;
-  }
-
   .key-value-editor-input .ui-select {
     @media(min-width: @screen-md-min) {
       float: left;
@@ -138,8 +131,19 @@
       }
     }
   }
+}
 
-  .key-value-editor-header {
-    margin-bottom: 5px;
-  }
+.key-value-editor .key-value-editor-input,
+.key-value-editor-header {
+  float: left;
+  padding-right: 5px;
+  width: 50%;
+}
+
+.key-value-editor-entry-header {
+  padding-right: (@as-sortable-item-button-width * 2);
+}
+
+.key-value-editor-header {
+  margin-bottom: 5px;
 }

Diff for: app/views/directives/key-value-editor.html

@@ -1,21 +1,21 @@
 <ng-form name="forms.keyValueEditor" novalidate ng-if="entries">
-  <div class="key-value-editor" ng-model="entries" as-sortable="dragControlListeners">
 
-    <div
-      ng-if="showHeader"
-      class="key-value-editor-entry">
-      <div class="form-group key-value-editor-header key-header">
-        <div class="input-group">
-          <span class="help-block">{{keyPlaceholder}}</span>
-        </div>
+  <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="form-group key-value-editor-header value-header">
-        <div class="input-group">
-          <span class="help-block">{{valuePlaceholder}}</span>
-        </div>
+    </div>
+    <div class="form-group key-value-editor-header value-header">
+      <div class="input-group">
+        <span class="help-block">{{valuePlaceholder}}</span>
       </div>
     </div>
+  </div>
 
+  <div ng-model="entries" class="key-value-editor" as-sortable="dragControlListeners">
     <div
       class="key-value-editor-entry"
       ng-class-odd="'odd'"
@@ -149,7 +149,7 @@
             </div>
           </div>
           <div ng-if="!isValueFromReadonly(entry)">
-            <div class="ui-select">
+            <div class="ui-select key-value-editor-select">
               <ui-select ng-model="entry.selectedValueFrom" ng-required="true" on-select="valueFromObjectSelected(entry, $select.selected)">
                 <ui-select-match placeholder="Select a resource">
                   <span>
@@ -164,7 +164,7 @@
                 </ui-select-choices>
               </ui-select>
             </div>
-            <div class="ui-select">
+            <div class="ui-select key-value-editor-select">
               <ui-select ng-model="entry.selectedValueFromKey" ng-required="true" on-select="valueFromKeySelected(entry, $select.selected)">
                 <ui-select-match placeholder="Select key">
                   {{$select.selected}}

Diff for: bower.json

@@ -38,7 +38,7 @@
     "clipboard": "1.5.8",
     "ansi_up": "1.3.0",
     "angular-extension-registry": "1.2.6",
-    "ng-sortable": "1.3.4",
+    "ng-sortable": "1.3.8",
     "ui-select": "angular-ui-select#0.19.4",
     "matchHeight": "0.7.0",
     "angular-inview": "2.2.0",

Diff for: dist/scripts/templates.js

@@ -7272,8 +7272,7 @@ 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 class=\"key-value-editor\" ng-model=\"entries\" as-sortable=\"dragControlListeners\">\n" +
-    "<div ng-if=\"showHeader\" class=\"key-value-editor-entry\">\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" +
@@ -7285,6 +7284,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div ng-model=\"entries\" class=\"key-value-editor\" as-sortable=\"dragControlListeners\">\n" +
     "<div class=\"key-value-editor-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in entries\" as-sortable-item>\n" +
     "\n" +
     "<div class=\"form-group key-value-editor-input\" ng-class=\"{ 'has-error' :  (forms.keyValueEditor[uniqueForKey(unique, $index)].$invalid && forms.keyValueEditor[uniqueForKey(unique, $index)].$touched) }\">\n" +
@@ -7347,7 +7347,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"!isValueFromReadonly(entry)\">\n" +
-    "<div class=\"ui-select\">\n" +
+    "<div class=\"ui-select key-value-editor-select\">\n" +
     "<ui-select ng-model=\"entry.selectedValueFrom\" ng-required=\"true\" on-select=\"valueFromObjectSelected(entry, $select.selected)\">\n" +
     "<ui-select-match placeholder=\"Select a resource\">\n" +
     "<span>\n" +
@@ -7360,7 +7360,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</ui-select-choices>\n" +
     "</ui-select>\n" +
     "</div>\n" +
-    "<div class=\"ui-select\">\n" +
+    "<div class=\"ui-select key-value-editor-select\">\n" +
     "<ui-select ng-model=\"entry.selectedValueFromKey\" ng-required=\"true\" on-select=\"valueFromKeySelected(entry, $select.selected)\">\n" +
     "<ui-select-match placeholder=\"Select key\">\n" +
     "{{$select.selected}}\n" +

Diff for: dist/scripts/vendor.js

@@ -69288,7 +69288,6 @@ angular.element(r[0].body).unbind("keydown", H);
 }), B = function(e) {
 return "function" == typeof a.sortableScope.options.placeholder ? angular.element(a.sortableScope.options.placeholder(e)) : "string" == typeof a.sortableScope.options.placeholder ? angular.element(a.sortableScope.options.placeholder) : angular.element(r[0].createElement(e.element.prop("tagName")));
 }, x = function(e) {
-e.preventDefault();
 var t, i = function() {
 angular.element(r).unbind("mousemove", o), angular.element(r).unbind("touchmove", o), s.unbind("mouseup", i), s.unbind("touchend", i), s.unbind("touchcancel", i);
 }, o = function(r) {
@@ -69315,7 +69314,7 @@ var s, l, c, f, m;
 if ((!M || !n.isTouchInvalid(o)) && N && p) {
 if (o.preventDefault(), s = n.eventObj(o), a.callbacks.dragMove !== angular.noop && a.sortableScope.$apply(function() {
 a.callbacks.dragMove(v, y, s);
-}), l = s.pageX - r[0].documentElement.scrollLeft, c = s.pageY - (i.pageYOffset || r[0].documentElement.scrollTop), m = angular.element(r[0].elementFromPoint(l, c)), p.addClass(t.hiddenClass), p.removeClass(t.hiddenClass), n.movePosition(s, p, v, y, w, _), p.addClass(t.dragging), !(f = h(m)) || !f.type) return;
+}), l = s.pageX - r[0].documentElement.scrollLeft, c = s.pageY - (i.pageYOffset || r[0].documentElement.scrollTop), p.addClass(t.hiddenClass), m = angular.element(r[0].elementFromPoint(l, c)), p.removeClass(t.hiddenClass), n.movePosition(s, p, v, y, w, _), p.addClass(t.dragging), !(f = h(m)) || !f.type) return;
 if ("handle" === f.type && (f = f.itemScope), "item" !== f.type && "sortable" !== f.type) return;
 if ("item" === f.type && f.accept(a, f.sortableScope, f)) {
 m = f.element;