terminal icon indicating copy to clipboard operation
terminal copied to clipboard

Rectangular Tab border instead of circular

Open iseeghosts opened this issue 5 years ago • 9 comments

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

iseeghosts avatar Aug 07 '20 11:08 iseeghosts

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 avatar Aug 07 '20 13:08 zadjii-msft

Notes:

  • Overriding the tab corner radius ON THE TOP seems fairly trivial. Just set the OverlayCornerRadius resource to whatever.
  • Changing the bottom seems Hard. Seems like there's no easy way to hide (Left|Right)RadiusRenderArc.Visibility on the TabViewItem itself. So you end up with this weird square on top, rounded into the terminal bottom that looks awful.
  • How would we express "I want the bottom tab corners to round inwards, so they look like buttons?
    • I'm thinking we'd want the bottom corners to accept a positive number as the current outwards radius, and a negative number to be the inwards radius.
    • We'd need a TabViewItemCornerRadiusConverter to convert the negative radius to something sensible
    • We'd need TabViewItemCornerArcVisibilityConverter that collapses the bottom arcs when the corner radius set by the user is negative

zadjii-msft avatar Jun 16 '22 14:06 zadjii-msft

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.

zadjii-msft avatar Jun 16 '22 18:06 zadjii-msft

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">

ghost avatar Jul 05 '22 16:07 ghost

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 avatar Jul 05 '22 17:07 zadjii-msft

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

  • I want the tabs to be rectangular, without curved corners
  • I want the tabs to be buttons / pills. That should both include pills (floating "tabs", aka buttons), but also just like, rectangular buttons (like this)

zadjii-msft avatar Sep 09 '22 16:09 zadjii-msft

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

zadjii-msft avatar Nov 21 '22 16:11 zadjii-msft

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 🙄

riotrah avatar Jan 01 '23 02:01 riotrah

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.

zadjii-msft avatar Jan 03 '23 15:01 zadjii-msft

image

Shomnipotence avatar Jul 20 '23 05:07 Shomnipotence