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>