Make sure the color picker label is stored on first select (#4325)

(cherry picked from commit 4dd51f645a)

src/SolutionInfo.cs

@@ -11,5 +11,5 @@ using System.Resources;
 
 [assembly: AssemblyVersion("1.0.*")]
 
-[assembly: AssemblyFileVersion("7.14.0")]
-[assembly: AssemblyInformationalVersion("7.14.0")]
+[assembly: AssemblyFileVersion("7.13.2")]
+[assembly: AssemblyInformationalVersion("7.13.2")]

src/Umbraco.Core/Configuration/UmbracoVersion.cs

@@ -6,7 +6,7 @@ namespace Umbraco.Core.Configuration
 {
     public class UmbracoVersion
     {
-        private static readonly Version Version = new Version("7.14.0");
+        private static readonly Version Version = new Version("7.13.2");
 
         /// <summary>
         /// Gets the current version of Umbraco.

src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js

@@ -38,7 +38,7 @@ Use this directive to generate color swatches to pick from.
                 scope.selectedColor = color;
 
                 if (scope.onSelect) {
-                    scope.onSelect(color);
+                    scope.onSelect({color: color });
                 }
             };
         }

src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js

@@ -1,4 +1,4 @@
-function ColorPickerController($scope) {
+function ColorPickerController($scope, angularHelper) {
 
     //setup the default config
     var config = {
@@ -12,32 +12,13 @@ function ColorPickerController($scope) {
     //map back to the model
     $scope.model.config = config;
     
-    function convertArrayToDictionaryArray(model) {
-        //now we need to format the items in the dictionary because we always want to have an array
-        var newItems = [];
-        for (var i = 0; i < model.length; i++) {
-            newItems.push({ id: model[i], sortOrder: 0, value: model[i] });
-        }
-
-        return newItems;
-    }
-
-
-    function convertObjectToDictionaryArray(model) {
-        //now we need to format the items in the dictionary because we always want to have an array
-        var newItems = [];
-        var vals = _.values($scope.model.config.items);
-        var keys = _.keys($scope.model.config.items);
-
-        for (var i = 0; i < vals.length; i++) {
-            var label = vals[i].value ? vals[i].value : vals[i];
-            newItems.push({ id: keys[i], sortOrder: vals[i].sortOrder, value: label });
-        }
-
-        return newItems;
-    }
     $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
 
+    $scope.model.activeColor = {
+        value: "",
+        label: ""
+    };
+
     if ($scope.isConfigured) {
 
         for (var key in $scope.model.config.items) {
@@ -77,29 +58,7 @@ function ColorPickerController($scope) {
         //now make the editor model the array
         $scope.model.config.items = items;
     }
-
-    $scope.toggleItem = function (color) {
-
-        var currentColor = ($scope.model.value && $scope.model.value.hasOwnProperty("value"))
-            ? $scope.model.value.value
-            : $scope.model.value;
-
-        var newColor;
-        if (currentColor === color.value) {
-            // deselect
-            $scope.model.value = $scope.model.useLabel ? { value: "", label: "" } : "";
-            newColor = "";
-        }
-        else {
-            // select
-            $scope.model.value = $scope.model.useLabel ? { value: color.value, label: color.label } : color.value;
-            newColor = color.value;
-        }
-
-        // this is required to re-validate
-        $scope.propertyForm.modelValue.$setViewValue(newColor);
-    };
-
+    
     // Method required by the valPropertyValidator directive (returns true if the property editor has at least one color selected)
     $scope.validateMandatory = function () {
         var isValid = !$scope.model.validation.mandatory || (
@@ -115,27 +74,41 @@ function ColorPickerController($scope) {
     }
     $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
 
-    // A color is active if it matches the value and label of the model.
-    // If the model doesn't store the label, ignore the label during the comparison.
-    $scope.isActiveColor = function (color) {
+    $scope.onSelect = function (color) {
+        // did the value change?
+        if ($scope.model.value.value === color) {
+            // User clicked the currently selected color
+            // to remove the selection, they don't want
+            // to select any color after all.
+            // Unselect the color and mark as dirty
+            $scope.model.activeColor = null;
+            $scope.model.value = null;
+            angularHelper.getCurrentForm($scope).$setDirty();
 
-        // no value
-        if (!$scope.model.value)
-            return false;
+            return;
+        }
 
-        // Complex color (value and label)?
-        if (!$scope.model.value.hasOwnProperty("value"))
-            return $scope.model.value === color.value;
-
-        return $scope.model.value.value === color.value && $scope.model.value.label === color.label;
-    };
+        // yes, update the model (label + value) according to the new color
+        var selectedItem = _.find($scope.model.config.items, function (item) {
+            return item.value === color;
+        });
+        if (!selectedItem) {
+            return;
+        }
+        $scope.model.value = {
+            label: selectedItem.label,
+            value: selectedItem.value
+        };
+        // make sure to set dirty
+        angularHelper.getCurrentForm($scope).$setDirty();
+    }
 
     // Finds the color best matching the model's color,
     // and sets the model color to that one. This is useful when
     // either the value or label was changed on the data type.
     function initActiveColor() {
 
-        // no value
+        // no value - initialize default value
         if (!$scope.model.value)
             return;
 
@@ -144,10 +117,6 @@ function ColorPickerController($scope) {
             $scope.model.value = { value: $scope.model.value, label: $scope.model.value };
         }
 
-        // Complex color (value and label)?
-        if (!$scope.model.value.hasOwnProperty("value"))
-            return;
-
         var modelColor = $scope.model.value.value;
         var modelLabel = $scope.model.value.label;
 
@@ -187,8 +156,8 @@ function ColorPickerController($scope) {
 
         // If a match was found, set it as the active color.
         if (foundItem) {
-            $scope.model.value.value = foundItem.value;
-            $scope.model.value.label = foundItem.label;
+            $scope.model.activeColor.value = foundItem.value;
+            $scope.model.activeColor.label = foundItem.label;
         }
     }
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html

@@ -6,9 +6,10 @@
     </div>
 
     <umb-color-swatches colors="model.config.items"
-                        selected-color="model.value.value"
+                        selected-color="model.activeColor.value"
                         size="m"
-                        use-label="model.useLabel">
+                        use-label="model.useLabel"
+                        on-select="onSelect(color)">
     </umb-color-swatches>
 
     <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory" />

src/Umbraco.Web.UI/Umbraco.Web.UI.csproj

@@ -1038,9 +1038,9 @@ xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.1\x86\*.* "$(TargetDir)x86\"
         <WebProjectProperties>
           <UseIIS>True</UseIIS>
           <AutoAssignPort>True</AutoAssignPort>
-          <DevelopmentServerPort>7140</DevelopmentServerPort>
+          <DevelopmentServerPort>7132</DevelopmentServerPort>
           <DevelopmentServerVPath>/</DevelopmentServerVPath>
-          <IISUrl>http://localhost:7140</IISUrl>
+          <IISUrl>http://localhost:7132</IISUrl>
           <NTLMAuthentication>False</NTLMAuthentication>
           <UseCustomServer>False</UseCustomServer>
           <CustomServerUrl>