From 79b71ed753970fc36a4b84f09f9e45e7510ab14e Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 19 Dec 2018 07:08:17 -0500 Subject: [PATCH] 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 --- .../lovelace/components/hui-card-options.ts | 130 ++++++++++-------- .../card-editor/hui-dialog-move-card-view.ts | 106 ++++++++++++++ .../editor/card-editor/hui-edit-card.ts | 4 + .../card-editor/show-move-card-view-dialog.ts | 35 +++++ src/panels/lovelace/hui-editor.ts | 49 ++++++- src/panels/lovelace/hui-root.ts | 5 +- 6 files changed, 264 insertions(+), 65 deletions(-) create mode 100644 src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts create mode 100644 src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index a40acfda49..4cff932dc7 100644 --- 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` -
- ${ - this.localize("ui.panel.lovelace.editor.edit_card.edit") - } - - - +
+
+ ${ + this.localize("ui.panel.lovelace.editor.edit_card.edit") + } +
+
- - Move card to view - ${ - this.lovelace!.config.views.map((view, index) => { - if (index === this.path![0]) { - return; - } - return html` - ${view.title || "Unnamed view"} - `; - }) - } - - - + + + + + Move Card + ${ + this.localize("ui.panel.lovelace.editor.edit_card.delete") + } + + +
`; } @@ -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 { diff --git 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 new file mode 100644 index 0000000000..7f88c436cf --- /dev/null +++ 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 { + this._params = params; + await this.updateComplete; + } + + protected render(): TemplateResult { + if (!this._params) { + return html``; + } + return html` + + +

Choose view to move card

+ ${ + this._params!.lovelace!.config.views.map((view, index) => { + return html` + ${view.title} + `; + }) + } + + `; + } + + 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); diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts index c793a97376..bd63979d8f 100644 --- 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`
`; } diff --git 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 new file mode 100644 index 0000000000..5ffccaaa44 --- /dev/null +++ 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); +}; diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 7ebe72d96c..739b17609d 100644 --- 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) { >
Edit Config
Save +
@@ -44,6 +55,7 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) { autocorrect="off" autocapitalize="off" spellcheck="false" + @input="${this._yamlChanged}" >
@@ -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; + } `; } - 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 { diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index ca4fa8c9b9..b261529b38 100644 --- 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;