From 7355ba4b235a2ec9ad3cd61262a56673e5cf9ac3 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 4 Oct 2018 08:36:21 +0200
Subject: [PATCH] Add option to rename colorpicker labels (#3121)

---
 .../src/less/property-editors.less            | 19 +++++++++++--------
 .../colorpicker/colorpicker.prevalues.html    | 12 ++++++++----
 .../multicolorpicker.controller.js            |  6 ++++--
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 1c647eb1d0..d14a1abae9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -144,11 +144,14 @@ div.umb-codeeditor .umb-btn-toolbar {
 /* pre-value editor */
 .control-group.color-picker-preval {
     .thumbnail {
-        width: 36px;
+        width: 34px;
+        height: 34px;
         min-width: auto;
         border: none;
         cursor: move;
         border-radius: 3px;
+        margin-top: auto;
+        margin-bottom: auto;
     }
 
     .handle {
@@ -160,19 +163,19 @@ div.umb-codeeditor .umb-btn-toolbar {
     div.color-picker-prediv {
         display: inline-flex;
         align-items: center;
-        max-width: 85%;
+        max-width: 100%;
+        flex: 1;
 
         pre {
             display: inline-flex;
             font-family: monospace;
-            margin-right: 10px;
-            margin-left: 10px;
+            margin-left: 15px;
+            margin-right: 15px;
             white-space: nowrap;
             overflow: hidden;
             margin-bottom: 0;
             vertical-align: middle;
-            padding-top: 7px;
-            padding-bottom: 7px;
+            padding: 6px 10px;
             background: #f7f7f7;
             flex: 0 0 auto;
         }
@@ -201,11 +204,11 @@ div.umb-codeeditor .umb-btn-toolbar {
 
     label {
         border: 1px solid #fff;
-        padding: 7px 10px;
+        padding: 6px 10px;
         font-family: monospace;
         border: 1px solid #dfdfe1;
         background: #f7f7f7;
-        margin: 0 15px 0 0;
+        margin: 0 15px 0 3px;
         border-radius: 3px;
     }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
index 3d9e2efdf8..262c8593ec 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.prevalues.html
@@ -3,18 +3,22 @@
         <div class="umb-prevalues-multivalues__left">
             <input name="newColor" type="hidden" />
             <label for="newColor" val-highlight="{{hasError}}">#{{newColor}}</label>
-            <input name="newLabel" type="text" ng-model="newLabel" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" />
+            <input name="newLabel" type="text" ng-model="newLabel" focus-when="{{focusOnNew}}" class="umb-editor color-label" placeholder="Label" ng-show="labelEnabled" />
         </div>
         <div class="umb-prevalues-multivalues__right">
             <button class="btn btn-info add" ng-click="add($event)"><localize key="general_add">Add</localize></button>
         </div>
     </div>
     <div ui-sortable="sortableOptions" ng-model="model.value">
-        <div class="control-group umb-prevalues-multivalues__listitem color-picker-preval" ng-repeat="item in model.value">
+        <div class="control-group umb-prevalues-multivalues__listitem color-picker-preval" ng-repeat="item in model.value track by $id(item)">
             <i class="icon icon-navigation handle"></i>
             <div class="umb-prevalues-multivalues__left">
-                <div class="thumbnail span1" hex-bg-color="{{item.value}}" bg-orig="transparent"></div>
-                <div class="color-picker-prediv"><pre>#{{item.value}}</pre><span>{{item.label}}</span></div>
+                <div class="thumbnail span1" hex-bg-color="{{item.value}}" hex-bg-orig="transparent"></div>
+                <div class="color-picker-prediv">
+                    <pre>#{{item.value}}</pre>
+                    <span ng-bind="item.value" ng-if="!labelEnabled"></span>
+                    <input type="text" ng-if="labelEnabled" ng-model="item.label" val-server="item_{{$index}}" required />
+                </div>
             </div>
             <div class="umb-prevalues-multivalues__right">
                 <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
index 7ae728a85a..287a0f48fc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/multicolorpicker.controller.js
@@ -5,8 +5,9 @@
         var defaultLabel = null;
 
         $scope.newColor = defaultColor;
-        $scope.newLavel = defaultLabel;
+        $scope.newLabel = defaultLabel;
         $scope.hasError = false;
+        $scope.focusOnNew = false;
 
         $scope.labels = {};
 
@@ -104,7 +105,6 @@
         };
 
         $scope.add = function (evt) {
-
             evt.preventDefault();
 
             if ($scope.newColor) {
@@ -117,7 +117,9 @@
                         value: $scope.newColor,
                         label: newLabel
                     });
+                    $scope.newLabel = "";
                     $scope.hasError = false;
+                    $scope.focusOnNew = true;
                     return;
                 }