Misc visual fixes (#12916)

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
microsoft · Apr 21, 2022 · fa25dfb · fa25dfb
1 parent 87f5034
commit fa25dfb
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 220 deletions.
diff --git a/src/cascadia/TerminalApp/App.xaml b/src/cascadia/TerminalApp/App.xaml
@@ -46,7 +46,7 @@
                                      Color="{ThemeResource SystemErrorTextColor}" />
 
                     <!--  Suppress top padding  -->
-                    <Thickness x:Key="TabViewHeaderPadding">9,0,8,0</Thickness>
+                    <Thickness x:Key="TabViewHeaderPadding">9,0,5,0</Thickness>
 
                     <!--  Remove when implementing WinUI 2.6  -->
                     <Thickness x:Key="FlyoutContentPadding">12</Thickness>

diff --git a/src/cascadia/TerminalApp/ColorPickupFlyout.cpp b/src/cascadia/TerminalApp/ColorPickupFlyout.cpp
@@ -34,8 +34,7 @@ namespace winrt::TerminalApp::implementation
     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>() };
+        auto rectClr{ button.Background().as<Windows::UI::Xaml::Media::SolidColorBrush>() };
         _ColorSelectedHandlers(rectClr.Color());
         Hide();
     }

diff --git a/src/cascadia/TerminalApp/ColorPickupFlyout.xaml b/src/cascadia/TerminalApp/ColorPickupFlyout.xaml
diff --git a/src/cascadia/TerminalApp/MinMaxCloseControl.xaml b/src/cascadia/TerminalApp/MinMaxCloseControl.xaml
@@ -19,11 +19,12 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x:Key="Light">
+                    <Color x:Key="CloseButtonColor">#C42B1C</Color>
                     <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
                     <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                                    ResourceKey="SystemControlBackgroundBaseLowBrush" />
+                                    ResourceKey="SubtleFillColorSecondary" />
                     <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                                    ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
+                                    ResourceKey="SubtleFillColorTertiary" />
                     <StaticResource x:Key="CaptionButtonStroke"
                                     ResourceKey="SystemControlForegroundBaseHighBrush" />
                     <StaticResource x:Key="CaptionButtonStrokeColor"
@@ -36,23 +37,26 @@
                                      Color="Transparent" />
                     <Color x:Key="CaptionButtonBackgroundColor">Transparent</Color>
                     <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver"
-                                     Color="#e81123" />
+                                     Color="{ThemeResource CloseButtonColor}" />
                     <SolidColorBrush x:Key="CloseButtonStrokePointerOver"
                                      Color="White" />
                     <SolidColorBrush x:Key="CloseButtonBackgroundPressed"
-                                     Color="#f1707a" />
+                                     Opacity="0.9"
+                                     Color="{ThemeResource CloseButtonColor}" />
                     <SolidColorBrush x:Key="CloseButtonStrokePressed"
-                                     Color="Black" />
+                                     Opacity="0.7"
+                                     Color="White" />
                     <SolidColorBrush x:Key="CloseButtonBackground"
                                      Color="#00e81123" />
                     <Color x:Key="CloseButtonBackgroundColor">#00e81123</Color>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Dark">
+                    <Color x:Key="CloseButtonColor">#C42B1C</Color>
                     <x:Double x:Key="CaptionButtonStrokeWidth">1.0</x:Double>
                     <StaticResource x:Key="CaptionButtonBackgroundPointerOver"
-                                    ResourceKey="SystemControlBackgroundBaseLowBrush" />
+                                    ResourceKey="SubtleFillColorSecondary" />
                     <StaticResource x:Key="CaptionButtonBackgroundPressed"
-                                    ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
+                                    ResourceKey="SubtleFillColorTertiary" />
                     <StaticResource x:Key="CaptionButtonStroke"
                                     ResourceKey="SystemControlForegroundBaseHighBrush" />
                     <StaticResource x:Key="CaptionButtonStrokeColor"
@@ -65,19 +69,21 @@
                                      Color="Transparent" />
                     <Color x:Key="CaptionButtonBackgroundColor">Transparent</Color>
                     <SolidColorBrush x:Key="CloseButtonBackgroundPointerOver"
-                                     Color="#e81123" />
+                                     Color="{ThemeResource CloseButtonColor}" />
                     <SolidColorBrush x:Key="CloseButtonStrokePointerOver"
                                      Color="White" />
                     <SolidColorBrush x:Key="CloseButtonBackgroundPressed"
-                                     Color="#f1707a" />
+                                     Opacity="0.9"
+                                     Color="{ThemeResource CloseButtonColor}" />
                     <SolidColorBrush x:Key="CloseButtonStrokePressed"
-                                     Color="Black" />
+                                     Opacity="0.7"
+                                     Color="White" />
                     <SolidColorBrush x:Key="CloseButtonBackground"
                                      Color="#00e81123" />
                     <Color x:Key="CloseButtonBackgroundColor">#00e81123</Color>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
-                    <x:Double x:Key="CaptionButtonStrokeWidth">3.0</x:Double>
+                    <x:Double x:Key="CaptionButtonStrokeWidth">2.0</x:Double>
                     <SolidColorBrush x:Key="CaptionButtonBackground"
                                      Color="{ThemeResource SystemColorButtonFaceColor}" />
                     <StaticResource x:Key="CaptionButtonBackgroundColor"
@@ -165,7 +171,7 @@
                                                     <ColorAnimation Storyboard.TargetName="ButtonBaseElement"
                                                                     Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"
                                                                     To="{ThemeResource CaptionButtonBackgroundColor}"
-                                                                    Duration="0:0:0.2" />
+                                                                    Duration="0:0:0.15" />
                                                     <ColorAnimation Storyboard.TargetName="Path"
                                                                     Storyboard.TargetProperty="(UIElement.Stroke).(SolidColorBrush.Color)"
                                                                     To="{ThemeResource CaptionButtonStrokeColor}"

diff --git a/src/cascadia/TerminalApp/TabHeaderControl.xaml b/src/cascadia/TerminalApp/TabHeaderControl.xaml
@@ -13,22 +13,6 @@
              MinHeight="16"
              mc:Ignorable="d">
 
-    <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.ThemeDictionaries>
-                <ResourceDictionary x:Key="Light">
-                    <Thickness x:Key="TextControlBorderThemeThicknessFocused">0,0,0,1</Thickness>
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="Dark">
-                    <Thickness x:Key="TextControlBorderThemeThicknessFocused">0,0,0,1</Thickness>
-                </ResourceDictionary>
-                <ResourceDictionary x:Key="HighContrast">
-                    <Thickness x:Key="TextControlBorderThemeThicknessFocused">0,0,0,1</Thickness>
-                </ResourceDictionary>
-            </ResourceDictionary.ThemeDictionaries>
-        </ResourceDictionary>
-    </UserControl.Resources>
-
     <StackPanel x:Name="HeaderStackPanel"
                 Orientation="Horizontal">
         <mux:ProgressRing x:Name="HeaderProgressRing"
@@ -68,10 +52,10 @@
                    Text="{x:Bind Title, Mode=OneWay}"
                    Visibility="Visible" />
         <TextBox x:Name="HeaderRenamerTextBox"
-                 Height="16"
+                 Height="24"
                  MinHeight="0"
                  MaxWidth="{x:Bind RenamerMaxWidth, Mode=OneWay}"
-                 Padding="4,0,4,0"
+                 Padding="4,4,4,3"
                  FontSize="12"
                  IsSpellCheckEnabled="False"
                  LostFocus="RenameBoxLostFocusHandler"