From 2d785af8216efe3ae9de088467f135b1202aaf9e Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sat, 5 Dec 2020 00:28:58 +0100
Subject: [PATCH] Use color picker component in block list editor configuration
 (#9056)

* Use color picker component in block list editor configuration

* Remove set color property

* Allow empty color

* Assign color value to properties

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 ...t.blockconfiguration.overlay.controller.js | 20 ++++++++++++++++++-
 .../blocklist.blockconfiguration.overlay.html | 12 +++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
index fb49e11aa9..cfeca6330c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
@@ -10,13 +10,19 @@
 (function () {
     "use strict";
 
-    function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService) {
+    function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService, angularHelper) {
 
         var unsubscribe = [];
 
         var vm = this;
         vm.block = $scope.model.block;
 
+        vm.colorPickerOptions = {
+            type: "color",
+            allowEmpty: true,
+            showAlpha: true
+        };
+
         loadElementTypes();
 
         function loadElementTypes() {
@@ -285,6 +291,18 @@
             entry.thumbnail = null;
         };
 
+        vm.changeIconColor = function (color) {
+            angularHelper.safeApply($scope, function () {
+                vm.block.iconColor = color ? color.toString() : null;
+            });
+        };
+
+        vm.changeBackgroundColor = function (color) {
+            angularHelper.safeApply($scope, function () {
+                vm.block.backgroundColor = color ? color.toString() : null;
+            });
+        };
+
         vm.submit = function() {
             if ($scope.model && $scope.model.submit) {
                 $scope.model.submit($scope.model);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
index 66c24e0da3..94d7d9810b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
@@ -157,7 +157,11 @@
                                 <div class="umb-el-wrap">
                                     <label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
                                     <div class="controls">
-                                        <input type="text" name="backgroundColor" ng-model="vm.block.backgroundColor"/>
+                                        <umb-color-picker
+                                            ng-model="vm.block.backgroundColor"
+                                            options="vm.colorPickerOptions"
+                                            on-change="vm.changeBackgroundColor(color)">
+                                        </umb-color-picker>
                                     </div>
                                 </div>
                             </div>
@@ -167,7 +171,11 @@
                                 <div class="umb-el-wrap">
                                     <label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
                                     <div class="controls">
-                                        <input type="text" name="iconColor" ng-model="vm.block.iconColor"/>
+                                        <umb-color-picker
+                                            ng-model="vm.block.iconColor"
+                                            options="vm.colorPickerOptions"
+                                            on-change="vm.changeIconColor(color)">
+                                        </umb-color-picker>
                                     </div>
                                 </div>
                             </div>