Edit dialogs for mobile (#2513)

* Edit dialogs for mobile * unused
2025-07-25 10:16:46 +00:00 · 2019-01-21 01:18:00 +01:00 · 2019-01-21 01:18:00 +01:00 · 755a3d5cf1
commit 755a3d5cf1
parent e9c5011a6d
6 changed files with 224 additions and 150 deletions
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/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 {
-    return html`
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      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 {
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/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 {
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/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 {
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/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 {
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/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 {
-    return html`
-      <style>
+  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 {
-          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>
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/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 {