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.

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

Add support for tab.background to themes #13178

Merged
merged 79 commits into from
Jul 7, 2022

Conversation

zadjii-msft
Copy link
Member

@zadjii-msft zadjii-msft commented May 25, 2022

Summary of the Pull Request

Adds support for the tab.background property to themes. This is also a ThemeColor, so it accepts, colors, accent, and terminalBackground, just like everything else.

References

PR Checklist

Detailed Description of the Pull Request / Additional comments

I apparently left behing an optional color in TerminalTab for theme colors some time ago, just never used it. Crazy, huh?

Validation Steps Performed

gifs below

https://stackoverflow.com/questions/64694722/changing-themeresources-dynamically-in-uwp

That post looked SUPER promising. Problem is though, I CANNOT for the life of me
get that to work. Like, I can't get anything to `{Binding Brush, Mode=TwoWay,
Source={StaticResource TerminalBackground}}` to the `TerminalBackground` thing I
made there. I thought that was so clever.

I wanted an easy way to just change the value of a resource and have it update
the Titlebar, but since the Titlebar isn't a child of the TerminalPage, and this
binding thing didn't work, I think I'm at a dead end.
@github-actions

This comment was marked as resolved.

@zadjii-msft
Copy link
Member Author

fig 1: The tab color changes with the background of the terminal

themes-tab-background-000

fig 2: stress test - iterate over the hue range and watch as the tab stays in sync.
themes-tab-background-001

@DHowett
Copy link
Member

DHowett commented May 25, 2022

I'd like to see this tied into James' DECAC work somehow since he introduced color table aliasing

src/cascadia/TerminalApp/TerminalTab.cpp Outdated Show resolved Hide resolved
src/cascadia/TerminalApp/TerminalTab.cpp Outdated Show resolved Hide resolved
Copy link
Member

@carlos-zamora carlos-zamora left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. Thanks!

@carlos-zamora
Copy link
Member

I'm explicitly not merging this so that you handle the merge order and all that.

@marioparaschiv
Copy link

marioparaschiv commented Jun 26, 2022

Is there a possibility of making it inherit opacity & acrylic properties for the tabs too?
For example, I'd like to match an acrylic terminal background with the tabs, making the whole terminal acrylic.

This is the closest I've managed to imitate the acrylic 75% transparent background.
image

Settings

{
    "theme": "test",
    "themes": 
    [
        {
            "name": "test",
            "tab": 
            {
                "background": "#00000020"
            },
            "window": 
            {
                "applicationTheme": "system",
                "useMica": true
            }
        }
    ],
    "useAcrylicInTabRow": true,
    "profile": {
       "defaults": {
          "opacity": 75,
          "useAcrylic": true
       }
    }
 }

Base automatically changed from dev/migrie/fhl/theming-2022-prototype to main July 7, 2022 11:54
@zadjii-msft zadjii-msft merged commit 76b00e3 into main Jul 7, 2022
@zadjii-msft zadjii-msft deleted the dev/migrie/f/702-link-tab-to-terminal branch July 7, 2022 13:26
auto currentColor = tab->GetTabColor();
if (currentColor.has_value())
{
tab->_ApplyTabColor(currentColor.value());
}
else if (tab->_themeColor != nullptr)
{
// One-liner to safely get the active control's brush.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"one-liner" is a stretch of the definition of both "one" and "line" here

@fitojb
Copy link

fitojb commented Jul 8, 2022

Gorgeous!!

ghost pushed a commit that referenced this pull request Aug 1, 2022
## Summary of the Pull Request

Adds support for the `tab.showCloseButton` property to themes. This accepts three values:

* `"always"` (default): The close button acts like it does today.
* `"hover"`: The close button is always visible on the active tab. On inactive tabs, the close button only appears on mouse over. 
* `"never"`: The close button is never visible. You can't close the tab with middle-click, but you can still use keyboard shortcuts to close the tab.

## References
* See #3327 
* ⚠️ targets #13178 ⚠️


## PR Checklist
* [x] Closes #3335
* [x] I work here
* [ ] Tests added/passed
* [n/a] Requires documentation to be updated - YUP

## Detailed Description of the Pull Request / Additional comments

See the following two properties in WInUI that we're leveraging here. 

* [`TabViewCloseButtonOverlayMode.OnPointerOver`](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.tabviewclosebuttonoverlaymode?view=winui-2.7&viewFallbackFrom=winui-2.2)
* [`TabViewItem.IsClosable`](https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.tabviewitem.isclosable?view=winui-2.2#microsoft-ui-xaml-controls-tabviewitem-isclosable)

One is a tabview-level property, the other is a per-tab-item property, hence why this code is a little wacky. 

## Validation Steps Performed

gifs below
@ghost
Copy link

ghost commented Sep 13, 2022

🎉Windows Terminal Preview v1.16.252 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-Theming Anything related to the theming of elements of the window Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI Suggestion: Visually link tab to console view
6 participants