Picture elements position

[4ybaka]

Proposed change

This change simplifies configuration of Picture Elements card. Today when you need to position element you need to edit position in yaml (using keyboard) and compare with new position on card. It requires 3-5 edits that is not efficient. With this change when you are in element edit mode you can click on card where current element should be placed and position in yaml config will be updated with chosen position.

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [x] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [x] The code change is tested and works locally.
• [x] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

[4ybaka]

Can someone explain what linter expects here?

Checking formatting... [warn] src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts [warn] Code style issues found in the above file. Run Prettier with --write to fix. Error: Process completed with exit code 1.

[MindFreeze]

yarn lint:eslint will give you more info but yarn format will probably just fix it for you

[4ybaka]

Should I run it in devcontainer? I got next error there:

ha-venvvscode ➜ /workspaces/frontend $ yarn format

/workspaces/frontend/gallery/src/components/page-description.ts
  5:23  error  Missing file extension for "../../build/import-pages"  import/extensions

/workspaces/frontend/gallery/src/ha-gallery.ts
  12:32  error  Missing file extension for "../build/import-pages"  import/extensions

✖ 2 problems (2 errors, 0 warnings)

[4ybaka]

Usage example

[silamon]

The prettier warnings are still causing the CI to fail: You can run yarn run format:prettier to fix.

[4ybaka]

The prettier warnings are still causing the CI to fail: You can run yarn run format:prettier to fix.

fixed

[home-assistant[bot]]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks :+1:

Learn more about our pull request process.

[MindFreeze]

A text hint in the editor would be nice to explain that you can do this. I can't find a good example to guide you though

[4ybaka]

A text hint in the editor would be nice to explain that you can do this. I can't find a good example to guide you though

I have very bad UX skills so I can only add a note to the "Style" title but I don't think it is a good idea.

[MindFreeze]

We would really like to have this but there are a couple of issues with it:

• Isn't discoverable. This can easily be fixed by adding a <ha-alert> or something in the editor of the element when its position is appropriate
• This will cause unexpected behavior when editing composable cards like grid,horizontal-stack or vertical-stack with multiple picture-elements cards in them. This is not easy to solve and we want to come up with a general strategy for cards to send events to their specific editors because it can be useful for other cards too.

[4ybaka]

I'm afraid I will not be able to help with solution for 2, I have not enough knowledge about HA Frontend codebase. I hope core contributors will be able to define a solution for that problem and then I can follow the guidelines for this change.

[bramkragten]

Related: https://github.com/home-assistant/frontend/pull/25049

[bramkragten]

This seems to have gone stale, we do want this feature, so I will create a task that can be picked up later to finish this.