Block configuration adjustments

[bjarnef]

Prerequisites

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

Description

A few adjustments to the block configuration.

• Property info button overlapped label
• Most of property labels in overlay used for="iconcolor" which didn't make sense. For-attribute target the equivalent value in id attribute. Currently it doesn't really work for color picker component - ideally it should be a button element.
• Aligned trash icon in delete button.
• I have tried many different ways to stop event bubbling with using enter keypress on delete button in block card, but yet it triggered to card click event, which open the edit view of the block. However I found a workaround to set ng-click="$event.stopPropagation()" on parent wrapper + tabindex="-1" to not focus this element when navigating via keyboard. It seems to work as expected.

Before

chrome_VIcv9TY4De.mp4

After

chrome_MNyxtF55z1.mp4

[github-actions]

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 🤖 🙂

[bjarnef]

@nielslyngsoe @nathanwoulfe I found a workaround to my old question here #9062 (comment)

Maybe not ideal, but it works 😄🎉
Alternatively the name could edit/open the dialog and not the entire box.. or a background layer and on top of that the actions button. That way the click event wouldn't bubble to parent click event.

Or the hacky workaround by @nathanwoulfe here: ef63fb7 ..

[nielslyngsoe]

Big thanks @bjarnef really important things to get corrected!
I'm off to test this :-)

[bjarnef]

@nielslyngsoe can we close this one if it has been resolved in this PR? #13220

[nul800sebastiaan]

Just merged this with the latest to see the effect on this PR and indeed everything was already up to date as Niels said, so closing this one.