Add views dropdown and footer actions to the "move to view" dialog (#10172)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/components/hui-views-list.ts

@@ -1,93 +0,0 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { toggleAttribute } from "../../../common/dom/toggle_attribute";
-import "../../../components/ha-icon";
-import { LovelaceConfig } from "../../../data/lovelace";
-
-declare global {
-  interface HASSDomEvents {
-    "view-selected": {
-      view: number;
-    };
-  }
-}
-
-@customElement("hui-views-list")
-class HuiViewsList extends LitElement {
-  @state() private lovelaceConfig?: LovelaceConfig | undefined;
-
-  @state() private selected?: number | undefined;
-
-  protected render(): TemplateResult {
-    if (!this.lovelaceConfig) {
-      return html``;
-    }
-
-    return html`
-      <paper-listbox attr-for-selected="data-index" .selected=${this.selected}>
-        ${this.lovelaceConfig.views.map(
-          (view, index) => html`
-            <paper-icon-item @click=${this._handlePickView} data-index=${index}>
-              ${view.icon
-                ? html`
-                    <ha-icon .icon=${view.icon} slot="item-icon"></ha-icon>
-                  `
-                : ""}
-              ${view.title || view.path || "Unnamed view"}
-            </paper-icon-item>
-          `
-        )}
-      </paper-listbox>
-    `;
-  }
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    toggleAttribute(
-      this,
-      "hide-icons",
-      this.lovelaceConfig
-        ? !this.lovelaceConfig.views.some((view) => view.icon)
-        : true
-    );
-  }
-
-  private async _handlePickView(ev: Event) {
-    const view = Number((ev.currentTarget as any).getAttribute("data-index"));
-    fireEvent(this, "view-selected", { view });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-listbox {
-        padding-top: 0;
-      }
-
-      paper-listbox ha-icon {
-        padding: 12px;
-        color: var(--secondary-text-color);
-      }
-
-      paper-icon-item {
-        cursor: pointer;
-      }
-
-      paper-icon-item[disabled] {
-        cursor: initial;
-      }
-
-      :host([hide-icons]) paper-icon-item {
-        --paper-item-icon-width: 0px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-views-list": HuiViewsList;
-  }
-}

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -1,9 +1,13 @@
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-radio-list-item";
 import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-icon";
 import "../../../../components/ha-paper-dropdown-menu";
 import {
   fetchConfig,
@@ -13,9 +17,16 @@ import {
 } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
-import "../../components/hui-views-list";
 import type { SelectViewDialogParams } from "./show-select-view-dialog";
 
+declare global {
+  interface HASSDomEvents {
+    "view-selected": {
+      view: number;
+    };
+  }
+}
+
 @customElement("hui-dialog-select-view")
 export class HuiDialogSelectView extends LitElement {
   public hass!: HomeAssistant;
@@ -28,6 +39,8 @@ export class HuiDialogSelectView extends LitElement {
 
   @state() private _config?: LovelaceConfig;
 
+  @state() private _selectedViewIdx = 0;
+
   public showDialog(params: SelectViewDialogParams): void {
     this._config = params.lovelaceConfig;
     this._urlPath = params.urlPath;
@@ -50,7 +63,6 @@ export class HuiDialogSelectView extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        hideActions
         .heading=${createCloseHeading(
           this.hass,
           this._params.header ||
@@ -94,12 +106,34 @@ export class HuiDialogSelectView extends LitElement {
             </ha-paper-dropdown-menu>`
           : ""}
         ${this._config
-          ? html` <hui-views-list
-              .lovelaceConfig=${this._config}
-              @view-selected=${this._selectView}
+          ? this._config.views.length > 1
+            ? html`
+                <mwc-list>
+                  ${this._config.views.map(
+                    (view, idx) => html`
+                      <mwc-radio-list-item
+                        graphic=${this._config?.views.some(({ icon }) => icon)
+                          ? "icon"
+                          : null}
+                        @click=${this._viewChanged}
+                        .value=${idx.toString()}
+                        .selected=${this._selectedViewIdx === idx}
                       >
-            </hui-views-list>`
+                        <span>${view.title}</span>
+                        <ha-icon .icon=${view.icon} slot="graphic"></ha-icon>
+                      </mwc-radio-list-item>
+                    `
+                  )}
+                </mwc-list>
+              `
+            : ""
           : html`<div>No config found.</div>`}
+        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+          ${this.hass!.localize("ui.common.cancel")}
+        </mwc-button>
+        <mwc-button slot="primaryAction" @click=${this._selectView}>
+          ${this.hass!.localize("ui.common.move")}
+        </mwc-button>
       </ha-dialog>
     `;
   }
@@ -118,6 +152,7 @@ export class HuiDialogSelectView extends LitElement {
       urlPath = null;
     }
     this._urlPath = urlPath;
+    this._selectedViewIdx = 0;
     try {
       this._config = await fetchConfig(this.hass.connection, urlPath, false);
     } catch (err: any) {
@@ -125,9 +160,21 @@ export class HuiDialogSelectView extends LitElement {
     }
   }
 
-  private _selectView(e: CustomEvent): void {
-    const view: number = e.detail.view;
-    this._params!.viewSelectedCallback(this._urlPath!, this._config!, view);
+  private _viewChanged(e) {
+    const view = Number(e.target.value);
+
+    if (!isNaN(view)) {
+      this._selectedViewIdx = view;
+    }
+  }
+
+  private _selectView(): void {
+    fireEvent(this, "view-selected", { view: this._selectedViewIdx });
+    this._params!.viewSelectedCallback(
+      this._urlPath!,
+      this._config!,
+      this._selectedViewIdx
+    );
     this.closeDialog();
   }
 

src/translations/en.json

@@ -288,6 +288,7 @@
       "next": "Next",
       "back": "Back",
       "undo": "Undo",
+      "move": "Move",
       "save": "Save",
       "rename": "Rename",
       "yes": "Yes",
@@ -3174,7 +3175,8 @@
           },
           "select_view": {
             "header": "Choose a view",
-            "dashboard_label": "Dashboard"
+            "dashboard_label": "Dashboard",
+            "views_label": "View"
           },
           "suggest_card": {
             "header": "We created a suggestion for you",