{
return {
+ title: info.hass.config.location_name,
views: [
{
strategy: { type: "original-states" },
- title: info.hass.config.location_name,
},
],
};
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index 8b260c9aa9..908d32e818 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -23,8 +23,6 @@ import type { HuiErrorCard } from "../cards/hui-error-card";
import { computeCardSize } from "../common/compute-card-size";
import type { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
-let editCodeLoaded = false;
-
// Find column with < 5 size, else smallest column
const getColumnIndex = (columnSizes: number[], size: number) => {
let minIndex = 0;
@@ -71,16 +69,26 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
}
+ public connectedCallback() {
+ super.connectedCallback();
+ this._initMqls();
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+ this._mqls?.forEach((mql) => {
+ mql.removeListener(this._updateColumns);
+ });
+ this._mqls = undefined;
+ }
+
public setConfig(_config: LovelaceViewConfig): void {}
protected render(): TemplateResult {
return html`
- 0 ? "display: block" : "display: none"}
- >
- ${this.badges.map((badge) => html`${badge}`)}
-
+ ${this.badges.length > 0
+ ? html` ${this.badges}
`
+ : ""}
${this.lovelace?.editMode
? html`
@@ -101,31 +109,31 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
`;
}
- protected firstUpdated(): void {
+ private _initMqls() {
this._mqls = [300, 600, 900, 1200].map((width) => {
const mql = window.matchMedia(`(min-width: ${width}px)`);
- mql.addListener(() => this._updateColumns());
+ mql.addListener(this._updateColumns.bind(this));
return mql;
});
- this._updateColumns();
}
- protected updated(changedProperties: PropertyValues): void {
- super.updated(changedProperties);
-
- if (this.lovelace?.editMode && !editCodeLoaded) {
- editCodeLoaded = true;
- import("./default-view-editable");
+ private get mqls(): MediaQueryList[] {
+ if (!this._mqls) {
+ this._initMqls();
}
+ return this._mqls!;
+ }
+
+ public willUpdate(changedProperties: PropertyValues) {
+ super.willUpdate(changedProperties);
if (changedProperties.has("hass")) {
- const oldHass = changedProperties.get("hass") as HomeAssistant;
+ const oldHass = changedProperties.get("hass") as
+ | HomeAssistant
+ | undefined;
- if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) {
+ if (this.hass!.dockedSidebar !== oldHass?.dockedSidebar) {
this._updateColumns();
- }
-
- if (changedProperties.size === 1) {
return;
}
}
@@ -133,16 +141,24 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
if (changedProperties.has("narrow")) {
this._updateColumns();
}
+ }
+
+ protected updated(changedProperties: PropertyValues): void {
+ super.updated(changedProperties);
+
+ if (this.lovelace?.editMode) {
+ import("./default-view-editable");
+ }
const oldLovelace = changedProperties.get("lovelace") as
| Lovelace
| undefined;
if (
- (changedProperties.has("lovelace") &&
- (oldLovelace?.config !== this.lovelace?.config ||
- oldLovelace?.editMode !== this.lovelace?.editMode)) ||
- changedProperties.has("_columns")
+ changedProperties.has("lovelace") &&
+ oldLovelace &&
+ (oldLovelace.config !== this.lovelace?.config ||
+ oldLovelace.editMode !== this.lovelace?.editMode)
) {
this._createColumns();
}
@@ -152,6 +168,17 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
fireEvent(this, "ll-create-card");
}
+ private _createRootElement(columns: HTMLDivElement[]) {
+ const root = this.shadowRoot!.getElementById("columns") as HTMLDivElement;
+
+ // Remove old columns
+ while (root.lastChild) {
+ root.removeChild(root.lastChild);
+ }
+
+ columns.forEach((column) => root.appendChild(column));
+ }
+
private async _createColumns() {
if (!this._columns) {
return;
@@ -159,12 +186,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
this._createColumnsIteration++;
const iteration = this._createColumnsIteration;
- const root = this.shadowRoot!.getElementById("columns")!;
-
- // Remove old columns
- while (root.lastChild) {
- root.removeChild(root.lastChild);
- }
// Track the total height of cards in a columns
const columnSizes: number[] = [];
@@ -173,11 +194,18 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
for (let i = 0; i < Math.min(this._columns, this.cards.length); i++) {
const columnEl = document.createElement("div");
columnEl.classList.add("column");
- root.appendChild(columnEl);
columnSizes.push(0);
columnElements.push(columnEl);
}
+ if (!this.hasUpdated) {
+ this.updateComplete.then(() => {
+ this._createRootElement(columnElements);
+ });
+ } else {
+ this._createRootElement(columnElements);
+ }
+
let tillNextRender: Promise | undefined;
let start: Date | undefined;
@@ -244,19 +272,21 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
}
private _updateColumns() {
- if (!this._mqls) {
- return;
- }
- const matchColumns = this._mqls!.reduce(
+ 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(
+ const newColumns = Math.max(
1,
matchColumns -
Number(!this.narrow && this.hass!.dockedSidebar === "docked")
);
+ if (newColumns === this._columns) {
+ return;
+ }
+ this._columns = newColumns;
+ this._createColumns();
}
static get styles(): CSSResultGroup {
@@ -268,7 +298,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
box-sizing: border-box;
}
- #badges {
+ .badges {
margin: 8px 16px;
font-size: 85%;
text-align: center;
diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index 1c7d531377..bc43c1fde1 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -40,8 +40,8 @@ export class PanelView extends LitElement implements LovelaceViewElement {
public setConfig(_config: LovelaceViewConfig): void {}
- protected updated(changedProperties: PropertyValues): void {
- super.updated(changedProperties);
+ public willUpdate(changedProperties: PropertyValues): void {
+ super.willUpdate(changedProperties);
if (this.lovelace?.editMode && !editCodeLoaded) {
editCodeLoaded = true;
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 5f815f25a3..53b3394483 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -88,8 +88,8 @@ export class HUIView extends ReactiveElement {
return this;
}
- protected updated(changedProperties: PropertyValues): void {
- super.updated(changedProperties);
+ public willUpdate(changedProperties: PropertyValues): void {
+ super.willUpdate(changedProperties);
/*
We need to handle the following use cases:
@@ -112,8 +112,11 @@ export class HUIView extends ReactiveElement {
oldLovelace.config.views[this.index]))
) {
this._initializeConfig();
- return;
}
+ }
+
+ protected update(changedProperties) {
+ super.update(changedProperties);
// If no layout element, we're still creating one
if (this._layoutElement) {
diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
index 85726354bc..f1ae18e990 100644
--- a/src/resources/compatibility.ts
+++ b/src/resources/compatibility.ts
@@ -1,6 +1,6 @@
// For localize
import "@formatjs/intl-getcanonicallocales/polyfill";
-import "@lit/polyfill-support";
+import "lit/polyfill-support";
import "core-js";
// To use comlink under ES5
import "proxy-polyfill";
diff --git a/src/state/disconnect-toast-mixin.ts b/src/state/disconnect-toast-mixin.ts
index 9b60b20e39..4e09213bc9 100644
--- a/src/state/disconnect-toast-mixin.ts
+++ b/src/state/disconnect-toast-mixin.ts
@@ -20,7 +20,7 @@ export default >(superClass: T) =>
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
// Need to load in advance because when disconnected, can't dynamically load code.
- import("../managers/notification-manager");
+ setTimeout(() => import("../managers/notification-manager"), 5000);
}
updated(changedProperties) {
diff --git a/src/state/hass-base-mixin.ts b/src/state/hass-base-mixin.ts
index 27a19e9865..c0e7170328 100644
--- a/src/state/hass-base-mixin.ts
+++ b/src/state/hass-base-mixin.ts
@@ -3,10 +3,6 @@ import { LitElement } from "lit";
import { property } from "lit/decorators";
import { HomeAssistant } from "../types";
-// Temporary disable warnings so the dev console is not flooded, we should fix these and then re-enable the warning
-if (__DEV__) {
- LitElement.disableWarning?.("change-in-update");
-}
export class HassBaseEl extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
diff --git a/src/state/more-info-mixin.ts b/src/state/more-info-mixin.ts
index 620b8b027f..e05c76ed72 100644
--- a/src/state/more-info-mixin.ts
+++ b/src/state/more-info-mixin.ts
@@ -12,14 +12,6 @@ declare global {
}
}
-let moreInfoImportPromise;
-const importMoreInfo = () => {
- if (!moreInfoImportPromise) {
- moreInfoImportPromise = import("../dialogs/more-info/ha-more-info-dialog");
- }
- return moreInfoImportPromise;
-};
-
export default >(superClass: T) =>
class extends superClass {
protected firstUpdated(changedProps: PropertyValues) {
@@ -27,7 +19,7 @@ export default >(superClass: T) =>
this.addEventListener("hass-more-info", (ev) => this._handleMoreInfo(ev));
// Load it once we are having the initial rendering done.
- importMoreInfo();
+ import("../dialogs/more-info/ha-more-info-dialog");
}
private async _handleMoreInfo(ev: HASSDomEvent) {
@@ -38,7 +30,7 @@ export default >(superClass: T) =>
{
entityId: ev.detail.entityId,
},
- importMoreInfo
+ () => import("../dialogs/more-info/ha-more-info-dialog")
);
}
};