From 3f86fecc0f58d13cc5003e4face9c379b1bb9d79 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 19 May 2023 15:00:25 +0100 Subject: [PATCH 1/2] IconPicker - added config for `hideColors` option --- .../IconPickerConfigurationEditor.cs | 21 +++++++++++++++++++ .../IconPicker/IconPickerDataEditor.cs | 20 +++++++++++++++++- .../DataEditors/IconPicker/icon-picker.js | 7 ++++++- .../SocialLinksConfigurationEditor.cs | 7 ++++++- 4 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs index db04e8797..6e3b9e1e1 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs +++ b/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,19 @@ public IconPickerConfigurationEditor(IIOHelper ioHelper) { "size", "large" }, } }); + +#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 } } } diff --git a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerDataEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerDataEditor.cs index fd8072fa4..90b576b57 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerDataEditor.cs +++ b/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 } } diff --git a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.js b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.js index acc4e3013..45a9e3642 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.js +++ b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.js @@ -10,7 +10,11 @@ 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; @@ -34,6 +38,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(" "); diff --git a/src/Umbraco.Community.Contentment/DataEditors/SocialLinks/SocialLinksConfigurationEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/SocialLinks/SocialLinksConfigurationEditor.cs index 55f44af3e..f25cb681e 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/SocialLinks/SocialLinksConfigurationEditor.cs +++ b/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 + { + { "hideColors", Constants.Values.True }, + { "size", "small" }, + } }, new NotesConfigurationField(ioHelper, $@"
Would you like to use a custom icon? From 5114b25c1cebb2921cb1f54033df96d6c4963e63 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 19 May 2023 15:03:33 +0100 Subject: [PATCH 2/2] IconPicker - added "small" config option Updated the "small" markup to match Umbraco's UI. --- .../IconPickerConfigurationEditor.cs | 20 +++++++++++++++++++ .../DataEditors/IconPicker/icon-picker.html | 10 +++++++--- .../DataEditors/IconPicker/icon-picker.js | 4 ++++ 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs index 6e3b9e1e1..f92e1e924 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs +++ b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/IconPickerConfigurationEditor.cs @@ -41,6 +41,26 @@ public IconPickerConfigurationEditor(IIOHelper ioHelper) } }); + 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 + { + { 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)) { diff --git a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.html b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.html index 0feadd92f..ca264bd97 100644 --- a/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.html +++ b/src/Umbraco.Community.Contentment/DataEditors/IconPicker/icon-picker.html @@ -1,6 +1,7 @@