From ca74100e12d36ca8750b72643b613dff674d39e3 Mon Sep 17 00:00:00 2001
From: Niels Hartvig <nh@umbraco.dk>
Date: Tue, 6 Mar 2018 16:11:44 +0100
Subject: [PATCH] TLC for multiple pre values editor

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  5 +-
 .../components/prevalues/multivalues.less     | 53 +++++++++++++++++++
 .../prevalueeditors/multivalues.controller.js |  8 +++
 .../views/prevalueeditors/multivalues.html    | 22 +++++---
 4 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index d2a80d93aa..fb31889fd0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -168,6 +168,9 @@
 //used for property editors
 @import "property-editors.less";
 
+//used for prevalue editors
+@import "components/prevalues/multivalues.less";
+
 
 @import "typeahead.less";
 @import "hacks.less";
@@ -175,4 +178,4 @@
 @import "healthcheck.less";
 
 // cleanup properties.less when it is done
-@import "properties.less";
\ No newline at end of file
+@import "properties.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
new file mode 100644
index 0000000000..a307e5c585
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/prevalues/multivalues.less
@@ -0,0 +1,53 @@
+.umb-prevalues-multivalues {
+    width: 400px;
+}
+
+.umb-prevalues-multivalues__left {
+    display: flex;
+    flex: 1 1 auto;
+}
+
+.umb-prevalues-multivalues__right {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+}
+
+.umb-prevalues-multivalues__add  {
+    display: flex;
+}
+
+.umb-prevalues-multivalues__add input {
+    width: 320px;
+}
+
+.umb-prevalues-multivalues__add input {
+    display: flex;
+}
+
+.umb-prevalues-multivalues__add button {
+    margin: 0 6px 0 0;
+    float: right
+}
+
+.umb-prevalues-multivalues__listitem {
+    display: flex;
+    padding: 6px;
+    margin: 10px 0px !important;
+    background: #F3F3F5;
+    cursor: move;
+}
+
+.umb-prevalues-multivalues__listitem i {
+    display: flex;
+    align-items: center;
+    margin-right: 5px
+}
+
+.umb-prevalues-multivalues__listitem a {
+    cursor: pointer;
+}
+
+.umb-prevalues-multivalues__listitem input {
+    width: 295px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.controller.js
index a55a40d5ec..a8f5093b9e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.controller.js
@@ -5,6 +5,7 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiValuesControl
 
         $scope.newItem = "";
         $scope.hasError = false;
+        $scope.focusOnNew = false;
        
         if (!angular.isArray($scope.model.value)) {
 
@@ -43,6 +44,7 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiValuesControl
                     $scope.model.value.push({ value: $scope.newItem });
                     $scope.newItem = "";
                     $scope.hasError = false;
+                    $scope.focusOnNew = true;
                     return;
                 }
             }
@@ -73,6 +75,12 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.MultiValuesControl
             }
         };
 
+        $scope.createNew = function (event) {
+            if (event.keyCode == 13) {
+                $scope.add(event);
+            }
+        }
+
         function getElementIndexByPrevalueText(value) {
             for (var i = 0; i < $scope.model.value.length; i++) {
                 if ($scope.model.value[i].value === value) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.html
index 561872cb2f..5c7d3b52c2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/multivalues.html
@@ -1,13 +1,21 @@
-<div class="umb-editor" ng-controller="Umbraco.PrevalueEditors.MultiValuesController">
-    <div class="control-group">
-        <input name="newItem" type="text" ng-model="newItem" val-highlight="{{hasError}}" />
-        <button class="btn" ng-click="add($event)">Add</button>
+<div class="umb-editor umb-prevalues-multivalues" ng-controller="Umbraco.PrevalueEditors.MultiValuesController">
+    <div class="control-group umb-prevalues-multivalues__add">
+        <div class="umb-prevalues-multivalues__left">
+            <input overlay-submit-on-enter="false" name="newItem" focus-when="{{focusOnNew}}" ng-keydown="createNew($event)" type="text" ng-model="newItem" val-highlight="{{hasError}}" />
+        </div>
+        <div class="umb-prevalues-multivalues__right">
+            <button class="btn btn-info" ng-click="add($event)">Add</button>
+        </div>
     </div>
     <div ui-sortable="sortableOptions">
-        <div class="control-group" ng-repeat="item in model.value">
+        <div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="item in model.value">
             <i class="icon icon-navigation handle"></i>
-            <input type="text" ng-model="item.value" val-server="item_{{$index}}" required />
-            <button class="btn btn-danger" ng-click="remove(item, $event)">Remove</button>
+            <div class="umb-prevalues-multivalues__left">
+                <input type="text" ng-model="item.value" val-server="item_{{$index}}" required />
+            </div>
+            <div class="umb-prevalues-multivalues__right">
+                <a class="umb-node-preview__action" ng-click="remove(item, $event)">Remove</a>
+            </div>
         </div>
     </div>
 </div>