diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index 96fa3807ce..eb91431992 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -306,7 +306,10 @@ export class StateHistoryChartLine extends LitElement { visualMap: this._visualMap, tooltip: { trigger: "axis", - appendTo: document.body, + renderMode: "html", + position: "bottom", + align: "center", + confine: true, formatter: this._renderTooltip, }, }; diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index 325cb314cf..2f7e20c51b 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -255,7 +255,10 @@ export class StateHistoryChartTimeline extends LitElement { right: rtl ? labelWidth : 1, }, tooltip: { - appendTo: document.body, + renderMode: "html", + position: "bottom", + align: "center", + confine: true, formatter: this._renderTooltip, }, }; diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index e8903dd6c9..dbe2ada387 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -335,7 +335,10 @@ export class StatisticsChart extends LitElement { }, tooltip: { trigger: "axis", - appendTo: document.body, + renderMode: "html", + position: "bottom", + align: "center", + confine: true, formatter: this._renderTooltip, }, }; diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index b3a19a341d..cfb29f750c 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -38,7 +38,6 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques import { navigate } from "../../common/navigate"; import { computeRTL } from "../../common/util/compute_rtl"; import { withViewTransition } from "../../common/util/view-transition"; -import "../../components/ha-dialog"; import "../../components/ha-dialog-header"; import "../../components/ha-dropdown"; import type { HaDropdownSelectEvent } from "../../components/ha-dropdown"; @@ -50,6 +49,7 @@ import { STATE_ATTRIBUTES, STATE_ATTRIBUTES_DOMAIN_CLASS, } from "../../data/entity/entity_attributes"; +import "../../components/ha-wa-dialog"; import type { EntityRegistryEntry, ExtEntityRegistryEntry, @@ -86,6 +86,7 @@ export interface MoreInfoDialogParams { view?: View; /** @deprecated Use `view` instead */ tab?: View; + large?: boolean; data?: Record; } @@ -115,6 +116,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { @property({ type: Boolean, reflect: true }) public large = false; + @state() private _fill = false; + + @state() private _open = false; + @state() private _parentEntityIds: string[] = []; @query(".content") private _contentElement?: HTMLDivElement; @@ -154,7 +159,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { this._currView = params.view || DEFAULT_VIEW; this._initialView = params.view || DEFAULT_VIEW; this._childView = undefined; - this.large = false; + this.large = params.large ?? false; + this._fill = false; + this._open = true; this._loadEntityRegistryEntry(); } @@ -173,6 +180,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { } public closeDialog() { + this._open = false; + } + + private _dialogClosed() { this._entityId = undefined; this._parentEntityIds = []; this._entry = undefined; @@ -450,21 +461,21 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { const isRTL = computeRTL(this.hass); return html` - - + ${showCloseIcon ? html` @@ -670,7 +681,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
- + `; } @@ -762,7 +771,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { private _enlarge() { withViewTransition(() => { - this.large = !this.large; + this._fill = !this._fill; }); } @@ -799,7 +808,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { haStyleDialogFixedTop, haStyleScrollbar, css` - ha-dialog { + ha-wa-dialog { --dialog-content-padding: 0; } @@ -836,23 +845,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) { display: block; } - @media all and (min-width: 600px) and (min-height: 501px) { - ha-dialog { - --mdc-dialog-min-width: 580px; - --mdc-dialog-max-width: 580px; - --mdc-dialog-max-height: calc(100% - 72px); - } - - .main-title { - cursor: default; - } - - :host([large]) ha-dialog { - --mdc-dialog-min-width: 90vw; - --mdc-dialog-max-width: 90vw; - } - } - .title { display: flex; flex-direction: column; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index e9276eb610..bb6b7f33af 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -193,7 +193,8 @@ export const haStyleDialog = css` `; export const haStyleDialogFixedTop = css` - ha-dialog { + ha-dialog, + ha-wa-dialog { /* Pin dialog to top so it doesn't jump when content changes size */ --vertical-align-dialog: flex-start; --dialog-surface-margin-top: var(--ha-space-10); @@ -209,16 +210,31 @@ export const haStyleDialogFixedTop = css` 0px ) ); + --ha-dialog-max-height: calc( + 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( + --safe-area-inset-y, + 0px + ) + ); + --ha-dialog-max-height: calc( + 100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( + --safe-area-inset-y, + 0px + ) + ); } @media all and (max-width: 450px), all and (max-height: 500px) { - ha-dialog { + ha-dialog, + ha-wa-dialog { /* When in fullscreen, dialog should be attached to top */ --dialog-surface-margin-top: 0px; --mdc-dialog-min-height: 100vh; --mdc-dialog-min-height: 100svh; --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; + --ha-dialog-max-height: 100vh; + --ha-dialog-max-height: 100svh; } } `; diff --git a/src/state/more-info-mixin.ts b/src/state/more-info-mixin.ts index e157398d00..9a0b64a2af 100644 --- a/src/state/more-info-mixin.ts +++ b/src/state/more-info-mixin.ts @@ -1,10 +1,13 @@ import type { PropertyValues } from "lit"; import type { HASSDomEvent } from "../common/dom/fire_event"; +import { computeDomain } from "../common/entity/compute_domain"; import { showDialog } from "../dialogs/make-dialog-manager"; import type { MoreInfoDialogParams } from "../dialogs/more-info/ha-more-info-dialog"; import type { Constructor } from "../types"; import type { HassBaseEl } from "./hass-base-mixin"; +const LARGE_MORE_INFO_DOMAINS = ["camera", "image"]; + declare global { // for fire event interface HASSDomEvents { @@ -30,6 +33,13 @@ export default >(superClass: T) => { entityId: ev.detail.entityId, view: ev.detail.view || ev.detail.tab, + large: + ev.detail.large ?? + (ev.detail.entityId + ? LARGE_MORE_INFO_DOMAINS.includes( + computeDomain(ev.detail.entityId) + ) + : false), data: ev.detail.data, }, () => import("../dialogs/more-info/ha-more-info-dialog")