diff --git a/src/components/target-picker/dialog/dialog-target-details.ts b/src/components/target-picker/dialog/dialog-target-details.ts index e231d14a00..e48a81b109 100644 --- a/src/components/target-picker/dialog/dialog-target-details.ts +++ b/src/components/target-picker/dialog/dialog-target-details.ts @@ -1,17 +1,15 @@ -import { mdiClose } from "@mdi/js"; -import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { html, LitElement, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import type { HassDialog } from "../../../dialogs/make-dialog-manager"; import type { HomeAssistant } from "../../../types"; import "../../ha-dialog-header"; import "../../ha-icon-button"; import "../../ha-icon-next"; -import "../../ha-md-dialog"; -import type { HaMdDialog } from "../../ha-md-dialog"; import "../../ha-md-list"; import "../../ha-md-list-item"; import "../../ha-svg-icon"; +import "../../ha-wa-dialog"; import "../ha-target-picker-item-row"; import type { TargetDetailsDialogParams } from "./show-dialog-target-details"; @@ -21,14 +19,15 @@ class DialogTargetDetails extends LitElement implements HassDialog { @state() private _params?: TargetDetailsDialogParams; - @query("ha-md-dialog") private _dialog?: HaMdDialog; + @state() private _opened = false; public showDialog(params: TargetDetailsDialogParams): void { this._params = params; + this._opened = true; } public closeDialog() { - this._dialog?.close(); + this._opened = false; return true; } @@ -43,58 +42,31 @@ class DialogTargetDetails extends LitElement implements HassDialog { } return html` - - - - ${this.hass.localize( - "ui.components.target-picker.target_details" - )} - ${this.hass.localize( - `ui.components.target-picker.type.${this._params.type}` - )}: - ${this._params.title} - -
- -
-
+ + + `; } - - static styles = css` - ha-md-dialog { - min-width: 400px; - max-height: 90%; - --dialog-content-padding: var(--ha-space-2) var(--ha-space-6) - max(var(--safe-area-inset-bottom, var(--ha-space-0)), var(--ha-space-8)); - } - - @media all and (max-width: 600px), all and (max-height: 500px) { - ha-md-dialog { - --md-dialog-container-shape: var(--ha-space-0); - min-width: 100%; - min-height: 100%; - } - } - `; } declare global { diff --git a/src/components/target-picker/ha-target-picker-item-row.ts b/src/components/target-picker/ha-target-picker-item-row.ts index 29ba36baf0..4884d82902 100644 --- a/src/components/target-picker/ha-target-picker-item-row.ts +++ b/src/components/target-picker/ha-target-picker-item-row.ts @@ -162,11 +162,12 @@ export class HaTargetPickerItemRow extends LitElement {
${name}
${context && !this.hideContext ? html`${context}` - : this._domainName && this.subEntry - ? html`${this._domainName}` - : nothing} + : nothing} + ${this._domainName && this.subEntry + ? html`${this._domainName}` + : nothing} ${!this.subEntry && entries && showEntities ? html`
@@ -231,9 +232,11 @@ export class HaTargetPickerItemRow extends LitElement { const rows1 = (nextType === "area" ? entries?.referenced_areas - : nextType === "device" + : nextType === "device" && this.type !== "label" ? entries?.referenced_devices - : entries?.referenced_entities) || []; + : this.type !== "label" + ? entries?.referenced_entities + : []) || []; const devicesInAreas = [] as string[]; @@ -284,9 +287,13 @@ export class HaTargetPickerItemRow extends LitElement { const entityRows = this.type === "label" && entries - ? entries.referenced_entities.filter((entity_id) => - this.hass.entities[entity_id].labels.includes(this.itemId) - ) + ? entries.referenced_entities.filter((entity_id) => { + const entity = this.hass.entities[entity_id]; + return ( + entity.labels.includes(this.itemId) && + !entries.referenced_devices.includes(entity.device_id || "") + ); + }) : nextType === "device" && entries ? entries.referenced_entities.filter( (entity_id) => @@ -412,7 +419,6 @@ export class HaTargetPickerItemRow extends LitElement { const device = this.hass.devices[device_id]; if ( !hiddenAreaIds.includes(device.area_id || "") && - (this.type !== "label" || device.labels.includes(this.itemId)) && deviceMeetsFilter( device, this.hass.entities, @@ -669,6 +675,14 @@ export class HaTargetPickerItemRow extends LitElement { button.link:focus { text-decoration: underline; } + + .domain { + width: fit-content; + border-radius: var(--ha-border-radius-md); + background-color: var(--ha-color-fill-neutral-quiet-resting); + padding: var(--ha-space-1); + font-family: var(--ha-font-family-code); + } `, ]; }