chore(editor): improvements (#421)

* chore: rename field to labels * chore: delete unused editor styles
piitaya · Apr 30, 2022 · 5f6579a · 5f6579a
1 parent 8f7b6cb
commit 5f6579a
Show file tree

Hide file tree

Showing 24 changed files with 172 additions and 310 deletions.
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
@@ -1,13 +1,12 @@
 import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
 import { MushroomBaseElement } from "../../utils/base-element";
-import { configElementStyle } from "../../utils/editor-styles";
 import { Action } from "../../utils/form/custom/ha-selector-mushroom-action";
-import { GENERIC_FIELDS } from "../../utils/form/fields";
+import { GENERIC_LABELS } from "../../utils/form/generic-fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
 import { stateIcon } from "../../utils/icons/state-icon";
 import { loadHaComponents } from "../../utils/loader";
@@ -21,7 +20,7 @@ const actions: Action[] = ["more-info", "navigate", "url", "call-service", "none
 
 const states = ["armed_home", "armed_away", "armed_night", "armed_vacation", "armed_custom_bypass"];
 
-const ALARM_CONTROL_PANEL_FIELDS = ["show_keypad"];
+const ALARM_CONTROL_PANEL_LABELS = ["show_keypad"];
 
 const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaFormSchema[] => [
     { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } },
@@ -83,19 +82,19 @@ export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCar
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         const customLocalize = setupCustomlocalize(this.hass!);
 
-        if (GENERIC_FIELDS.includes(schema.name)) {
+        if (GENERIC_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.generic.${schema.name}`);
         }
-        if (ALARM_CONTROL_PANEL_FIELDS.includes(schema.name)) {
+        if (ALARM_CONTROL_PANEL_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.alarm_control_panel.${schema.name}`);
         }
         if (schema.name === "states") {
@@ -110,8 +109,4 @@ export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCar
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return [super.styles, configElementStyle];
-    }
 }
diff --git a/src/cards/chips-card/chips/action-chip-editor.ts b/src/cards/chips-card/chips/action-chip-editor.ts
@@ -1,11 +1,10 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import setupCustomlocalize from "../../../localize";
-import { configElementStyle } from "../../../utils/editor-styles";
 import { Action } from "../../../utils/form/custom/ha-selector-mushroom-action";
-import { GENERIC_FIELDS } from "../../../utils/form/fields";
+import { GENERIC_LABELS } from "../../../utils/form/generic-fields";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { ActionChipConfig } from "../../../utils/lovelace/chip/types";
@@ -38,10 +37,10 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
         this._config = config;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         const customLocalize = setupCustomlocalize(this.hass!);
 
-        if (GENERIC_FIELDS.includes(schema.name)) {
+        if (GENERIC_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.generic.${schema.name}`);
         }
         return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
@@ -60,7 +59,7 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
@@ -69,8 +68,4 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return configElementStyle;
-    }
 }
diff --git a/src/cards/chips-card/chips/alarm-control-panel-chip-editor.ts b/src/cards/chips-card/chips/alarm-control-panel-chip-editor.ts
@@ -1,11 +1,10 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import setupCustomlocalize from "../../../localize";
-import { configElementStyle } from "../../../utils/editor-styles";
 import { Action } from "../../../utils/form/custom/ha-selector-mushroom-action";
-import { GENERIC_FIELDS } from "../../../utils/form/fields";
+import { GENERIC_LABELS } from "../../../utils/form/generic-fields";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
@@ -41,10 +40,10 @@ export class AlarmControlPanelChipEditor extends LitElement implements LovelaceC
         this._config = config;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         const customLocalize = setupCustomlocalize(this.hass!);
 
-        if (GENERIC_FIELDS.includes(schema.name)) {
+        if (GENERIC_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.generic.${schema.name}`);
         }
         return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
@@ -65,7 +64,7 @@ export class AlarmControlPanelChipEditor extends LitElement implements LovelaceC
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
@@ -74,8 +73,4 @@ export class AlarmControlPanelChipEditor extends LitElement implements LovelaceC
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return configElementStyle;
-    }
 }
diff --git a/src/cards/chips-card/chips/back-chip-editor.ts b/src/cards/chips-card/chips/back-chip-editor.ts
@@ -1,8 +1,7 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
-import { configElementStyle } from "../../../utils/editor-styles";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { EntityChipConfig } from "../../../utils/lovelace/chip/types";
@@ -23,7 +22,7 @@ export class BackChipEditor extends LitElement implements LovelaceChipEditor {
         this._config = config;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
     };
 
@@ -40,7 +39,7 @@ export class BackChipEditor extends LitElement implements LovelaceChipEditor {
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
@@ -49,8 +48,4 @@ export class BackChipEditor extends LitElement implements LovelaceChipEditor {
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return configElementStyle;
-    }
 }
diff --git a/src/cards/chips-card/chips/conditional-chip-editor.ts b/src/cards/chips-card/chips/conditional-chip-editor.ts
@@ -11,7 +11,6 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import setupCustomlocalize from "../../../localize";
 import "../../../shared/form/mushroom-select";
 import "../../../shared/form/mushroom-textfield";
-import { configElementStyle } from "../../../utils/editor-styles";
 import { getChipElementClass } from "../../../utils/lovelace/chip-element-editor";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import {
@@ -316,55 +315,52 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
     }
 
     static get styles(): CSSResultGroup {
-        return [
-            configElementStyle,
-            css`
-                mwc-tab-bar {
-                    border-bottom: 1px solid var(--divider-color);
-                }
-                .conditions {
-                    margin-top: 8px;
-                }
+        return css`
+            mwc-tab-bar {
+                border-bottom: 1px solid var(--divider-color);
+            }
+            .conditions {
+                margin-top: 8px;
+            }
+            .condition {
+                margin-top: 8px;
+                border: 1px solid var(--divider-color);
+                padding: 12px;
+            }
+            .condition .state {
+                display: flex;
+                align-items: flex-end;
+            }
+            .condition .state mushroom-select {
+                margin-right: 16px;
+            }
+            .condition[rtl] .state mushroom-select {
+                margin-right: initial;
+                margin-left: 16px;
+            }
+            .card {
+                margin-top: 8px;
+                border: 1px solid var(--divider-color);
+                padding: 12px;
+            }
+            .card mushroom-select {
+                width: 100%;
+                margin-top: 0px;
+            }
+            @media (max-width: 450px) {
+                .card,
                 .condition {
-                    margin-top: 8px;
-                    border: 1px solid var(--divider-color);
-                    padding: 12px;
-                }
-                .condition .state {
-                    display: flex;
-                    align-items: flex-end;
-                }
-                .condition .state mushroom-select {
-                    margin-right: 16px;
+                    margin: 8px -12px 0;
                 }
-                .condition[rtl] .state mushroom-select {
-                    margin-right: initial;
-                    margin-left: 16px;
-                }
-                .card {
-                    margin-top: 8px;
-                    border: 1px solid var(--divider-color);
-                    padding: 12px;
-                }
-                .card mushroom-select {
-                    width: 100%;
-                    margin-top: 0px;
-                }
-                @media (max-width: 450px) {
-                    .card,
-                    .condition {
-                        margin: 8px -12px 0;
-                    }
-                }
-                .card .card-options {
-                    display: flex;
-                    justify-content: flex-end;
-                    width: 100%;
-                }
-                .gui-mode-button {
-                    margin-right: auto;
-                }
-            `,
-        ];
+            }
+            .card .card-options {
+                display: flex;
+                justify-content: flex-end;
+                width: 100%;
+            }
+            .gui-mode-button {
+                margin-right: auto;
+            }
+        `;
     }
 }
diff --git a/src/cards/chips-card/chips/entity-chip-editor.ts b/src/cards/chips-card/chips/entity-chip-editor.ts
@@ -1,10 +1,9 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import setupCustomlocalize from "../../../localize";
-import { configElementStyle } from "../../../utils/editor-styles";
-import { GENERIC_FIELDS } from "../../../utils/form/fields";
+import { GENERIC_LABELS } from "../../../utils/form/generic-fields";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
@@ -45,10 +44,10 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
         this._config = config;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         const customLocalize = setupCustomlocalize(this.hass!);
 
-        if (GENERIC_FIELDS.includes(schema.name)) {
+        if (GENERIC_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.generic.${schema.name}`);
         }
         return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
@@ -69,7 +68,7 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
@@ -78,8 +77,4 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return configElementStyle;
-    }
 }
diff --git a/src/cards/chips-card/chips/light-chip-editor.ts b/src/cards/chips-card/chips/light-chip-editor.ts
@@ -1,17 +1,16 @@
 import { fireEvent, HomeAssistant } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import setupCustomlocalize from "../../../localize";
-import { configElementStyle } from "../../../utils/editor-styles";
-import { GENERIC_FIELDS } from "../../../utils/form/fields";
+import { GENERIC_LABELS } from "../../../utils/form/generic-fields";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { LightChipConfig } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { LIGHT_ENTITY_DOMAINS } from "../../light-card/const";
-import { LIGHT_FIELDS } from "../../light-card/light-card-editor";
+import { LIGHT_LABELS } from "../../light-card/light-card-editor";
 
 const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
     { name: "entity", selector: { entity: { domain: LIGHT_ENTITY_DOMAINS } } },
@@ -46,13 +45,13 @@ export class LightChipEditor extends LitElement implements LovelaceChipEditor {
         this._config = config;
     }
 
-    private _computeLabelCallback = (schema: HaFormSchema) => {
+    private _computeLabel = (schema: HaFormSchema) => {
         const customLocalize = setupCustomlocalize(this.hass!);
 
-        if (GENERIC_FIELDS.includes(schema.name)) {
+        if (GENERIC_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.generic.${schema.name}`);
         }
-        if (LIGHT_FIELDS.includes(schema.name)) {
+        if (LIGHT_LABELS.includes(schema.name)) {
             return customLocalize(`editor.card.light.${schema.name}`);
         }
         return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
@@ -73,7 +72,7 @@ export class LightChipEditor extends LitElement implements LovelaceChipEditor {
                 .hass=${this.hass}
                 .data=${this._config}
                 .schema=${schema}
-                .computeLabel=${this._computeLabelCallback}
+                .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>
         `;
@@ -82,8 +81,4 @@ export class LightChipEditor extends LitElement implements LovelaceChipEditor {
     private _valueChanged(ev: CustomEvent): void {
         fireEvent(this, "config-changed", { config: ev.detail.value });
     }
-
-    static get styles(): CSSResultGroup {
-        return [configElementStyle];
-    }
 }