From 403c0422352e0af452850ba467b74c9c276a3e1d Mon Sep 17 00:00:00 2001 From: MartinT <44962077+MartinTuroci@users.noreply.github.com> Date: Mon, 18 Oct 2021 22:27:00 +0200 Subject: [PATCH] Add views dropdown and footer actions to the "move to view" dialog (#10172) Co-authored-by: Bram Kragten --- .../lovelace/components/hui-views-list.ts | 93 ------------------- .../select-view/hui-dialog-select-view.ts | 67 +++++++++++-- src/translations/en.json | 4 +- 3 files changed, 60 insertions(+), 104 deletions(-) delete mode 100644 src/panels/lovelace/components/hui-views-list.ts 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",