microsoft / terminal

The new Windows Terminal and the original Windows console host, all in the same place!
MIT License
95.03k stars 8.23k forks source link

Rectangular Tab border instead of circular #7213

Open iseeghosts opened 4 years ago

iseeghosts commented 4 years ago

Rectangular border like Microsoft Edge Legacy

Remove the curved border of tabs in Terminal and the weird colored border around the entire title bar. The current one looks ugly, and resembles chromium (but bad), The first tab shouldn't have any space left to it's left. and The tile bar is little thick when not maximized.

Current Look image What should it look like image

zadjii-msft commented 4 years ago

Thanks for the suggestion! This is something that's already being discussed in #5772, but I'll tag this up as a sub-task of #3327. Thanks!

zadjii-msft commented 2 years ago

Notes:

zadjii-msft commented 2 years ago

From discussion with WinUI folks:

I think you would have to retemplate the TabViewItem component.

I would try the following: Apply a custom Style to TabViewItem without the LeftRadiusRenderArc, RightRadiusRenderArc and SelectedBackgroundPath elements. You get this which is not enough:

image

You need to extend the vertical lines down. Maybe TabViewItemSeparatorMargin affects that - I'm not sure.

You may have to replace the SelectedBackgroundPath with your own element, because unfortunately its shape is hardcoded in TabViewItem::UpdateTabGeometry(). This is pretty bad I know.

The key problem is this hardcoded line in \dev\TabView\TabViewItem.cpp

auto data = L"<Geometry xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>F1 M0,%f a 4,4 0 0 0 4,-4 L 4,%f a %f,%f 0 0 1 %f,-%f l %f,0 a %f,%f 0 0 1 %f,%f l 0,%f a 4,4 0 0 0 4,4 Z</Geometry>";

I think you'd have to write the same kind of code without the 2 bottom curves. Then call your own version of UpdateTabGeometry when the size changes like we do in TabViewItem::OnSizeChanged.

We'd need to make a specific request on WinUI to allow this to be changed in the tab view.

ghost commented 2 years ago

If you are willing to give up the two corner overlays, then customizing the entire tab can be easily done through TabContainer, without having to update the path through code.

Otherwise, I'd suggest using a single positive corner radius and another property for the tab attaching to the bottom or not. This is for the eventuality that TabView will support different orientations in the future (+ negative radius doesn't make sense for the other two corners). For the current design, it would look like this:

<TabViewItem CornerRadius="8,8,4,4" IsAttached="True">
zadjii-msft commented 2 years ago

That seems like a pretty sensible approach to me - we should make sure to capture that in the feature request on the WinUI team (whenever we get around to filing it)

zadjii-msft commented 2 years ago

Maybe I've been overcomplicating by trying to dedupe this with https://github.com/microsoft/terminal/issues/3327#issuecomment-765493313. There's basically two sides to this spectrum

zadjii-msft commented 1 year ago

WinUI thread: https://github.com/microsoft/microsoft-ui-xaml/issues/7032

riotrah commented 1 year ago

Hi just to be clear - the work referenced being done in this issue is to allow end-users to make such OS/1st party UI-disruptive changes at their own peril, right? Or at a maximum, perhaps check if they're on win10 vs 11 or something?

Most certainly a linguistic/tonal/inference thing on my part, but if anyone is actually demanding regressing back to right angles again in 2022 as "the" WT design, on the basis of an obviously subjective and almost certainly minority-held premise of "rounded ugly" then I'll eat my shoe 🙄

zadjii-msft commented 1 year ago

Yes, to be totally clear - this would be a setting as a part of Themes. This would absolutely not be something we roll out by default to all users. It'd instead be a knob users could set if they so choose.

Shomnipotence commented 1 year ago

image