Skip to content

Commit

Permalink
Misc visual fixes (#12916)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@carlos-zamora
dansmor7 authored and carlos-zamora committed May 17, 2022
1 parent 3828bfb commit 3ddb66d
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 213 deletions.
2 changes: 1 addition & 1 deletion src/cascadia/TerminalApp/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

<!-- Shadow that can be used by any control. -->
<ThemeShadow x:Name="SharedShadow" />
Expand Down
3 changes: 1 addition & 2 deletions src/cascadia/TerminalApp/ColorPickupFlyout.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
142 changes: 44 additions & 98 deletions src/cascadia/TerminalApp/ColorPickupFlyout.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
xmlns:local="using:TerminalApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
Placement="Bottom"
ShouldConstrainToRootBounds="False"
mc:Ignorable="d">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
Expand All @@ -31,153 +33,97 @@
<Style BasedOn="{StaticResource ColorPickerColorButtonStyle}"
TargetType="Button" />
</VariableSizedWrapGrid.Resources>

<Button x:Uid="CrimsonColorButton"
AutomationProperties.Name="Crimson"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Crimson" />
</Button.Content>
</Button>
Background="Crimson"
Click="ColorButton_Click" />
<Button x:Uid="SteelBlueColorButton"
AutomationProperties.Name="SteelBlue"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="SteelBlue" />
</Button.Content>
</Button>
Background="SteelBlue"
Click="ColorButton_Click" />
<Button x:Uid="MediumSeaGreenColorButton"
AutomationProperties.Name="MediumSeaGreen"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="MediumSeaGreen" />
</Button.Content>
</Button>
Background="MediumSeaGreen"
Click="ColorButton_Click" />
<Button x:Uid="DarkOrangeColorButton"
AutomationProperties.Name="DarkOrange"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="DarkOrange" />
</Button.Content>
</Button>
Background="DarkOrange"
Click="ColorButton_Click" />
<Button x:Uid="MediumVioletRedColorButton"
AutomationProperties.Name="MediumVioletRed"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="MediumVioletRed" />
</Button.Content>
</Button>
Background="MediumVioletRed"
Click="ColorButton_Click" />
<Button x:Uid="DodgerBlueColorButton"
AutomationProperties.Name="DodgerBlue"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="DodgerBlue" />
</Button.Content>
</Button>
Background="DodgerBlue"
Click="ColorButton_Click" />
<Button x:Uid="LimeGreenColorButton"
AutomationProperties.Name="LimeGreen"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="LimeGreen" />
</Button.Content>
</Button>
Background="LimeGreen"
Click="ColorButton_Click" />
<Button x:Uid="YellowColorButton"
AutomationProperties.Name="Yellow"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Yellow" />
</Button.Content>
</Button>
Background="Yellow"
Click="ColorButton_Click" />
<Button x:Uid="BlueVioletColorButton"
AutomationProperties.Name="BlueViolet"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="BlueViolet" />
</Button.Content>
</Button>
Background="BlueViolet"
Click="ColorButton_Click" />
<Button x:Uid="SlateBlueColorButton"
AutomationProperties.Name="SlateBlue"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="SlateBlue" />
</Button.Content>
</Button>
Background="SlateBlue"
Click="ColorButton_Click" />
<Button x:Uid="LimeColorButton"
AutomationProperties.Name="Lime"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Lime" />
</Button.Content>
</Button>
Background="Lime"
Click="ColorButton_Click" />
<Button x:Uid="TanColorButton"
AutomationProperties.Name="Tan"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Tan" />
</Button.Content>
</Button>
Background="Tan"
Click="ColorButton_Click" />
<Button x:Uid="MagentaColorButton"
AutomationProperties.Name="Magenta"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Magenta" />
</Button.Content>
</Button>
Background="Magenta"
Click="ColorButton_Click" />
<Button x:Uid="CyanColorButton"
AutomationProperties.Name="Cyan"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="Cyan" />
</Button.Content>
</Button>
Background="Cyan"
Click="ColorButton_Click" />
<Button x:Uid="SkyBlueColorButton"
AutomationProperties.Name="SkyBlue"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="SkyBlue" />
</Button.Content>
</Button>
Background="SkyBlue"
Click="ColorButton_Click" />
<Button x:Uid="DarkGrayColorButton"
AutomationProperties.Name="DarkGray"
Click="ColorButton_Click">
<Button.Content>
<Rectangle Fill="DarkGray" />
</Button.Content>
</Button>
Background="DarkGray"
Click="ColorButton_Click" />
</VariableSizedWrapGrid>
</Grid>
<Grid Margin="0,12,0,0"
Padding="-2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Margin="0,12,0,0"
Orientation="Horizontal"
Spacing="8">
<Button x:Name="ClearColorButton"
x:Uid="TabColorClearButton"
Grid.Column="0"
Margin="2"
HorizontalAlignment="Stretch"
Click="ClearColorButton_Click"
Content="Reset" />
<ToggleButton x:Name="CustomColorButton"
x:Uid="TabColorCustomButton"
Grid.Column="1"
Margin="2"
HorizontalAlignment="Stretch"
Click="ShowColorPickerButton_Click"
Content="Custom"
IsChecked="False" />
</Grid>
</StackPanel>
</StackPanel>
<Grid x:Name="customColorPanel"
Margin="16,0,0,0"
Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel x:Name="customColorPanel"
Margin="16,0,0,0"
Spacing="12"
Visibility="Collapsed">
<muxc:ColorPicker x:Name="customColorPicker"
Grid.Row="0"
Margin="0,0,0,12"
ColorChanged="ColorPicker_ColorChanged"
FontSize="10"
IsAlphaEnabled="False"
Expand All @@ -195,6 +141,6 @@
Click="CustomColorButton_Click"
Content="OK"
Style="{ThemeResource AccentButtonStyle}" />
</Grid>
</StackPanel>
</StackPanel>
</Flyout>
30 changes: 18 additions & 12 deletions src/cascadia/TerminalApp/MinMaxCloseControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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}"
Expand Down
20 changes: 2 additions & 18 deletions src/cascadia/TerminalApp/TabHeaderControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 3ddb66d

Please sign in to comment.