From 3c2e7759fb1190e2a428a4fe2911b652cffa46fa Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 2 Jun 2021 03:00:01 +0200
Subject: [PATCH] Support custom SVG icon in block list editor (#10365)

* Use custom SVG icon in block card

* Adjust icons in block list editor views
---
 .../components/blockcard/umb-block-card.html  |  8 +++-
 .../inlineblock/inlineblock.editor.html       |  2 +-
 .../inlineblock/inlineblock.editor.less       | 41 +++++++++++++++----
 .../labelblock/labelblock.editor.html         |  2 +-
 .../labelblock/labelblock.editor.less         |  2 +-
 .../unsupportedblock.editor.html              |  2 +-
 .../unsupportedblock.editor.less              |  2 +-
 7 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
index c1656c33ff..276cc2491a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html
@@ -2,7 +2,13 @@
     <div class="__showcase"
         ng-class="{'--error':vm.elementTypeModel === null}"
         ng-style="{'background-color': vm.blockConfigModel ? vm.blockConfigModel.backgroundColor : '', 'background-image': vm.styleBackgroundImage}">
-        <i ng-if="vm.blockConfigModel == null || vm.blockConfigModel.thumbnail == null" class="__icon {{ vm.elementTypeModel ? vm.elementTypeModel.icon : 'icon-block' }}" ng-attr-style="{{'color:'+vm.blockConfigModel.iconColor+' !important'}}" aria-hidden="true"></i>
+        <div class="__icon">
+            <umb-icon icon="{{vm.elementTypeModel ? vm.elementTypeModel.icon : 'icon-block'}}"
+                      class="{{vm.elementTypeModel ? vm.elementTypeModel.icon : 'icon-block'}}"
+                      ng-attr-style="{{'color:' + vm.blockConfigModel.iconColor + ' !important'}}"
+                      ng-if="vm.blockConfigModel == null || vm.blockConfigModel.thumbnail == null">
+            </umb-icon>
+        </div>
     </div>
     <div class="__info" ng-if="vm.elementTypeModel !== null">
         <div class="__name" ng-bind="vm.elementTypeModel.name"></div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
index 6cf717df81..c6b5e0a4fb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
@@ -5,7 +5,7 @@
             ng-click="vm.openBlock(block)"
             ng-focus="block.focus">
         <span class="caret"></span>
-        <i class="icon {{block.content.icon}}" aria-hidden="true"></i>
+        <umb-icon icon="{{block.content.icon}}" class="icon {{block.content.icon}}"></umb-icon>
         <span class="name">{{block.label}}</span>
     </button>
     <div class="blockelement-inlineblock-editor__inner" ng-class="{'--singleGroup':block.content.variants[0].tabs.length === 1}" ng-if="block.active === true">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
index 9b408becce..5b155ac5ad 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
@@ -27,8 +27,8 @@
             transition: transform 80ms ease-out;
         }
 
-        i {
-            font-size: 22px;
+        .icon {
+            font-size: 1.1rem;
             display: inline-block;
             vertical-align: middle;
         }
@@ -48,17 +48,21 @@
     ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > .umb-block-list__block--content > div > & {
         > button {
             color: @formErrorText;
+
             .show-validation-type-warning & {
                 color: @formWarningText;
             }
+
             span.caret {
                 border-top-color: @formErrorText;
+
                 .show-validation-type-warning & {
                     border-top-color: @formWarningText;
                 }
             }
         }
     }
+
     ng-form.ng-invalid-val-server-match-content > .umb-block-list__block:not(.--active) > .umb-block-list__block--content > div > & {
         > button {
             span.name {
@@ -78,22 +82,41 @@
                     padding: 2px;
                     line-height: 10px;
                     background-color: @formErrorText;
+
                     .show-validation-type-warning & {
                         background-color: @formWarningText;
                     }
+
                     font-weight: 900;
-        
                     animation-duration: 1.4s;
                     animation-iteration-count: infinite;
                     animation-name: blockelement-inlineblock-editor--badge-bounce;
                     animation-timing-function: ease;
+
                     @keyframes blockelement-inlineblock-editor--badge-bounce {
-                        0%   { transform: translateY(0); }
-                        20%  { transform: translateY(-4px); }
-                        40%  { transform: translateY(0); }
-                        55%  { transform: translateY(-2px); }
-                        70%  { transform: translateY(0); }
-                        100% { transform: translateY(0); }
+                        0% {
+                            transform: translateY(0);
+                        }
+
+                        20% {
+                            transform: translateY(-4px);
+                        }
+
+                        40% {
+                            transform: translateY(0);
+                        }
+
+                        55% {
+                            transform: translateY(-2px);
+                        }
+
+                        70% {
+                            transform: translateY(0);
+                        }
+
+                        100% {
+                            transform: translateY(0);
+                        }
                     }
                 }
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
index f51ea4607c..a5c4993505 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html
@@ -3,6 +3,6 @@
         ng-focus="block.focus"
         ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
         val-server-property-class="">
-    <i class="icon {{block.content.icon}}" aria-hidden="true"></i>
+    <umb-icon icon="{{block.content.icon}}" class="icon {{block.content.icon}}"></umb-icon>
     <span>{{block.label}}</span>
 </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
index 837fd3f564..8391923339 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
@@ -16,7 +16,7 @@
     user-select: none;
     transition: border-color 120ms, background-color 120ms;
 
-    > i {
+    > .icon {
         font-size: 22px;
         margin-right: 10px;
         display: inline-block;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html
index d5b0ddfd04..2252db3745 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.html
@@ -1,6 +1,6 @@
 <div class="blockelement-unsupportedblock-editor blockelement__draggable-element" ng-focus="block.focus">
     <div class="__header">
-        <i class="icon icon-alert" aria-hidden="true"></i>
+        <umb-icon icon="icon-alert" class="icon icon-alert"></umb-icon>
         <span>{{block.label}}</span>
     </div>
     <div class="__body">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.less
index d3eddd0815..8b8fcef9e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/unsupportedblock/unsupportedblock.editor.less
@@ -18,7 +18,7 @@
         background-color: @gray-11;
         color: @gray-6;
         
-        i {
+        .icon {
             font-size: 22px;
             margin-right: 5px;
             display: inline-block;