Add css var for header webkit backdrop filter #20473

bgoncal · 2024-04-08T14:31:14Z

Breaking change

Proposed change

This adds a CSS variable to customize -webkit-backdrop-filter for header.

Screen_Recording_2024-03-10_at_16.56.26.mov

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

bramkragten

You only implemented this for the Lovelace dashboard now, we should probably do it more general?

src/layouts/home-assistant-main.ts

src/panels/lovelace/hui-root.ts

bgoncal · 2024-04-08T14:38:19Z

You only implemented this for the Lovelace dashboard now, we should probably do it more general?

Do I need to replicate the change in many places or there is a way to declare this variable once and apply to all headers?

bramkragten · 2024-04-08T14:53:26Z

Most use ha-top-app-bar/ha-top-app-bar-fixed, so implementing it there will get most cases.

bgoncal · 2024-04-08T15:00:50Z

Most use ha-top-app-bar/ha-top-app-bar-fixed, so implementing it there will get most cases.

Ok, I've added to those + some places I thought were relevant, maybe they are not needed to those general ha-top-app-bar-*

src/panels/lovelace/hui-root.ts

bramkragten · 2024-04-09T11:36:36Z

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

@@ -27,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
        padding-inline-start: 20px;
        padding-inline-end: initial;
      }
+      .header {


I don't think there is an element that has the header class? Have you tested this?

I think this is where this should go (and it was already done in the second commit):

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

Line 904 in 35cf306

.header {

I think this and the one in ha-top-app-bar.ts should be removed.

I don't think there is an element that has the header class? Have you tested this?

Oh sorry, I got confused here, if I want to add it directly to ha-top-app-bar-fixed can I just remove ".header"?

I think I am adding it twice

@Nezz but would it then go to all headers in HA?

Oh right, that way it'd only get added to the dashboards. Add it under this one:

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

Line 18 in 38f8b4e

.mdc-top-app-bar {

and this one:

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

Line 18 in 38f8b4e

.mdc-top-app-bar {

src/layouts/hass-error-screen.ts

Nezz · 2024-04-09T13:16:26Z

src/panels/lovelace/hui-root.ts

+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
+          backdrop-filter: var(--app-header-backdrop-filter, unset);


Suggested change

-webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);

backdrop-filter: var(--app-header-backdrop-filter, unset);

-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);

backdrop-filter: var(--app-header-backdrop-filter, none);

I believe the default value should be none, not unset

Also note that both properties should be added everywhere.

Indeed, I first need to know where exactly they need to be and where they don't

I removed from other places and kept it in these 3 files you see in the changes, what do you think?

Nezz · 2024-04-09T13:44:21Z

You only implemented this for the Lovelace dashboard now, we should probably do it more general?

After having a look around, it seems that only these two panels support transparency in their headers:
https://github.com/search?q=repo%3Ahome-assistant%2Ffrontend+calc%28var%28--header-height%29+%2B+env%28safe-area-inset-top%29%29%3B&type=code

The rest of the views (logbook, settings, notifications, etc) don't allow the content to slide under the header. Therefore adding the backdrop-filter there would be just slow down the rendering.

bgoncal · 2024-04-09T13:55:32Z

You only implemented this for the Lovelace dashboard now, we should probably do it more general?

After having a look around, it seems that only these two panels support transparency in their headers: https://github.com/search?q=repo%3Ahome-assistant%2Ffrontend+calc%28var%28--header-height%29+%2B+env%28safe-area-inset-top%29%29%3B&type=code

The rest of the views (logbook, settings, notifications, etc) don't allow the content to slide under the header. Therefore adding the backdrop-filter there would be just slow down the rendering.

Developer tools header too

Nezz · 2024-04-09T15:49:39Z

Nice, I haven't found the developer tools. For future reference that's styled here for offset content:

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

Lines 156 to 158 in 9903e22

    
                     padding-top: calc( 
        
                       var(--header-height) + 48px + env(safe-area-inset-top) 
        
                     );

nayzm · 2024-05-03T21:47:13Z

Thank you for working on this.

Just wondering would it be possible to implement some sort of support for kiosk-mode? On mobile devices with app-header hidden, the background doesn't stretch underneath the status icons on iOS, so it just shows a solid colour.

bgoncal · 2024-05-03T21:49:54Z

Thank you for working on this.

Just wondering would it be possible to implement some sort of support for kiosk-mode? On mobile devices with app-header hidden, the background doesn't stretch underneath the status icons on iOS, so it just shows a solid colour.

You can workaround this by setting a app-header-background-color right? This would change the color of the status bar too

nayzm · 2024-05-03T21:58:13Z

Thank you for working on this.
Just wondering would it be possible to implement some sort of support for kiosk-mode? On mobile devices with app-header hidden, the background doesn't stretch underneath the status icons on iOS, so it just shows a solid colour.

You can workaround this by setting a app-header-background-color right? This would change the color of the status bar too

It doesn't unfortunatly, even when setting a rgba for app-header-background-color.

bgoncal · 2024-05-03T22:00:22Z

Keep an eye on this PR, it may help dealing with this: home-assistant/iOS#2757

home-assistant bot added the cla-signed label Apr 8, 2024

bramkragten reviewed Apr 8, 2024

View reviewed changes

src/layouts/home-assistant-main.ts Outdated Show resolved Hide resolved

src/panels/lovelace/hui-root.ts Outdated Show resolved Hide resolved

bgoncal force-pushed the header-webkit-backdrop-css-var-2 branch from 3bc14ca to 9a3782a Compare April 8, 2024 14:56

github-actions bot added the Supervisor Related to the supervisor panel label Apr 8, 2024

bgoncal force-pushed the header-webkit-backdrop-css-var-2 branch from 9a3782a to 91a9458 Compare April 8, 2024 14:58

bgoncal requested a review from bramkragten April 9, 2024 07:54

bramkragten reviewed Apr 9, 2024

View reviewed changes

src/panels/lovelace/hui-root.ts Outdated Show resolved Hide resolved

bramkragten reviewed Apr 9, 2024

View reviewed changes

Nezz reviewed Apr 9, 2024

View reviewed changes

src/layouts/hass-error-screen.ts Outdated Show resolved Hide resolved

bgoncal force-pushed the header-webkit-backdrop-css-var-2 branch from f75c5da to 38f8b4e Compare April 9, 2024 13:14

Nezz reviewed Apr 9, 2024

View reviewed changes

Add CSS var for header -webkit-backdrop-filter

edd96db

bgoncal force-pushed the header-webkit-backdrop-css-var-2 branch from 38f8b4e to edd96db Compare April 9, 2024 13:31

github-actions bot removed the Supervisor Related to the supervisor panel label Apr 9, 2024

Add backdrop to energy and developer tools

378de34

bramkragten approved these changes Apr 10, 2024

View reviewed changes

bramkragten merged commit 7556ab9 into home-assistant:dev Apr 10, 2024
13 checks passed

bgoncal deleted the header-webkit-backdrop-css-var-2 branch April 10, 2024 09:41

Nezz mentioned this pull request Apr 28, 2024

Fix visual differences between regular and energy dashboards #20654

Merged

9 tasks

Nezz mentioned this pull request May 3, 2024

Use same variable for status bar color as frontend home-assistant/iOS#2757

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add css var for header webkit backdrop filter #20473

Add css var for header webkit backdrop filter #20473

bgoncal commented Apr 8, 2024

bramkragten left a comment

bgoncal commented Apr 8, 2024

bramkragten commented Apr 8, 2024 •

edited

Loading

bgoncal commented Apr 8, 2024

bramkragten Apr 9, 2024

Nezz Apr 9, 2024 •

edited

Loading

bgoncal Apr 9, 2024

bgoncal Apr 9, 2024

bgoncal Apr 9, 2024

Nezz Apr 9, 2024

Nezz Apr 9, 2024

Nezz Apr 9, 2024

bgoncal Apr 9, 2024

bgoncal Apr 9, 2024

Nezz commented Apr 9, 2024

bgoncal commented Apr 9, 2024

Nezz commented Apr 9, 2024 •

edited

Loading

nayzm commented May 3, 2024

bgoncal commented May 3, 2024

nayzm commented May 3, 2024

bgoncal commented May 3, 2024

		-webkit-backdrop-filter: var(--app-header-backdrop-filter, unset);
		backdrop-filter: var(--app-header-backdrop-filter, unset);

Add css var for header webkit backdrop filter #20473

Add css var for header webkit backdrop filter #20473

Conversation

bgoncal commented Apr 8, 2024

Breaking change

Proposed change

Type of change

Example configuration

Additional information

Checklist

bramkragten left a comment

Choose a reason for hiding this comment

bgoncal commented Apr 8, 2024

bramkragten commented Apr 8, 2024 • edited Loading

bgoncal commented Apr 8, 2024

Choose a reason for hiding this comment

Nezz Apr 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Nezz commented Apr 9, 2024

bgoncal commented Apr 9, 2024

Nezz commented Apr 9, 2024 • edited Loading

nayzm commented May 3, 2024

bgoncal commented May 3, 2024

nayzm commented May 3, 2024

bgoncal commented May 3, 2024

bramkragten commented Apr 8, 2024 •

edited

Loading

Nezz Apr 9, 2024 •

edited

Loading

Nezz commented Apr 9, 2024 •

edited

Loading