diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index d05333bb1b..13a5ed290a 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,5 +1,6 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; import "@polymer/paper-button/paper-button"; +import "@polymer/paper-icon-button/paper-icon-button"; import { fireEvent } from "../../../common/dom/fire_event"; import { showEditCardDialog } from "../editor/show-edit-card-dialog"; @@ -38,14 +39,14 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) { 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.2) 0px 3px 1px -2px; - text-align: right; } paper-button { color: var(--primary-color); font-weight: 500; } - paper-button.warning:not([disabled]) { - color: var(--google-red-500); + paper-icon-button.delete { + color: var(--secondary-text-color); + float: right; } @@ -55,11 +56,12 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) { this.localize("ui.panel.lovelace.editor.edit_card.edit") } - ${ - this.localize("ui.panel.lovelace.editor.edit_card.delete") - } + `; } diff --git a/src/panels/lovelace/editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts index 0b5c3f7112..bdad7178d9 100644 --- a/src/panels/lovelace/editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts @@ -49,7 +49,7 @@ export class HuiDialogEditCard extends LitElement { if ( (!this._params.add && this._params.cardConfig && - !this._params.cardConfig.id) || + !("id" in this._params.cardConfig)) || (this._params.add && !this._params.viewId) ) { return html` diff --git a/src/panels/lovelace/editor/hui-edit-view.ts b/src/panels/lovelace/editor/hui-edit-view.ts index f870139d84..fc7c4b9f6b 100644 --- a/src/panels/lovelace/editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/hui-edit-view.ts @@ -11,9 +11,6 @@ import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-icon-button/paper-icon-button.js"; -import "@polymer/paper-item/paper-item.js"; -import "@polymer/paper-listbox/paper-listbox.js"; -import "@polymer/paper-menu-button/paper-menu-button.js"; // This is not a duplicate import, one is for types, one is for element. // tslint:disable-next-line import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; @@ -26,6 +23,7 @@ import { addView, updateViewConfig, LovelaceViewConfig, + LovelaceCardConfig, } from "../../../data/lovelace"; import { fireEvent } from "../../../common/dom/fire_event"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; @@ -43,6 +41,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { add: {}, _config: {}, _badges: {}, + _cards: {}, _saving: {}, _curTab: {}, }; @@ -54,6 +53,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { protected hass?: HomeAssistant; private _config?: LovelaceViewConfig; private _badges?: EntityConfig[]; + private _cards?: LovelaceCardConfig[]; private _saving: boolean; private _curTabIndex: number; private _curTab?: string; @@ -86,9 +86,11 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { const { cards, badges, ...viewConfig } = this.viewConfig; this._config = viewConfig; this._badges = badges ? processEditorEntities(badges) : []; + this._cards = cards; } else if (changedProperties.has("add")) { this._config = {}; this._badges = []; + this._cards = []; } this._resizeDialog(); } @@ -139,6 +141,18 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { ${content}
+ ${ + !this.add + ? html` + + ` + : "" + } ${this.localize("ui.common.cancel")} @@ -152,15 +166,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { > ${this.localize("ui.common.save")} - - - - Delete - -
`; @@ -182,6 +187,10 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { height: 14px; margin-right: 20px; } + paper-icon-button.delete { + margin-right: auto; + color: var(--secondary-text-color); + } paper-spinner { display: none; } @@ -205,13 +214,13 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { } private _delete() { - if (this._config!.cards && this._config!.cards!.length > 0) { + if (this._cards && this._cards.length > 0) { alert( "You can't delete a view that has cards in it. Remove the cards first." ); return; } - confDeleteView(this.hass!, this._config!.id!, () => { + confDeleteView(this.hass!, String(this.viewConfig!.id!), () => { this._closeDialog(); this.reloadLovelace!(); navigate(this, `/lovelace/0`); diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js index 2dab751fa9..05da5b2e30 100644 --- a/src/panels/lovelace/hui-root.js +++ b/src/panels/lovelace/hui-root.js @@ -59,20 +59,28 @@ class HUIRoot extends NavigateMixin( --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF); text-transform: uppercase; } + paper-tab.iron-selected .edit-view-icon{ + display: inline-flex; + } + .edit-view-icon { + padding-left: 8px; + display: none; + } #add-view { position: absolute; height: 44px; } + #add-view ha-icon { + background-color: var(--accent-color); + border-radius: 5px; + margin-top: 4px; + } app-toolbar a { color: var(--text-primary-color, white); } paper-button.warning:not([disabled]) { color: var(--google-red-500); } - #add-view ha-icon { - background-color: var(--accent-color); - border-radius: 5px; - } #view { min-height: calc(100vh - 112px); /** @@ -90,9 +98,6 @@ class HUIRoot extends NavigateMixin( paper-item { cursor: pointer; } - .edit-view-icon { - padding-left: 8px; - } [[_computeTabTitle(item.title)]] -