From 415516b506c9cccd25d0ef3442fab3f039edfb7d Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 10:48:21 -0600
Subject: [PATCH 1/6] Glance editor

---
 src/components/ha-form/ha-form-grid.ts        |   9 +
 src/components/ha-form/types.ts               |   1 +
 .../config-elements/hui-glance-card-editor.ts | 231 +++++-------------
 3 files changed, 75 insertions(+), 166 deletions(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index 2c3ed392856b..a44b9edde847 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -28,6 +28,9 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   protected firstUpdated() {
     this.setAttribute("own-margin", "");
+    if (this.schema.columns) {
+      this.style.cssText = `--form-grid-column-count: ${this.schema.columns}`;
+    }
   }
 
   protected render(): TemplateResult {
@@ -62,6 +65,12 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         display: block;
         margin-bottom: 24px;
       }
+
+      @media only screen and (max-width: 800px) {
+        :host {
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        }
+      }
     `;
   }
 }
diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts
index 5d9572147acb..573d83f2e7db 100644
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@@ -29,6 +29,7 @@ export interface HaFormBaseSchema {
 export interface HaFormGridSchema extends HaFormBaseSchema {
   type: "grid";
   name: "";
+  columns?: number;
   schema: HaFormSchema[];
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index f4fbb031e7cb..0d54e13ab104 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "../../../../components/ha-form/ha-form";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   array,
@@ -12,23 +13,14 @@ import {
   assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import "../../../../components/entity/state-badge";
-import "../../../../components/ha-card";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon";
-import "../../../../components/ha-switch";
-import { HomeAssistant } from "../../../../types";
+import type { HomeAssistant } from "../../../../types";
 import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
-import "../../components/hui-theme-select-editor";
-import { LovelaceCardEditor } from "../../types";
+import type { LovelaceCardEditor } from "../../types";
 import { processEditorEntities } from "../process-editor-entities";
 import { entitiesConfigStruct } from "../structs/entities-struct";
-import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { configElementStyle } from "./config-elements-style";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import "@polymer/paper-input/paper-input";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -44,6 +36,29 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA: HaFormSchema[] = [
+  { name: "title", selector: { text: {} } },
+  {
+    name: "",
+    type: "grid",
+    schema: [
+      { name: "columns", selector: { number: { min: 1, mode: "box" } } },
+      { name: "theme", selector: { theme: {} } },
+    ],
+  },
+  {
+    name: "",
+    type: "grid",
+    columns: 3,
+    schema: [
+      { name: "show_name", selector: { boolean: {} } },
+      { name: "show_icon", selector: { boolean: {} } },
+      { name: "show_state", selector: { boolean: {} } },
+    ],
+  },
+  { name: "state_color", selector: { boolean: {} } },
+];
+
 @customElement("hui-glance-card-editor")
 export class HuiGlanceCardEditor
   extends LitElement
@@ -61,177 +76,61 @@ export class HuiGlanceCardEditor
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  get _title(): string {
-    return this._config!.title || "";
-  }
-
-  get _theme(): string {
-    return this._config!.theme || "";
-  }
-
-  get _columns(): number {
-    return this._config!.columns || NaN;
-  }
-
-  get _show_name(): boolean {
-    return this._config!.show_name || true;
-  }
-
-  get _show_icon(): boolean {
-    return this._config!.show_icon || true;
-  }
-
-  get _show_state(): boolean {
-    return this._config!.show_state || true;
-  }
-
-  get _state_color(): boolean {
-    return this._config!.state_color ?? true;
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
-    const dir = computeRTLDirection(this.hass!);
+    const data = {
+      show_name: true,
+      show_icon: true,
+      show_state: true,
+      ...this._config,
+    };
 
     return html`
-      <div class="card-config">
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.title"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._title}
-          .configValue=${"title"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <div class="side-by-side">
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value=${this._theme}
-            .configValue=${"theme"}
-            @value-changed=${this._valueChanged}
-          ></hui-theme-select-editor>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.glance.columns"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._columns}
-            .configValue=${"columns"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        </div>
-        <div class="side-by-side">
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_name"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_name !== false}
-                .configValue=${"show_name"}
-                @change=${this._valueChanged}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_icon"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_icon !== false}
-                .configValue=${"show_icon"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_state"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_state !== false}
-                .configValue=${"show_state"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-        </div>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.state_color"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked=${this._config!.state_color}
-            .configValue=${"state_color"}
-            @change=${this._valueChanged}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       <hui-entity-editor
         .hass=${this.hass}
         .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
+        @entities-changed=${this._entitiesChanged}
       ></hui-entity-editor>
     `;
   }
 
-  private _valueChanged(ev: EntitiesEditorEvent): void {
-    if (!this._config || !this.hass) {
-      return;
-    }
-    const target = ev.target! as EditorTarget;
+  private _valueChanged(ev: CustomEvent): void {
+    const config = ev.detail.value;
+    fireEvent(this, "config-changed", { config });
+  }
 
-    if (target.configValue && this[`_${target.configValue}`] === target.value) {
-      return;
-    }
-    if (ev.detail && ev.detail.entities) {
-      this._config = { ...this._config, entities: ev.detail.entities };
+  private _entitiesChanged(ev: CustomEvent): void {
+    let config = this._config!;
+    config = { ...config, entities: ev.detail.entities! };
 
-      this._configEntities = processEditorEntities(this._config.entities);
-    } else if (target.configValue) {
-      if (
-        target.value === "" ||
-        (target.type === "number" && isNaN(Number(target.value)))
-      ) {
-        this._config = { ...this._config };
-        delete this._config[target.configValue!];
-      } else {
-        let value: any = target.value;
-        if (target.type === "number") {
-          value = Number(value);
-        }
-        this._config = {
-          ...this._config,
-          [target.configValue!]:
-            target.checked !== undefined ? target.checked : value,
-        };
-      }
-    }
-    fireEvent(this, "config-changed", { config: this._config });
+    this._configEntities = processEditorEntities(this._config!.entities);
+    fireEvent(this, "config-changed", { config });
   }
 
-  static get styles(): CSSResultGroup {
-    return configElementStyle;
-  }
+  private _computeLabelCallback = (schema: HaFormSchema) => (
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.glance.${schema.name}`
+      ) ||
+      this.hass!.localize(
+        `ui.panel.lovelace.editor.card.generic.${schema.name}`
+      )
+    );
+
+  static styles = css`
+    ha-form {
+      --form-grid-min-width: 150px;
+    }
+  `;
 }
 
 declare global {

From 0baa8f93387d9275e7e0ba410983003fd7f47ee9 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 11:01:44 -0600
Subject: [PATCH 2/6] use min width instead

---
 src/components/ha-form/ha-form-grid.ts            | 10 ++--------
 src/components/ha-form/types.ts                   |  2 +-
 .../config-elements/hui-glance-card-editor.ts     | 15 ++++++---------
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index a44b9edde847..eb6b4ab7d57e 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -28,8 +28,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   protected firstUpdated() {
     this.setAttribute("own-margin", "");
-    if (this.schema.columns) {
-      this.style.cssText = `--form-grid-column-count: ${this.schema.columns}`;
+    if (this.schema.min_width) {
+      this.style.cssText = `--form-grid-min-width: ${this.schema.min_width}`;
     }
   }
 
@@ -65,12 +65,6 @@ export class HaFormGrid extends LitElement implements HaFormElement {
         display: block;
         margin-bottom: 24px;
       }
-
-      @media only screen and (max-width: 800px) {
-        :host {
-          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        }
-      }
     `;
   }
 }
diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts
index 573d83f2e7db..4c8a424a169d 100644
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@@ -29,7 +29,7 @@ export interface HaFormBaseSchema {
 export interface HaFormGridSchema extends HaFormBaseSchema {
   type: "grid";
   name: "";
-  columns?: number;
+  min_width?: string;
   schema: HaFormSchema[];
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index 0d54e13ab104..e5688dfa41b4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -49,7 +49,7 @@ const SCHEMA: HaFormSchema[] = [
   {
     name: "",
     type: "grid",
-    columns: 3,
+    min_width: "100px",
     schema: [
       { name: "show_name", selector: { boolean: {} } },
       { name: "show_icon", selector: { boolean: {} } },
@@ -117,14 +117,11 @@ export class HuiGlanceCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema) => (
-      this.hass!.localize(
-        `ui.panel.lovelace.editor.card.glance.${schema.name}`
-      ) ||
-      this.hass!.localize(
-        `ui.panel.lovelace.editor.card.generic.${schema.name}`
-      )
-    );
+  private _computeLabelCallback = (schema: HaFormSchema) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.card.glance.${schema.name}`
+    ) ||
+    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
 
   static styles = css`
     ha-form {

From 941862bed18f48797400d6147901c3a4a1210b6b Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 11:06:35 -0600
Subject: [PATCH 3/6] review

---
 src/components/ha-form/ha-form-grid.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index eb6b4ab7d57e..393920942111 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -1,5 +1,12 @@
 import "./ha-form";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import type {
   HaFormGridSchema,
@@ -28,8 +35,13 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   protected firstUpdated() {
     this.setAttribute("own-margin", "");
-    if (this.schema.min_width) {
-      this.style.cssText = `--form-grid-min-width: ${this.schema.min_width}`;
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    if (changedProps.has("schema")) {
+      if (this.schema.min_width) {
+        this.style.cssText = `--form-grid-min-width: ${this.schema.min_width}`;
+      }
     }
   }
 

From 39e553f25a22d6f69ae8841b96b9591908009573 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 11:07:03 -0600
Subject: [PATCH 4/6] review

---
 src/components/ha-form/ha-form-grid.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index 393920942111..369d2cb6f5c7 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -33,7 +33,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
-  protected firstUpdated() {
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
     this.setAttribute("own-margin", "");
   }
 

From 7b1e04a5de3bf09062175ccff11a55b4a70fbc42 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 11:11:26 -0600
Subject: [PATCH 5/6] Use the set property and better name

---
 src/components/ha-form/ha-form-grid.ts                     | 7 +++++--
 src/components/ha-form/types.ts                            | 2 +-
 .../editor/config-elements/hui-glance-card-editor.ts       | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index 369d2cb6f5c7..9df22646b992 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -40,8 +40,11 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   protected updated(changedProps: PropertyValues): void {
     if (changedProps.has("schema")) {
-      if (this.schema.min_width) {
-        this.style.cssText = `--form-grid-min-width: ${this.schema.min_width}`;
+      if (this.schema.column_min_width) {
+        this.style.setProperty(
+          "--form-grid-min-width",
+          this.schema.column_min_width
+        );
       }
     }
   }
diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts
index 4c8a424a169d..fc45bc3ef1fa 100644
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@@ -29,7 +29,7 @@ export interface HaFormBaseSchema {
 export interface HaFormGridSchema extends HaFormBaseSchema {
   type: "grid";
   name: "";
-  min_width?: string;
+  column_min_width?: string;
   schema: HaFormSchema[];
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index e5688dfa41b4..d8dfa7d39a01 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -49,7 +49,7 @@ const SCHEMA: HaFormSchema[] = [
   {
     name: "",
     type: "grid",
-    min_width: "100px",
+    column_min_width: "100px",
     schema: [
       { name: "show_name", selector: { boolean: {} } },
       { name: "show_icon", selector: { boolean: {} } },

From 5e9dbdcd5b8d08049c91f96263a78e8e5be5921b Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 23 Feb 2022 11:27:00 -0600
Subject: [PATCH 6/6] forgot a few things - review

---
 src/components/ha-form/ha-form-grid.ts                    | 3 +++
 .../editor/config-elements/hui-glance-card-editor.ts      | 8 +-------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index 9df22646b992..82baf2b3b4a2 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -39,12 +39,15 @@ export class HaFormGrid extends LitElement implements HaFormElement {
   }
 
   protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
     if (changedProps.has("schema")) {
       if (this.schema.column_min_width) {
         this.style.setProperty(
           "--form-grid-min-width",
           this.schema.column_min_width
         );
+      } else {
+        this.style.setProperty("--form-grid-min-width", "");
       }
     }
   }
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index d8dfa7d39a01..f794b5b317de 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -1,5 +1,5 @@
 import "../../../../components/ha-form/ha-form";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   array,
@@ -122,12 +122,6 @@ export class HuiGlanceCardEditor
       `ui.panel.lovelace.editor.card.glance.${schema.name}`
     ) ||
     this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
-
-  static styles = css`
-    ha-form {
-      --form-grid-min-width: 150px;
-    }
-  `;
 }
 
 declare global {