From b656db3af37b94cb1321404dccc0dce430eac8f3 Mon Sep 17 00:00:00 2001
From: Tom Fulton <tomnf1@gmail.com>
Date: Fri, 16 May 2014 21:59:34 -0600
Subject: [PATCH] Allow colors to be toggled on/off in Color Picker - U4-4935

---
 .../colorpicker/colorpicker.controller.js                | 9 +++++++--
 .../views/propertyeditors/colorpicker/colorpicker.html   | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
index fb45b83fa0..89bc626d6a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
@@ -1,6 +1,11 @@
 function ColorPickerController($scope) {
-    $scope.selectItem = function (color) {
-        $scope.model.value = color;
+    $scope.toggleItem = function (color) {
+        if ($scope.model.value == color) {
+            $scope.model.value = "";
+        }
+        else {
+            $scope.model.value = color;
+        }
     };
     $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
index f8395296b7..d2bf2cf87c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
@@ -6,7 +6,7 @@
 
     <ul class="thumbnails color-picker">
         <li ng-repeat="(key, val) in model.config.items" ng-class="{active: model.value === val}">
-            <a ng-click="selectItem(val)" class="thumbnail" hex-bg-color="{{val}}">
+            <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val}}">
 
             </a>
         </li>