From 3e415b242f74443ce4389904416c8388cc52bb46 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sat, 7 Jan 2023 03:15:51 +0100
Subject: [PATCH] Hide colors from icon picker (#13079)

* Ensure border is set so it doesn't jump on selection

* Allow to hide color from icon picker

* Use CSS grid instead to fill icons and with minimum width

* Remove odd flex size

* Set minimum to 60px instead
---
 .../src/less/components/umb-iconpicker.less            | 10 +++++-----
 .../iconpicker/iconpicker.controller.js                | 10 ++++------
 .../common/infiniteeditors/iconpicker/iconpicker.html  |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
index 5062aae660..79aee5056e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -1,18 +1,18 @@
 .umb-iconpicker {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    gap: 0.25rem;
     margin: 0;
 }
 
 .umb-iconpicker-item {
     display: flex;
     flex-direction: row;
-    flex: 0 0 14.28%;
     justify-content: center;
     align-items: center;
     margin-bottom: 0;
     overflow: hidden;
+    border: 1px solid transparent;
 }
 
 .umb-iconpicker-item button {
@@ -41,7 +41,7 @@
 
 .umb-iconpicker-item.-selected {
     background: @gray-10;
-    border: solid 1px @ui-active;
+    border-color: @ui-active;
     border-radius: @baseBorderRadius;
     box-sizing: border-box;
 }
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 51c2c15898..98f37555f7 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
@@ -65,21 +65,19 @@ function IconPickerController($scope, localizationService, iconHelper) {
                         vm.loading = false;
                     });
             });
-
+        
         // set a default color if nothing is passed in
         vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors.find(x => x.default);
 
-
         // if an icon is passed in - preselect it
         vm.icon = $scope.model.icon ? $scope.model.icon : undefined;
     }
 
     function setTitle() {
         if (!$scope.model.title) {
-            localizationService.localize("defaultdialogs_selectIcon")
-                .then(function(data){
-                    $scope.model.title = data;
-                });
+            localizationService.localize("defaultdialogs_selectIcon").then(data => {
+                $scope.model.title = data;
+            });
         }
     }
 
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 837aa43cc3..d0bc9bdf26 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
@@ -28,7 +28,7 @@
                     </umb-search-filter>
                 </div>
 
-                <div class="umb-control-group mt3">
+                <div class="umb-control-group mt3" ng-if="model.hideColors !== true">
                     <umb-color-swatches
                         use-color-class="true"
                         colors="vm.colors"