Update UI in the config Elements (#2117)

* UpdateUI

* Updating continues

* Update name of file

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -0,0 +1,16 @@
+import { html } from "@polymer/lit-element";
+
+export const configElementStyle = html`
+  <style>
+    paper-toggle-button {
+      padding-top: 16px;
+    }
+    .side-by-side {
+      display: flex;
+    }
+    .side-by-side > * {
+      flex: 1;
+      padding-right: 4px;
+    }
+  </style>
+`;

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -1,9 +1,9 @@
 import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { processEditorEntities } from "../process-editor-entities";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -12,6 +12,7 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { Config, ConfigEntity } from "../../cards/hui-entities-card";
+import { configElementStyle } from "./config-elements-style";
 
 import "../../../../components/entity/state-badge";
 import "../../components/hui-theme-select-editor";
@@ -48,30 +49,32 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
     }
 
     return html`
-      ${this.renderStyle()}
+      ${configElementStyle}
-      <paper-input
+      <div class="card-config">
-        label="Title"
+        <paper-input
-        value="${this._title}"
+          label="Title"
-        .configValue="${"title"}"
+          value="${this._title}"
-        @value-changed="${this._valueChanged}"
+          .configValue="${"title"}"
-      ></paper-input>
+          @value-changed="${this._valueChanged}"
-      <hui-theme-select-editor
+        ></paper-input>
-        .hass="${this.hass}"
+        <hui-theme-select-editor
-        .value="${this._theme}"
+          .hass="${this.hass}"
-        .configValue="${"theme"}"
+          .value="${this._theme}"
-        @theme-changed="${this._valueChanged}"
+          .configValue="${"theme"}"
-      ></hui-theme-select-editor>
+          @theme-changed="${this._valueChanged}"
+        ></hui-theme-select-editor>
+        <paper-toggle-button
+          ?checked="${this._config!.show_header_toggle !== false}"
+          .configValue="${"show_header_toggle"}"
+          @change="${this._valueChanged}"
+          >Show Header Toggle?</paper-toggle-button
+        >
+      </div>
       <hui-entity-editor
         .hass="${this.hass}"
         .entities="${this._configEntities}"
         @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>
-      <paper-checkbox
-        ?checked="${this._config!.show_header_toggle !== false}"
-        .configValue="${"show_header_toggle"}"
-        @change="${this._valueChanged}"
-        >Show Header Toggle?</paper-checkbox
-      >
     `;
   }
 
@@ -102,17 +105,6 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
 
     fireEvent(this, "config-changed", { config: this._config });
   }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-checkbox {
-          display: block;
-          padding-top: 16px;
-        }
-      </style>
-    `;
-  }
 }
 
 declare global {

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -1,9 +1,9 @@
 import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { processEditorEntities } from "../process-editor-entities";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -12,6 +12,7 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { Config, ConfigEntity } from "../../cards/hui-glance-card";
+import { configElementStyle } from "./config-elements-style";
 
 import "../../../../components/entity/state-badge";
 import "../../components/hui-theme-select-editor";
@@ -52,42 +53,48 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
     }
 
     return html`
-      ${this.renderStyle()}
+      ${configElementStyle}
-      <paper-input
+      <div class="card-config">
-        label="Title"
+        <paper-input
-        value="${this._title}"
+          label="Title"
-        .configValue="${"title"}"
+          value="${this._title}"
-        @value-changed="${this._valueChanged}"
+          .configValue="${"title"}"
-      ></paper-input>
+          @value-changed="${this._valueChanged}"
-      <hui-theme-select-editor
+        ></paper-input>
-        .hass="${this.hass}"
+        <div class="side-by-side">
-        .value="${this._theme}"
+          <hui-theme-select-editor
-        .configValue="${"theme"}"
+            .hass="${this.hass}"
-        @theme-changed="${this._valueChanged}"
+            .value="${this._theme}"
-      ></hui-theme-select-editor>
+            .configValue="${"theme"}"
-      <paper-input
+            @theme-changed="${this._valueChanged}"
-        label="Columns"
+          ></hui-theme-select-editor>
-        value="${this._columns}"
+          <paper-input
-        .configValue="${"columns"}"
+            label="Columns"
-        @value-changed="${this._valueChanged}"
+            value="${this._columns}"
-      ></paper-input>
+            .configValue="${"columns"}"
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+        </div>
+        <div class="side-by-side">
+          <paper-toggle-button
+            ?checked="${this._config!.show_name !== false}"
+            .configValue="${"show_name"}"
+            @change="${this._valueChanged}"
+            >Show Entity's Name?</paper-toggle-button
+          >
+          <paper-toggle-button
+            ?checked="${this._config!.show_state !== false}"
+            .configValue="${"show_state"}"
+            @change="${this._valueChanged}"
+            >Show Entity's State Text?</paper-toggle-button
+          >
+        </div>
+      </div>
       <hui-entity-editor
         .hass="${this.hass}"
         .entities="${this._configEntities}"
         @entities-changed="${this._valueChanged}"
       ></hui-entity-editor>
-      <paper-checkbox
-        ?checked="${this._config!.show_name !== false}"
-        .configValue="${"show_name"}"
-        @change="${this._valueChanged}"
-        >Show Entity's Name?</paper-checkbox
-      >
-      <paper-checkbox
-        ?checked="${this._config!.show_state !== false}"
-        .configValue="${"show_state"}"
-        @change="${this._valueChanged}"
-        >Show Entity's State Text?</paper-checkbox
-      >
     `;
   }
 
@@ -117,17 +124,6 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-checkbox {
-          display: block;
-          padding-top: 16px;
-        }
-      </style>
-    `;
-  }
 }
 
 declare global {

src/panels/lovelace/editor/hui-edit-card.ts

@@ -131,6 +131,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                   ></hui-yaml-editor>
                 `
           }
+          <hr />
           <hui-card-preview .hass="${this.hass}"></hui-card-preview>
         </paper-dialog-scrollable>
         ${
@@ -197,7 +198,16 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
           display: none;
         }
         .element-editor {
-          margin-bottom: 16px;
+          margin-bottom: 8px;
+        }
+        hr {
+          color: #000;
+          opacity: 0.12;
+        }
+        hui-card-preview {
+          padding-top: 8px;
+          margin-bottom: 4px;
+          display: block;
         }
       </style>
     `;