Skip to content

Commit f4238bf

Browse files
timmo001timmo001
authored
Safe area: bars (#26816)
* app-bars: apply safe-area insets (top padding and fixed-adjust; add content padding in fixed) * Set toolbar * Set bars * Add left and right insets to root ll * Add to dev tools header * Fix * Apply to subpages (config pages mainly) * Adjust * Remove old comment
1 parent ef8cb8b commit f4238bf

File tree

7 files changed

+73
-33
lines changed

7 files changed

+73
-33
lines changed

‎src/components/ha-top-app-bar-fixed.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
88
static override styles = [
99
styles,
1010
css`
11+
header {
12+
padding-top: var(--safe-area-inset-top);
13+
}
1114
.mdc-top-app-bar__row {
1215
height: var(--header-height);
16+
padding-left: var(--safe-area-content-inset-left);
17+
padding-right: var(--safe-area-content-inset-right);
1318
border-bottom: var(--app-header-border-bottom);
1419
}
1520
.mdc-top-app-bar--fixed-adjust {
16-
padding-top: var(--header-height);
21+
padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
1722
}
1823
.mdc-top-app-bar {
1924
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
2227
--app-header-background-color,
2328
var(--mdc-theme-primary)
2429
);
30+
padding-top: var(--safe-area-inset-top);
31+
padding-left: var(--safe-area-inset-left);
32+
padding-right: var(--safe-area-inset-right);
2533
}
2634
.mdc-top-app-bar__title {
2735
font-size: var(--ha-font-size-xl);

‎src/components/ha-top-app-bar.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class HaTopAppBar extends TopAppBarBase {
1313
border-bottom: var(--app-header-border-bottom);
1414
}
1515
.mdc-top-app-bar--fixed-adjust {
16-
padding-top: var(--header-height);
16+
padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
1717
}
1818
.mdc-top-app-bar {
1919
--mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +22,9 @@ export class HaTopAppBar extends TopAppBarBase {
2222
--app-header-background-color,
2323
var(--mdc-theme-primary)
2424
);
25+
padding-top: var(--safe-area-inset-top);
26+
padding-left: var(--safe-area-inset-left);
27+
padding-right: var(--safe-area-inset-right);
2528
}
2629
`,
2730
];

‎src/components/ha-two-pane-top-app-bar-fixed.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,12 +244,15 @@ export class TopAppBarBaseBase extends BaseElement {
244244
styles,
245245
haStyleScrollbar,
246246
css`
247+
header {
248+
padding-top: var(--safe-area-inset-top);
249+
}
247250
.mdc-top-app-bar__row {
248251
height: var(--header-height);
249252
border-bottom: var(--app-header-border-bottom);
250253
}
251254
.mdc-top-app-bar--fixed-adjust {
252-
padding-top: var(--header-height);
255+
padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
253256
}
254257
.shadow-container {
255258
position: absolute;
@@ -274,6 +277,9 @@ export class TopAppBarBaseBase extends BaseElement {
274277
--app-header-background-color,
275278
var(--mdc-theme-primary)
276279
);
280+
padding-top: var(--safe-area-inset-top);
281+
padding-left: var(--safe-area-inset-left);
282+
padding-right: var(--safe-area-inset-right);
277283
}
278284
.mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
279285
box-shadow: none;

‎src/layouts/hass-subpage.ts‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,31 +29,35 @@ class HassSubpage extends LitElement {
2929
protected render(): TemplateResult {
3030
return html`
3131
<div class="toolbar">
32-
${this.mainPage || history.state?.root
33-
? html`
34-
<ha-menu-button
35-
.hassio=${this.supervisor}
36-
.hass=${this.hass}
37-
.narrow=${this.narrow}
38-
></ha-menu-button>
39-
`
40-
: this.backPath
32+
<div class="toolbar-content">
33+
${this.mainPage || history.state?.root
4134
? html`
42-
<a href=${this.backPath}>
35+
<ha-menu-button
36+
.hassio=${this.supervisor}
37+
.hass=${this.hass}
38+
.narrow=${this.narrow}
39+
></ha-menu-button>
40+
`
41+
: this.backPath
42+
? html`
43+
<a href=${this.backPath}>
44+
<ha-icon-button-arrow-prev
45+
.hass=${this.hass}
46+
></ha-icon-button-arrow-prev>
47+
</a>
48+
`
49+
: html`
4350
<ha-icon-button-arrow-prev
4451
.hass=${this.hass}
52+
@click=${this._backTapped}
4553
></ha-icon-button-arrow-prev>
46-
</a>
47-
`
48-
: html`
49-
<ha-icon-button-arrow-prev
50-
.hass=${this.hass}
51-
@click=${this._backTapped}
52-
></ha-icon-button-arrow-prev>
53-
`}
54+
`}
5455
55-
<div class="main-title"><slot name="header">${this.header}</slot></div>
56-
<slot name="toolbar-icon"></slot>
56+
<div class="main-title">
57+
<slot name="header">${this.header}</slot>
58+
</div>
59+
<slot name="toolbar-icon"></slot>
60+
</div>
5761
</div>
5862
<div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
5963
<slot></slot>
@@ -95,23 +99,28 @@ class HassSubpage extends LitElement {
9599
}
96100
97101
.toolbar {
102+
padding-top: var(--safe-area-inset-top);
103+
padding-right: var(--safe-area-inset-right);
104+
padding-left: var(--safe-area-inset-left);
105+
background-color: var(--app-header-background-color);
106+
border-bottom: var(--app-header-border-bottom, none);
107+
box-sizing: border-box;
108+
}
109+
110+
.toolbar-content {
98111
display: flex;
99112
align-items: center;
100113
font-size: var(--ha-font-size-xl);
101-
height: var(--header-height);
102114
padding: 8px 12px;
103-
background-color: var(--app-header-background-color);
104115
font-weight: var(--ha-font-weight-normal);
105116
color: var(--app-header-text-color, white);
106-
border-bottom: var(--app-header-border-bottom, none);
107-
box-sizing: border-box;
108117
}
109118
@media (max-width: 599px) {
110-
.toolbar {
119+
.toolbar-content {
111120
padding: 4px;
112121
}
113122
}
114-
.toolbar a {
123+
.toolbar-content a {
115124
color: var(--sidebar-text-color);
116125
text-decoration: none;
117126
}
@@ -140,7 +149,9 @@ class HassSubpage extends LitElement {
140149
.content {
141150
position: relative;
142151
width: 100%;
143-
height: calc(100% - 1px - var(--header-height));
152+
height: calc(
153+
100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
154+
);
144155
overflow-y: auto;
145156
overflow: auto;
146157
-webkit-overflow-scrolling: touch;

‎src/layouts/hass-tabs-subpage.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,10 @@ class HassTabsSubpage extends LitElement {
240240
241241
.toolbar {
242242
font-size: var(--ha-font-size-xl);
243-
height: var(--header-height);
243+
height: calc(var(--header-height) + var(--safe-area-inset-top));
244+
padding-top: var(--safe-area-inset-top);
245+
padding-right: var(--safe-area-inset-right);
246+
padding-left: var(--safe-area-inset-left);
244247
background-color: var(--sidebar-background-color);
245248
font-weight: var(--ha-font-weight-normal);
246249
border-bottom: 1px solid var(--divider-color);

‎src/panels/developer-tools/ha-panel-developer-tools.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ class PanelDeveloperTools extends LitElement {
130130
background-color: var(--app-header-background-color);
131131
width: var(--mdc-top-app-bar-width, 100%);
132132
padding-top: var(--safe-area-inset-top);
133+
padding-left: var(--safe-area-inset-left);
134+
padding-right: var(--safe-area-inset-right);
133135
color: var(--app-header-text-color, white);
134136
border-bottom: var(--app-header-border-bottom, none);
135137
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);

‎src/panels/lovelace/hui-root.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1209,10 +1209,17 @@ class HUIRoot extends LitElement {
12091209
border-bottom: var(--app-header-border-bottom, none);
12101210
position: fixed;
12111211
top: 0;
1212-
width: var(--mdc-top-app-bar-width, 100%);
1212+
width: var(
1213+
--mdc-top-app-bar-width,
1214+
calc(
1215+
100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
1216+
)
1217+
);
12131218
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
12141219
backdrop-filter: var(--app-header-backdrop-filter, none);
12151220
padding-top: var(--safe-area-inset-top);
1221+
padding-left: var(--safe-area-inset-left);
1222+
padding-right: var(--safe-area-inset-right);
12161223
z-index: 4;
12171224
transition: box-shadow 200ms linear;
12181225
}
@@ -1398,7 +1405,7 @@ class HUIRoot extends LitElement {
13981405
padding-top: calc(
13991406
var(--header-height, 56px) +
14001407
calc(var(--tab-bar-height, 56px) - 2px) +
1401-
var(--safe-area-inset-top)
1408+
var(--safe-area-inset-top, 0px)
14021409
);
14031410
}
14041411
.hide-tab {

0 commit comments

Comments
 (0)