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

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>
+      <div class="options">
-        <paper-button @click="${this._editCard}"
+        <div class="primary-actions">
-          >${
+          <paper-button @click="${this._editCard}"
-            this.localize("ui.panel.lovelace.editor.edit_card.edit")
+            >${
-          }</paper-button
+              this.localize("ui.panel.lovelace.editor.edit_card.edit")
-        >
+            }</paper-button
-        <paper-icon-button
+          >
-          icon="hass:arrow-up"
+        </div>
-          @click="${this._cardUp}"
+        <div class="secondary-actions">
-          ?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">
           <paper-icon-button
-            title="Move card to a different view"
+            title="Move card down"
-            icon="hass:file-replace"
+            class="move-arrow"
-            ?disabled="${this.lovelace!.config.views.length === 1}"
+            icon="hass:arrow-down"
-            slot="dropdown-trigger"
+            @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-icon-button
-            <paper-item disabled class="header">Move card to view</paper-item>
+            title="Move card up"
-            ${
+            class="move-arrow"
-              this.lovelace!.config.views.map((view, index) => {
+            icon="hass:arrow-up"
-                if (index === this.path![0]) {
+            @click="${this._cardUp}"
-                  return;
+            ?disabled="${this.path![1] === 0}"
-                }
+          ></paper-icon-button>
-                return html`
+          <paper-menu-button>
-                  <paper-item @click="${this._moveCard}" .index="${index}"
+            <paper-icon-button
-                    >${view.title || "Unnamed view"}</paper-item
+              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-listbox>
+              <paper-item @click="${this._deleteCard}"
-        </paper-menu-button>
+                >${
-        <paper-icon-button
+                  this.localize("ui.panel.lovelace.editor.edit_card.delete")
-          class="delete"
+                }</paper-item
-          icon="hass:delete"
+              >
-          @click="${this._deleteCard}"
+            </paper-listbox>
-          title="${this.localize("ui.panel.lovelace.editor.edit_card.delete")}"
+          </paper-menu-button>
-        ></paper-icon-button>
+        </div>
       </div>
     `;
   }
@@ -127,12 +140,11 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
     );
   }
 
-  private _moveCard(ev: MouseEvent): void {
+  private _moveCard(): void {
-    const lovelace = this.lovelace!;
+    showMoveCardViewDialog(this, {
-    const path = this.path!;
+      path: this.path!,
-    lovelace.saveConfig(
+      lovelace: this.lovelace!,
-      moveCard(lovelace.config, path, [(ev.currentTarget! as any).index])
+    });
-    );
   }
 
   private _deleteCard(): void {

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);

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>
     `;
   }

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);
+};

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 {

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;