Unified safe area (insets) for Android and iOS #23811
Conversation
![home-assistant[bot]](https://avatars.githubusercontent.com/in/97978?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hi @Gregman-js
It seems you haven't yet signed a CLA. Please do so here.
Once you do that we will be able to review and accept this pull request.
Thanks!
|
Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍 |
github-actions
bot
added
Supervisor
home-assistant
bot
added
cla-recheck
cla-signed
and removed
cla-recheck
cla-needed
labels
|
As @jpelgrom said in the linked issue. We need to think about how to handle situation where user have updated android app and old server which do not support new css variables yet... |
Gregman-js
force-pushed
the
unified-safe-area
branch
from
b59b4c8 to
2112dfa
Compare
| "safe-area-bottom": | ||
| "var(--android-safe-area-inset-bottom, env(safe-area-inset-bottom, 0))", | ||
| "safe-area-top": | ||
| "var(--android-safe-area-inset-top, env(safe-area-inset-top, 0))", | ||
| "safe-area-left": | ||
| "var(--android-safe-area-inset-left, env(safe-area-inset-left, 0))", | ||
| "safe-area-right": | ||
| "var(--android-safe-area-inset-right, env(safe-area-inset-right, 0))", |
There was a problem hiding this comment.
These are not derived styles, please move it to resources/styles
| @@ -154,4 +154,12 @@ export const derivedStyles = { | |||
| "material-background-color": "var(--card-background-color)", | |||
| "material-secondary-background-color": "var(--secondary-background-color)", | |||
| "material-secondary-text-color": "var(--secondary-text-color)", | |||
| "safe-area-bottom": | |||
There was a problem hiding this comment.
Lets not change the name
| "safe-area-bottom": | |
| "safe-area-inset-bottom": |
|
Could this also fix the issue on most dialogs and their actions like save/cancel etc? |
|
@marcinbauer85 This PR won't fix this. But I think we need to fix this issue before introducing android changes. It is possible to click this button (on screenshot above) with navigation bar, but it can be impossible to do it with 3 button navigation on android if this view does not respect safe area insets. |
|
Yes please, that would be great! |
Proposed change
I noticed minor differences between embedding WebView in iOS and Android.
Now the webview is not drawn under the navigation bar on Android, but on iOS it is.
I want to resolve part of this issue: draw webview under navigation bar on android.
envdo not work on android, so I prepared another change for android repo to set--android-safe-area-inset-[...](variable from this PR) on page load (PR, not required for this PR)In this way, we can unify safe area on ios and android and create even more immersive views.
With these changes, we can also draw webview under status bar on android and iOS (require future work).
Working POC (left iOS, right android):
Type of change
Example configuration
Additional information
When Google will fix
envsupport on android webview, we can just change property toenvFirst commit: new properties
Second commit: I've replaced all occurence of
envin code for new propertiesChecklist
If user exposed functionality or configuration variables are added/changed: