Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Sep 09, 2023 @ 10:24
    Jesper Skjønnemand
    0

    Eye Dropper Palette, how to change default colors

    I'm a fan of the Eye Dropper in Umbraco as it is a very intuitive and elegant UI and gives editors total creative freedom to create beautiful landing pages.

    However, I would like to edit the palette on the left side to contain only approved "corporate" colors. Is this possible? How?

    I looked in the uda for my data type but only found this

    {
      "Name": "DRC eye dropper",
      "Alias": null,
      "EditorAlias": "Umbraco.ColorPicker.EyeDropper",
      "DatabaseType": 1,
      "Configuration": {
        "showAlpha": true,
        "showPalette": true
      },
      "Parent": "umb://data-type-container/f7e7879b4a9b4514ab08f35e9044ca62",
      "Udi": "umb://data-type/7ee6f333f51b432495568ba92383f800",
      "Dependencies": [
        {
          "Udi": "umb://data-type-container/f7e7879b4a9b4514ab08f35e9044ca62",
          "Ordering": true,
          "Mode": 0
        }
      ],
      "__type": "Umbraco.Deploy,Umbraco.Deploy.Artifacts.DataTypeArtifact",
      "__version": "4.8.2"
    }
    
  • Marc Goodson 2149 posts 14354 karma points MVP 9x c-trib
    Sep 09, 2023 @ 14:50
    Marc Goodson
    101

    Hi Jesper

    The Umbraco.ColorPicker.Eyedropper is implemented using the following javascript plugin: Spectrum

    https://bgrins.github.io/spectrum/

    The idea is to provide the eye dropper tool to pick any color - but you can use it with a 'pallette' of predefined colours, and you can also tell the instance of spectrum to ONLY use the palette.

    https://bgrins.github.io/spectrum/#options-showPalette

    You can see in the examples how when you call initiate the plugin you can pass in the options for showPalette, showPaletteOnly, and then also a palette of colour options to pick...

    However, these options do not appear to be built into the UI for the Umbraco.ColorPicker.Eyedropper, the datatype uses the following umb-color-picker directive

    https://github.com/umbraco/Umbraco-CMS/blob/6d4809132815b41a6e048904d0769c042abde1cc/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorpicker.directive.js#L170

    (or at least I can't see any :-(, I may be wrong)

    But it looks like you could create your own 'Property Editor' that was a wrapper around this directive that set these options via 'defaultConfig' -

    https://our.umbraco.com/Documentation/Extending/Property-Editors/Package-Manifest/#default-config

    to configure the spectrum editor how you'd like it...

    ... alternatively if you just want the editors to pick from a palette of prescribed corporate colours, have a look at the alternative Color Picker Property Editor that enables you to do just that.

    https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/color-picker

    regards

    Marc

  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Sep 13, 2023 @ 07:50
    Jesper Skjønnemand
    0

    Hi Marc, thanks for a comprehensive reply with some very useful links. I will definitely look into the 'create your own' option as I want to keep the 'select any color and transparency' option to the right but simply provide easy access to corporate colors on the left. This is next level to me but probably a nice way to learn building custom property editors.

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Sep 13, 2023 @ 11:14
    Bjarne Fyrstenborg
    2

    Just want to eleborate that Eyedropper property editor isn't using the orginal spectrum project: https://bgrins.github.io/spectrum/

    but a fork of it:

    https://seballot.github.io/spectrum/

    https://github.com/seballot/spectrum/

    https://www.npmjs.com/package/spectrum-colorpicker2

    which has a few changes from the original spectrum color picker.

  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Sep 13, 2023 @ 12:49
    Jesper Skjønnemand
    0

    great

    and the palette is right there on line 56 in https://github.com/seballot/spectrum/blob/master/src/spectrum.js

    maybe I can find a way to modify this in "my" Umbraco.

  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Sep 13, 2023 @ 13:22
    Jesper Skjønnemand
    0

    Being on Umbraco Cloud I looked in KUDU and found spectrum.js which indeed looks identical to https://github.com/seballot/spectrum/blob/master/src/spectrum.js

    Modifying color codes in the palette does not have any immediate effect on the Eye Dropper datatype in Umbraco though.

    Any suggestions to next step?

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Sep 14, 2023 @ 14:29
    Bjarne Fyrstenborg
    1

    It should be possible to create your own property editor by using <umb-color-picker> directive.

    https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorpicker.directive.js#L33-L40

    You can add a custom configuration class inheriting the EyeDropperColorPickerConfiguration and extend with a Palettes property using a custom prevalue editor or eventually multivalues: https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Core/PropertyEditors/EyeDropperColorPickerConfiguration.cs#L6

    and a property editor similar to this with your custom view: https://github.com/umbraco/Umbraco-CMS/blob/1f24b795319681c4b8b34a4018b6f5498d585ee6/src/Umbraco.Core/PropertyEditors/EyeDropperColorPickerPropertyEditor.cs#L12

    Most of it can be archieved with a package.manifest, HTML, CSS and JS.

  • Bjarne Fyrstenborg 1281 posts 3991 karma points MVP 8x c-trib
    Sep 15, 2023 @ 08:14
    Bjarne Fyrstenborg
    2

    Hi Jesper

    Here an example how to handle this using a package.manifest (but you could also register it via C# by implementing a IManifestFilter: https://docs.umbraco.com/umbraco-cms/extending/property-editors/package-manifest or register the property editor using C#.

    In an App_Plugins folder place a package.manifest similar to this (I have used multivalues prevalue editor, but you could create your own to add and remove palettes):

    {
        "propertyEditors": [
            {
                "alias": "customEyeDropper",
                "name": "Custom Eyedropper",
                "icon": "icon-colorpicker",
                "editor": {
                    "view": "~/App_Plugins/CustomEyedropper/eyedropper.html"
                },
                "prevalues": {
                    "fields": [
                        {
                            "label": "Palettes",
                            "description": "Add, remove or sort palettes.",
                            "key": "palettes",
                            "view": "multivalues"
                        }
                    ]
                }
            }
        ],
        "javascript": [
            "~/App_Plugins/CustomEyedropper/eyedropper.controller.js"
        ]
    }
    

    The view and controller are basically a copy of the eyedroppper property editor found here https://github.com/umbraco/Umbraco-CMS/tree/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/eyedropper with a few changes:

    • Controller name in view and js changed to something unique
    • Config in controller modified to fetch palettes prevalue.

    //setup the default config
    const config = {
        showAlpha: true,
        showPalette: true,
        allowEmpty: true
    };
    
    // map the user config
    Utilities.extend(config, $scope.model.config);
    
    if (config.palettes.length) {
       config.palette = config.palettes.map(x => x.value);
       delete config.palettes;
    }
    
    // map back to the model
    $scope.model.config = config;
    

    It alias of prevalue was palette is would match spectrum colorpicker palette property https://seballot.github.io/spectrum/ and in that case you could just have this:

    //setup the default config
    const config = {
        showAlpha: true,
        showPalette: true,
        allowEmpty: true
    };
    
    // map the user config
    Utilities.extend(config, $scope.model.config);
    
    if (config.palette.length) {
       config.palette = config.palette.map(x => x.value);
    }
    
    // map back to the model
    $scope.model.config = config;
    

    enter image description here

    enter image description here

    View:

    <div ng-controller="Our.Umbraco.PropertyEditors.CustomEyeDropperColorPicker.Controller as vm">
    
        <umb-color-picker
            ng-model="vm.color"
            options="vm.options"
            on-change="vm.selectColor(color)"
            ng-attr-readonly="{{ readonly || undefined }}">
        </umb-color-picker>
    
        <input type="hidden" name="selectedColor" ng-model="model.selectedColor" val-property-validator="validateMandatory" />
    
    </div>
    

    Controller:

    function EyeDropperColorPickerController($scope, angularHelper) {
    
        const vm = this;
    
        //setup the default config
        const config = {
            showAlpha: true,
            showPalette: true,
            allowEmpty: true
        };
    
        // map the user config
        Utilities.extend(config, $scope.model.config);
    
        if (config.palettes.length) {
           config.palette = config.palettes.map(x => x.value);
           delete config.palettes;
        }
    
        // map back to the model
        $scope.model.config = config;
    
        vm.options = $scope.model.config;
    
        vm.color = $scope.model.value || null;
    
        vm.selectColor = function (color) {
            angularHelper.safeApply($scope, function () {
                vm.color = color ? color.toString() : null;
                $scope.model.value = vm.color;
                $scope.propertyForm.selectedColor.$setViewValue(vm.color);
            });
        };
    
        // Method required by the valPropertyValidator directive (returns true if the property editor has at least one color selected)
        $scope.validateMandatory = function () {
            var isValid = !$scope.model.validation.mandatory || (
                $scope.model.value != null
                && $scope.model.value != "");
    
            return {
                isValid: isValid,
                errorMsg: $scope.model.validation.mandatoryMessage || "Value cannot be empty",
                errorKey: "required"
            };
        };
    }
    
    angular.module("umbraco").controller("Our.Umbraco.PropertyEditors.CustomEyeDropperColorPicker.Controller", EyeDropperColorPickerController);
    

    Eventually you can also set showPaletteOnly: true if you don't want the full color spectrum to be displayed to content editors.

  • Marc Goodson 2149 posts 14354 karma points MVP 9x c-trib
    Sep 15, 2023 @ 08:41
    Marc Goodson
    1

    Hi Jesper

    Yes THIS what Bjarne says... is what I was vaguely explaining as the 'way to go'!

    Thanks Bjarne!!

    regards

    Marc

  • Jesper Skjønnemand 66 posts 441 karma points c-trib
    Sep 22, 2023 @ 07:21
    Jesper Skjønnemand
    0

    Hi Bjarne, this looks awesome. Custom Property Editors is unchartered terrain to me, but this looks like something I can follow step by step and --hopefully-- get some level of understanding of the ins and outs of those. I will find a quiet evening for this very soon (fingers crossed).

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Sep 13, 2023 @ 17:34
    Chriztian Steinmeier
    1

    Hi Jesper,

    Maybe have a look at the source code for my Color Selector property editor?

    It solves a similar problem, but without a full-blown color picker (it's mainly used by editors who knows how to get the hex color for any additional color that's not one of the presets :-)

    /Chriztian

Please Sign in or register to post replies

Write your reply to:

Draft