From 5f94cb83ed37fdbcbf3eae731518bc0dcb249474 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 7 Jun 2021 02:28:47 +0200
Subject: [PATCH] Support custom SVG icon in grid editor row configuration
 (#10361)

* Use custom svg icon in grid editor row configuration

* Use umb-icon in grid editor placeholder

* Use control icon in grid editor placeholder

* use umb-icon in itempicker to ensure svg icons are displayed

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
(cherry picked from commit f0e13e87d50598a98645820a8935f5857a1f9a93)
---
 .../src/less/components/umb-form-check.less   | 20 ++++++++++++-------
 .../src/less/components/umb-grid.less         |  6 +++---
 .../grid/dialogs/rowconfig.html               |  2 +-
 .../grid/editors/embed.controller.js          |  4 +++-
 .../propertyeditors/grid/editors/embed.html   |  2 +-
 .../grid/editors/macro.controller.js          |  2 ++
 .../propertyeditors/grid/editors/macro.html   |  4 ++--
 .../grid/editors/media.controller.js          |  2 ++
 .../propertyeditors/grid/editors/media.html   |  3 ++-
 .../grid/editors/textstring.html              |  8 ++++++--
 .../propertyeditors/grid/grid.controller.js   |  1 -
 11 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
index a96c59de84..9be50b877a 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
@@ -14,13 +14,12 @@
         margin-left: 30px;
         position: relative;
     }
-    
 
-    &.-small-text{
+    &.-small-text {
         font-size: 13px;
     }
 
-    &.-bold{
+    &.-bold {
         font-weight: 700;
     }
 
@@ -38,12 +37,15 @@
         &:hover ~ .umb-form-check__state .umb-form-check__check {
             border-color: @inputBorderFocus;
         }
+
         &:checked ~ .umb-form-check__state .umb-form-check__check {
             border-color: @ui-option-type;
         }
+
         &[type='checkbox']:checked ~ .umb-form-check__state .umb-form-check__check {
             background-color: @ui-option-type;
         }
+
         &:checked:hover ~ .umb-form-check__state .umb-form-check__check {
             &::before {
                 background: @ui-option-type-hover;
@@ -80,16 +82,22 @@
         border: 2px solid @inputBorderTabFocus;
         margin: -1px;
     }
+
     .tabbing-active &.umb-form-check--checkbox &__input:focus ~ .umb-form-check__state .umb-form-check__check {
         outline: 2px solid @inputBorderTabFocus;
     }
+
     .tabbing-active &.umb-form-check--checkbox &__input:checked:focus ~ .umb-form-check__state .umb-form-check__check {
         border-color: @white;
     }
-
     // add spacing between when flexed/inline, equal to the width of the input
     .flex & + & {
-        margin-left:@checkboxWidth;
+        margin-left: @checkboxWidth;
+    }
+
+    .icon,
+    .umb-icon {
+        font-size: 1.2rem;
     }
 
     &__state {
@@ -98,10 +106,8 @@
         width: 20px;
         position: absolute;
         top: 0;
-
     }
 
-
     &__check {
         display: flex;
         position: relative;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 281284a5ca..033fe8fc0e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -404,12 +404,12 @@
     box-sizing: border-box;
 }
 
-.umb-grid .umb-editor-placeholder i {
+.umb-grid .umb-editor-placeholder .icon {
     color: @gray-8;
     font-size: 85px;
-    line-height: 85px;
+    line-height: 1;
     display: block;
-    margin-bottom: 10px;
+    margin: 10px auto;
 }
 
 .umb-grid .umb-editor-preview {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
index 5cf0676526..312c158351 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
@@ -109,7 +109,7 @@
                                             <umb-checkbox model="editor.allowed"
                                                           input-id="editorconfig-{{$index}}"
                                                           on-change="vm.selectEditor(currentCell, editor)">
-                                                <i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
+                                                <umb-icon icon="{{editor.icon}}" class="icon {{editor.icon}}"></umb-icon>
                                                 <small class="input-label--small">({{editor.alias}})</small>
                                             </umb-checkbox>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js
index dbc847738c..909b2a555f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js
@@ -3,7 +3,9 @@ angular.module("umbraco")
     function ($scope, $timeout, $sce, editorService) {
 
         function onInit() {
-            
+
+            $scope.control.icon = $scope.control.icon || 'icon-movie-alt';
+
             var embedPreview = Utilities.isObject($scope.control.value) && $scope.control.value.preview ? $scope.control.value.preview : $scope.control.value;
 
             $scope.trustedValue = embedPreview ? $sce.trustAsHtml(embedPreview) : null;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
index 14741d6ca6..9673109816 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html
@@ -1,7 +1,7 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
 
     <button type="button" class="btn-reset umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
-        <i class="icon icon-movie-alt"></i>
+        <umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
         <span class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></span>
     </button>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
index 5e66684ac5..486bdab044 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.controller.js
@@ -2,6 +2,8 @@ angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.Grid.MacroController",
         function ($scope, $timeout, editorService, macroResource, macroService, localizationService, $routeParams) {
 
+            $scope.control.icon = $scope.control.icon || 'icon-settings-alt';
+
             localizationService.localize("grid_clickToInsertMacro").then(function(label) {
                 $scope.title = label;
             });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
index c07d29d89c..300ec91bcc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/macro.html
@@ -2,9 +2,9 @@
 
 	<button type="button" class="btn-reset umb-editor-placeholder" ng-click="setMacro()">
 		<span ng-if="!preview">
-			<i class="icon icon-settings-alt"></i>
+			<umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
 			<span class="help-text">{{title}}</span>
-        </span>
+		</span>
 		<span ng-if="preview" style="text-align: left; pointer-events: none; cursor: default;"
 			ng-bind-html="preview">
 		</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
index 94ea4b8604..91da54d4ad 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.controller.js
@@ -2,6 +2,8 @@ angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.Grid.MediaController",
     function ($scope, userService, editorService, localizationService) {
 
+        $scope.control.icon = $scope.control.icon || 'icon-picture';
+
         $scope.thumbnailUrl = getThumbnailUrl();
 
         if (!$scope.model.config.startNodeId) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
index 2f73dc82ec..1b2299c893 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/media.html
@@ -1,6 +1,7 @@
 <div ng-controller="Umbraco.PropertyEditors.Grid.MediaController">
+
     <button type="button" class="btn-reset umb-editor-placeholder" ng-click="setImage()" ng-if="control.value === null">
-        <i class="icon icon-picture"></i>
+        <umb-icon icon="{{control.icon}}" class="icon {{control.icon}}"></umb-icon>
         <span ng-id="!control.$inserted" class="help-text">
             <localize key="grid_clickToInsertImage">Click to insert image</localize>
         </span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
index 98e81d1d26..89689e42cb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/textstring.html
@@ -3,7 +3,11 @@
 		rows="1"
 		umb-auto-resize
 		umb-auto-focus
-		class="textstring input-block-level" id="{{control.$uniqueId}}_text"
+		class="textstring input-block-level"
+		id="{{control.$uniqueId}}_text"
 		ng-model="control.value"
-		ng-attr-style="{{control.editor.config.style}}" localize="placeholder" placeholder="@grid_placeholderWriteHere"></textarea>
+		ng-attr-style="{{control.editor.config.style}}"
+		localize="placeholder"
+		placeholder="@grid_placeholderWriteHere">
+	</textarea>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 15f5ceaa88..3de340a083 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -318,7 +318,6 @@ angular.module("umbraco")
             // Add items overlay menu
             // *********************************************
             $scope.openEditorOverlay = function (event, area, index, key) {
-
                 const dialog = {
                     view: "itempicker",
                     filter: area.$allowedEditors.length > 15,