Icon Picker - support for hideColor and size

src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs

@@ -8,6 +8,10 @@
 using Umbraco.Core.IO;
 using Umbraco.Core.PropertyEditors;
 #else
+#if NET7_0_OR_GREATER
+using System;
+using Umbraco.Cms.Core.Configuration;
+#endif
 using Umbraco.Cms.Core.IO;
 using Umbraco.Cms.Core.PropertyEditors;
 using Umbraco.Extensions;
@@ -17,7 +21,11 @@ namespace Umbraco.Community.Contentment.DataEditors
 {
     internal sealed class IconPickerConfigurationEditor : ConfigurationEditor
     {
+#if NET7_0_OR_GREATER
+        public IconPickerConfigurationEditor(IIOHelper ioHelper, IUmbracoVersion umbracoVersion)
+#else
         public IconPickerConfigurationEditor(IIOHelper ioHelper)
+#endif
             : base()
         {
             Fields.Add(new ConfigurationField
@@ -32,6 +40,39 @@ public IconPickerConfigurationEditor(IIOHelper ioHelper)
                     { "size", "large" },
                 }
             });
+
+            Fields.Add(new ConfigurationField
+            {
+                Key = "size",
+                Name = "Size",
+                Description = "Select the size of icon picker. The default is 'large'.",
+                View = ioHelper.ResolveRelativeOrVirtualUrl(ButtonsDataListEditor.DataEditorViewPath),
+                Config = new Dictionary<string, object>
+                {
+                    { Constants.Conventions.ConfigurationFieldAliases.Items, new[]
+                        {
+                            new DataListItem { Name = "Small", Value = "small" },
+                            new DataListItem { Name = "Large", Value = "large" }
+                        }
+                    },
+                    { Constants.Conventions.ConfigurationFieldAliases.DefaultValue, "large" },
+                    { "labelStyle", "text" },
+                    { "size", "m" },
+                }
+            });
+
+#if NET7_0_OR_GREATER
+            if (umbracoVersion.Version >= new Version(11, 2))
+            {
+                Fields.Add(new ConfigurationField
+                {
+                    Key = "hideColors",
+                    Name = "Hide colors?",
+                    Description = "Select to hide the color options in the icon picker panel.",
+                    View = "boolean",
+                });
+            }
+#endif
         }
     }
 }

src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerDataEditor.cs

@@ -9,6 +9,7 @@
 using Umbraco.Core.PropertyEditors;
 using UmbConstants = Umbraco.Core.Constants;
 #else
+using Umbraco.Cms.Core.Configuration;
 using Umbraco.Cms.Core.IO;
 using Umbraco.Cms.Core.PropertyEditors;
 using UmbConstants = Umbraco.Cms.Core.Constants;
@@ -33,17 +34,34 @@ public sealed class IconPickerDataEditor : DataEditor
 
         private readonly IIOHelper _ioHelper;
 
+#if NET7_0_OR_GREATER
+        private readonly IUmbracoVersion _umbracoVersion;
+#endif
+
 #if NET472
         public IconPickerDataEditor(IIOHelper ioHelper, ILogger logger)
             : base(logger)
 #else
-        public IconPickerDataEditor(IIOHelper ioHelper, IDataValueEditorFactory dataValueEditorFactory)
+        public IconPickerDataEditor(
+            IIOHelper ioHelper,
+#if NET7_0_OR_GREATER
+            IUmbracoVersion umbracoVersion,
+#endif
+            IDataValueEditorFactory dataValueEditorFactory)
             : base(dataValueEditorFactory)
 #endif
         {
             _ioHelper = ioHelper;
+
+#if NET7_0_OR_GREATER
+            _umbracoVersion = umbracoVersion;
+#endif
         }
 
+#if NET7_0_OR_GREATER
+        protected override IConfigurationEditor CreateConfigurationEditor() => new IconPickerConfigurationEditor(_ioHelper, _umbracoVersion);
+#else
         protected override IConfigurationEditor CreateConfigurationEditor() => new IconPickerConfigurationEditor(_ioHelper);
+#endif
     }
 }

src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.html

@@ -1,6 +1,7 @@
 <!-- Copyright © 2013-present Umbraco.
    - This Source Code has been derived from Umbraco CMS.
    - https://github.com/umbraco/Umbraco-CMS/blob/release-8.1.0/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
+   - https://github.com/umbraco/Umbraco-CMS/blob/release-8.17.0/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/icon.prevalues.html
    - Modified under the permissions of the MIT License.
    - Modifications are licensed under the Mozilla Public License.
    - Copyright © 2019 Lee Kelleher.
@@ -32,7 +33,10 @@
             </ul>
         </div>
     </div>
-    <a class="lk-icon-picker-small" href="" ng-if="vm.size === 'small'" ng-click="vm.pick()" prevent-default>
-        <umb-icon icon="{{model.value}}" class="icon" ng-class="{ 'medium': vm.allowAdd === false, 'small icon-add': vm.allowAdd }"></umb-icon>
-    </a>
+    <button ng-if="vm.size === 'small'" type="button" class="btn-reset umb-panel-header-icon" ng-click="vm.pick()" ng-class="{'-placeholder': !model.value }" title="{{model.value}}">
+        <umb-icon icon="{{model.value}}" class="icon" ng-if="model.value"></umb-icon>
+        <span class="umb-panel-header-icon-text" ng-if="!model.value">
+            <localize key="settings_addIcon">Add icon</localize>
+        </span>
+    </button>
 </div>

src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.js

@@ -10,14 +10,22 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.
 
         // console.log("icon-picker.model", $scope.model);
 
-        var defaultConfig = { defaultIcon: "", size: "large" };
+        var defaultConfig = {
+            defaultIcon: "",
+            hideColors: 0, // NOTE: This only applies to Umbraco 11.2+.
+            size: "large"
+        };
         var config = Object.assign({}, defaultConfig, $scope.model.config);
 
         var vm = this;
 
         function init() {
             $scope.model.value = $scope.model.value || config.defaultIcon;
 
+            if (Array.isArray(config.size) === true) {
+                config.size = config.size[0];
+            }
+
             vm.label = $scope.model.value.replace(" ", "<br>");
             vm.size = config.size;
 
@@ -34,6 +42,7 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.
             var iconPicker = {
                 icon: parts[0],
                 color: parts[1],
+                hideColors: Object.toBoolean(config.hideColors),
                 submit: function (model) {
                     $scope.model.value = [model.icon, model.color].filter(s => s).join(" ");
 

src/Umbraco.Community.Contentment/DataEditors/SocialLinks/SocialLinksConfigurationEditor.cs

@@ -91,7 +91,12 @@ public SocialLinksConfigurationEditor(IIOHelper ioHelper)
                             Key = "icon",
                             Name = "Icon",
                             Description = "Typically select the logo for the social network.",
-                            View = ioHelper.ResolveRelativeOrVirtualUrl("~/umbraco/views/propertyeditors/listview/icon.prevalues.html"),
+                            View = ioHelper.ResolveRelativeOrVirtualUrl(IconPickerDataEditor.DataEditorViewPath),
+                            Config = new Dictionary<string, object>
+                            {
+                                { "hideColors", Constants.Values.True },
+                                { "size", "small" },
+                            }
                         },
                         new NotesConfigurationField(ioHelper, $@"<details class=""alert alert-info"">
 <summary>Would you like to use a <strong>custom icon</strong>?</summary>