Sticky period selector for energy dashboard

[MindFreeze]

Proposed change

Sticks to the bottom. We can further improve the styling later but this improves usability now.

Added a dialog scrim when the datepicker is open

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: https://github.com/orgs/home-assistant/discussions/2015
• Link to documentation pull request:

Checklist

• [ ] The code change is tested and works locally.
• [ ] 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

[piitaya]

Should we use backdrop instead of blur? Like dialog?

[karwosts]

There's something off about the page height/scrollbar. Looks like this always forces the page to add scrolling, even when there's nothing to scroll to.

[karwosts]

These icons in the toolbar all shift to the left when the calendar picker opens

[dcapslock]

Can the placement be flexible if using stratgey for custom dashbaord. e.g. float top rather than bottom?

[MindFreeze]

Can the placement be flexible if using stratgey for custom dashbaord. e.g. float top rather than bottom?

Not right now. I am going for a quick fix with this. We will work on an improved selector later

[dcapslock]

OK. Sounds like a plan.

[Mariusthvdb]

This is truly great! So much looking forward to see this happen in HA. Thanks for implementing.

---

will sound familiar too, but if this will be anywhere near a production state, please make the selector bar use a theme var for border-radius. so important for overall appearance in the Frontend designs (compare the Home/for you in Home dashboard)

[MindFreeze]

Added the backdrop to hui-energy-period-selector and used the css vars from the dialog but they are not set for the backdrop by default so I added blur(4px) as the fallback again

[piitaya]

I did a change to use fixed instead of sticky : https://github.com/home-assistant/frontend/compare/floating-period...fixed_energy_selector

We can not really use sticky as we want the bar always fixed at the bottom.

Using sticky

Using fixed

[MindFreeze]

I did a change to use fixed instead of sticky

Merged in. Thanks.