Custom Lovelace View Layouts #6557
Conversation
|
This should be at the view level. The dashboard level would be another component. |
|
Just a thought I had: I think we should send the Parent height down to the view instead of the amount of columns. Or just let the view itself use a resize observer so we don't send an update to the view every pixel. |
| viewConfig.panel | ||
| ? PANEL_VIEW_LAYOUT | ||
| : viewConfig.layout || DEFAULT_VIEW_LAYOUT |
There was a problem hiding this comment.
We still need to be backwards compatible with the old panel config format?
There was a problem hiding this comment.
It is compatible. It checks if the flag is set and runs the panel view instead
| editModeChanged = | ||
| !oldLovelace || lovelace.editMode !== oldLovelace.editMode; | ||
| } | ||
| this._createCard(); |
There was a problem hiding this comment.
We are now recreating the card on every state change?
There was a problem hiding this comment.
And we no longer set the theme
There was a problem hiding this comment.
And we need to update hass if it is changed on the card.
this._card.hass = this.hass;There was a problem hiding this comment.
Updating hass happens in the hui-view. Where the cards are created.
There was a problem hiding this comment.
The theme is currently being applied in hui-view as well. Do we need to apply it in each separate view instead?
There was a problem hiding this comment.
We still call this function on every state change? Should then only be called when edit mode is changed and the first time?
|
We should write a dev blog post about this change, both for the new functionality for devs, and because it will probably break some custom cards? |
|
Yea we should also see what does break off the bat when this is merged. @iantrich or @thomasloven maybe one of you could test a few custom cards on this branch and see if it immediately breaks anything? I did test with the Button Card (Custom) and the basic config doesn't seem to be broken |
| if (changedProperties.has("hass") && changedProperties.size === 1) { | ||
| return; | ||
| } | ||
|
|
||
| const oldHass = changedProperties.get("hass") as HomeAssistant; | ||
|
|
||
| if ( | ||
| (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) || | ||
| (!oldHass && this.hass) | ||
| ) { | ||
| this._updateColumns(); | ||
| } |
There was a problem hiding this comment.
We don't check the sidebar anymore because we return if just hass is changed.
Proposed change
I was talking to @balloob and @bramkragten about my Drag and Drop layout for core when the idea came about for allowing others to create Lovelace View Layouts. Basically, you register your layout via custom elements and we load it in if the view is configured for it. Cards will have a
layoutconfiguration variable that will house the layout configuration (position, width, height, etc).Example configuration (Potential)
View Configuration:
Card Configuration: