Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code Activity

Migrate more info dialog to ha-wa-dialog (#28583)

Browse Source
This commit is contained in:
Aidan Timson
2026-02-13 12:43:46 +00:00
committed by GitHub
parent 33ba3f20aa
commit eca535dd81
6 changed files with 65 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/chart/state-history-chart-line.ts
View File

@@ -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,
},
};

5
src/components/chart/state-history-chart-timeline.ts
View File

@@ -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,
},
};

5
src/components/chart/statistics-chart.ts
View File

@@ -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,
},
};

58
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@@ -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<string, any>;
}
@@ -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`
<ha-dialog
open
@closed=${this.closeDialog}
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
.width=${this._fill ? "full" : this.large ? "large" : "medium"}
@closed=${this._dialogClosed}
@opened=${this._handleOpened}
.escapeKeyAction=${this._isEscapeEnabled ? undefined : ""}
.heading=${title}
hideActions
flexContent
?prevent-scrim-close=${!this._isEscapeEnabled}
flexcontent
>
<ha-dialog-header slot="heading">
<ha-dialog-header slot="header">
${showCloseIcon
? html`
<ha-icon-button
slot="navigationIcon"
dialogAction="cancel"
data-dialog="close"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
@@ -670,7 +681,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
<div
class="content ha-scrollbar"
tabindex="-1"
dialogInitialFocus
@show-child-view=${this._showChildView}
@entity-entry-updated=${this._entryUpdated}
@toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
@@ -690,7 +700,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
: this._currView === "info"
? html`
<ha-more-info-info
dialogInitialFocus
.hass=${this.hass}
.entityId=${this._entityId}
.entry=${this._entry}
@@ -738,7 +747,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
)}
${this.renderScrollableFades()}
</div>
</ha-dialog>
</ha-wa-dialog>
`;
}
@@ -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;

20
src/resources/styles.ts
View File

@@ -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;
}
}
`;

10
src/state/more-info-mixin.ts
View File

@@ -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 <T extends Constructor<HassBaseEl>>(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")