Skip to content

Commit 539d0e4

Browse files
timmo001timmo001
authored
Fix ha-wa-dialog fullscreen and make alerts not fullscreen (#28175)
1 parent 9c9d274 commit 539d0e4

File tree

3 files changed

+79
-37
lines changed

3 files changed

+79
-37
lines changed

‎src/components/ha-wa-dialog.ts‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
5353
* @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
5454
*
5555
* @attr {boolean} open - Controls the dialog open state.
56+
* @attr {("alert"|"standard")} type - Dialog type. Defaults to "standard".
5657
* @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
5758
* @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
5859
* @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
@@ -84,6 +85,9 @@ export class HaWaDialog extends LitElement {
8485
@property({ type: Boolean, reflect: true })
8586
public open = false;
8687

88+
@property({ reflect: true })
89+
public type: "alert" | "standard" = "standard";
90+
8791
@property({ type: String, reflect: true, attribute: "width" })
8892
public width: DialogWidth = "medium";
8993

@@ -200,18 +204,7 @@ export class HaWaDialog extends LitElement {
200204
haStyleScrollbar,
201205
css`
202206
wa-dialog {
203-
--full-width: var(
204-
--ha-dialog-width-full,
205-
min(
206-
95vw,
207-
calc(
208-
100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
209-
--safe-area-inset-right,
210-
var(--ha-space-0)
211-
)
212-
)
213-
)
214-
);
207+
--full-width: var(--ha-dialog-width-full, min(95vw, var(--safe-width)));
215208
--width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
216209
--spacing: var(--dialog-content-padding, var(--ha-space-6));
217210
--show-duration: var(--ha-dialog-show-duration, 200ms);
@@ -228,8 +221,7 @@ export class HaWaDialog extends LitElement {
228221
--ha-dialog-border-radius,
229222
var(--ha-border-radius-3xl)
230223
);
231-
max-width: var(--ha-dialog-max-width, 100vw);
232-
max-width: var(--ha-dialog-max-width, 100svw);
224+
max-width: var(--ha-dialog-max-width, var(--safe-width));
233225
}
234226
235227
:host([width="small"]) wa-dialog {
@@ -249,34 +241,57 @@ export class HaWaDialog extends LitElement {
249241
max-width: var(--width, var(--full-width));
250242
max-height: var(
251243
--ha-dialog-max-height,
252-
calc(100% - var(--ha-space-20))
244+
calc(var(--safe-height) - var(--ha-space-20))
253245
);
254246
min-height: var(--ha-dialog-min-height);
255247
position: var(--dialog-surface-position, relative);
256248
margin-top: var(--dialog-surface-margin-top, auto);
249+
/* Used to offset the dialog from the safe areas when space is limited */
250+
transform: translate(
251+
calc(
252+
var(--safe-area-offset-left, var(--ha-space-0)) - var(
253+
--safe-area-offset-right,
254+
var(--ha-space-0)
255+
)
256+
),
257+
calc(
258+
var(--safe-area-offset-top, var(--ha-space-0)) - var(
259+
--safe-area-offset-bottom,
260+
var(--ha-space-0)
261+
)
262+
)
263+
);
257264
display: flex;
258265
flex-direction: column;
259266
overflow: hidden;
260267
}
261268
262269
@media all and (max-width: 450px), all and (max-height: 500px) {
263-
:host {
270+
:host([type="standard"]) {
264271
--ha-dialog-border-radius: var(--ha-space-0);
265-
}
266-
267-
wa-dialog {
268-
--full-width: var(--ha-dialog-width-full, 100vw);
269-
}
270272
271-
wa-dialog::part(dialog) {
272-
min-height: var(--ha-dialog-min-height, 100vh);
273-
min-height: var(--ha-dialog-min-height, 100svh);
274-
max-height: var(--ha-dialog-max-height, 100vh);
275-
max-height: var(--ha-dialog-max-height, 100svh);
276-
padding-top: var(--safe-area-inset-top, var(--ha-space-0));
277-
padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
278-
padding-left: var(--safe-area-inset-left, var(--ha-space-0));
279-
padding-right: var(--safe-area-inset-right, var(--ha-space-0));
273+
wa-dialog {
274+
/* Make the container fill the whole screen width and not the safe width */
275+
--full-width: var(--ha-dialog-width-full, 100vw);
276+
--width: var(--full-width);
277+
}
278+
279+
wa-dialog::part(dialog) {
280+
/* Make the dialog fill the whole screen height and not the safe height */
281+
min-height: var(--ha-dialog-min-height, 100vh);
282+
min-height: var(--ha-dialog-min-height, 100dvh);
283+
max-height: var(--ha-dialog-max-height, 100vh);
284+
max-height: var(--ha-dialog-max-height, 100dvh);
285+
margin-top: 0;
286+
margin-bottom: 0;
287+
/* Use safe area as padding instead of the container size */
288+
padding-top: var(--safe-area-inset-top);
289+
padding-bottom: var(--safe-area-inset-bottom);
290+
padding-left: var(--safe-area-inset-left);
291+
padding-right: var(--safe-area-inset-right);
292+
/* Reset the transform to center the dialog */
293+
transform: none;
294+
}
280295
}
281296
}
282297

‎src/dialogs/generic/dialog-box.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { mdiAlertOutline, mdiClose } from "@mdi/js";
22
import { css, html, LitElement, nothing } from "lit";
33
import { customElement, property, query, state } from "lit/decorators";
4+
import { classMap } from "lit/directives/class-map";
45
import { ifDefined } from "lit/directives/if-defined";
56
import { fireEvent } from "../../common/dom/fire_event";
67
import "../../components/ha-button";
@@ -64,6 +65,7 @@ class DialogBox extends LitElement {
6465
<ha-wa-dialog
6566
.hass=${this.hass}
6667
.open=${this._open}
68+
type=${confirmPrompt ? "alert" : "standard"}
6769
?prevent-scrim-close=${confirmPrompt}
6870
@closed=${this._dialogClosed}
6971
aria-labelledby="dialog-box-title"
@@ -79,7 +81,11 @@ class DialogBox extends LitElement {
7981
></ha-icon-button
8082
></slot>`
8183
: nothing}
82-
<span slot="title" id="dialog-box-title">
84+
<span
85+
class=${classMap({ title: true, alert: confirmPrompt })}
86+
slot="title"
87+
id="dialog-box-title"
88+
>
8389
${this._params.warning
8490
? html`<ha-svg-icon
8591
.path=${mdiAlertOutline}
@@ -199,6 +205,14 @@ class DialogBox extends LitElement {
199205
ha-textfield {
200206
width: 100%;
201207
}
208+
.title.alert {
209+
padding: 0 var(--ha-space-2);
210+
}
211+
@media all and (min-width: 450px) and (min-height: 500px) {
212+
.title.alert {
213+
padding: 0 var(--ha-space-1);
214+
}
215+
}
202216
`;
203217
}
204218

‎src/resources/theme/main.globals.ts‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,27 @@ export const mainStyles = css`
2727
--margin-title-ltr: 0 0 0 24px;
2828
--margin-title-rtl: 0 24px 0 0;
2929
30-
/* safe-area-insets */
31-
--safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
32-
--safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0));
33-
--safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0));
34-
--safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0));
30+
/* Safe area insets */
31+
--safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0px));
32+
--safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
33+
--safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0px));
34+
--safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0px));
3535
36-
--safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px));
36+
/* Safe area inset x and y */
3737
--safe-area-inset-x: calc(var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px));
38+
--safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px));
39+
40+
/* Offsets for centering elements within asymmetric safe areas */
41+
--safe-area-offset-left: calc(max(var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px), 0px) / 2);
42+
--safe-area-offset-right: calc(max(var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px), 0px) / 2);
43+
--safe-area-offset-top: calc(max(var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px), 0px) / 2);
44+
--safe-area-offset-bottom: calc(max(var(--safe-area-inset-bottom, 0px) - var(--safe-area-inset-top, 0px), 0px) / 2);
45+
46+
/* Safe width and height for use instead of 100vw and 100vh
47+
* when working with areas like dialogs which need to fill the entire safe area.
48+
*/
49+
--safe-width: calc(100vw - var(--safe-area-inset-left) - var(--safe-area-inset-right));
50+
--safe-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
3851
}
3952
`;
4053

0 commit comments

Comments
 (0)