Color picker is working, added custom validation to the pre-values but need to get them working a bit better and showing the colors in the pre-val editor as well. Then also need to update the other list pre-value editors to be able to update values so we don't have to remove and re-add them.

src/Umbraco.Web.UI.Client/src/common/directives/valpropertymsg.directive.js

@@ -99,12 +99,20 @@ function valPropertyMsg(serverValidationManager) {
             // the form. Of course normal client-side validators will continue to execute.          
             scope.$watch("property.value", function (newValue) {
                 //we are explicitly checking for valServer errors here, since we shouldn't auto clear
-                // based on other errors.
-                if (formCtrl.$invalid && scope.formCtrl.$error.valServer !== undefined) {
+                // based on other errors. We'll also check if there's no other validation errors apart from valPropertyMsg, if valPropertyMsg
+                // is the only one, then we'll clear.
+
+                var errCount = 0;
+                for (var e in scope.formCtrl.$error) {
+                    errCount++;
+                }
+
+                if ((errCount === 1 && scope.formCtrl.$error.valPropertyMsg !== undefined) ||
+                    (formCtrl.$invalid && scope.formCtrl.$error.valServer !== undefined)) {
                     scope.errorMsg = "";
                     formCtrl.$setValidity('valPropertyMsg', true);
                 }
-            });
+            }, true);
             
             //listen for server validation changes
             // NOTE: we pass in "" in order to listen for all validation changes to the content property, not for

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -77,4 +77,8 @@
 @import "animations.less";
 @import "font-awesome.min.less"; // Remove when Helveticons/fontcustom is ready
 // @import "fontcustom.less";
+
+//used for property editors
+@import "property-editors.less";
+
 @import "hacks.less"; // Remove and rewrite before release

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -0,0 +1,17 @@
+//
+// Color picker
+// --------------------------------------------------
+
+ul.color-picker li {
+    padding: 2px;
+    margin: 3px;
+    border: 2px solid transparent;
+}
+ul.color-picker li.active {
+    border: 2px dashed #d9d9d9;
+}
+ul.color-picker li a  {
+  height: 50px;
+  display:block;
+  cursor:pointer;
+}

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

@@ -0,0 +1,8 @@
+angular.module("umbraco").controller("Umbraco.Editors.ColorPickerController",
+    function($scope) {
+        
+        $scope.selectItem = function(color) {
+            $scope.model.value = color;
+        };
+
+    });

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

@@ -0,0 +1,11 @@
+<div ng-controller="Umbraco.Editors.ColorPickerController">
+
+    <ul class="thumbnails color-picker">
+        <li class="span1" ng-repeat="(key, val) in model.config.items" ng-class="{active: model.value === val}">
+            <a ng-click="selectItem(val)" class="thumbnail" style="background-color:#{{val}}">
+                
+            </a>
+        </li>
+    </ul>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdown/dropdown.prevalue.controller.js

@@ -22,12 +22,6 @@ angular.module("umbraco").controller("Umbraco.Editors.DropdownPreValueController
                 return i === item;
             });
             
-            //setup the dictionary from array
-            $scope.model.value = {};
-            for (var i = 0; i < $scope.model.value.length; i++) {
-                //just make the key the iteration
-                $scope.model.value[i] = $scope.model.value[i];
-            }
         };
 
         $scope.add = function (evt) {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdown/dropdown.prevalue.html

@@ -8,6 +8,6 @@
             <input type="text" ng-model="item" />
             <button class="btn" ng-click="remove(item, $event)">Remove</button>
         </li>
-    </ul>
+    </ul>    
 </div>
  

src/Umbraco.Web/Editors/DataTypeValidateAttribute.cs

@@ -88,7 +88,7 @@ namespace Umbraco.Web.Editors
 
                 foreach (var v in propertyEditor.PreValueEditor.Fields.SelectMany(x => x.Validators))
                 {
-                    foreach (var result in v.Validate(postedValue != null ? postedValue.ToString() : null, preVal.Key, propertyEditor))
+                    foreach (var result in v.Validate(postedValue, preVal.Key, propertyEditor))
                     {
                         //if there are no member names supplied then we assume that the validation message is for the overall property
                         // not a sub field on the property editor

src/Umbraco.Web/PropertyEditors/ColorPickerPropertyEditor.cs

@@ -0,0 +1,73 @@
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Text.RegularExpressions;
+using Newtonsoft.Json.Linq;
+using Umbraco.Core;
+using Umbraco.Core.PropertyEditors;
+
+namespace Umbraco.Web.PropertyEditors
+{
+    [PropertyEditor(Constants.PropertyEditors.ColorPicker, "Color Picker", "colorpicker")]
+    public class ColorPickerPropertyEditor : PropertyEditor
+    {
+        /// <summary>
+        /// Return a custom pre-value editor
+        /// </summary>
+        /// <returns></returns>
+        /// <remarks>
+        /// We are just going to re-use the ValueListPreValueEditor
+        /// </remarks>
+        protected override PreValueEditor CreatePreValueEditor()
+        {
+            return new ColorListPreValueEditor();
+        }
+
+    }
+
+    internal class ColorListPreValueEditor : ValueListPreValueEditor
+    {
+        public ColorListPreValueEditor()
+        {
+            var fields = CreatePreValueFields();
+            //change the description
+            fields.First().Description = "Add and remove colors in HEX format without a prefixed '#'";
+            //need to have some custom validation happening here
+            fields.First().Validators = new List<ValidatorBase>
+                {
+                    new ColorListValidator()
+                };
+
+            Fields = fields;
+        }
+
+        internal class ColorListValidator : ValidatorBase
+        {
+            public override IEnumerable<ValidationResult> Validate(object value, string preValues, PropertyEditor editor)
+            {
+                var json = value as JArray;
+                if (json != null)
+                {
+                    //validate each item
+                    foreach (var i in json)
+                    {
+                        //NOTE: we will be removing empty values when persisting so no need to validate
+                        var asString = i.ToString();
+                        if (asString.IsNullOrWhiteSpace() == false)
+                        {
+                            if (Regex.IsMatch(asString, "^([0-9a-f]{3}|[0-9a-f]{6})$", RegexOptions.IgnoreCase) == false)
+                            {
+                                yield return new ValidationResult("The value " + asString + " is not a valid hex color", new[]
+                                    {
+                                        //we'll make the server field name the value of the hex color so we can wire it back up to the
+                                        //individual row in the UI.
+                                        asString
+                                    });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/Umbraco.Web/PropertyEditors/TextStringPropertyEditor.cs

@@ -4,11 +4,13 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using Umbraco.Core;
+using Umbraco.Core.Models;
 using Umbraco.Core.PropertyEditors;
+using Umbraco.Core.Services;
 
 namespace Umbraco.Web.PropertyEditors
 {
-    [PropertyEditor(Constants.PropertyEditors.Textbox, "Textstring", "textstring")]
+    [PropertyEditor(Constants.PropertyEditors.Textbox, "Textbox", "textbox")]
     public class TextStringPropertyEditor : PropertyEditor
     {        
     }

src/Umbraco.Web/PropertyEditors/ValueListPreValueEditor.cs

@@ -91,6 +91,12 @@ namespace Umbraco.Web.PropertyEditors
                 var index = 0;
                 foreach (var item in val)
                 {
+                    var asString = item.ToString();
+                    //don't allow empties
+                    if (asString.IsNullOrWhiteSpace())
+                    {
+                        continue;
+                    }
                     result.Add(index.ToInvariantString(), item.ToString());
                     index++;
                 }

src/Umbraco.Web/Umbraco.Web.csproj

@@ -316,6 +316,7 @@
     <Compile Include="Models\Mapping\PreValueDisplayResolver.cs" />
     <Compile Include="Models\PagedResult.cs" />
     <Compile Include="PropertyEditors\CheckBoxListPropertyEditor.cs" />
+    <Compile Include="PropertyEditors\ColorPickerPropertyEditor.cs" />
     <Compile Include="PropertyEditors\DatePropertyEditor.cs" />
     <Compile Include="PropertyEditors\DateTimePropertyEditor.cs" />
     <Compile Include="PropertyEditors\DateTimeValidator.cs" />