From 90a282c083e8a465db65476e926086c6159c6e62 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Fri, 1 Feb 2019 20:09:54 +0100
Subject: [PATCH 1/2] Fix the icon color picker

---
 .../directives/components/umbcolorswatches.directive.js       | 4 ++--
 .../infiniteeditors/iconpicker/iconpicker.controller.js       | 3 ++-
 .../views/common/infiniteeditors/iconpicker/iconpicker.html   | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
index aac11bfd22..9401cacab1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js
@@ -36,7 +36,7 @@ Use this directive to generate color swatches to pick from.
             scope.setColor = function (color, $index, $event) {
                 scope.selectedColor = color;
                 if (scope.onSelect) {
-                    scope.onSelect(color.color, $index, $event);
+                    scope.onSelect({color: color, $index: $index, $event: $event});
                     $event.stopPropagation();
                 }
             };
@@ -55,7 +55,7 @@ Use this directive to generate color swatches to pick from.
                 colors: '=?',
                 size: '@',
                 selectedColor: '=',
-                onSelect: '=',
+                onSelect: '&',
                 useLabel: '=',
                 useColorClass: '=?'
             },
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
index 16d6cf23fc..9c7e6de83b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
@@ -71,7 +71,8 @@ function IconPickerController($scope, iconHelper, localizationService) {
     }
 
     function selectColor(color, $index, $event) {
-        $scope.model.color = color;
+        $scope.model.color = color.value;
+        vm.color = color.value;
     }
 
     function close() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index 55c4317279..b29d9af2fa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -37,7 +37,7 @@
                         colors="vm.colors"
                         selected-color="vm.color"
                         size="s"
-                        on-select="vm.selectColor">
+                        on-select="vm.selectColor(color)">
                     </umb-color-swatches>
                 </div>
 

From 6874a5486b328ceb8d747f4fa10cdd33c849a455 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Fri, 1 Feb 2019 20:28:27 +0100
Subject: [PATCH 2/2] Fix selected color

---
 .../infiniteeditors/iconpicker/iconpicker.controller.js   | 8 ++++++--
 .../common/infiniteeditors/iconpicker/iconpicker.html     | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
index 9c7e6de83b..471d23ae84 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
@@ -49,7 +49,7 @@ function IconPickerController($scope, iconHelper, localizationService) {
         });
 
         // set a default color if nothing is passed in
-        vm.color = $scope.model.color ? $scope.model.color : vm.colors[0].value;
+        vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors[0];
 
         // if an icon is passed in - preselect it
         vm.icon = $scope.model.icon ? $scope.model.icon : undefined;
@@ -70,9 +70,13 @@ function IconPickerController($scope, iconHelper, localizationService) {
         submit();
     }
 
+    function findColor(value) {
+        return _.findWhere(vm.colors, {value: value});
+    }
+
     function selectColor(color, $index, $event) {
         $scope.model.color = color.value;
-        vm.color = color.value;
+        vm.color = color;
     }
 
     function close() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index b29d9af2fa..3caa6ae03d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -44,9 +44,9 @@
                 <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
                 <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
-                    <ul class="umb-iconpicker" ng-class="vm.color" ng-show="vm.icons">
+                    <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
                         <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm) track by $id(icon)">
-                            <a href="#" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color)" prevent-default>
+                            <a href="#" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)" prevent-default>
                                 <i class="{{icon}} large"></i>
                             </a>
                         </li>