Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Settings UI navigation view has a transparent background when opened as an overlay #9337

Closed
j4james opened this issue Mar 2, 2021 · 9 comments · Fixed by #9752
Closed

Settings UI navigation view has a transparent background when opened as an overlay #9337

j4james opened this issue Mar 2, 2021 · 9 comments · Fixed by #9752
Labels
Area-Settings UI Anything specific to the SUI good first issue This is a fix that might be easier for someone to do as a first contribution Help Wanted We encourage anyone to jump in on these. Issue-Bug It either shouldn't be doing this or needs an investigation. Priority-3 A description (P3) Product-Terminal The new Windows Terminal. Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release.
Milestone
Terminal v2.0

Comments

@j4james
Copy link
Collaborator

j4james commented Mar 2, 2021

Environment

Windows build number: Version 10.0.18363.1316
Windows Terminal version (if applicable): 1.7.572.0 (preview)

Steps to reproduce

  1. Open the Settings UI.
  2. Make the Terminal window narrow so the NavigationView is forced to open as an overlay.
  3. Open the navigation view.

Expected behavior

The navigation panel should have an opaque background, covering the content that it is overlaying.

Actual behavior

The navigation panel seems to have a transparent background, so you can still see the content below it, making the menu items unreadable.

image
@ghost ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Mar 2, 2021
@zadjii-msft
Copy link
Member

Holy gosh that looks bad. Unfortunately, I don't have a local repro for this 😢. It looks like the blur from the acrylic just is not getting applied. Does acrylic work anywhere else in the app? I'm trying to think of somewhere else that would have in-app acrylic to test. I'm not sure there's any in the Terminal. Maybe try the XAML Controls Gallery app? That should have a sample NavigationView to compare with

@zadjii-msft zadjii-msft added Issue-Bug It either shouldn't be doing this or needs an investigation. Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something Priority-3 A description (P3) Resolution-External For issues that are outside this codebase labels Mar 2, 2021
@j4james
Copy link
Collaborator Author

j4james commented Mar 2, 2021

Ah OK. I have "Transparency Effects" turned off in the in the System settings. If I turn that on (and change my power mode to "Best Performance", which is needed for acrylic to work), then the navigation panel displays correctly. If I turn "Transparency Effects" off, it immediately goes transparent again. In other apps, the acrylic area just becomes completely opaque.

@ghost ghost added Needs-Attention The core contributors need to come back around and look at this ASAP. and removed Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something labels Mar 2, 2021
@j4james
Copy link
Collaborator Author

j4james commented Mar 2, 2021

Just checked the XAML Controls Gallery (version 1.2.17.0 in case that makes any difference), and the NavigationView example has an acrylic overlay which works correctly, i.e. it's acrylic when "Transparency Effects" are enabled, and opaque when disabled.

@huoyaoyuan
Copy link
Contributor

Sounds like the fallback brush of acrylic is set to transparent. In practice, it should be set to non transparent.

@zadjii-msft
Copy link
Member

Sounds like the fallback brush of acrylic is set to transparent. In practice, it should be set to non transparent.

Huh, I didn't think that you could set a fallback brush to Transparent. I bet that's exactly happening.

It's extremely trivial to repro this by disabling "transparency effects" in the Settings app, so yea I bet we're doing something wrong here.

@zadjii-msft zadjii-msft added Area-Settings UI Anything specific to the SUI good first issue This is a fix that might be easier for someone to do as a first contribution Help Wanted We encourage anyone to jump in on these. and removed Needs-Attention The core contributors need to come back around and look at this ASAP. Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Resolution-External For issues that are outside this codebase labels Mar 10, 2021
@zadjii-msft zadjii-msft added this to the Terminal v1.8 milestone Mar 10, 2021
@zadjii-msft zadjii-msft added zPreview-Service-Queued-1.13 A floating label that tracks the current Preview version for servicing purposes. Product-Terminal The new Windows Terminal. labels Mar 10, 2021
@ghost ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Mar 10, 2021
@mdtauk
Copy link

mdtauk commented Mar 10, 2021

Has someone failed to add a fallback colour for the Acrylic brush, or is it maybe not being used like it should be?

@huoyaoyuan
Copy link
Contributor

I remember that no fallback would cause transparent be used.

DHowett added a commit that referenced this issue Apr 8, 2021
@DHowett
Give our NavigationView's acrylic a fallback color
3e45dde 
It will be a different color than the background, so it will look less
weird when it's unfocused. It also fixes the bug where the navigation
menu is transparent when acrylic is disabled systemwide.

Fixes #9337
@DHowett DHowett mentioned this issue Apr 8, 2021
Merged
@ghost ghost added the In-PR This issue has a related PR label Apr 8, 2021
@ghost ghost closed this as completed in #9752 Apr 9, 2021
@ghost ghost removed the In-PR This issue has a related PR label Apr 9, 2021
ghost pushed a commit that referenced this issue Apr 9, 2021
@DHowett
Give our NavigationView's acrylic a fallback color (#9752)
b310b1c 
It will be a different color than the background, so it will look less
weird when it's unfocused. It also fixes the bug where the navigation
menu is transparent when acrylic is disabled systemwide.

Fixes #9337
@ghost ghost added the Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. label Apr 9, 2021
DHowett added a commit that referenced this issue Apr 12, 2021
@DHowett
Give our NavigationView's acrylic a fallback color (#9752)
976a3c7 
It will be a different color than the background, so it will look less
weird when it's unfocused. It also fixes the bug where the navigation
menu is transparent when acrylic is disabled systemwide.

Fixes #9337

(cherry picked from commit b310b1c)
@ghost
Copy link

ghost commented Apr 14, 2021

🎉This issue was addressed in #9752, which has now been successfully released as Windows Terminal v1.7.1033.0.:tada:

Handy links:

@ghost
Copy link

ghost commented Apr 14, 2021

🎉This issue was addressed in #9752, which has now been successfully released as Windows Terminal Preview v1.8.1032.0.:tada:

Handy links:

@miniksa miniksa removed the zPreview-Service-Queued-1.13 A floating label that tracks the current Preview version for servicing purposes. label Sep 27, 2021
@zadjii-msft zadjii-msft mentioned this issue Jul 6, 2022
Closed
@j4james j4james mentioned this issue Sep 11, 2022
Closed
@zadjii-msft zadjii-msft mentioned this issue Mar 20, 2024
Open
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area-Settings UI Anything specific to the SUI good first issue This is a fix that might be easier for someone to do as a first contribution Help Wanted We encourage anyone to jump in on these. Issue-Bug It either shouldn't be doing this or needs an investigation. Priority-3 A description (P3) Product-Terminal The new Windows Terminal. Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release.
Projects
None yet
Milestone
Terminal v2.0
Development

Successfully merging a pull request may close this issue.

Give our NavigationView's acrylic a fallback color microsoft/terminal
5 participants
@j4james @huoyaoyuan @mdtauk @miniksa @zadjii-msft