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

Add TODO for later

Browse Source
This commit is contained in:
Aidan Timson
2025-10-27 12:42:34 +00:00
parent 95cb4f37a1
commit 674f7d4131
1 changed files with 153 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -215,7 +215,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
wa-dialog { wa-dialog {
--full-width: var( --full-width: var(
--ha-dialog-width-full, --ha-dialog-width-full,
min(95vw, var(--safe-width)) 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));
@@ -233,7 +241,10 @@ export class HaWaDialog extends ScrollableFadeMixin(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, var(--safe-width)); max-width: var(--ha-dialog-max-width, 100vw);
max-width: var(--ha-dialog-max-width, 100svw);
/* TODO: animate view transition between width changes.
Needs https://github.com/home-assistant/frontend/pull/27281 for mixin */
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
wa-dialog { wa-dialog {
@@ -247,7 +258,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
} }
:host([width="large"]) wa-dialog { :host([width="large"]) wa-dialog {
--width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width)); --width: min(var(--ha-dialog-width-lg, 720px), var(--full-width));
} }
:host([width="full"]) wa-dialog { :host([width="full"]) wa-dialog {
@@ -259,130 +270,166 @@ export class HaWaDialog extends ScrollableFadeMixin(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(var(--safe-height) - var(--ha-space-20)) calc(100% - var(--ha-space-20))
); );
min-height: var(--ha-dialog-min-height); min-height: var(--ha-dialog-min-height);
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([type="standard"]) { :host {
--ha-dialog-border-radius: var(--ha-space-0); --ha-dialog-border-radius: var(--ha-space-0);
}
wa-dialog { :host([width="small"]) wa-dialog {
/* Make the container fill the whole screen width and not the safe width */ --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
--full-width: var(--ha-dialog-width-full, 100vw); }
--width: var(--full-width);
}
wa-dialog::part(dialog) { :host([width="large"]) wa-dialog {
/* Make the dialog fill the whole screen height and not the safe height */ --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
min-height: var(--ha-dialog-min-height, 100vh); }
min-height: var(--ha-dialog-min-height, 100dvh);
max-height: var(--ha-dialog-max-height, 100vh); :host([width="full"]) wa-dialog {
max-height: var(--ha-dialog-max-height, 100dvh); --width: var(--full-width);
margin-top: 0; }
margin-bottom: 0;
/* Use safe area as padding instead of the container size */ wa-dialog::part(dialog) {
padding-top: var(--safe-area-inset-top); min-width: var(--width, var(--full-width));
padding-bottom: var(--safe-area-inset-bottom); max-width: var(--width, var(--full-width));
padding-left: var(--safe-area-inset-left); max-height: var(
padding-right: var(--safe-area-inset-right); --ha-dialog-max-height,
/* Reset the transform to center the dialog */ calc(var(--safe-height) - var(--ha-space-20))
transform: none; );
min-height: var(--ha-dialog-min-height);
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;
flex-direction: column;
overflow: hidden;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
:host([type="standard"]) {
--ha-dialog-border-radius: var(--ha-space-0);
wa-dialog {
/* 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) {
/* Make the dialog fill the whole screen height and not the safe height */
min-height: var(--ha-dialog-min-height, 100vh);
min-height: var(--ha-dialog-min-height, 100dvh);
max-height: var(--ha-dialog-max-height, 100vh);
max-height: var(--ha-dialog-max-height, 100dvh);
margin-top: 0;
margin-bottom: 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;
}
} }
} }
}
.header-title-container { .header-title-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header-title { .header-title {
margin: 0; margin: 0;
margin-bottom: 0; margin-bottom: 0;
color: var(--ha-dialog-header-title-color, var(--primary-text-color)); color: var(
font-size: var( --ha-dialog-header-title-color,
--ha-dialog-header-title-font-size, var(--primary-text-color)
var(--ha-font-size-2xl) );
); font-size: var(
line-height: var( --ha-dialog-header-title-font-size,
--ha-dialog-header-title-line-height, var(--ha-font-size-2xl)
var(--ha-line-height-condensed) );
); line-height: var(
font-weight: var( --ha-dialog-header-title-line-height,
--ha-dialog-header-title-font-weight, var(--ha-line-height-condensed)
var(--ha-font-weight-normal) );
); font-weight: var(
overflow: hidden; --ha-dialog-header-title-font-weight,
text-overflow: ellipsis; var(--ha-font-weight-normal)
white-space: nowrap; );
margin-right: var(--ha-space-3); overflow: hidden;
} text-overflow: ellipsis;
white-space: nowrap;
margin-right: var(--ha-space-3);
}
wa-dialog::part(body) { wa-dialog::part(body) {
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
.content-wrapper { .content-wrapper {
position: relative; position: relative;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
} }
.body { .body {
position: var(--dialog-content-position, relative); position: var(--dialog-content-position, relative);
padding: var( padding: var(
--dialog-content-padding, --dialog-content-padding,
0 var(--ha-space-6) var(--ha-space-6) var(--ha-space-6) 0 var(--ha-space-6) var(--ha-space-6) var(--ha-space-6)
); );
overflow: auto; overflow: auto;
flex-grow: 1; flex-grow: 1;
} }
:host([flexcontent]) .body { :host([flexcontent]) .body {
max-width: 100%; max-width: 100%;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
wa-dialog::part(footer) { wa-dialog::part(footer) {
padding: var(--ha-space-0); padding: var(--ha-space-0);
} }
::slotted([slot="footer"]) { ::slotted([slot="footer"]) {
display: flex; display: flex;
padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4) padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4)
var(--ha-space-4); var(--ha-space-4);
gap: var(--ha-space-3); gap: var(--ha-space-3);
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
width: 100%; width: 100%;
}
} }
`, `,
]; ];