jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-09 09:37:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate ha-button-menu to ha-dropdown in 4 files (#28300)

Browse Source 
Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Wendelin <w@pe8.at>
Co-authored-by: uptimeZERO_ <pavilionsahota@gmail.com>
This commit is contained in:
Copilot
2025-12-03 16:43:07 +00:00
committed by GitHub
parent 844d53a0ba
commit c43d41053b
4 changed files with 144 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@@ -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`<ha-button-menu
@closed=${stopPropagation}
fixed
@action=${this._handleCompletedMenuAction}
? html`<ha-dropdown
@wa-select=${this._handleCompletedMenuSelect}
placement="bottom-end"
>
<ha-icon-button
slot="trigger"
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon" class="warning">
<ha-dropdown-item
value="clear"
variant="danger"
>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.clear_items"
)}
<ha-svg-icon
class="warning"
slot="graphic"
slot="icon"
.path=${mdiDeleteSweep}
.disabled=${unavailable}
>
</ha-svg-icon>
</ha-list-item>
</ha-button-menu>`
</ha-dropdown-item>
</ha-dropdown>`
: nothing}
</div>`
: 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`<ha-button-menu
@closed=${stopPropagation}
fixed
@action=${this._handlePrimaryMenuAction}
? html`<ha-dropdown
@wa-select=${this._handlePrimaryMenuSelect}
placement="bottom-end"
>
<ha-icon-button
slot="trigger"
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon">
<ha-dropdown-item value="reorder">
${this.hass!.localize(
this._reordering
? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
: "ui.panel.lovelace.cards.todo-list.reorder_items"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiSort}
.disabled=${unavailable}
>
</ha-svg-icon>
</ha-list-item>
</ha-button-menu>`
<ha-svg-icon slot="icon" .path=${mdiSort}> </ha-svg-icon>
</ha-dropdown-item>
</ha-dropdown>`
: nothing;
}
@@ -641,11 +636,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
}
}
private _handleCompletedMenuAction(ev: CustomEvent<ActionDetail>) {
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<ActionDetail>) {
switch (ev.detail.index) {
case 0:
this._toggleReorder();
break;
private _handlePrimaryMenuSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
if (ev.detail?.item?.value === "reorder") {
this._toggleReorder();
}
}

102
src/panels/lovelace/components/hui-card-edit-mode.ts
View File

@@ -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`
<div class="card-wrapper" inert><slot></slot></div>
@@ -115,107 +113,71 @@ export class HuiCardEditMode extends LitElement {
<ha-svg-icon .path=${mdiPencil}> </ha-svg-icon>
</div>
`}
<ha-button-menu
<ha-dropdown
class="more"
corner="BOTTOM_END"
menu-corner="END"
.path=${[this.path!]}
@action=${this._handleAction}
@opened=${this._handleOpened}
@closed=${this._handleClosed}
placement="bottom-end"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
</ha-icon-button>
${this.noEdit
? nothing
: html`
<ha-list-item
graphic="icon"
@click=${this._handleAction}
.action=${"edit"}
>
<ha-svg-icon slot="graphic" .path=${mdiPencil}></ha-svg-icon>
<ha-dropdown-item value="edit">
<ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.edit"
)}
</ha-list-item>
</ha-dropdown-item>
`}
${this.noDuplicate
? nothing
: html`
<ha-list-item
graphic="icon"
@click=${this._handleAction}
.action=${"duplicate"}
>
<ha-dropdown-item value="duplicate">
<ha-svg-icon
slot="graphic"
slot="icon"
.path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon>
${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.duplicate"
)}
</ha-list-item>
</ha-dropdown-item>
`}
${this.noMove
? nothing
: html`
<ha-list-item
graphic="icon"
@click=${this._handleAction}
.action=${"copy"}
>
<ha-dropdown-item value="copy">
<ha-svg-icon
slot="graphic"
slot="icon"
.path=${mdiContentCopy}
></ha-svg-icon>
${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.copy"
)}
</ha-list-item>
<ha-list-item
graphic="icon"
@click=${this._handleAction}
.action=${"cut"}
>
<ha-svg-icon
slot="graphic"
.path=${mdiContentCut}
></ha-svg-icon>
</ha-dropdown-item>
<ha-dropdown-item value="cut">
<ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.cut"
)}
</ha-list-item>
</ha-dropdown-item>
`}
${this.noDuplicate && this.noEdit && this.noMove
? nothing
: html`<li divider role="separator"></li>`}
<ha-list-item
graphic="icon"
class="warning"
@click=${this._handleAction}
.action=${"delete"}
>
: html`<wa-divider></wa-divider>`}
<ha-dropdown-item value="delete" variant="danger">
${this.hass.localize("ui.panel.lovelace.editor.edit_card.delete")}
<ha-svg-icon
class="warning"
slot="graphic"
slot="icon"
.path=${mdiDelete}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
</ha-dropdown-item>
</ha-dropdown>
</div>
`;
}
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);

77
src/panels/lovelace/components/hui-card-options.ts
View File

@@ -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 {
></ha-icon-button>
`
: nothing}
<ha-button-menu @action=${this._handleAction}>
<ha-dropdown
@wa-select=${this._handleDropdownSelect}
placement="bottom-end"
>
<ha-icon-button
slot="trigger"
.label=${this.hass!.localize(
@@ -140,52 +144,46 @@ export class HuiCardOptions extends LitElement {
)}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon">
<ha-dropdown-item value="move">
<ha-svg-icon
slot="graphic"
slot="icon"
.path=${mdiFileMoveOutline}
></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
)}
</ha-list-item>
<ha-list-item graphic="icon">
</ha-dropdown-item>
<ha-dropdown-item value="duplicate">
<ha-svg-icon
slot="graphic"
slot="icon"
.path=${mdiPlusCircleMultipleOutline}
></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate"
)}
</ha-list-item>
<ha-list-item graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiContentCopy}
></ha-svg-icon>
</ha-dropdown-item>
<ha-dropdown-item value="copy">
<ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.copy"
)}
</ha-list-item>
<ha-list-item graphic="icon">
<ha-svg-icon
slot="graphic"
.path=${mdiContentCut}
></ha-svg-icon>
</ha-dropdown-item>
<ha-dropdown-item value="cut">
<ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
${this.hass!.localize("ui.panel.lovelace.editor.edit_card.cut")}
</ha-list-item>
<li divider role="separator"></li>
<ha-list-item class="warning" graphic="icon">
</ha-dropdown-item>
<wa-divider></wa-divider>
<ha-dropdown-item value="delete" variant="danger">
<ha-svg-icon
class="warning"
slot="graphic"
slot="icon"
.path=${mdiDelete}
></ha-svg-icon>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}
</ha-list-item>
</ha-button-menu>
</ha-dropdown-item>
</ha-dropdown>
</div>
</div>
</ha-card>
@@ -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<ActionDetail>) {
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;
}

67
src/panels/todo/ha-panel-todo.ts
View File

@@ -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")}
</ha-list-item>`
: nothing}
<ha-button-menu slot="actionItems">
<ha-dropdown
slot="actionItems"
@wa-select=${this._handleDropdownSelect}
>
<ha-icon-button
slot="trigger"
.label=${""}
.path=${mdiDotsVertical}
></ha-icon-button>
${this._conversation(this.hass.config.components)
? html`<ha-list-item
graphic="icon"
@click=${this._showMoreInfoDialog}
.disabled=${!this._entityId}
>
<ha-svg-icon .path=${mdiInformationOutline} slot="graphic">
? html`<ha-dropdown-item value="info" .disabled=${!this._entityId}>
<ha-svg-icon .path=${mdiInformationOutline} slot="icon">
</ha-svg-icon>
${this.hass.localize("ui.panel.todo.information")}
</ha-list-item>`
</ha-dropdown-item>`
: nothing}
<li divider role="separator"></li>
<ha-list-item graphic="icon" @click=${this._showVoiceCommandDialog}>
<ha-svg-icon .path=${mdiCommentProcessingOutline} slot="graphic">
<wa-divider></wa-divider>
<ha-dropdown-item value="assist">
<ha-svg-icon .path=${mdiCommentProcessingOutline} slot="icon">
</ha-svg-icon>
${this.hass.localize("ui.panel.todo.assist")}
</ha-list-item>
</ha-dropdown-item>
${entityRegistryEntry?.platform === "local_todo"
? html` <li divider role="separator"></li>
<ha-list-item
graphic="icon"
@click=${this._deleteList}
class="warning"
? html` <wa-divider></wa-divider>
<ha-dropdown-item
value="delete"
variant="danger"
.disabled=${!this._entityId}
>
<ha-svg-icon
.path=${mdiDelete}
slot="graphic"
class="warning"
>
<ha-svg-icon .path=${mdiDelete} slot="icon" class="warning">
</ha-svg-icon>
${this.hass.localize("ui.panel.todo.delete_list")}
</ha-list-item>`
</ha-dropdown-item>`
: nothing}
</ha-button-menu>
</ha-dropdown>
<div id="columns">
<div class="column">
${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,