Misc visual fixes #12916

ghost · 2022-04-16T14:37:40Z

Fixed various small issues:

Made TabView bottom border span the entire window width
Made ScrollBar inner thumb rounded again
Made SplitButton look more like the new add tab button
Adjusted rename box height (24px, like the official compact sizing height)
Adjusted caption button colors to match Windows 11
ColorPicker can now escape window bounds
Tweaked ColorPicker buttons

zadjii-msft · 2022-04-18T11:37:40Z

work in progress comparison shots:

Element	Before	After
Made TabView bottom border span the entire window width
Made ScrollBar inner thumb rounded again
Made SplitButton look more like the new add tab button
Adjusted rename box height (24px, like the official compact sizing height)
Adjusted caption button colors to match Windows 11	before	after
ColorPicker can now escape window bounds
Tweaked ColorPicker buttons

Tweaked ColorPicker buttons
- Maybe there was a slight hover effect added? Check the code.
- ‼️ There's definitely a crash selecting a color button for a tab. WinDBG is still hosed so I dunno where that crash is exactly.
I need to find a way to compare the new caption hover colors with other apps. Not sure these are right.

zadjii-msft · 2022-04-18T11:56:19Z

Edgium:
notepad rejuv:
Terminal before:
Terminal after:
XCG windowing sample:

Okay so it totally looks like they changed the caption button colors on us. Cool.

zadjii-msft

Okay not totally done reviewing yet. Most of this looks really good. Things I'm worried about:

The crash when selecting a color via the color picker. That's gotta get fixed. I don't have a beat on the stack yet.
I personally don't love the changes to the New Tab button. I kinda liked that it felt like it was another tab. Now it kinda feels a little too squashed.

Also tapping in our design captain @cinnamon-msft for additional feedback

zadjii-msft · 2022-04-18T12:00:42Z

src/cascadia/TerminalApp/TitlebarControl.xaml

@@ -43,5 +43,12 @@
    <local:MinMaxCloseControl x:Name="MinMaxCloseControl"
                              Grid.Column="2"
                              HorizontalAlignment="Right" />
+
+    <!--  This border needs to be added manually until GH#10320 is fixed  -->


I would almost reckon that this fixes #10320. From an architectural standpoint, I think it's gonna be Hard to make the TabView actually span the whole width, but if this fakes it out, then I'm cool with that as the resolution here.

Couldn't the drag bar and caption buttons simply be moved to be inside the TabView footer? Currently they're sitting right next to it, and it seems like it would be easy.

Somewhat -- but right now there's an ownership inversion between the titlebar control and the tabbar control. The title bar contains [tabview content zone, dragbar, caption buttons], and they're three distinct areas because when "show tabs in the titlebar" is turned off it doesn't exist and the tabview is kept in the page root.

We'd need to flip around the ownership of the drag bar and caption buttons and pull them out into the titlebar control when "show tabs in the titlebar" was turned on, and otherwise make sure that they are not present when "show tabs in titlebar" is off.

zadjii-msft · 2022-04-18T12:08:31Z

 	TerminalApp.dll!winrt::impl::consume_Windows_UI_Xaml_Shapes_IShape<winrt::Windows::UI::Xaml::Shapes::Rectangle>::Fill() Line 201	C++
>	TerminalApp.dll!winrt::TerminalApp::implementation::ColorPickupFlyout::ColorButton_Click(const winrt::Windows::Foundation::IInspectable & sender, const winrt::Windows::UI::Xaml::RoutedEventArgs & __formal) Line 38	C++
 	[External Code]	
 	TerminalApp.dll!winrt::impl::delegate<winrt::Windows::UI::Xaml::RoutedEventHandler,`winrt::TerminalApp::implementation::ColorPickupFlyoutT<winrt::TerminalApp::implementation::ColorPickupFlyout>::Connect'::`15'::<lambda_10>>::Invoke(void * sender, void * e) Line 4672	C++

    void ColorPickupFlyout::ColorButton_Click(IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const&)
    {
        auto button{ sender.as<Windows::UI::Xaml::Controls::Button>() };
        auto rectangle{ button.Content().as<Windows::UI::Xaml::Shapes::Rectangle>() };
        auto rectClr{ rectangle.Fill().as<Windows::UI::Xaml::Media::SolidColorBrush>() };
        _ColorSelectedHandlers(rectClr.Color());
        Hide();
    }

Well yep that'll do it

ghost · 2022-04-18T14:52:24Z

Color buttons now have a colored background and an overlay with the default button style, so that they change on hover/press.
Because they use the default colors, they'll look a bit different on light mode vs dark mode.
I think I should also update the buttons in Settings to work like this.

ghost · 2022-04-18T15:05:50Z

I think what makes the add tab button look squished is that it's really wide, and I'm not sure if I can customize the width without retemplating.

cinnamon-msft · 2022-04-18T18:15:23Z

I think these changes look good and they align with our design guidelines (from what I can tell). I'm wondering if we just make the split button a bit taller to match the height of the tabs? That may help the squishiness.

ghost · 2022-04-19T00:10:00Z

Turns out there is actually a way to resize the buttons:

This matches the TabView button. Is this ok? Otherwise I'll revert the design.

zadjii-msft · 2022-04-19T10:21:07Z

This matches the TabView button. Is this ok?

Definitely. I think we're cool with that. I discussed more with the team and everyone else was cool with this sort of design. They definitely turned me around on it too ☺️

With that fix to the new tab button, the only blocking bit would be to get that color picker crash sorted. Lemme see if I can't whip a diff up quick.

PrelevatedInsider17763

Hello, I am the repairaccount.

PrelevatedInsider17763

access

zadjii-msft · 2022-04-20T13:48:11Z

@Shomnipotence We're tracking that kind of redesign more broadly in #3327 (and in the spec over at #12530). This PR's more focused on some smaller scale polish, rather than a broader redesign.

zadjii-msft

Thanks for putting these all together. Played with the latest commit and it feels good.

DHowett · 2022-04-21T22:29:45Z

src/cascadia/TerminalControl/TermControl.xaml

@@ -351,11 +352,9 @@
                                <ControlTemplate x:Key="VerticalThumbTemplate"
                                                 TargetType="Thumb">
                                    <Rectangle x:Name="ThumbVisual"
-                                               contract7NotPresent:RadiusX="{Binding Source={ThemeResource ScrollBarCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"


qq: this doesn't matter any longer because we are always running on a contract 7+ machine?

Answered for myself! 19H1 is UniversalApiContract 8, so our checks were never necessary!

DHowett

Thanks for doing this!

ghost · 2022-04-21T22:34:25Z

Hello @DHowett!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.

Fixed various small issues: * Made TabView bottom border span the entire window width * Made ScrollBar inner thumb rounded again * Made SplitButton look more like the new add tab button * Adjusted rename box height (24px, like the official compact sizing height) * Adjusted caption button colors to match Windows 11 * ColorPicker can now escape window bounds * Tweaked ColorPicker buttons (cherry picked from commit fa25dfb) Service-Card-Id: 81919698 Service-Version: 1.13

ghost · 2022-05-24T17:03:21Z

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

Handy links:

ghost · 2022-05-24T17:07:38Z

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

Handy links:

dansmor7 added 2 commits April 16, 2022 07:36

Misc visual fixes

dda7c23

Color flyout tweaks

dbee93f

zadjii-msft added Area-User Interface Issues pertaining to the user interface of the Console or Terminal Product-Terminal The new Windows Terminal. Needs-Discussion Something that requires a team discussion before we can proceed labels Apr 18, 2022

zadjii-msft reviewed Apr 18, 2022

View reviewed changes

PrelevatedInsider17763 reviewed Apr 19, 2022

View reviewed changes

PrelevatedInsider17763 approved these changes Apr 19, 2022

View reviewed changes

dansmor7 added 3 commits April 19, 2022 05:52

SplitButton update

98f7bfc

Color button fix

861cdeb

Color button update

933ead3

This comment was marked as off-topic.

Sign in to view

zadjii-msft approved these changes Apr 21, 2022

View reviewed changes

zadjii-msft added Needs-Second It's a PR that needs another sign-off and removed Needs-Discussion Something that requires a team discussion before we can proceed labels Apr 21, 2022

ghost requested review from PankajBhojwani, carlos-zamora, DHowett and lhecker April 21, 2022 11:43

lhecker approved these changes Apr 21, 2022

View reviewed changes

DHowett reviewed Apr 21, 2022

View reviewed changes

DHowett approved these changes Apr 21, 2022

View reviewed changes

DHowett added the AutoMerge Marked for automatic merge by the bot when requirements are met label Apr 21, 2022

ghost merged commit fa25dfb into microsoft:main Apr 21, 2022

zadjii-msft mentioned this pull request Apr 28, 2022

Add comprehensive XAML "theming" functionality #3327

Open

27 tasks

ghost deleted the terminal-visual-fixes branch September 1, 2022 20:13

Poopooracoocoo mentioned this pull request Dec 12, 2022

Hover color of close caption button does not match Windows 11 microsoft/vscode#168717

Closed

zadjii-msft mentioned this pull request Aug 23, 2023

Make the TabView span the entire window width #10320

Closed

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Misc visual fixes #12916

Misc visual fixes #12916

ghost commented Apr 16, 2022 •

edited by ghost

Loading

zadjii-msft commented Apr 18, 2022 •

edited

Loading

zadjii-msft commented Apr 18, 2022

zadjii-msft left a comment

zadjii-msft Apr 18, 2022

ghost Apr 18, 2022

DHowett Apr 21, 2022

zadjii-msft commented Apr 18, 2022

ghost commented Apr 18, 2022

ghost commented Apr 18, 2022

cinnamon-msft commented Apr 18, 2022

ghost commented Apr 19, 2022

zadjii-msft commented Apr 19, 2022

PrelevatedInsider17763 left a comment

PrelevatedInsider17763 left a comment

This comment was marked as off-topic.

zadjii-msft commented Apr 20, 2022

zadjii-msft left a comment

DHowett Apr 21, 2022

DHowett Apr 21, 2022

DHowett left a comment

ghost commented Apr 21, 2022

ghost commented May 24, 2022

ghost commented May 24, 2022

Misc visual fixes #12916

Misc visual fixes #12916

Conversation

ghost commented Apr 16, 2022 • edited by ghost Loading

zadjii-msft commented Apr 18, 2022 • edited Loading

zadjii-msft commented Apr 18, 2022

zadjii-msft left a comment

Choose a reason for hiding this comment

zadjii-msft Apr 18, 2022

Choose a reason for hiding this comment

ghost Apr 18, 2022

Choose a reason for hiding this comment

DHowett Apr 21, 2022

Choose a reason for hiding this comment

zadjii-msft commented Apr 18, 2022

ghost commented Apr 18, 2022

ghost commented Apr 18, 2022

cinnamon-msft commented Apr 18, 2022

ghost commented Apr 19, 2022

zadjii-msft commented Apr 19, 2022

PrelevatedInsider17763 left a comment

Choose a reason for hiding this comment

PrelevatedInsider17763 left a comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

zadjii-msft commented Apr 20, 2022

zadjii-msft left a comment

Choose a reason for hiding this comment

DHowett Apr 21, 2022

Choose a reason for hiding this comment

DHowett Apr 21, 2022

Choose a reason for hiding this comment

DHowett left a comment

Choose a reason for hiding this comment

ghost commented Apr 21, 2022

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.

ghost commented May 24, 2022

ghost commented May 24, 2022

ghost commented Apr 16, 2022 •

edited by ghost

Loading

zadjii-msft commented Apr 18, 2022 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.