Update UI and Add Move Card to a Dialogue (#2282)

* Update UI * REmove useless import * Add Notification if saved is done * Move Register Dialog * Updates from suggestions * Updates box shadow on card options * Update color and viewselection * Add pointer * Update Cursor * Update check next to save * Comment Updates * Text area
2025-08-01 13:37:47 +00:00 · 2018-12-19 07:08:17 -05:00 · 2018-12-19 07:08:17 -05:00 · 79b71ed753
commit 79b71ed753
parent 49fa74cc07
6 changed files with 264 additions and 65 deletions
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@ -3,14 +3,15 @@ import "@polymer/paper-button/paper-button";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
-import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";

+import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { confDeleteCard } from "../editor/delete-card";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { Lovelace } from "../types";
-import { swapCard, moveCard } from "../editor/config-util";
+import { swapCard } from "../editor/config-util";
+import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog";

 export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
  public cardConfig?: LovelaceCardConfig;
@ -25,24 +26,40 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
  protected render() {
    return html`
      <style>
-        div {
+        div.options {
          border-top: 1px solid #e8e8e8;
-          padding: 5px 16px;
+          padding: 5px 8px;
          background: var(--paper-card-background-color, white);
          box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
-            rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
+            rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
            rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+          display: flex;
+        }
+        div.options .primary-actions {
+          flex: 1;
+          margin: auto;
+        }
+        div.options .secondary-actions {
+          flex: 4;
+          text-align: right;
        }
        paper-button {
          color: var(--primary-color);
          font-weight: 500;
+          letter-spacing: 0.05em;
+          font-size: 16px;
+          padding: 0;
+          margin: 0;
        }
        paper-icon-button {
          color: var(--primary-text-color);
        }
-        paper-icon-button.delete {
+        paper-icon-button.move-arrow[disabled] {
+          color: var(--disabled-text-color);
+        }
+        paper-menu-button {
          color: var(--secondary-text-color);
-          float: right;
+          padding: 0;
        }
        paper-item.header {
          color: var(--primary-text-color);
@ -50,56 +67,52 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
          font-weight: 500;
          font-size: 14px;
        }
+        paper-item {
+          cursor: pointer;
+        }
      </style>
      <slot></slot>
-      <div>
-        <paper-button @click="${this._editCard}"
-          >${
-            this.localize("ui.panel.lovelace.editor.edit_card.edit")
-          }</paper-button
-        >
-        <paper-icon-button
-          icon="hass:arrow-up"
-          @click="${this._cardUp}"
-          ?disabled="${this.path![1] === 0}"
-        ></paper-icon-button>
-        <paper-icon-button
-          icon="hass:arrow-down"
-          @click="${this._cardDown}"
-          ?disabled="${
-            this.lovelace!.config.views[this.path![0]].cards!.length ===
-              this.path![1] + 1
-          }"
-        ></paper-icon-button>
-        <paper-menu-button vertical-offset="48">
+      <div class="options">
+        <div class="primary-actions">
+          <paper-button @click="${this._editCard}"
+            >${
+              this.localize("ui.panel.lovelace.editor.edit_card.edit")
+            }</paper-button
+          >
+        </div>
+        <div class="secondary-actions">
          <paper-icon-button
-            title="Move card to a different view"
-            icon="hass:file-replace"
-            ?disabled="${this.lovelace!.config.views.length === 1}"
-            slot="dropdown-trigger"
+            title="Move card down"
+            class="move-arrow"
+            icon="hass:arrow-down"
+            @click="${this._cardDown}"
+            ?disabled="${
+              this.lovelace!.config.views[this.path![0]].cards!.length ===
+                this.path![1] + 1
+            }"
          ></paper-icon-button>
-          <paper-listbox on-iron-select="_deselect" slot="dropdown-content">
-            <paper-item disabled class="header">Move card to view</paper-item>
-            ${
-              this.lovelace!.config.views.map((view, index) => {
-                if (index === this.path![0]) {
-                  return;
-                }
-                return html`
-                  <paper-item @click="${this._moveCard}" .index="${index}"
-                    >${view.title || "Unnamed view"}</paper-item
-                  >
-                `;
-              })
-            }
-          </paper-listbox>
-        </paper-menu-button>
-        <paper-icon-button
-          class="delete"
-          icon="hass:delete"
-          @click="${this._deleteCard}"
-          title="${this.localize("ui.panel.lovelace.editor.edit_card.delete")}"
-        ></paper-icon-button>
+          <paper-icon-button
+            title="Move card up"
+            class="move-arrow"
+            icon="hass:arrow-up"
+            @click="${this._cardUp}"
+            ?disabled="${this.path![1] === 0}"
+          ></paper-icon-button>
+          <paper-menu-button>
+            <paper-icon-button
+              icon="hass:dots-vertical"
+              slot="dropdown-trigger"
+            ></paper-icon-button>
+            <paper-listbox slot="dropdown-content">
+              <paper-item @click="${this._moveCard}">Move Card</paper-item>
+              <paper-item @click="${this._deleteCard}"
+                >${
+                  this.localize("ui.panel.lovelace.editor.edit_card.delete")
+                }</paper-item
+              >
+            </paper-listbox>
+          </paper-menu-button>
+        </div>
      </div>
    `;
  }
@ -127,12 +140,11 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
    );
  }

-  private _moveCard(ev: MouseEvent): void {
-    const lovelace = this.lovelace!;
-    const path = this.path!;
-    lovelace.saveConfig(
-      moveCard(lovelace.config, path, [(ev.currentTarget! as any).index])
-    );
+  private _moveCard(): void {
+    showMoveCardViewDialog(this, {
+      path: this.path!,
+      lovelace: this.lovelace!,
+    });
  }

  private _deleteCard(): void {
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
@ -0,0 +1,106 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-item/paper-item";
+// tslint:disable-next-line:no-duplicate-imports
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+
+import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
+import { moveCard } from "../config-util";
+import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
+
+export class HuiDialogMoveCardView extends hassLocalizeLitMixin(LitElement) {
+  private _params?: MoveCardViewDialogParams;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      _params: {},
+    };
+  }
+
+  public async showDialog(params: MoveCardViewDialogParams): Promise<void> {
+    this._params = params;
+    await this.updateComplete;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+    return html`
+      <style>
+        paper-item {
+          margin: 8px;
+          cursor: pointer;
+        }
+        paper-item[active] {
+          color: var(--primary-color);
+        }
+        paper-item[active]:before {
+          border-radius: 4px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+          content: "";
+          background-color: var(--primary-color);
+          opacity: 0.12;
+          transition: opacity 15ms linear;
+          will-change: opacity;
+        }
+      </style>
+      <paper-dialog
+        with-backdrop
+        opened
+        @opened-changed="${this._openedChanged}"
+      >
+        <h2>Choose view to move card</h2>
+        ${
+          this._params!.lovelace!.config.views.map((view, index) => {
+            return html`
+              <paper-item
+                ?active="${this._params!.path![0] === index}"
+                @click="${this._moveCard}"
+                .index="${index}"
+                >${view.title}</paper-item
+              >
+            `;
+          })
+        }
+      </paper-dialog>
+    `;
+  }
+
+  private get _dialog(): PaperDialogElement {
+    return this.shadowRoot!.querySelector("paper-dialog")!;
+  }
+
+  private _moveCard(e: Event): void {
+    const newView = (e.currentTarget! as any).index;
+    const path = this._params!.path!;
+    if (newView === path[0]) {
+      return;
+    }
+
+    const lovelace = this._params!.lovelace!;
+
+    lovelace.saveConfig(moveCard(lovelace.config, path, [newView!]));
+    this._dialog.close();
+  }
+
+  private _openedChanged(ev: MouseEvent) {
+    if (!(ev.detail as any).value) {
+      this._params = undefined;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-dialog-move-card-view": HuiDialogMoveCardView;
+  }
+}
+
+customElements.define("hui-dialog-move-card-view", HuiDialogMoveCardView);
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@ -160,6 +160,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
            ? html`
                <div class="paper-dialog-buttons">
                  <paper-button
+                    class="toggle-button"
                    ?hidden="${!this._configValue || !this._configValue.value}"
                    ?disabled="${
                      this._configElement === null || this._configState !== "OK"
@ -236,6 +237,9 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
          margin-bottom: 4px;
          display: block;
        }
+        .toggle-button {
+          margin-right: auto;
+        }
      </style>
    `;
  }
--- a/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts
+++ b/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts
@ -0,0 +1,35 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { Lovelace } from "../../types";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "show-move-card-view": MoveCardViewDialogParams;
+  }
+}
+
+let registeredDialog = false;
+
+export interface MoveCardViewDialogParams {
+  path: [number, number];
+  lovelace: Lovelace;
+}
+
+const registerEditCardDialog = (element: HTMLElement) =>
+  fireEvent(element, "register-dialog", {
+    dialogShowEvent: "show-move-card-view",
+    dialogTag: "hui-dialog-move-card-view",
+    dialogImport: () =>
+      import(/* webpackChunkName: "hui-dialog-move-card-view" */ "./hui-dialog-move-card-view"),
+  });
+
+export const showMoveCardViewDialog = (
+  element: HTMLElement,
+  moveCardViewDialogParams: MoveCardViewDialogParams
+) => {
+  if (!registeredDialog) {
+    registeredDialog = true;
+    registerEditCardDialog(element);
+  }
+  fireEvent(element, "show-move-card-view", moveCardViewDialogParams);
+};
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@ -1,4 +1,5 @@
 import { LitElement, html } from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
 import { TemplateResult } from "lit-html";
 import yaml from "js-yaml";

@ -7,20 +8,27 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-spinner/paper-spinner";

 import { Lovelace } from "./types";
 import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";

+import "../../components/ha-icon";
+
 const TAB_INSERT = "  ";

 class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
  public lovelace?: Lovelace;
  public closeEditor?: () => void;
  private _haStyle?: DocumentFragment;
+  private _saving?: boolean;
+  private _changed?: boolean;

  static get properties() {
    return {
      lovelace: {},
+      _saving: {},
+      _changed: {},
    };
  }

@ -36,6 +44,9 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
            ></paper-icon-button>
            <div main-title>Edit Config</div>
            <paper-button @click="${this._handleSave}">Save</paper-button>
+            <ha-icon class="save-button ${classMap({
+              saved: this._saving! === false && !this._changed!,
+            })}" icon="hass:check">
          </app-toolbar>
        </app-header>
        <div class="content">
@ -44,6 +55,7 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
+            @input="${this._yamlChanged}"
          ></textarea>
        </div>
      </app-header-layout>
@ -90,12 +102,13 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
        app-header-layout {
          height: 100vh;
        }
-        app-toolbar {
-          background-color: #455a64;
-        }
        paper-button {
          font-size: 16px;
        }
+        app-toolbar {
+          background-color: var(--dark-background-color, #455a64);
+          color: var(--dark-text-color);
+        }

        .content {
          height: calc(100vh - 68px);
@ -112,20 +125,46 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
          font-family: "Courier New", Courier, monospace;
          padding: 8px;
        }
+
+        .save-button {
+          opacity: 0;
+          margin-left: -16px;
+          margin-top: -4px;
+          transition: opacity 1.5s;
+        }
+
+        .saved {
+          opacity: 1;
+        }
      </style>
    `;
  }

-  private _handleSave() {
+  private async _handleSave() {
+    this._saving = true;
    let value;
    try {
      value = yaml.safeLoad(this.textArea.value);
    } catch (err) {
      alert(`Unable to parse YAML: ${err}`);
+      this._saving = false;
      return;
    }

-    this.lovelace!.saveConfig(value);
+    try {
+      await this.lovelace!.saveConfig(value);
+    } catch (err) {
+      alert(`Unable to save YAML: ${err}`);
+    }
+    this._saving = false;
+    this._changed = false;
+  }
+
+  private _yamlChanged() {
+    if (this._changed) {
+      return;
+    }
+    this._changed = true;
  }

  private get textArea(): HTMLTextAreaElement {
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@ -319,6 +319,8 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
          -ms-user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
+          --dark-color: #455a64;
+          --text-dark-color: #fff;
        }

        ha-app-layout {
@ -330,7 +332,8 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
          text-transform: uppercase;
        }
        .edit-mode {
-          background-color: #455a64;
+          background-color: var(--dark-color, #455a64);
+          color: var(--text-dark-color);
        }
        .edit-mode div[main-title] {
          pointer-events: auto;