Edit dialogs for mobile (#2513)

* Edit dialogs for mobile

* unused

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

@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element";
 import "@polymer/paper-button/paper-button";
 
 import { HomeAssistant } from "../../../../types";
@@ -40,7 +40,6 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <h3>${this.localize("ui.panel.lovelace.editor.edit_card.pick_card")}</h3>
       <div class="cards-container">
         ${
@@ -59,9 +58,9 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    return html`
+    return [
-      <style>
+      css`
         .cards-container {
           display: flex;
           flex-wrap: wrap;
@@ -70,8 +69,13 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
         .cards-container paper-button {
           flex: 1 0 25%;
         }
-      </style>
+        @media all and (max-width: 450px), all and (max-height: 500px) {
-    `;
+          .cards-container paper-button {
+            flex: 1 0 33%;
+          }
+        }
+      `,
+    ];
   }
 
   private _cardPicked(ev: Event): void {

src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts

@@ -1,12 +1,16 @@
 import {
   html,
+  css,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
+import { haStyleDialog } from "../../../../resources/ha-style";
+
 import "./hui-card-picker";
 import { HomeAssistant } from "../../../../types";
 import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
@@ -51,6 +55,31 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
   private _skipPick() {
     this.cardPicked!({ type: "" });
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
+
+        paper-dialog {
+          max-width: 650px;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

@@ -81,82 +81,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     };
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          :host::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
-          /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
-            max-height: 100%;
-            height: 100%;
-          }
-        }
-
-        @media all and (min-width: 660px) {
-          paper-dialog {
-            width: 650px;
-          }
-        }
-
-        paper-dialog {
-          max-width: 650px;
-        }
-
-        .center {
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .margin-bot {
-          margin-bottom: 24px;
-        }
-        paper-button paper-spinner {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-        paper-spinner {
-          display: none;
-        }
-        paper-spinner[active] {
-          display: block;
-        }
-        .hidden {
-          display: none;
-        }
-        .element-editor {
-          margin-bottom: 8px;
-        }
-        .error {
-          color: #ef5350;
-          border-bottom: 1px solid #ef5350;
-        }
-        hr {
-          color: #000;
-          opacity: 0.12;
-        }
-        hui-card-preview {
-          padding-top: 8px;
-          margin-bottom: 4px;
-          display: block;
-        }
-        .toggle-button {
-          margin-right: auto;
-        }
-      `,
-    ];
-  }
-
   private get _dialog(): PaperDialogElement {
     return this.shadowRoot!.querySelector("paper-dialog")!;
   }
@@ -479,6 +403,72 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
       this.closeDialog!();
     }
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
+
+        paper-dialog {
+          max-width: 650px;
+        }
+
+        .center {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .margin-bot {
+          margin-bottom: 24px;
+        }
+        paper-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+        .hidden {
+          display: none;
+        }
+        .element-editor {
+          margin-bottom: 8px;
+        }
+        .error {
+          color: #ef5350;
+          border-bottom: 1px solid #ef5350;
+        }
+        hr {
+          color: #000;
+          opacity: 0.12;
+        }
+        hui-card-preview {
+          padding-top: 8px;
+          margin-bottom: 4px;
+          display: block;
+        }
+        .toggle-button {
+          margin-right: auto;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -1,8 +1,10 @@
 import {
   html,
+  css,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 
 import "@polymer/paper-spinner/paper-spinner";
@@ -12,6 +14,8 @@ import "@polymer/paper-dialog/paper-dialog";
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-button/paper-button";
 
+import { haStyleDialog } from "../../../resources/ha-style";
+
 import { HomeAssistant } from "../../../types";
 
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
@@ -47,7 +51,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <paper-dialog with-backdrop>
         <h2>${this.localize("ui.panel.lovelace.editor.save_config.header")}</h2>
         <paper-dialog-scrollable>
@@ -79,27 +82,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-dialog {
-          width: 650px;
-        }
-        paper-spinner {
-          display: none;
-        }
-        paper-spinner[active] {
-          display: block;
-        }
-        paper-button paper-spinner {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-      </style>
-    `;
-  }
-
   private _closeDialog(): void {
     this._dialog.close();
   }
@@ -120,6 +102,40 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
       this._saving = false;
     }
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
+        paper-dialog {
+          max-width: 650px;
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+        paper-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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

@@ -1,8 +1,10 @@
 import {
   html,
+  css,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
@@ -11,6 +13,9 @@ import "@polymer/paper-dialog/paper-dialog";
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+
+import { haStyleDialog } from "../../../../resources/ha-style";
+
 import "./hui-lovelace-editor";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceConfig } from "../../../../data/lovelace";
@@ -53,7 +58,6 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <paper-dialog with-backdrop>
         <h2>Edit Lovelace</h2>
         <paper-dialog-scrollable>
@@ -125,11 +129,24 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
     return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig);
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    return html`
+    return [
-      <style>
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
         paper-dialog {
-          width: 650px;
+          max-width: 650px;
         }
         paper-button paper-spinner {
           width: 14px;
@@ -142,8 +159,8 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
         paper-spinner[active] {
           display: block;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 }
 

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

@@ -1,8 +1,10 @@
 import {
   html,
+  css,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 
 import "@polymer/paper-spinner/paper-spinner";
@@ -15,6 +17,9 @@ import "@polymer/paper-icon-button/paper-icon-button.js";
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+
+import { haStyleDialog } from "../../../../resources/ha-style";
+
 import "../../components/hui-entity-editor";
 import "./hui-view-editor";
 import { HomeAssistant } from "../../../../types";
@@ -115,7 +120,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
         break;
     }
     return html`
-      ${this.renderStyle()}
       <paper-dialog with-backdrop>
         <h2>${this.localize("ui.panel.lovelace.editor.edit_view.header")}</h2>
         <paper-tabs
@@ -159,43 +163,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-dialog {
-          width: 650px;
-        }
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
-          text-transform: uppercase;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        }
-        paper-button paper-spinner {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-        paper-icon-button.delete {
-          margin-right: auto;
-          color: var(--secondary-text-color);
-        }
-        paper-spinner {
-          display: none;
-        }
-        paper-spinner[active] {
-          display: block;
-        }
-        .hidden {
-          display: none;
-        }
-        .error {
-          color: #ef5350;
-          border-bottom: 1px solid #ef5350;
-        }
-      </style>
-    `;
-  }
-
   private async _delete() {
     if (this._cards && this._cards.length > 0) {
       alert(
@@ -297,6 +264,57 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
   private get _creatingView(): boolean {
     return this.viewIndex === undefined;
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
+        paper-dialog {
+          max-width: 650px;
+        }
+        paper-tabs {
+          --paper-tabs-selection-bar-color: var(--primary-color);
+          text-transform: uppercase;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+        paper-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+        paper-icon-button.delete {
+          margin-right: auto;
+          color: var(--secondary-text-color);
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+        .hidden {
+          display: none;
+        }
+        .error {
+          color: #ef5350;
+          border-bottom: 1px solid #ef5350;
+        }
+      </style>
+    `,
+    ];
+  }
 }
 
 declare global {