From cc4a9d2d35100a4296f0fabff621d72db68c0297 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 18 Mar 2026 13:45:52 +0000 Subject: [PATCH] Test with more info dialog (not intended final) --- src/dialogs/more-info/ha-more-info-dialog.ts | 11 +++++++++++ src/panels/lovelace/common/handle-action.ts | 2 +- src/state/more-info-mixin.ts | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 3e379c1987..e60ff9c428 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -92,6 +92,7 @@ export interface MoreInfoDialogParams { large?: boolean; data?: Record; parentElement?: LitElement; + anchor?: Element; } type View = "info" | "history" | "settings" | "related" | "add_to"; @@ -118,6 +119,8 @@ const DEFAULT_VIEW: View = "info"; export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public dialogAnchor?: Element; + @property({ type: Boolean, reflect: true }) public large = false; @state() private _fill = false; @@ -169,6 +172,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { this._childView = undefined; this.large = params.large ?? false; this._fill = false; + if (params.anchor) { + this.dialogAnchor = params.anchor; + } this._open = true; this._loadEntityRegistryEntry(); } @@ -205,6 +211,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { this._currView = DEFAULT_VIEW; this._childView = undefined; this._isEscapeEnabled = true; + this.dialogAnchor = undefined; window.removeEventListener("dialog-closed", this._enableEscapeKeyClose); window.removeEventListener("show-dialog", this._disableEscapeKeyClose); fireEvent(this, "dialog-closed", { dialog: this.localName }); @@ -581,6 +588,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { .hass=${this.hass} .open=${this._open} .width=${this._fill ? "full" : this.large ? "large" : "medium"} + desktop-mode=${this.dialogAnchor && !this.large && !this._fill + ? "popover" + : "dialog"} + .dialogAnchor=${this.dialogAnchor ?? null} @closed=${this._dialogClosed} @opened=${this._handleOpened} .preventScrimClose=${this._currView === "settings" || diff --git a/src/panels/lovelace/common/handle-action.ts b/src/panels/lovelace/common/handle-action.ts index 1a313af02b..9679823b28 100644 --- a/src/panels/lovelace/common/handle-action.ts +++ b/src/panels/lovelace/common/handle-action.ts @@ -106,7 +106,7 @@ export const handleAction = async ( config.camera_image || config.image_entity; if (entityId) { - fireEvent(node, "hass-more-info", { entityId }); + fireEvent(node, "hass-more-info", { entityId, anchor: node }); } else { showToast(node, { message: hass.localize( diff --git a/src/state/more-info-mixin.ts b/src/state/more-info-mixin.ts index a4b0ad206f..854d2ff9c6 100644 --- a/src/state/more-info-mixin.ts +++ b/src/state/more-info-mixin.ts @@ -44,7 +44,7 @@ export default >(superClass: T) => () => import("../dialogs/more-info/ha-more-info-dialog"), ev.detail.parentElement, true, - undefined + ev.detail.anchor ); } };