jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve device row in integration page (#26005)

Browse Source 
Improve device row in config entry page
This commit is contained in:
Paul Bottein 2025-06-30 17:44:50 +02:00 committed by GitHub
parent b7d1ce1c37
commit 89d9dd2893
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 104 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/panels/config/integrations/ha-config-entry-device-row.ts
View File

@ -1,9 +1,9 @@
import { import {
mdiCogOutline,
mdiDelete, mdiDelete,
mdiDevices, mdiDevices,
mdiDotsVertical, mdiDotsVertical,
mdiPencil, mdiPencil,
mdiShapeOutline,
mdiStopCircleOutline, mdiStopCircleOutline,
mdiTransitConnectionVariant, mdiTransitConnectionVariant,
} from "@mdi/js"; } from "@mdi/js";
@ -58,111 +58,118 @@ class HaConfigEntryDeviceRow extends LitElement {
area ? area.name : undefined, area ? area.name : undefined,
].filter(Boolean); ].filter(Boolean);
return html`<ha-md-list-item @click=${this.narrow ? this._handleNavigateToDevice : undefined} class=${classMap({ disabled: Boolean(device.disabled_by) })}> return html`<ha-md-list-item
<ha-svg-icon .path=${device.entry_type === "service" ? mdiTransitConnectionVariant : mdiDevices} slot="start"></ha-svg-icon> type="button"
<div slot="headline"></div>${computeDeviceNameDisplay(device, this.hass)}</div> @click=${this._handleNavigateToDevice}
class=${classMap({ disabled: Boolean(device.disabled_by) })}
>
<ha-svg-icon
.path=${device.entry_type === "service"
? mdiTransitConnectionVariant
: mdiDevices}
slot="start"
></ha-svg-icon>
<div slot="headline">${computeDeviceNameDisplay(device, this.hass)}</div>
<span slot="supporting-text" <span slot="supporting-text"
>${supportingText.join(" • ")} >${supportingText.join(" • ")}
${supportingText.length && entities.length ? " • " : nothing} ${supportingText.length && entities.length ? " • " : nothing}
${ ${entities.length
entities.length ? this.hass.localize(
? this.narrow "ui.panel.config.integrations.config_entry.entities",
? this.hass.localize( { count: entities.length }
"ui.panel.config.integrations.config_entry.entities", )
{ count: entities.length } : nothing}</span
)
: html`<a
href=${`/config/entities/?historyBack=1&device=${device.id}`}
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.entities",
{ count: entities.length }
)}</a
>`
: nothing
}</span
> >
${ ${!this.narrow
!this.narrow ? html`<ha-icon-next slot="end"> </ha-icon-next>`
? html`<ha-icon-button-next : nothing}
slot="end"
@click=${this._handleNavigateToDevice}
>
</ha-icon-button-next>`
: nothing
}
</ha-icon-button>
<div class="vertical-divider" slot="end" @click=${stopPropagation}></div> <div class="vertical-divider" slot="end" @click=${stopPropagation}></div>
${ ${!this.narrow
!this.narrow ? html`<ha-icon-button
? html`<ha-icon-button slot="end"
slot="end" @click=${this._handleEditDevice}
@click=${this._handleConfigureDevice} .path=${mdiPencil}
.path=${mdiPencil} .label=${this.hass.localize(
.label=${this.hass.localize( "ui.panel.config.integrations.config_entry.device.edit"
"ui.panel.config.integrations.config_entry.device.configure" )}
)} ></ha-icon-button>`
></ha-icon-button>` : nothing}
: nothing
} <ha-md-button-menu
</ha-icon-button> positioning="popover"
<ha-md-button-menu positioning="popover" slot="end" @click=${stopPropagation}> slot="end"
@click=${stopPropagation}
>
<ha-icon-button <ha-icon-button
slot="trigger" slot="trigger"
.label=${this.hass.localize("ui.common.menu")} .label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical} .path=${mdiDotsVertical}
></ha-icon-button> ></ha-icon-button>
${ ${this.narrow
this.narrow ? html`<ha-md-menu-item @click=${this._handleEditDevice}>
? html`<ha-md-menu-item @click=${this._handleConfigureDevice}> <ha-svg-icon .path=${mdiPencil} slot="start"></ha-svg-icon>
<ha-svg-icon .path=${mdiCogOutline} slot="start"></ha-svg-icon> ${this.hass.localize(
"ui.panel.config.integrations.config_entry.device.edit"
)}
</ha-md-menu-item>`
: nothing}
${entities.length
? html`
<ha-md-menu-item
href=${`/config/entities/?historyBack=1&device=${device.id}`}
>
<ha-svg-icon
.path=${mdiShapeOutline}
slot="start"
></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.device.configure" `ui.panel.config.integrations.config_entry.entities`,
{ count: entities.length }
)} )}
</ha-md-menu-item>` <ha-icon-next slot="end"></ha-icon-next>
: nothing </ha-md-menu-item>
} `
<ha-md-menu-item class=${device.disabled_by !== "user" ? "warning" : ""} @click=${this._handleDisableDevice} .disabled=${device.disabled_by !== "user" && device.disabled_by}> : nothing}
<ha-md-menu-item
class=${device.disabled_by !== "user" ? "warning" : ""}
@click=${this._handleDisableDevice}
.disabled=${device.disabled_by !== "user" && device.disabled_by}
>
<ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon> <ha-svg-icon .path=${mdiStopCircleOutline} slot="start"></ha-svg-icon>
${ ${device.disabled_by && device.disabled_by !== "user"
device.disabled_by && device.disabled_by !== "user" ? this.hass.localize(
"ui.dialogs.device-registry-detail.enabled_cause",
{
type: this.hass.localize(
`ui.dialogs.device-registry-detail.type.${
device.entry_type || "device"
}`
),
cause: this.hass.localize(
`config_entry.disabled_by.${device.disabled_by}`
),
}
)
: device.disabled_by
? this.hass.localize( ? this.hass.localize(
"ui.dialogs.device-registry-detail.enabled_cause", "ui.panel.config.integrations.config_entry.device.enable"
{
type: this.hass.localize(
`ui.dialogs.device-registry-detail.type.${
device.entry_type || "device"
}`
),
cause: this.hass.localize(
`config_entry.disabled_by.${device.disabled_by}`
),
}
) )
: device.disabled_by : this.hass.localize(
? this.hass.localize( "ui.panel.config.integrations.config_entry.device.disable"
"ui.panel.config.integrations.config_entry.device.enable"
)
: this.hass.localize(
"ui.panel.config.integrations.config_entry.device.disable"
)
}
</ha-md-menu-item>
${
this.entry.supports_remove_device
? html` <ha-md-menu-item
class="warning"
@click=${this._handleDeleteDevice}
>
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.device.delete"
)} )}
</ha-md-menu-item>` </ha-md-menu-item>
: nothing ${this.entry.supports_remove_device
} ? html`<ha-md-menu-item
class="warning"
@click=${this._handleDeleteDevice}
>
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.device.delete"
)}
</ha-md-menu-item>`
: nothing}
</ha-md-button-menu> </ha-md-button-menu>
</ha-md-list-item> `; </ha-md-list-item> `;
} }
@ -170,7 +177,7 @@ class HaConfigEntryDeviceRow extends LitElement {
private _getEntities = (): EntityRegistryEntry[] => private _getEntities = (): EntityRegistryEntry[] =>
this.entities?.filter((entity) => entity.device_id === this.device.id); this.entities?.filter((entity) => entity.device_id === this.device.id);
private _handleConfigureDevice(ev: MouseEvent) { private _handleEditDevice(ev: MouseEvent) {
ev.stopPropagation(); // Prevent triggering the click handler on the list item ev.stopPropagation(); // Prevent triggering the click handler on the list item
showDeviceRegistryDetailDialog(this, { showDeviceRegistryDetailDialog(this, {
device: this.device, device: this.device,
@ -295,6 +302,8 @@ class HaConfigEntryDeviceRow extends LitElement {
} }
ha-md-list-item { ha-md-list-item {
--md-list-item-leading-space: 56px; --md-list-item-leading-space: 56px;
--md-ripple-hover-color: transparent;
--md-ripple-pressed-color: transparent;
} }
.disabled { .disabled {
opacity: 0.5; opacity: 0.5;

1
src/translations/en.json
View File

@ -5383,6 +5383,7 @@
"confirm_disable_title": "Disable device?", "confirm_disable_title": "Disable device?",
"confirm_disable_message": "Are you sure you want to disable {name} and all of its entities?", "confirm_disable_message": "Are you sure you want to disable {name} and all of its entities?",
"configure": "Configure device", "configure": "Configure device",
"edit": "Edit device",
"delete": "Remove device" "delete": "Remove device"
}, },
"devices": "{count} {count, plural,\n one {device}\n other {devices}\n}", "devices": "{count} {count, plural,\n one {device}\n other {devices}\n}",