Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-24 04:39:01 +00:00
Code Activity

Migrate ha-button-menu to ha-dropdown in devices dashboard

Browse Source 
Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2025-12-05 11:55:15 +00:00
parent 13b60ed2ee
commit fdeca95215
1 changed files with 54 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@@ -47,12 +47,14 @@ import "../../../components/ha-check-list-item";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import "../../../components/ha-filter-devices"; import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-floor-areas";
import "@home-assistant/webawesome/dist/components/divider/divider";
import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import "../../../components/ha-filter-integrations"; import "../../../components/ha-filter-integrations";
import "../../../components/ha-filter-labels"; import "../../../components/ha-filter-labels";
import "../../../components/ha-filter-states"; import "../../../components/ha-filter-states";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-md-divider"; import "../../../components/ha-md-menu";
import "../../../components/ha-md-menu-item";
import "../../../components/ha-sub-menu"; import "../../../components/ha-sub-menu";
import { createAreaRegistryEntry } from "../../../data/area_registry"; import { createAreaRegistryEntry } from "../../../data/area_registry";
import type { ConfigEntry, SubEntry } from "../../../data/config_entries"; import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
@@ -720,34 +722,30 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
const areaItems = html`${Object.values(this.hass.areas).map( const areaItems = html`${Object.values(this.hass.areas).map(
(area) => (area) =>
html`<ha-md-menu-item html`<ha-dropdown-item
.value=${area.area_id} .value=${area.area_id}
.clickAction=${this._handleBulkArea} .clickAction=${this._handleBulkArea}
> >
${area.icon ${area.icon
? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
: html`<ha-svg-icon : html`<ha-svg-icon
slot="start" slot="icon"
.path=${mdiTextureBox} .path=${mdiTextureBox}
></ha-svg-icon>`} ></ha-svg-icon>`}
<div slot="headline">${area.name}</div> ${area.name}
</ha-md-menu-item>` </ha-dropdown-item>`
)} )}
<ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}> <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkArea}>
<div slot="headline">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.no_area" "ui.panel.config.devices.picker.bulk_actions.no_area"
)} )}
</div> </ha-dropdown-item>
</ha-md-menu-item> <wa-divider></wa-divider>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-dropdown-item .clickAction=${this._bulkCreateArea}>
<ha-md-menu-item .clickAction=${this._bulkCreateArea}>
<div slot="headline">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.add_area" "ui.panel.config.devices.picker.bulk_actions.add_area"
)} )}
</div> </ha-dropdown-item>`;
</ha-md-menu-item>`;
const labelItems = html`${this._labels?.map((label) => { const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
@@ -759,14 +757,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
this._selected.some((deviceId) => this._selected.some((deviceId) =>
this.hass.devices[deviceId]?.labels.includes(label.label_id) this.hass.devices[deviceId]?.labels.includes(label.label_id)
); );
return html`<ha-md-menu-item return html`<ha-dropdown-item
.value=${label.label_id} .value=${label.label_id}
.action=${selected ? "remove" : "add"} .action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
keep-open keep-open
> >
<ha-checkbox <ha-checkbox
slot="start" slot="icon"
.checked=${selected} .checked=${selected}
.indeterminate=${partial} .indeterminate=${partial}
reducedTouchTarget reducedTouchTarget
@@ -780,14 +778,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
: nothing} : nothing}
${label.name} ${label.name}
</ha-label> </ha-label>
</ha-md-menu-item>`; </ha-dropdown-item>`;
})} })}
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <wa-divider></wa-divider>
<ha-md-menu-item .clickAction=${this._bulkCreateLabel}> <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")} ${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-md-menu-item </ha-dropdown-item>`;
>`;
return html` return html`
<hass-tabs-subpage-data-table <hass-tabs-subpage-data-table
@@ -906,7 +902,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
></ha-filter-labels> ></ha-filter-labels>
${!this.narrow ${!this.narrow
? html`<ha-md-button-menu slot="selection-bar"> ? html`<ha-dropdown slot="selection-bar">
<ha-assist-chip <ha-assist-chip
slot="trigger" slot="trigger"
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -919,11 +915,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
></ha-svg-icon> ></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
${labelItems} ${labelItems}
</ha-md-button-menu> </ha-dropdown>
${areasInOverflow ${areasInOverflow
? nothing ? nothing
: html`<ha-md-button-menu slot="selection-bar"> : html`<ha-dropdown slot="selection-bar">
<ha-assist-chip <ha-assist-chip
slot="trigger" slot="trigger"
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -936,9 +932,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
></ha-svg-icon> ></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
${areaItems} ${areaItems}
</ha-md-button-menu>`}` </ha-dropdown>`}`
: nothing} : nothing}
<ha-md-button-menu has-overflow slot="selection-bar"> <ha-dropdown has-overflow slot="selection-bar">
${this.narrow ${this.narrow
? html`<ha-assist-chip ? html`<ha-assist-chip
.label=${this.hass.localize( .label=${this.hass.localize(
@@ -960,50 +956,44 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
></ha-icon-button>`} ></ha-icon-button>`}
${this.narrow ${this.narrow
? html` <ha-sub-menu> ? html` <ha-sub-menu>
<ha-md-menu-item slot="item"> <ha-dropdown-item slot="item">
<div slot="headline">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.add_label" "ui.panel.config.automation.picker.bulk_actions.add_label"
)} )}
</div>
<ha-svg-icon <ha-svg-icon
slot="end" slot="details"
.path=${mdiChevronRight} .path=${mdiChevronRight}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu slot="menu">${labelItems}</ha-md-menu> <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
</ha-sub-menu>` </ha-sub-menu>`
: nothing} : nothing}
${areasInOverflow ${areasInOverflow
? html`<ha-sub-menu> ? html`<ha-sub-menu>
<ha-md-menu-item slot="item"> <ha-dropdown-item slot="item">
<div slot="headline">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.move_area" "ui.panel.config.devices.picker.bulk_actions.move_area"
)} )}
</div>
<ha-svg-icon <ha-svg-icon
slot="end" slot="details"
.path=${mdiChevronRight} .path=${mdiChevronRight}
></ha-svg-icon> ></ha-svg-icon>
</ha-md-menu-item> </ha-dropdown-item>
<ha-md-menu slot="menu">${areaItems}</ha-md-menu> <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
</ha-sub-menu> </ha-sub-menu>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>` <wa-divider></wa-divider>`
: nothing} : nothing}
<ha-md-menu-item <ha-dropdown-item
.clickAction=${this._deleteSelected} .clickAction=${this._deleteSelected}
.disabled=${!this._selectedCanDelete.length} .disabled=${!this._selectedCanDelete.length}
class="warning" variant="danger"
> >
<ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon> <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
<div slot="headline">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.delete_selected.button" "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
)} )}
</div> </ha-dropdown-item>
</ha-md-menu-item> </ha-dropdown>
</ha-md-button-menu>
</hass-tabs-subpage-data-table> </hass-tabs-subpage-data-table>
`; `;
} }
@@ -1277,7 +1267,7 @@ ${rejected
ha-assist-chip { ha-assist-chip {
--ha-assist-chip-container-shape: 10px; --ha-assist-chip-container-shape: 10px;
} }
ha-md-button-menu ha-assist-chip { ha-dropdown ha-assist-chip {
--md-assist-chip-trailing-space: 8px; --md-assist-chip-trailing-space: 8px;
} }
ha-label { ha-label {