jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-10 03:19:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Safe area: sidebar and notification drawer (#26853)

Browse Source 
* sidebar: account for safe-area top inset in menu height/padding; adjust list height calc

* Defaults

* Defaults

* Restore

* Remove test

* Adjust

* Adjust

* Only apply on smaller layouts

* Fix

* Restore

* Restore

* No default in this case

* Restore

* Gain back some space

* Fix

* Adjust

* Tweak

* Calculate when mobile

* Use fallbacks for calculations and others anyway
This commit is contained in:
Aidan Timson
2025-09-09 10:59:24 +01:00
committed by GitHub
parent dec9d304da
commit cc70eb46c9
4 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ha-header-bar.ts
View File

@@ -38,6 +38,7 @@ export class HaHeaderBar extends LitElement {
.mdc-top-app-bar { .mdc-top-app-bar {
position: static; position: static;
color: var(--mdc-theme-on-primary, #fff); color: var(--mdc-theme-on-primary, #fff);
padding: var(--header-bar-padding);
} }
.mdc-top-app-bar__section.mdc-top-app-bar__section--align-start { .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
flex: 1; flex: 1;

28
src/components/ha-sidebar.ts
View File

@@ -666,7 +666,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
tooltip.style.display = "block"; tooltip.style.display = "block";
tooltip.style.position = "fixed"; tooltip.style.position = "fixed";
tooltip.style.top = `${top}px`; tooltip.style.top = `${top}px`;
tooltip.style.left = `${item.offsetLeft + item.clientWidth + 8}px`; tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
} }
private _hideTooltip() { private _hideTooltip() {
@@ -705,9 +705,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
} }
.menu { .menu {
height: var(--header-height); height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
padding: 0 4px; padding: 0 4px;
@@ -725,12 +726,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
); );
font-size: var(--ha-font-size-xl); font-size: var(--ha-font-size-xl);
align-items: center; align-items: center;
padding-left: calc(4px + var(--safe-area-inset-left)); padding-left: calc(4px + var(--safe-area-inset-left, 0px));
padding-inline-start: calc(4px + var(--safe-area-inset-left)); padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
padding-inline-end: initial; padding-inline-end: initial;
padding-top: var(--safe-area-inset-top, 0px);
} }
:host([expanded]) .menu { :host([expanded]) .menu {
width: calc(256px + var(--safe-area-inset-left)); width: calc(256px + var(--safe-area-inset-left, 0px));
}
:host([narrow][expanded]) .menu {
width: 100%;
} }
.menu ha-icon-button { .menu ha-icon-button {
color: var(--sidebar-icon-color); color: var(--sidebar-icon-color);
@@ -756,22 +761,23 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-fade-in, ha-fade-in,
ha-md-list { ha-md-list {
height: calc( height: calc(
100% - var(--header-height) - 132px - var(--safe-area-inset-bottom) 100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
132px - var(--safe-area-inset-bottom, 0px)
); );
} }
ha-fade-in { ha-fade-in {
padding: 4px 0;
box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
ha-md-list { ha-md-list {
padding: 4px 0;
box-sizing: border-box;
overflow-x: hidden; overflow-x: hidden;
background: none; background: none;
margin-left: var(--safe-area-inset-left); margin-left: var(--safe-area-inset-left, 0px);
} }
ha-md-list-item { ha-md-list-item {
@@ -791,7 +797,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
} }
:host([expanded]) ha-md-list-item { :host([expanded]) ha-md-list-item {
width: 248px; width: 248px;
width: calc(248px - var(--safe-area-inset-left)); }
:host([narrow][expanded]) ha-md-list-item {
width: calc(240px - var(--safe-area-inset-left, 0px));
} }
ha-md-list-item.selected { ha-md-list-item.selected {

30
src/dialogs/notifications/notification-drawer.ts
View File

@@ -49,7 +49,7 @@ export class HuiNotificationDrawer extends LitElement {
); );
this.style.setProperty( this.style.setProperty(
"--mdc-drawer-width", "--mdc-drawer-width",
narrow ? window.innerWidth + "px" : "500px" `min(100vw, calc(${narrow ? window.innerWidth + "px" : "500px"} + var(--safe-area-inset-left, 0px)))`
); );
this._open = true; this._open = true;
} }
@@ -152,24 +152,40 @@ export class HuiNotificationDrawer extends LitElement {
ha-header-bar { ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color); --mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--primary-background-color); --mdc-theme-primary: var(--primary-background-color);
--header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
var(--safe-area-inset-left, 0px);
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);
display: block; display: block;
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-header-bar {
--header-bar-padding: var(--safe-area-inset-top, 0px)
var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
}
}
.notifications { .notifications {
overflow-y: auto; overflow-y: auto;
padding-top: 16px; padding-top: 16px;
padding-left: var(--safe-area-inset-left); padding-left: var(--safe-area-inset-left, 0px);
padding-right: var(--safe-area-inset-right); padding-inline-start: var(--safe-area-inset-left, 0px);
padding-inline-start: var(--safe-area-inset-left); padding-bottom: var(--safe-area-inset-bottom, 0px);
padding-inline-end: var(--safe-area-inset-right); height: calc(
padding-bottom: var(--safe-area-inset-bottom); 100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
height: calc(100% - 1px - var(--header-height)); );
box-sizing: border-box; box-sizing: border-box;
background-color: var(--primary-background-color); background-color: var(--primary-background-color);
color: var(--primary-text-color); color: var(--primary-text-color);
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
.notifications {
padding-right: var(--safe-area-inset-right, 0px);
padding-inline-end: var(--safe-area-inset-right, 0px);
}
}
.notification { .notification {
padding: 0 16px 16px; padding: 0 16px 16px;
} }

4
src/layouts/home-assistant-main.ts
View File

@@ -144,13 +144,13 @@ export class HomeAssistantMain extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
/* remove the grey tap highlights in iOS on the fullscreen touch targets */ /* remove the grey tap highlights in iOS on the fullscreen touch targets */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--mdc-drawer-width: 56px; --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
--safe-area-content-inset-left: 0px; --safe-area-content-inset-left: 0px;
--safe-area-content-inset-right: var(--safe-area-inset-right); --safe-area-content-inset-right: var(--safe-area-inset-right);
} }
:host([expanded]) { :host([expanded]) {
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left)); --mdc-drawer-width: calc(256px + var(--safe-area-inset-left, 0px));
} }
:host([modal]) { :host([modal]) {
--mdc-drawer-width: unset; --mdc-drawer-width: unset;