Skip to content

Commit 7b264ae

Browse files
timmo001MindFreeze
timmo001
and
MindFreeze
authored
Standardise fixed top ha-dialog usages and fix safe areas (#27997)
* Add default padding * Use vars * Restore * Use container padding * Move fixed top styles to shared styles * Use fixed styles and adjust for safe areas on media browse dialog * Use vars * Reduce * Reuse * Add to strategy editor dialog * Reuse for editors * Reuse for media manager * Remove redundant code * Reuse for quick bar * Add * Use vars * Fix * Fix * Adjust for safe area * Fix * Fix * Default * Fix * Extra space at bottom * Remove override * Remove * Fix * Fix * Remove * Fix * Fix * Use y inset Co-authored-by: Petar Petrov <[email protected]> * Format * Update src/components/media-player/dialog-media-player-browse.ts * Format --------- Co-authored-by: Petar Petrov <[email protected]>
1 parent bb5fefc commit 7b264ae

File tree

17 files changed

+142
-104
lines changed

17 files changed

+142
-104
lines changed

‎src/components/ha-dialog.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export class HaDialog extends DialogBase {
101101
}
102102
.mdc-dialog__container {
103103
align-items: var(--vertical-align-dialog, center);
104+
padding: var(--dialog-container-padding, var(--ha-space-0));
104105
}
105106
.mdc-dialog__title {
106107
padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-0)
@@ -135,7 +136,7 @@ export class HaDialog extends DialogBase {
135136
--ha-dialog-surface-background,
136137
var(--mdc-theme-surface, #fff)
137138
);
138-
padding: var(--dialog-surface-padding);
139+
padding: var(--dialog-surface-padding, var(--ha-space-0));
139140
}
140141
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
141142
display: flex;

‎src/components/media-player/dialog-media-manage.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
removeLocalMedia,
1919
} from "../../data/media_source";
2020
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
21-
import { haStyleDialog } from "../../resources/styles";
21+
import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
2222
import type { HomeAssistant } from "../../types";
2323
import "../ha-button";
2424
import "../ha-check-list-item";
@@ -305,6 +305,7 @@ class DialogMediaManage extends LitElement {
305305
static get styles(): CSSResultGroup {
306306
return [
307307
haStyleDialog,
308+
haStyleDialogFixedTop,
308309
css`
309310
ha-dialog {
310311
--dialog-z-index: 9;
@@ -314,9 +315,9 @@ class DialogMediaManage extends LitElement {
314315
@media (min-width: 800px) {
315316
ha-dialog {
316317
--mdc-dialog-max-width: 800px;
317-
--dialog-surface-position: fixed;
318-
--dialog-surface-top: 40px;
319-
--mdc-dialog-max-height: calc(100vh - 72px);
318+
--mdc-dialog-max-height: calc(
319+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
320+
);
320321
}
321322
}
322323

‎src/components/media-player/dialog-media-player-browse.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
MediaPlayerItem,
2020
MediaPlayerLayoutType,
2121
} from "../../data/media-player";
22-
import { haStyleDialog } from "../../resources/styles";
22+
import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
2323
import type { HomeAssistant } from "../../types";
2424
import "../ha-dialog";
2525
import "../ha-dialog-header";
@@ -223,30 +223,35 @@ class DialogMediaPlayerBrowse extends LitElement {
223223
static get styles(): CSSResultGroup {
224224
return [
225225
haStyleDialog,
226+
haStyleDialogFixedTop,
226227
css`
227228
ha-dialog {
228229
--dialog-z-index: 9;
229230
--dialog-content-padding: 0;
230231
}
231232
232233
ha-media-player-browse {
233-
--media-browser-max-height: calc(100vh - 65px);
234+
--media-browser-max-height: calc(
235+
100vh - 65px - var(--safe-area-inset-y)
236+
);
234237
}
235238
236239
:host(.opened) ha-media-player-browse {
237-
height: calc(100vh - 65px);
240+
height: calc(100vh - 65px - var(--safe-area-inset-y));
238241
}
239242
240243
@media (min-width: 800px) {
241244
ha-dialog {
242245
--mdc-dialog-max-width: 800px;
243-
--dialog-surface-position: fixed;
244-
--dialog-surface-top: 40px;
245-
--mdc-dialog-max-height: calc(100vh - 72px);
246+
--mdc-dialog-max-height: calc(
247+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
248+
);
246249
}
247250
ha-media-player-browse {
248251
position: initial;
249-
--media-browser-max-height: calc(100vh - 145px);
252+
--media-browser-max-height: calc(
253+
100vh - 145px - var(--safe-area-inset-y)
254+
);
250255
width: 700px;
251256
}
252257
}

‎src/dialogs/more-info/ha-more-info-dialog.ts‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import { lightSupportsFavoriteColors } from "../../data/light";
5050
import type { ItemType } from "../../data/search";
5151
import { SearchableDomains } from "../../data/search";
5252
import { getSensorNumericDeviceClasses } from "../../data/sensor";
53-
import { haStyleDialog } from "../../resources/styles";
53+
import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
5454
import "../../state-summary/state-card-content";
5555
import type { HomeAssistant } from "../../types";
5656
import {
@@ -707,14 +707,9 @@ export class MoreInfoDialog extends LitElement {
707707
static get styles() {
708708
return [
709709
haStyleDialog,
710+
haStyleDialogFixedTop,
710711
css`
711712
ha-dialog {
712-
/* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
713-
--vertical-align-dialog: flex-start;
714-
--dialog-surface-margin-top: max(
715-
var(--ha-space-10),
716-
var(--safe-area-inset-top, var(--ha-space-0))
717-
);
718713
--dialog-content-padding: 0;
719714
}
720715
@@ -737,13 +732,6 @@ export class MoreInfoDialog extends LitElement {
737732
display: block;
738733
}
739734
740-
@media all and (max-width: 450px), all and (max-height: 500px) {
741-
/* When in fullscreen dialog should be attached to top */
742-
ha-dialog {
743-
--dialog-surface-margin-top: var(--ha-space-0);
744-
}
745-
}
746-
747735
@media all and (min-width: 600px) and (min-height: 501px) {
748736
ha-dialog {
749737
--mdc-dialog-min-width: 580px;

‎src/dialogs/quick-bar/ha-quick-bar.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@ import { getPanelNameTranslationKey } from "../../data/panel";
4646
import type { PageNavigation } from "../../layouts/hass-tabs-subpage";
4747
import { configSections } from "../../panels/config/ha-panel-config";
4848
import { HaFuse } from "../../resources/fuse";
49-
import { haStyleDialog, haStyleScrollbar } from "../../resources/styles";
49+
import {
50+
haStyleDialog,
51+
haStyleDialogFixedTop,
52+
haStyleScrollbar,
53+
} from "../../resources/styles";
5054
import { loadVirtualizer } from "../../resources/virtualizer";
5155
import type { HomeAssistant } from "../../types";
5256
import { brandsUrl } from "../../util/brands-url";
@@ -986,6 +990,7 @@ export class QuickBar extends LitElement {
986990
return [
987991
haStyleScrollbar,
988992
haStyleDialog,
993+
haStyleDialogFixedTop,
989994
css`
990995
ha-list {
991996
position: relative;
@@ -1010,9 +1015,9 @@ export class QuickBar extends LitElement {
10101015
ha-dialog {
10111016
--mdc-dialog-max-width: 800px;
10121017
--mdc-dialog-min-width: 500px;
1013-
--dialog-surface-position: fixed;
1014-
--dialog-surface-top: var(--ha-space-10);
1015-
--mdc-dialog-max-height: calc(100% - var(--ha-space-18));
1018+
--mdc-dialog-max-height: calc(
1019+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
1020+
);
10161021
}
10171022
}
10181023

‎src/panels/config/dashboard/dialog-new-dashboard.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,8 +281,12 @@ class DialogNewDashboard extends LitElement implements HassDialog {
281281
@media all and (min-width: 850px) {
282282
ha-dialog {
283283
--mdc-dialog-min-width: 845px;
284-
--mdc-dialog-min-height: calc(100vh - 72px);
285-
--mdc-dialog-max-height: calc(100vh - 72px);
284+
--mdc-dialog-min-height: calc(
285+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
286+
);
287+
--mdc-dialog-max-height: calc(
288+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
289+
);
286290
}
287291
}
288292

‎src/panels/config/integrations/dialog-add-integration.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -462,7 +462,7 @@ class AddIntegrationDialog extends LitElement {
462462
style=${styleMap({
463463
width: `${this._width}px`,
464464
height: this._narrow
465-
? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
465+
? "calc(100vh - 184px - var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)))"
466466
: "500px",
467467
})}
468468
@click=${this._integrationPicked}

‎src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import "../../../../../components/ha-tab-group";
1212
import "../../../../../components/ha-tab-group-tab";
1313
import type { ZHADevice, ZHAGroup } from "../../../../../data/zha";
1414
import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha";
15-
import { haStyleDialog } from "../../../../../resources/styles";
15+
import {
16+
haStyleDialog,
17+
haStyleDialogFixedTop,
18+
} from "../../../../../resources/styles";
1619
import type { HomeAssistant } from "../../../../../types";
1720
import { sortZHADevices, sortZHAGroups } from "./functions";
1821
import type {
@@ -211,11 +214,11 @@ class DialogZHAManageZigbeeDevice extends LitElement {
211214
static get styles(): CSSResultGroup {
212215
return [
213216
haStyleDialog,
217+
haStyleDialogFixedTop,
214218
css`
215219
ha-dialog {
216220
--dialog-surface-position: static;
217221
--dialog-content-position: static;
218-
--vertical-align-dialog: flex-start;
219222
}
220223
221224
.content {
@@ -229,8 +232,9 @@ class DialogZHAManageZigbeeDevice extends LitElement {
229232
ha-dialog {
230233
--mdc-dialog-min-width: 560px;
231234
--mdc-dialog-max-width: 560px;
232-
--dialog-surface-margin-top: 40px;
233-
--mdc-dialog-max-height: calc(100% - 72px);
235+
--mdc-dialog-max-height: calc(
236+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
237+
);
234238
}
235239
}
236240

‎src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ import {
2121
} from "../../../../data/lovelace_custom_cards";
2222
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
2323
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
24-
import { haStyleDialog } from "../../../../resources/styles";
24+
import {
25+
haStyleDialog,
26+
haStyleDialogFixedTop,
27+
} from "../../../../resources/styles";
2528
import type { HomeAssistant } from "../../../../types";
2629
import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
2730
import "../../badges/hui-badge";
@@ -395,6 +398,7 @@ export class HuiDialogEditBadge
395398
static get styles(): CSSResultGroup {
396399
return [
397400
haStyleDialog,
401+
haStyleDialogFixedTop,
398402
css`
399403
:host {
400404
--code-mirror-max-height: calc(100vh - 176px);
@@ -403,8 +407,6 @@ export class HuiDialogEditBadge
403407
ha-dialog {
404408
--mdc-dialog-max-width: 100px;
405409
--dialog-z-index: 6;
406-
--dialog-surface-position: fixed;
407-
--dialog-surface-top: 40px;
408410
--mdc-dialog-max-width: 90vw;
409411
--dialog-content-padding: 24px 12px;
410412
}

‎src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -184,19 +184,15 @@ export class HuiCreateDialogCard
184184
return [
185185
haStyleDialog,
186186
css`
187-
@media all and (max-width: 450px), all and (max-height: 500px) {
188-
/* overrule the ha-style-dialog max-height on small screens */
189-
ha-dialog {
190-
--mdc-dialog-max-height: 100%;
191-
height: 100%;
192-
}
193-
}
194-
195187
@media all and (min-width: 850px) {
196188
ha-dialog {
197189
--mdc-dialog-min-width: 845px;
198-
--mdc-dialog-min-height: calc(100vh - 72px);
199-
--mdc-dialog-max-height: calc(100vh - 72px);
190+
--mdc-dialog-min-height: calc(
191+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
192+
);
193+
--mdc-dialog-max-height: calc(
194+
100vh - var(--ha-space-18) - var(--safe-area-inset-y)
195+
);
200196
}
201197
}
202198

0 commit comments

Comments
 (0)