Fix edit view and layout (#2213)

* Fix edit view and layout

* Colors

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]) {
+        paper-icon-button.delete {
-          color: var(--google-red-500);
+          color: var(--secondary-text-color);
+          float: right;
         }
       </style>
       <slot></slot>
@@ -55,11 +56,12 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
             this.localize("ui.panel.lovelace.editor.edit_card.edit")
           }</paper-button
         >
-        <paper-button class="warning" @click="${this._deleteCard}"
+        <paper-icon-button
-          >${
+          class="delete"
-            this.localize("ui.panel.lovelace.editor.edit_card.delete")
+          icon="hass:delete"
-          }</paper-button
+          @click="${this._deleteCard}"
-        >
+          title="${this.localize("ui.panel.lovelace.editor.edit_card.delete")}"
+        ></paper-icon-button>
       </div>
     `;
   }

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`

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) {
         </paper-tabs>
         <paper-dialog-scrollable> ${content} </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
+          ${
+            !this.add
+              ? html`
+                  <paper-icon-button
+                    class="delete"
+                    title="Delete"
+                    icon="hass:delete"
+                    @click="${this._delete}"
+                  ></paper-icon-button>
+                `
+              : ""
+          }
           <paper-button @click="${this._closeDialog}"
             >${this.localize("ui.common.cancel")}</paper-button
           >
@@ -152,15 +166,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
             ></paper-spinner>
             ${this.localize("ui.common.save")}</paper-button
           >
-          <paper-menu-button no-animations>
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            ></paper-icon-button>
-            <paper-listbox slot="dropdown-content">
-              <paper-item @click="${this._delete}">Delete</paper-item>
-            </paper-listbox>
-          </paper-menu-button>
         </div>
       </paper-dialog>
     `;
@@ -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`);

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;
-      }
     </style>
     <app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
     <hui-notification-drawer
@@ -148,7 +153,7 @@ class HUIRoot extends NavigateMixin(
                 <template is="dom-if" if="[[!item.icon]]">
                   [[_computeTabTitle(item.title)]]
                 </template>
-                <template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
+                <template is='dom-if' if="[[_editMode]]">
                  <ha-icon class="edit-view-icon" on-click="_editView" icon="hass:pencil"></ha-icon>
                 </template>
               </paper-tab>
@@ -299,10 +304,6 @@ class HUIRoot extends NavigateMixin(
     window.open("https://www.home-assistant.io/lovelace/", "_blank");
   }
 
-  _computeEditVisible(editMode, views) {
-    return editMode && views[this._curView];
-  }
-
   _editModeEnable() {
     if (this.config._frontendAuto) {
       showSaveDialog(this, {