UI Design Update (#2207)

src/panels/lovelace/components/hui-card-options.ts

@@ -50,14 +50,15 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
       </style>
       <slot></slot>
       <div>
+        <paper-button @click="${this._editCard}"
+          >${
+            this.localize("ui.panel.lovelace.editor.edit_card.edit")
+          }</paper-button
+        >
         <paper-button class="warning" @click="${this._deleteCard}"
           >${
             this.localize("ui.panel.lovelace.editor.edit_card.delete")
           }</paper-button
-        ><paper-button @click="${this._editCard}"
-          >${
-            this.localize("ui.panel.lovelace.editor.edit_card.edit")
-          }</paper-button
         >
       </div>
     `;

src/panels/lovelace/editor/hui-edit-view.ts

@@ -10,6 +10,10 @@ import "@polymer/paper-spinner/paper-spinner";
 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";
@@ -28,6 +32,8 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { EntitiesEditorEvent, ViewEditEvent } from "./types";
 import { processEditorEntities } from "./process-editor-entities";
 import { EntityConfig } from "../entity-rows/types";
+import { confDeleteView } from "./delete-view";
+import { navigate } from "../../../common/navigate";
 
 export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
   static get properties(): PropertyDeclarations {
@@ -146,6 +152,15 @@ 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>
     `;
@@ -189,6 +204,20 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
     this._updateConfigInBackend();
   }
 
+  private _delete() {
+    if (this._config!.cards && this._config!.cards!.length > 0) {
+      alert(
+        "You can't delete a view that has card in them. Remove the cards first."
+      );
+      return;
+    }
+    confDeleteView(this.hass!, this._config!.id!, () => {
+      this._closeDialog();
+      this.reloadLovelace!();
+      navigate(this, `/lovelace/0`);
+    });
+  }
+
   private async _resizeDialog(): Promise<void> {
     await this.updateComplete;
     fireEvent(this._dialog, "iron-resize");

src/panels/lovelace/hui-root.js

@@ -34,7 +34,6 @@ import debounce from "../../common/util/debounce";
 import createCardElement from "./common/create-card-element";
 import { showSaveDialog } from "./editor/hui-dialog-save-config";
 import { showEditViewDialog } from "./editor/show-edit-view-dialog";
-import { confDeleteView } from "./editor/delete-view";
 
 // CSS and JS should only be imported once. Modules and HTML are safe.
 const CSS_CACHE = {};
@@ -61,7 +60,6 @@ class HUIRoot extends NavigateMixin(
         text-transform: uppercase;
       }
       #add-view {
-        background: var(--paper-fab-background, var(--accent-color));
         position: absolute;
         height: 44px;
       }
@@ -71,12 +69,9 @@ class HUIRoot extends NavigateMixin(
       paper-button.warning:not([disabled]) {
         color: var(--google-red-500);
       }
-      app-toolbar.secondary {
+      #add-view ha-icon {
-        background-color: var(--light-primary-color);
+        background-color: var(--accent-color);
-        color: var(--primary-text-color, #333);
+        border-radius: 5px;
-        font-size: 14px;
-        font-weight: 500;
-        height: auto;
       }
       #view {
         min-height: calc(100vh - 112px);
@@ -95,6 +90,9 @@ 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
@@ -150,6 +148,9 @@ class HUIRoot extends NavigateMixin(
                 <template is="dom-if" if="[[!item.icon]]">
                   [[_computeTabTitle(item.title)]]
                 </template>
+                <template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
+                 <ha-icon class="edit-view-icon" on-click="_editView" icon="hass:pencil"></ha-icon>
+                </template>
               </paper-tab>
             </template>
             <template is='dom-if' if="[[_editMode]]">
@@ -160,12 +161,6 @@ class HUIRoot extends NavigateMixin(
           </paper-tabs>
         </div>
       </app-header>
-      <template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
-        <app-toolbar class="secondary">
-          <paper-button on-click="_editView">[[localize("ui.panel.lovelace.editor.edit_view.edit")]]</paper-button>
-          <paper-button class="warning" on-click="_deleteView">[[localize("ui.panel.lovelace.editor.edit_view.delete")]]</paper-button>
-        </app-toolbar>
-      </template>
       <div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
     </app-header-layout>
     `;
@@ -357,24 +352,6 @@ class HUIRoot extends NavigateMixin(
     });
   }
 
-  _deleteView() {
-    const viewConfig = this.config.views[this._curView];
-    if (viewConfig.cards && viewConfig.cards.length > 0) {
-      alert(
-        "You can't delete a view that has card in them. Remove the cards first."
-      );
-      return;
-    }
-    if (!viewConfig.id) {
-      this._editView();
-      return;
-    }
-    confDeleteView(this.hass, viewConfig.id, () => {
-      this.fire("config-refresh");
-      this._navigateView(0);
-    });
-  }
-
   _handleViewSelected(ev) {
     const index = ev.detail.selected;
     this._navigateView(index);