Skip to content

Commit

Permalink
Settings UI tweaks (#12973)
Browse files Browse the repository at this point in the history 
Some changes to the Settings UI:
* Removed borders, made Settings use a single background
* Updated color schemes buttons
* Created DeleteButtonStyle based on accent button - closes #10454

![image](https://user-images.githubusercontent.com/101892345/164984872-0fc75dc6-b4c0-4273-a2a6-b2b8a8d4d8ca.png)

(cherry picked from commit a7d2885)
Service-Card-Id: 81805354
Service-Version: 1.13
  • Loading branch information
@carlos-zamora
dansmor7 authored and carlos-zamora committed May 12, 2022
1 parent 63e6b4c commit 5ca7915
Show file tree
Hide file tree
Showing 11 changed files with 329 additions and 252 deletions.
77 changes: 77 additions & 0 deletions src/cascadia/TerminalApp/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,83 @@
<!-- Shadow that can be used by any control. -->
<ThemeShadow x:Name="SharedShadow" />

<!-- Colored button which changes on hover/press -->
<Style x:Key="ColorButtonStyle"
TargetType="Button">
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="Width" Value="32" />
<Setter Property="Height" Value="32" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="ColorButtonBackground"
Background="{TemplateBinding Background}"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />

<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0"
Value="0.9" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0"
Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ColorButtonBackground"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource ButtonBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<!-- Define resources for Dark mode here -->
Expand Down
13 changes: 5 additions & 8 deletions src/cascadia/TerminalApp/ColorPickupFlyout.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,13 @@
MaximumRowsOrColumns="4"
Orientation="Horizontal">
<VariableSizedWrapGrid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="30" />
</Style>
<Style TargetType="Button">
<Setter Property="Padding" Value="-1" />
<Style x:Name="ColorPickerColorButtonStyle"
BasedOn="{StaticResource ColorButtonStyle}"
TargetType="Button">
<Setter Property="Margin" Value="2" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="BorderBrush" Value="{StaticResource SystemBaseLowColor}" />
</Style>
<Style BasedOn="{StaticResource ColorPickerColorButtonStyle}"
TargetType="Button" />
</VariableSizedWrapGrid.Resources>
<Button x:Uid="CrimsonColorButton"
AutomationProperties.Name="Crimson"
Expand Down
50 changes: 1 addition & 49 deletions src/cascadia/TerminalSettingsEditor/Actions.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@
<Button x:Uid="Actions_DeleteButton"
Margin="8,0,0,0"
AutomationProperties.Name="{x:Bind DeleteButtonName}"
Style="{StaticResource EditButtonStyle}"
Style="{StaticResource DeleteSmallButtonStyle}"
Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(IsNewlyAdded), Mode=OneWay}">
<Button.Content>
<FontIcon FontSize="{StaticResource EditButtonIconSize}"
Expand All @@ -317,54 +317,6 @@
</StackPanel>
</Flyout>
</Button.Flyout>
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground"
Color="Firebrick" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="#C23232" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="#A21212" />
<SolidColorBrush x:Key="ButtonForeground"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="White" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonBackground"
Color="Firebrick" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="#C23232" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="#A21212" />
<SolidColorBrush x:Key="ButtonForeground"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="White" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="ButtonBackground"
Color="{ThemeResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ButtonForeground"
Color="{ThemeResource SystemColorButtonTextColor}" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="{ThemeResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="{ThemeResource SystemColorHighlightTextColor}" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>
</Button>

</StackPanel>
Expand Down
75 changes: 4 additions & 71 deletions src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,10 @@
<Setter Property="IsTabStop" Value="False" />
</Style>

<Style x:Key="ColorButtonStyle"
BasedOn="{StaticResource BaseButtonStyle}"
<Style x:Key="ColorSchemesColorButtonStyle"
BasedOn="{StaticResource ColorButtonStyle}"
TargetType="Button">
<Setter Property="BorderBrush" Value="{StaticResource SystemBaseLowColor}" />
<Setter Property="Height" Value="30" />
<Setter Property="Width" Value="100" />
<Setter Property="Width" Value="96" />
</Style>

<Style TargetType="ColorPicker">
Expand All @@ -61,25 +59,8 @@
x:DataType="local:ColorTableEntry">
<Button AutomationProperties.Name="{x:Bind Name}"
Background="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
Style="{StaticResource ColorButtonStyle}"
Style="{StaticResource ColorSchemesColorButtonStyle}"
ToolTipService.ToolTip="{x:Bind Name}">
<Button.Resources>
<!-- Resources to colorize hover/pressed states based on the color of the button -->
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{x:Bind local:Converters.LightenColor(Color), Mode=OneWay}" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{x:Bind local:Converters.LightenColor(Color), Mode=OneWay}" />
</ResourceDictionary>
<!-- No High contrast dictionary, let's just leave that unchanged. -->
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>

<Button.Flyout>
<Flyout>
<muxc:ColorPicker ColorChanged="ColorPickerChanged"
Expand Down Expand Up @@ -288,54 +269,6 @@
<Button x:Name="DeleteButton"
IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
Style="{StaticResource DeleteButtonStyle}">
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground"
Color="Firebrick" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="#C23232" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="#A21212" />
<SolidColorBrush x:Key="ButtonForeground"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="White" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ButtonBackground"
Color="Firebrick" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="#C23232" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="#A21212" />
<SolidColorBrush x:Key="ButtonForeground"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="White" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="White" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="ButtonBackground"
Color="{ThemeResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="ButtonForeground"
Color="{ThemeResource SystemColorButtonTextColor}" />
<SolidColorBrush x:Key="ButtonForegroundPointerOver"
Color="{ThemeResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="ButtonForegroundPressed"
Color="{ThemeResource SystemColorHighlightTextColor}" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>
<Button.Content>
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="&#xE74D;" />
Expand Down
Loading

0 comments on commit 5ca7915

Please sign in to comment.