diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index fd47c4deaa..5726c8e896 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -1,5 +1,4 @@ import type { List } from "@material/mwc-list/mwc-list"; -import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiClock, mdiDelete, @@ -18,15 +17,16 @@ import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; -import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { caseInsensitiveStringCompare } from "../../../common/string/compare"; import "../../../components/ha-card"; import "../../../components/ha-check-list-item"; import "../../../components/ha-checkbox"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../components/ha-dropdown-item"; import "../../../components/ha-icon-button"; import "../../../components/ha-list"; -import "../../../components/ha-list-item"; import "../../../components/ha-markdown-element"; import "../../../components/ha-relative-time"; import "../../../components/ha-select"; @@ -378,28 +378,29 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { ${this._todoListSupportsFeature( TodoListEntityFeature.DELETE_TODO_ITEM ) - ? html` - + ${this.hass!.localize( "ui.panel.lovelace.cards.todo-list.clear_items" )} - - ` + + ` : nothing} ` : nothing} @@ -413,33 +414,27 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { `; } - private _renderMenu(config: TodoListCardConfig, unavailable: boolean) { + private _renderMenu(config: TodoListCardConfig, _unavailable: boolean) { return (!config.display_order || config.display_order === TodoSortMode.NONE) && this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM) - ? html` - + ${this.hass!.localize( this._reordering ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items" : "ui.panel.lovelace.cards.todo-list.reorder_items" )} - - - - ` + + + ` : nothing; } @@ -641,11 +636,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { } } - private _handleCompletedMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: - this._clearCompletedItems(); - break; + private _handleCompletedMenuSelect( + ev: CustomEvent<{ item: HaDropdownItem }> + ) { + if (ev.detail?.item?.value === "clear") { + this._clearCompletedItems(); } } @@ -704,11 +699,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { } } - private _handlePrimaryMenuAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: - this._toggleReorder(); - break; + private _handlePrimaryMenuSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + if (ev.detail?.item?.value === "reorder") { + this._toggleReorder(); } } diff --git a/src/panels/lovelace/components/hui-card-edit-mode.ts b/src/panels/lovelace/components/hui-card-edit-mode.ts index 6d857d8489..b78ee5aba2 100644 --- a/src/panels/lovelace/components/hui-card-edit-mode.ts +++ b/src/panels/lovelace/components/hui-card-edit-mode.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiContentCopy, mdiContentCut, @@ -12,9 +13,10 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-button-menu"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../components/ha-dropdown-item"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; @@ -41,9 +43,6 @@ export class HuiCardEditMode extends LitElement { @property({ type: Boolean, attribute: "no-move" }) public noMove = false; - @state() - public _menuOpened = false; - @state() public _hover = false; @@ -91,8 +90,7 @@ export class HuiCardEditMode extends LitElement { }; protected render(): TemplateResult { - const showOverlay = - (this._hover || this._menuOpened || this._focused) && !this.hiddenOverlay; + const showOverlay = (this._hover || this._focused) && !this.hiddenOverlay; return html`
@@ -115,107 +113,71 @@ export class HuiCardEditMode extends LitElement { `} - ${this.noEdit ? nothing : html` - - + + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.edit" )} - + `} ${this.noDuplicate ? nothing : html` - + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.duplicate" )} - + `} ${this.noMove ? nothing : html` - + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.copy" )} - - - + + + ${this.hass.localize( "ui.panel.lovelace.editor.edit_card.cut" )} - + `} ${this.noDuplicate && this.noEdit && this.noMove ? nothing - : html`
  • `} - + : html``} + ${this.hass.localize("ui.panel.lovelace.editor.edit_card.delete")} - -     + + `; } - private _handleOpened() { - this._menuOpened = true; - } - - private _handleClosed() { - this._menuOpened = false; - } - private _handleOverlayClick(ev): void { if (ev.defaultPrevented) { return; @@ -228,8 +190,14 @@ export class HuiCardEditMode extends LitElement { this._editCard(); } - private _handleAction(ev) { - switch (ev.currentTarget.action) { + private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + const action = ev.detail?.item?.value; + + if (!action) { + return; + } + + switch (action) { case "edit": this._editCard(); break; @@ -330,14 +298,12 @@ export class HuiCardEditMode extends LitElement { background: var(--secondary-background-color); --mdc-icon-size: 20px; } - .more { + .more ha-icon-button { position: absolute; right: -6px; top: -6px; inset-inline-end: -6px; inset-inline-start: initial; - } - .more ha-icon-button { cursor: pointer; border-radius: var(--ha-border-radius-circle); background: var(--secondary-background-color); diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 64c2acf537..82431d9985 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,4 +1,4 @@ -import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@home-assistant/webawesome/dist/components/divider/divider"; import { mdiContentCopy, mdiContentCut, @@ -15,10 +15,11 @@ import { customElement, property, queryAssignedElements } from "lit/decorators"; import { storage } from "../../../common/decorators/storage"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button"; -import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../components/ha-dropdown-item"; import "../../../components/ha-icon-button"; -import "../../../components/ha-list-item"; import type { LovelaceCardConfig } from "../../../data/lovelace/config/card"; import { saveConfig } from "../../../data/lovelace/config/types"; import { isStrategyView } from "../../../data/lovelace/config/view"; @@ -132,7 +133,10 @@ export class HuiCardOptions extends LitElement { > ` : nothing} - + - + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.move" )} - - + + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.duplicate" )} - - - + + + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.copy" )} - - - + + + ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.cut")} - -
  • - + + + ${this.hass!.localize( "ui.panel.lovelace.editor.edit_card.delete" )} - -     + + @@ -244,30 +242,31 @@ export class HuiCardOptions extends LitElement { ha-icon-button.move-arrow[disabled] { color: var(--disabled-text-color); } - - ha-list-item { - cursor: pointer; - white-space: nowrap; - } `, ]; } - private _handleAction(ev: CustomEvent) { - switch (ev.detail.index) { - case 0: + private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + const action = ev.detail?.item?.value; + + if (!action) { + return; + } + + switch (action) { + case "move": this._moveCard(); break; - case 1: + case "duplicate": this._duplicateCard(); break; - case 2: + case "copy": this._copyCard(); break; - case 3: + case "cut": this._cutCard(); break; - case 4: + case "delete": this._deleteCard(); break; } diff --git a/src/panels/todo/ha-panel-todo.ts b/src/panels/todo/ha-panel-todo.ts index fb0c7b21ab..060a343fac 100644 --- a/src/panels/todo/ha-panel-todo.ts +++ b/src/panels/todo/ha-panel-todo.ts @@ -1,3 +1,4 @@ +import "@home-assistant/webawesome/dist/components/divider/divider"; import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiChevronDown, @@ -23,6 +24,10 @@ import { extractSearchParam, } from "../../common/url/search-params"; import "../../components/ha-button"; +import "../../components/ha-button-menu"; +import "../../components/ha-dropdown"; +import "../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../components/ha-dropdown-item"; import "../../components/ha-fab"; import "../../components/ha-icon-button"; import "../../components/ha-list"; @@ -222,47 +227,41 @@ class PanelTodo extends LitElement { ${this.hass.localize("ui.panel.todo.create_list")} ` : nothing} - + ${this._conversation(this.hass.config.components) - ? html` - + ? html` + ${this.hass.localize("ui.panel.todo.information")} - ` + ` : nothing} -
  • - - + + + ${this.hass.localize("ui.panel.todo.assist")} - + ${entityRegistryEntry?.platform === "local_todo" - ? html`
  • - + - + ${this.hass.localize("ui.panel.todo.delete_list")} - ` + ` : nothing} -     +
    ${this._entityId @@ -363,6 +362,26 @@ class PanelTodo extends LitElement { showTodoItemEditDialog(this, { entity: this._entityId! }); } + private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + const action = ev.detail?.item?.value; + + if (!action) { + return; + } + + switch (action) { + case "info": + this._showMoreInfoDialog(); + break; + case "assist": + this._showVoiceCommandDialog(); + break; + case "delete": + this._deleteList(); + break; + } + } + static get styles(): CSSResultGroup { return [ haStyle,