From e02d72287674db7dadff17ac2936186c47f3a531 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:37:46 +0200 Subject: [PATCH 1/6] Fix updating columns --- src/panels/lovelace/ha-panel-lovelace.ts | 45 ------------------- src/panels/lovelace/views/hui-masonry-view.ts | 14 +++--- 2 files changed, 9 insertions(+), 50 deletions(-) diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index c4fffccbe7f6..e7baf8a427af 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -5,7 +5,6 @@ import { LitElement, property, internalProperty, - PropertyValues, TemplateResult, } from "lit-element"; import { domainToName } from "../../data/integration"; @@ -46,8 +45,6 @@ class LovelacePanel extends LitElement { @property() public route?: Route; - @internalProperty() private _columns?: number; - @property() private _state?: "loading" | "loaded" | "error" | "yaml-editor" = "loading"; @@ -55,8 +52,6 @@ class LovelacePanel extends LitElement { @internalProperty() private lovelace?: Lovelace; - private mqls?: MediaQueryList[]; - private _ignoreNextUpdateEvent = false; private _fetchConfigOnConnect = false; @@ -105,7 +100,6 @@ class LovelacePanel extends LitElement { .hass=${this.hass} .lovelace=${this.lovelace} .route=${this.route} - .columns=${this._columns} .narrow=${this.narrow} @config-refresh=${this._forceFetchConfig} > @@ -144,25 +138,6 @@ class LovelacePanel extends LitElement { `; } - protected updated(changedProps: PropertyValues): void { - super.updated(changedProps); - - if (changedProps.has("narrow")) { - this._updateColumns(); - return; - } - - if (!changedProps.has("hass")) { - return; - } - - const oldHass = changedProps.get("hass") as this["hass"]; - - if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) { - this._updateColumns(); - } - } - protected firstUpdated() { this._fetchConfig(false); if (!this._unsubUpdates) { @@ -174,13 +149,6 @@ class LovelacePanel extends LitElement { this._fetchConfig(false); } }); - this._updateColumns = this._updateColumns.bind(this); - this.mqls = [300, 600, 900, 1200].map((width) => { - const mql = matchMedia(`(min-width: ${width}px)`); - mql.addListener(this._updateColumns); - return mql; - }); - this._updateColumns(); } private async _regenerateConfig() { @@ -201,19 +169,6 @@ class LovelacePanel extends LitElement { this._state = "loaded"; } - private _updateColumns() { - const matchColumns = this.mqls!.reduce( - (cols, mql) => cols + Number(mql.matches), - 0 - ); - // Do -1 column if the menu is docked and open - this._columns = Math.max( - 1, - matchColumns - - Number(!this.narrow && this.hass!.dockedSidebar === "docked") - ); - } - private _lovelaceChanged() { if (this._ignoreNextUpdateEvent) { this._ignoreNextUpdateEvent = false; diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 30b9f613954a..08c191337d52 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -98,11 +98,14 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } protected firstUpdated(): void { + this._updateColumns = this._updateColumns.bind(this); this._mqls = [300, 600, 900, 1200].map((width) => { const mql = matchMedia(`(min-width: ${width}px)`); mql.addEventListener("change", this._updateColumns); return mql; }); + this._updateColumns(); + console.log("firstUpdated", this._mqls); } protected updated(changedProperties: PropertyValues): void { @@ -237,6 +240,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } private _updateColumns() { + console.log("updateCols", this._mqls); + if (!this._mqls) { + return; + } const matchColumns = this._mqls!.reduce( (cols, mql) => cols + Number(mql.matches), 0 @@ -260,6 +267,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement { display: flex; flex-direction: row; justify-content: center; + margin-left: 4px; + margin-right: 4px; } .column { @@ -288,11 +297,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } @media (max-width: 500px) { - :host { - padding-left: 0; - padding-right: 0; - } - .column > * { margin-left: 0; margin-right: 0; From ae803572e2f15cf5084634406b3b0f5afc27e2fa Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:39:05 +0200 Subject: [PATCH 2/6] Console --- src/panels/lovelace/views/hui-masonry-view.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 08c191337d52..94a46246edc7 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -105,7 +105,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement { return mql; }); this._updateColumns(); - console.log("firstUpdated", this._mqls); } protected updated(changedProperties: PropertyValues): void { @@ -240,7 +239,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } private _updateColumns() { - console.log("updateCols", this._mqls); if (!this._mqls) { return; } From 1f8ef700b6bbccd13d72daff8e9ca10cd8978e79 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:45:42 +0200 Subject: [PATCH 3/6] Fix panel loop --- src/panels/lovelace/views/hui-panel-view.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index 44f9d27fe3e5..b82d724b57b4 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -57,6 +57,10 @@ export class PanelView extends LitElement implements LovelaceViewElement { ); } + if (!changedProperties.has("lovelace")) { + return; + } + const oldLovelace = changedProperties.get("lovelace") as Lovelace; if ( From bcf2a4878257634cb44031b8d59e831f12321738 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:48:03 +0200 Subject: [PATCH 4/6] guard masonary --- src/panels/lovelace/views/hui-masonry-view.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 94a46246edc7..79311cf999aa 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -135,8 +135,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement { const oldLovelace = changedProperties.get("lovelace") as Lovelace; if ( - oldLovelace?.config !== this.lovelace?.config || - oldLovelace?.editMode !== this.lovelace?.editMode || + (changedProperties.has("lovelace") && + oldLovelace?.config !== this.lovelace?.config) || + (changedProperties.has("lovelace") && + oldLovelace?.editMode !== this.lovelace?.editMode) || changedProperties.has("_columns") ) { this._createColumns(); From 8498d60e0359e92da99918ef36e6acb6c120c01e Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:48:48 +0200 Subject: [PATCH 5/6] fix typing --- src/panels/lovelace/views/hui-masonry-view.ts | 4 +++- src/panels/lovelace/views/hui-panel-view.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 79311cf999aa..e28137033315 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -132,7 +132,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement { } } - const oldLovelace = changedProperties.get("lovelace") as Lovelace; + const oldLovelace = changedProperties.get("lovelace") as + | Lovelace + | undefined; if ( (changedProperties.has("lovelace") && diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index b82d724b57b4..91c0582f9f90 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -61,7 +61,9 @@ export class PanelView extends LitElement implements LovelaceViewElement { return; } - const oldLovelace = changedProperties.get("lovelace") as Lovelace; + const oldLovelace = changedProperties.get("lovelace") as + | Lovelace + | undefined; if ( oldLovelace?.config !== this.lovelace?.config || From 1542cba65322e00ef4b15470cbb2152b7dff9ffd Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Sep 2020 16:51:42 +0200 Subject: [PATCH 6/6] Update src/panels/lovelace/views/hui-masonry-view.ts Co-authored-by: Zack Barett --- src/panels/lovelace/views/hui-masonry-view.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index e28137033315..7f264f53ea3c 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -137,10 +137,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement { | undefined; if ( - (changedProperties.has("lovelace") && - oldLovelace?.config !== this.lovelace?.config) || - (changedProperties.has("lovelace") && - oldLovelace?.editMode !== this.lovelace?.editMode) || + (changedProperties.has("lovelace") && ( + oldLovelace?.config !== this.lovelace?.config || + oldLovelace?.editMode !== this.lovelace?.editMode)) || changedProperties.has("_columns") ) { this._createColumns();