Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 02:38:53 +00:00
Code Activity

Fix ha-wa-dialog fullscreen and make alerts not fullscreen (#28175)

Browse Source
This commit is contained in:
Aidan Timson
2025-11-27 21:01:30 +00:00
committed by GitHub
parent 9c9d274b5c
commit 539d0e443f
3 changed files with 78 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/ha-wa-dialog.ts
View File

@@ -53,6 +53,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
* @cssprop --dialog-surface-margin-top - Top margin for the dialog surface. * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
* *
* @attr {boolean} open - Controls the dialog open state. * @attr {boolean} open - Controls the dialog open state.
* @attr {("alert"|"standard")} type - Dialog type. Defaults to "standard".
* @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium". * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
* @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false. * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
* @attr {string} header-title - Header title text. If not set, the headerTitle slot is used. * @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
@@ -84,6 +85,9 @@ export class HaWaDialog extends LitElement {
@property({ type: Boolean, reflect: true }) @property({ type: Boolean, reflect: true })
public open = false; public open = false;
@property({ reflect: true })
public type: "alert" | "standard" = "standard";
@property({ type: String, reflect: true, attribute: "width" }) @property({ type: String, reflect: true, attribute: "width" })
public width: DialogWidth = "medium"; public width: DialogWidth = "medium";
@@ -200,18 +204,7 @@ export class HaWaDialog extends LitElement {
haStyleScrollbar, haStyleScrollbar,
css` css`
wa-dialog { wa-dialog {
--full-width: var( --full-width: var(--ha-dialog-width-full, min(95vw, var(--safe-width)));
--ha-dialog-width-full,
min(
95vw,
calc(
100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
--safe-area-inset-right,
var(--ha-space-0)
)
)
)
);
--width: min(var(--ha-dialog-width-md, 580px), var(--full-width)); --width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
--spacing: var(--dialog-content-padding, var(--ha-space-6)); --spacing: var(--dialog-content-padding, var(--ha-space-6));
--show-duration: var(--ha-dialog-show-duration, 200ms); --show-duration: var(--ha-dialog-show-duration, 200ms);
@@ -228,8 +221,7 @@ export class HaWaDialog extends LitElement {
--ha-dialog-border-radius, --ha-dialog-border-radius,
var(--ha-border-radius-3xl) var(--ha-border-radius-3xl)
); );
max-width: var(--ha-dialog-max-width, 100vw); max-width: var(--ha-dialog-max-width, var(--safe-width));
max-width: var(--ha-dialog-max-width, 100svw);
} }
:host([width="small"]) wa-dialog { :host([width="small"]) wa-dialog {
@@ -249,34 +241,57 @@ export class HaWaDialog extends LitElement {
max-width: var(--width, var(--full-width)); max-width: var(--width, var(--full-width));
max-height: var( max-height: var(
--ha-dialog-max-height, --ha-dialog-max-height,
calc(100% - var(--ha-space-20)) calc(var(--safe-height) - var(--ha-space-20))
); );
min-height: var(--ha-dialog-min-height); min-height: var(--ha-dialog-min-height);
position: var(--dialog-surface-position, relative); position: var(--dialog-surface-position, relative);
margin-top: var(--dialog-surface-margin-top, auto); margin-top: var(--dialog-surface-margin-top, auto);
/* Used to offset the dialog from the safe areas when space is limited */
transform: translate(
calc(
var(--safe-area-offset-left, var(--ha-space-0)) - var(
--safe-area-offset-right,
var(--ha-space-0)
)
),
calc(
var(--safe-area-offset-top, var(--ha-space-0)) - var(
--safe-area-offset-bottom,
var(--ha-space-0)
)
)
);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
:host { :host([type="standard"]) {
--ha-dialog-border-radius: var(--ha-space-0); --ha-dialog-border-radius: var(--ha-space-0);
}
wa-dialog { wa-dialog {
--full-width: var(--ha-dialog-width-full, 100vw); /* Make the container fill the whole screen width and not the safe width */
} --full-width: var(--ha-dialog-width-full, 100vw);
--width: var(--full-width);
}
wa-dialog::part(dialog) { wa-dialog::part(dialog) {
min-height: var(--ha-dialog-min-height, 100vh); /* Make the dialog fill the whole screen height and not the safe height */
min-height: var(--ha-dialog-min-height, 100svh); min-height: var(--ha-dialog-min-height, 100vh);
max-height: var(--ha-dialog-max-height, 100vh); min-height: var(--ha-dialog-min-height, 100dvh);
max-height: var(--ha-dialog-max-height, 100svh); max-height: var(--ha-dialog-max-height, 100vh);
padding-top: var(--safe-area-inset-top, var(--ha-space-0)); max-height: var(--ha-dialog-max-height, 100dvh);
padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0)); margin-top: 0;
padding-left: var(--safe-area-inset-left, var(--ha-space-0)); margin-bottom: 0;
padding-right: var(--safe-area-inset-right, var(--ha-space-0)); /* Use safe area as padding instead of the container size */
padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
/* Reset the transform to center the dialog */
transform: none;
}
} }
} }

16
src/dialogs/generic/dialog-box.ts
View File

@@ -1,6 +1,7 @@
import { mdiAlertOutline, mdiClose } from "@mdi/js"; import { mdiAlertOutline, mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button"; import "../../components/ha-button";
@@ -64,6 +65,7 @@ class DialogBox extends LitElement {
<ha-wa-dialog <ha-wa-dialog
.hass=${this.hass} .hass=${this.hass}
.open=${this._open} .open=${this._open}
type=${confirmPrompt ? "alert" : "standard"}
?prevent-scrim-close=${confirmPrompt} ?prevent-scrim-close=${confirmPrompt}
@closed=${this._dialogClosed} @closed=${this._dialogClosed}
aria-labelledby="dialog-box-title" aria-labelledby="dialog-box-title"
@@ -79,7 +81,11 @@ class DialogBox extends LitElement {
></ha-icon-button ></ha-icon-button
></slot>` ></slot>`
: nothing} : nothing}
<span slot="title" id="dialog-box-title"> <span
class=${classMap({ title: true, alert: confirmPrompt })}
slot="title"
id="dialog-box-title"
>
${this._params.warning ${this._params.warning
? html`<ha-svg-icon ? html`<ha-svg-icon
.path=${mdiAlertOutline} .path=${mdiAlertOutline}
@@ -199,6 +205,14 @@ class DialogBox extends LitElement {
ha-textfield { ha-textfield {
width: 100%; width: 100%;
} }
.title.alert {
padding: 0 var(--ha-space-2);
}
@media all and (min-width: 450px) and (min-height: 500px) {
.title.alert {
padding: 0 var(--ha-space-1);
}
}
`; `;
} }

25
src/resources/theme/main.globals.ts
View File

@@ -27,14 +27,27 @@ export const mainStyles = css`
--margin-title-ltr: 0 0 0 24px; --margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0; --margin-title-rtl: 0 24px 0 0;
/* safe-area-insets */ /* Safe area insets */
--safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0)); --safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0px));
--safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0)); --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
--safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0)); --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0px));
--safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0)); --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0px));
--safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px)); /* Safe area inset x and y */
--safe-area-inset-x: calc(var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px)); --safe-area-inset-x: calc(var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px));
--safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px));
/* Offsets for centering elements within asymmetric safe areas */
--safe-area-offset-left: calc(max(var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px), 0px) / 2);
--safe-area-offset-right: calc(max(var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px), 0px) / 2);
--safe-area-offset-top: calc(max(var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px), 0px) / 2);
--safe-area-offset-bottom: calc(max(var(--safe-area-inset-bottom, 0px) - var(--safe-area-inset-top, 0px), 0px) / 2);
/* Safe width and height for use instead of 100vw and 100vh
* when working with areas like dialogs which need to fill the entire safe area.
*/
--safe-width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right));
--safe-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
} }
`; `;