Support custom SVG icon in property actions

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

While working on #10757 I noticed it wasn't possible to use custom SVG icons in property actions.

This PR updates the code to support custom SVG icons in property actions using <umb-property-actions> component.

Currently this is using same approach as in #10757 using a property useLegacyIcon (default true) to make it backward compatible and without a breaking change.

var refillCoffeeAction = {
    label: 'Refill Coffee',
    //labelKey: '',
    //labelTokens: [],
    icon: "coffee-cup",
    useLegacyIcon: false,
    method: refillCoffee
};

var emptyCoffeeAction = {
    label: 'Empty Coffee',
    //labelKey: '',
    //labelTokens: [],
    icon: 'trash',
    method: emptyCoffee
};

var propertyActions = [
    refillCoffeeAction,
    emptyCoffeeAction
];

if ($scope.umbProperty) {
    $scope.umbProperty.setPropertyActions(propertyActions);
}

function refillCoffee() {
    alert("Coffee refilled!");
}

function emptyCoffee() {
    overlayService.confirmDelete({
        title: "Empty Coffee?",
        submit: function() {
            alert("Coffee empty!");
            overlayService.close();
        },
        close: function() {
            overlayService.close();
        }
    });
}

Example property editor:

CoffeeEditor.zip

Here is a custom coffee-cup.svg to extract to App_Plugins folder and used in the property editor.

CustomIcons.zip

Furthermore it also add color property to <umb-progress-bar> to support colors similar to <umb-progress-circle>

[umbrabot]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[umbrabot]

Hi there @bjarnef!

Thanks for the contribution here and apologies if it has been a while since you heard from us. We have been in the very fortunate position of having lots of work to do. With this in mind, we are writing to let you know that with the release of the Long Term Support (LTS) version, 8.18, we have now moved into the support phase of Umbraco 8. You can read all about that here but to surmise, we will be keeping Umbraco 8 safe and well by releasing patching for security or regression issues if they arise but no longer will we do that for bug fixes. The same is still true for features, although we stopped merging those some time ago.

We'd love for you to keep contributing and while we are not able to merge this to Umbraco 8, if this is still something you'd like to see in Umbraco 9, please take a look and either create an issue to say so or find an issue that already exists. We'll be happy to give you some input around how you can adjust your pull request to target Umbraco 9. Even better, it might be something that Umbraco 9 already does or has. In which case, enjoy!

Once again, a huge thank you for the time you have spent working with us.

#H5YR
Your friendly Umbraco GitHub bot 🤖 🙂