diff --git a/src/panels/lovelace/components/hui-views-list.ts b/src/panels/lovelace/components/hui-views-list.ts
deleted file mode 100644
index a04e3f0cba..0000000000
--- a/src/panels/lovelace/components/hui-views-list.ts
+++ /dev/null
@@ -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`
-
- ${this.lovelaceConfig.views.map(
- (view, index) => html`
-
- ${view.icon
- ? html`
-
- `
- : ""}
- ${view.title || view.path || "Unnamed view"}
-
- `
- )}
-
- `;
- }
-
- 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;
- }
-}
diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
index 2ea6f32c6b..b29222a70e 100644
--- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
+++ b/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 {
`
: ""}
${this._config
- ? html`
- `
+ ? this._config.views.length > 1
+ ? html`
+
+ ${this._config.views.map(
+ (view, idx) => html`
+ icon)
+ ? "icon"
+ : null}
+ @click=${this._viewChanged}
+ .value=${idx.toString()}
+ .selected=${this._selectedViewIdx === idx}
+ >
+ ${view.title}
+
+
+ `
+ )}
+
+ `
+ : ""
: html`No config found.
`}
+
+ ${this.hass!.localize("ui.common.cancel")}
+
+
+ ${this.hass!.localize("ui.common.move")}
+
`;
}
@@ -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();
}
diff --git a/src/translations/en.json b/src/translations/en.json
index 079233c5c5..70335e9823 100755
--- a/src/translations/en.json
+++ b/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",