Skip to content

Commit c43d410

Browse files
CopilotwendevlinuptimeZERO
authored
Migrate ha-button-menu to ha-dropdown in 4 files (#28300)
Co-authored-by: wendevlin <[email protected]> Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Wendelin <[email protected]> Co-authored-by: uptimeZERO_ <[email protected]>
1 parent 844d53a commit c43d410

File tree

4 files changed

+144
-167
lines changed

4 files changed

+144
-167
lines changed

‎src/panels/lovelace/cards/hui-todo-list-card.ts‎

Lines changed: 29 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { List } from "@material/mwc-list/mwc-list";
2-
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
32
import {
43
mdiClock,
54
mdiDelete,
@@ -18,15 +17,16 @@ import { classMap } from "lit/directives/class-map";
1817
import { repeat } from "lit/directives/repeat";
1918
import memoizeOne from "memoize-one";
2019
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
21-
import { stopPropagation } from "../../../common/dom/stop_propagation";
2220
import { supportsFeature } from "../../../common/entity/supports-feature";
2321
import { caseInsensitiveStringCompare } from "../../../common/string/compare";
2422
import "../../../components/ha-card";
2523
import "../../../components/ha-check-list-item";
2624
import "../../../components/ha-checkbox";
25+
import "../../../components/ha-dropdown";
26+
import "../../../components/ha-dropdown-item";
27+
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
2728
import "../../../components/ha-icon-button";
2829
import "../../../components/ha-list";
29-
import "../../../components/ha-list-item";
3030
import "../../../components/ha-markdown-element";
3131
import "../../../components/ha-relative-time";
3232
import "../../../components/ha-select";
@@ -378,28 +378,29 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
378378
${this._todoListSupportsFeature(
379379
TodoListEntityFeature.DELETE_TODO_ITEM
380380
)
381-
? html`<ha-button-menu
382-
@closed=${stopPropagation}
383-
fixed
384-
@action=${this._handleCompletedMenuAction}
381+
? html`<ha-dropdown
382+
@wa-select=${this._handleCompletedMenuSelect}
383+
placement="bottom-end"
385384
>
386385
<ha-icon-button
387386
slot="trigger"
388387
.path=${mdiDotsVertical}
389388
></ha-icon-button>
390-
<ha-list-item graphic="icon" class="warning">
389+
<ha-dropdown-item
390+
value="clear"
391+
variant="danger"
392+
>
391393
${this.hass!.localize(
392394
"ui.panel.lovelace.cards.todo-list.clear_items"
393395
)}
394396
<ha-svg-icon
395397
class="warning"
396-
slot="graphic"
398+
slot="icon"
397399
.path=${mdiDeleteSweep}
398-
.disabled=${unavailable}
399400
>
400401
</ha-svg-icon>
401-
</ha-list-item>
402-
</ha-button-menu>`
402+
</ha-dropdown-item>
403+
</ha-dropdown>`
403404
: nothing}
404405
</div>`
405406
: nothing}
@@ -413,33 +414,27 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
413414
`;
414415
}
415416

416-
private _renderMenu(config: TodoListCardConfig, unavailable: boolean) {
417+
private _renderMenu(config: TodoListCardConfig, _unavailable: boolean) {
417418
return (!config.display_order ||
418419
config.display_order === TodoSortMode.NONE) &&
419420
this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM)
420-
? html`<ha-button-menu
421-
@closed=${stopPropagation}
422-
fixed
423-
@action=${this._handlePrimaryMenuAction}
421+
? html`<ha-dropdown
422+
@wa-select=${this._handlePrimaryMenuSelect}
423+
placement="bottom-end"
424424
>
425425
<ha-icon-button
426426
slot="trigger"
427427
.path=${mdiDotsVertical}
428428
></ha-icon-button>
429-
<ha-list-item graphic="icon">
429+
<ha-dropdown-item value="reorder">
430430
${this.hass!.localize(
431431
this._reordering
432432
? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
433433
: "ui.panel.lovelace.cards.todo-list.reorder_items"
434434
)}
435-
<ha-svg-icon
436-
slot="graphic"
437-
.path=${mdiSort}
438-
.disabled=${unavailable}
439-
>
440-
</ha-svg-icon>
441-
</ha-list-item>
442-
</ha-button-menu>`
435+
<ha-svg-icon slot="icon" .path=${mdiSort}> </ha-svg-icon>
436+
</ha-dropdown-item>
437+
</ha-dropdown>`
443438
: nothing;
444439
}
445440

@@ -641,11 +636,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
641636
}
642637
}
643638

644-
private _handleCompletedMenuAction(ev: CustomEvent<ActionDetail>) {
645-
switch (ev.detail.index) {
646-
case 0:
647-
this._clearCompletedItems();
648-
break;
639+
private _handleCompletedMenuSelect(
640+
ev: CustomEvent<{ item: HaDropdownItem }>
641+
) {
642+
if (ev.detail?.item?.value === "clear") {
643+
this._clearCompletedItems();
649644
}
650645
}
651646

@@ -704,11 +699,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
704699
}
705700
}
706701

707-
private _handlePrimaryMenuAction(ev: CustomEvent<ActionDetail>) {
708-
switch (ev.detail.index) {
709-
case 0:
710-
this._toggleReorder();
711-
break;
702+
private _handlePrimaryMenuSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
703+
if (ev.detail?.item?.value === "reorder") {
704+
this._toggleReorder();
712705
}
713706
}
714707

‎src/panels/lovelace/components/hui-card-edit-mode.ts‎

Lines changed: 34 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "@home-assistant/webawesome/dist/components/divider/divider";
12
import {
23
mdiContentCopy,
34
mdiContentCut,
@@ -12,9 +13,10 @@ import { LitElement, css, html, nothing } from "lit";
1213
import { customElement, property, state } from "lit/decorators";
1314
import { classMap } from "lit/directives/class-map";
1415
import { fireEvent } from "../../../common/dom/fire_event";
15-
import "../../../components/ha-button-menu";
16+
import "../../../components/ha-dropdown";
17+
import "../../../components/ha-dropdown-item";
18+
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
1619
import "../../../components/ha-icon-button";
17-
import "../../../components/ha-list-item";
1820
import "../../../components/ha-svg-icon";
1921
import { haStyle } from "../../../resources/styles";
2022
import type { HomeAssistant } from "../../../types";
@@ -41,9 +43,6 @@ export class HuiCardEditMode extends LitElement {
4143
@property({ type: Boolean, attribute: "no-move" })
4244
public noMove = false;
4345

44-
@state()
45-
public _menuOpened = false;
46-
4746
@state()
4847
public _hover = false;
4948

@@ -91,8 +90,7 @@ export class HuiCardEditMode extends LitElement {
9190
};
9291

9392
protected render(): TemplateResult {
94-
const showOverlay =
95-
(this._hover || this._menuOpened || this._focused) && !this.hiddenOverlay;
93+
const showOverlay = (this._hover || this._focused) && !this.hiddenOverlay;
9694

9795
return html`
9896
<div class="card-wrapper" inert><slot></slot></div>
@@ -115,107 +113,71 @@ export class HuiCardEditMode extends LitElement {
115113
<ha-svg-icon .path=${mdiPencil}> </ha-svg-icon>
116114
</div>
117115
`}
118-
<ha-button-menu
116+
<ha-dropdown
119117
class="more"
120-
corner="BOTTOM_END"
121-
menu-corner="END"
122-
.path=${[this.path!]}
123-
@action=${this._handleAction}
124-
@opened=${this._handleOpened}
125-
@closed=${this._handleClosed}
118+
placement="bottom-end"
119+
@wa-select=${this._handleDropdownSelect}
126120
>
127121
<ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
128122
</ha-icon-button>
129123
${this.noEdit
130124
? nothing
131125
: html`
132-
<ha-list-item
133-
graphic="icon"
134-
@click=${this._handleAction}
135-
.action=${"edit"}
136-
>
137-
<ha-svg-icon slot="graphic" .path=${mdiPencil}></ha-svg-icon>
126+
<ha-dropdown-item value="edit">
127+
<ha-svg-icon slot="icon" .path=${mdiPencil}></ha-svg-icon>
138128
${this.hass.localize(
139129
"ui.panel.lovelace.editor.edit_card.edit"
140130
)}
141-
</ha-list-item>
131+
</ha-dropdown-item>
142132
`}
143133
${this.noDuplicate
144134
? nothing
145135
: html`
146-
<ha-list-item
147-
graphic="icon"
148-
@click=${this._handleAction}
149-
.action=${"duplicate"}
150-
>
136+
<ha-dropdown-item value="duplicate">
151137
<ha-svg-icon
152-
slot="graphic"
138+
slot="icon"
153139
.path=${mdiPlusCircleMultipleOutline}
154140
></ha-svg-icon>
155141
${this.hass.localize(
156142
"ui.panel.lovelace.editor.edit_card.duplicate"
157143
)}
158-
</ha-list-item>
144+
</ha-dropdown-item>
159145
`}
160146
${this.noMove
161147
? nothing
162148
: html`
163-
<ha-list-item
164-
graphic="icon"
165-
@click=${this._handleAction}
166-
.action=${"copy"}
167-
>
149+
<ha-dropdown-item value="copy">
168150
<ha-svg-icon
169-
slot="graphic"
151+
slot="icon"
170152
.path=${mdiContentCopy}
171153
></ha-svg-icon>
172154
${this.hass.localize(
173155
"ui.panel.lovelace.editor.edit_card.copy"
174156
)}
175-
</ha-list-item>
176-
<ha-list-item
177-
graphic="icon"
178-
@click=${this._handleAction}
179-
.action=${"cut"}
180-
>
181-
<ha-svg-icon
182-
slot="graphic"
183-
.path=${mdiContentCut}
184-
></ha-svg-icon>
157+
</ha-dropdown-item>
158+
<ha-dropdown-item value="cut">
159+
<ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
185160
${this.hass.localize(
186161
"ui.panel.lovelace.editor.edit_card.cut"
187162
)}
188-
</ha-list-item>
163+
</ha-dropdown-item>
189164
`}
190165
${this.noDuplicate && this.noEdit && this.noMove
191166
? nothing
192-
: html`<li divider role="separator"></li>`}
193-
<ha-list-item
194-
graphic="icon"
195-
class="warning"
196-
@click=${this._handleAction}
197-
.action=${"delete"}
198-
>
167+
: html`<wa-divider></wa-divider>`}
168+
<ha-dropdown-item value="delete" variant="danger">
199169
${this.hass.localize("ui.panel.lovelace.editor.edit_card.delete")}
200170
<ha-svg-icon
201171
class="warning"
202-
slot="graphic"
172+
slot="icon"
203173
.path=${mdiDelete}
204174
></ha-svg-icon>
205-
</ha-list-item>
206-
</ha-button-menu>
175+
</ha-dropdown-item>
176+
</ha-dropdown>
207177
</div>
208178
`;
209179
}
210180

211-
private _handleOpened() {
212-
this._menuOpened = true;
213-
}
214-
215-
private _handleClosed() {
216-
this._menuOpened = false;
217-
}
218-
219181
private _handleOverlayClick(ev): void {
220182
if (ev.defaultPrevented) {
221183
return;
@@ -228,8 +190,14 @@ export class HuiCardEditMode extends LitElement {
228190
this._editCard();
229191
}
230192

231-
private _handleAction(ev) {
232-
switch (ev.currentTarget.action) {
193+
private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) {
194+
const action = ev.detail?.item?.value;
195+
196+
if (!action) {
197+
return;
198+
}
199+
200+
switch (action) {
233201
case "edit":
234202
this._editCard();
235203
break;
@@ -330,14 +298,12 @@ export class HuiCardEditMode extends LitElement {
330298
background: var(--secondary-background-color);
331299
--mdc-icon-size: 20px;
332300
}
333-
.more {
301+
.more ha-icon-button {
334302
position: absolute;
335303
right: -6px;
336304
top: -6px;
337305
inset-inline-end: -6px;
338306
inset-inline-start: initial;
339-
}
340-
.more ha-icon-button {
341307
cursor: pointer;
342308
border-radius: var(--ha-border-radius-circle);
343309
background: var(--secondary-background-color);

0 commit comments

Comments
 (0)