Make work with Home Assistant 2021.8 and later

README.md

@@ -10,13 +10,11 @@ For installation instructions [see this guide](https://github.com/thomasloven/ha
 
 - Go to one of your lovelace views and select "Edit Dashboard"
 - Click the pencil symbol next to the view name to open up the view properties
-- Go to the new "Layout" tab
-- Select "Masonry" layout from the "Layout type" dropdown list
+- Select "Masonry (layout-card)" from the "View type" dropdown list
 - Click "Save"
 
 Hopefully, you should see no difference at all now.
 
-- Open up the view properties again and go to the "Layout" tab.
 - Enter the following in the "Layout Options" box:
   ```yaml
   width: 300
@@ -26,6 +24,8 @@ Hopefully, you should see no difference at all now.
 
 You should now have more, narrower, collumns of cards in your view.
 
+> Please note that the "LAYOUT" tab in the animation below is now incorporated in the "SETTINGS" tab instead.
+
 ![Quick Start](https://user-images.githubusercontent.com/1299821/111066590-11abef80-84c0-11eb-809b-2843fd8610d8.gif)
 
 ## Usage

hacs.json

@@ -1,5 +1,5 @@
 {
     "name": "layout-card",
     "render_readme": true,
-    "homeassistant": "2021.3.0"
+    "homeassistant": "2021.8.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "layout-card",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "",
   "private": true,
   "scripts": {

src/layouts/base-layout.ts

@@ -36,7 +36,7 @@ export class BaseLayout extends LitElement {
           // Load in editor elements
           const loader = document.createElement("hui-masonry-view");
           (loader as any).lovelace = { editMode: true };
-          (loader as any).updated(new Map());
+          (loader as any).willUpdate(new Map());
         }
       }
       this.cards.forEach((c) => (c.editMode = this.lovelace?.editMode));

src/main.ts

@@ -5,8 +5,8 @@ import "./layout-break";
 import "./layouts/grid";
 import "./layout-card";
 import "./layout-card-editor";
-import "./patches/hui-dialog-edit-view";
 import "./patches/hui-card-element-editor";
+import "./patches/hui-view-editor";
 import "./gap-card.ts";
 import pjson from "../package.json";
 

src/patches/hui-view-editor.ts

@@ -0,0 +1,66 @@
+import { LitElement, html } from "lit-element";
+
+const LAYOUT_TYPES = ["masonry", "horizontal", "vertical", "grid"];
+
+customElements.whenDefined("hui-view-editor").then(() => {
+  const HuiViewEditor = customElements.get("hui-view-editor");
+
+  (async () => {
+    // Load in ha-yaml-editor from developer-tools-service
+    const ppResolver = document.createElement("partial-panel-resolver");
+    const routes = (ppResolver as any).getRoutes([
+      {
+        component_name: "developer-tools",
+        url_path: "a",
+      },
+    ]);
+    await routes?.routes?.a?.load?.();
+    const devToolsRouter = document.createElement("developer-tools-router");
+    await (devToolsRouter as any)?.routerOptions?.routes?.service?.load?.();
+  })();
+
+  const firstUpdated = HuiViewEditor.prototype.firstUpdated;
+  HuiViewEditor.prototype.firstUpdated = function () {
+    firstUpdated?.bind(this)();
+
+    const listBox = this.shadowRoot.querySelector(
+      "paper-listbox[attr-for-selected=type]"
+    );
+    if (!listBox || listBox.layoutCardPatch) return;
+
+    LAYOUT_TYPES.forEach((type) => {
+      const el = document.createElement("paper-item");
+      (el as any).type = `custom:${type}-layout`;
+      el.innerHTML = `${type} (layout-card)`;
+      listBox.appendChild(el);
+    });
+    listBox.layoutCardPatched = true;
+
+    const layoutEditor = document.createElement("ha-yaml-editor");
+    (layoutEditor as any).label = "Layout options";
+    (layoutEditor as any).defaultValue = this._config.layout ?? "";
+    layoutEditor.addEventListener("value-changed", (ev: CustomEvent) => {
+      ev.stopPropagation();
+      const newConfig = { ...this._config };
+      newConfig.layout = ev.detail.value;
+      this.dispatchEvent(
+        new CustomEvent("view-config-changed", {
+          detail: { config: newConfig },
+        })
+      );
+    });
+
+    this.shadowRoot.appendChild(layoutEditor);
+  };
+
+  const updated = HuiViewEditor.prototype.updated;
+  HuiViewEditor.prototype.updated = function (_changedProperties) {
+    updated?.bind(this)(_changedProperties);
+
+    if (_changedProperties.has("_config")) {
+      const layoutEditor = this.shadowRoot.querySelector("ha-yaml-editor");
+      if (layoutEditor) return;
+      (layoutEditor as any).defaultValue = this._config.layout;
+    }
+  };
+});