Terminal color picker tweaks (#10219)
The flyout wasn't very polished, so I did some adjustments. It's all visual changes, functionality should be the same. * made the flyout use OverlayCornerRadius and 16px padding (to match WinUI 2.6) * changed ColorPicker to muxc:ColorPicker for new styles (the color schemes picker too) * changed "Custom" Button into a ToggleButton * no longer needs ellipsis - localization files should be updated * OK button was moved to the right and uses accent color * adjusted margins and padding * tweaked the color boxes to _look_ like the ones in color schemes   ## Validation Steps Performed * Color picker in settings UI still works ✔️ * Color picker for tabs still works ✔️
This commit is contained in:
gabrielconl
GitHub
parent
3c81b51b78
commit
d0d3cc6a75
|
|
@ -47,6 +47,9 @@
|
|||
<!-- Suppress top padding -->
|
||||
<Thickness x:Key="TabViewHeaderPadding">8,0,8,0</Thickness>
|
||||
|
||||
<!-- Remove when implementing WinUI 2.6 -->
|
||||
<Thickness x:Key="FlyoutContentPadding">12</Thickness>
|
||||
|
||||
<ResourceDictionary.ThemeDictionaries>
|
||||
<ResourceDictionary x:Key="Dark">
|
||||
<!-- Define resources for Dark mode here -->
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ namespace winrt::TerminalApp::implementation
|
|||
Hide();
|
||||
}
|
||||
|
||||
void ColorPickupFlyout::ColorPicker_ColorChanged(const Windows::UI::Xaml::Controls::ColorPicker&, const Windows::UI::Xaml::Controls::ColorChangedEventArgs& args)
|
||||
void ColorPickupFlyout::ColorPicker_ColorChanged(const Microsoft::UI::Xaml::Controls::ColorPicker&, const Microsoft::UI::Xaml::Controls::ColorChangedEventArgs& args)
|
||||
{
|
||||
_ColorSelectedHandlers(args.NewColor());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ namespace winrt::TerminalApp::implementation
|
|||
void ShowColorPickerButton_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
|
||||
void CustomColorButton_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
|
||||
void ClearColorButton_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& args);
|
||||
void ColorPicker_ColorChanged(const Windows::UI::Xaml::Controls::ColorPicker&, const Windows::UI::Xaml::Controls::ColorChangedEventArgs& args);
|
||||
void ColorPicker_ColorChanged(const Microsoft::UI::Xaml::Controls::ColorPicker&, const Microsoft::UI::Xaml::Controls::ColorChangedEventArgs& args);
|
||||
|
||||
WINRT_CALLBACK(ColorCleared, TerminalApp::ColorClearedArgs);
|
||||
WINRT_CALLBACK(ColorSelected, TerminalApp::ColorSelectedArgs);
|
||||
|
|
|
|||
|
|
@ -4,190 +4,200 @@
|
|||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="using:TerminalApp"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
|
||||
mc:Ignorable="d">
|
||||
<Flyout.FlyoutPresenterStyle>
|
||||
<Style TargetType="FlyoutPresenter">
|
||||
<Setter Property="MinWidth" Value="0" />
|
||||
<Setter Property="MaxWidth" Value="9999" />
|
||||
<Setter Property="Padding" Value="{StaticResource FlyoutContentPadding}" />
|
||||
<Setter Property="Margin" Value="8,4,8,8" />
|
||||
<Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
|
||||
</Style>
|
||||
</Flyout.FlyoutPresenterStyle>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<StackPanel XYFocusKeyboardNavigation="Enabled">
|
||||
<VariableSizedWrapGrid Margin="0,3,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
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="0" />
|
||||
<Setter Property="Margin" Value="2" />
|
||||
</Style>
|
||||
</VariableSizedWrapGrid.Resources>
|
||||
<Button x:Uid="CrimsonColorButton"
|
||||
AutomationProperties.Name="Crimson"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Crimson" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SteelBlueColorButton"
|
||||
AutomationProperties.Name="SteelBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SteelBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MediumSeaGreenColorButton"
|
||||
AutomationProperties.Name="MediumSeaGreen"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="MediumSeaGreen" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DarkOrangeColorButton"
|
||||
AutomationProperties.Name="DarkOrange"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DarkOrange" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MediumVioletRedColorButton"
|
||||
AutomationProperties.Name="MediumVioletRed"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="MediumVioletRed" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DodgerBlueColorButton"
|
||||
AutomationProperties.Name="DodgerBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DodgerBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="LimeGreenColorButton"
|
||||
AutomationProperties.Name="LimeGreen"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="LimeGreen" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="YellowColorButton"
|
||||
AutomationProperties.Name="Yellow"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Yellow" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="BlueVioletColorButton"
|
||||
AutomationProperties.Name="BlueViolet"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="BlueViolet" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SlateBlueColorButton"
|
||||
AutomationProperties.Name="SlateBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SlateBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="LimeColorButton"
|
||||
AutomationProperties.Name="Lime"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Lime" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="TanColorButton"
|
||||
AutomationProperties.Name="Tan"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Tan" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MagentaColorButton"
|
||||
AutomationProperties.Name="Magenta"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Magenta" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="CyanColorButton"
|
||||
AutomationProperties.Name="Cyan"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Cyan" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SkyBlueColorButton"
|
||||
AutomationProperties.Name="SkyBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SkyBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DarkGrayColorButton"
|
||||
AutomationProperties.Name="DarkGray"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DarkGray" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
</VariableSizedWrapGrid>
|
||||
<StackPanel HorizontalAlignment="Center"
|
||||
Orientation="Horizontal">
|
||||
<StackPanel.Resources>
|
||||
<Style TargetType="Button">
|
||||
<Setter Property="Margin" Value="2" />
|
||||
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
||||
</Style>
|
||||
</StackPanel.Resources>
|
||||
<Grid Padding="-2">
|
||||
<VariableSizedWrapGrid Margin="0"
|
||||
HorizontalAlignment="Center"
|
||||
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" />
|
||||
<Setter Property="Margin" Value="2" />
|
||||
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource SystemBaseLowColor}" />
|
||||
</Style>
|
||||
</VariableSizedWrapGrid.Resources>
|
||||
<Button x:Uid="CrimsonColorButton"
|
||||
AutomationProperties.Name="Crimson"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Crimson" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SteelBlueColorButton"
|
||||
AutomationProperties.Name="SteelBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SteelBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MediumSeaGreenColorButton"
|
||||
AutomationProperties.Name="MediumSeaGreen"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="MediumSeaGreen" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DarkOrangeColorButton"
|
||||
AutomationProperties.Name="DarkOrange"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DarkOrange" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MediumVioletRedColorButton"
|
||||
AutomationProperties.Name="MediumVioletRed"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="MediumVioletRed" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DodgerBlueColorButton"
|
||||
AutomationProperties.Name="DodgerBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DodgerBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="LimeGreenColorButton"
|
||||
AutomationProperties.Name="LimeGreen"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="LimeGreen" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="YellowColorButton"
|
||||
AutomationProperties.Name="Yellow"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Yellow" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="BlueVioletColorButton"
|
||||
AutomationProperties.Name="BlueViolet"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="BlueViolet" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SlateBlueColorButton"
|
||||
AutomationProperties.Name="SlateBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SlateBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="LimeColorButton"
|
||||
AutomationProperties.Name="Lime"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Lime" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="TanColorButton"
|
||||
AutomationProperties.Name="Tan"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Tan" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="MagentaColorButton"
|
||||
AutomationProperties.Name="Magenta"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Magenta" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="CyanColorButton"
|
||||
AutomationProperties.Name="Cyan"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="Cyan" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="SkyBlueColorButton"
|
||||
AutomationProperties.Name="SkyBlue"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="SkyBlue" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
<Button x:Uid="DarkGrayColorButton"
|
||||
AutomationProperties.Name="DarkGray"
|
||||
Click="ColorButton_Click">
|
||||
<Button.Content>
|
||||
<Rectangle Fill="DarkGray" />
|
||||
</Button.Content>
|
||||
</Button>
|
||||
</VariableSizedWrapGrid>
|
||||
</Grid>
|
||||
<Grid Margin="0,12,0,0"
|
||||
Padding="-2">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Button x:Name="ClearColorButton"
|
||||
x:Uid="TabColorClearButton"
|
||||
Padding="5"
|
||||
Grid.Column="0"
|
||||
Margin="2"
|
||||
HorizontalAlignment="Stretch"
|
||||
Click="ClearColorButton_Click"
|
||||
Content="Reset"
|
||||
CornerRadius="2" />
|
||||
<Button x:Name="CustomColorButton"
|
||||
x:Uid="TabColorCustomButton"
|
||||
Padding="5"
|
||||
Click="ShowColorPickerButton_Click"
|
||||
Content="Custom..."
|
||||
CornerRadius="2" />
|
||||
</StackPanel>
|
||||
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>
|
||||
<Grid x:Name="customColorPanel"
|
||||
Margin="5"
|
||||
Margin="16,0,0,0"
|
||||
Visibility="Collapsed">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ColorPicker x:Name="customColorPicker"
|
||||
Grid.Row="0"
|
||||
ColorChanged="ColorPicker_ColorChanged"
|
||||
FontSize="10"
|
||||
IsAlphaEnabled="False"
|
||||
IsAlphaSliderVisible="False"
|
||||
IsAlphaTextInputVisible="False"
|
||||
IsColorChannelTextInputVisible="True"
|
||||
IsColorSliderVisible="True"
|
||||
IsHexInputVisible="True"
|
||||
IsMoreButtonVisible="True" />
|
||||
<muxc:ColorPicker x:Name="customColorPicker"
|
||||
Grid.Row="0"
|
||||
Margin="0,0,0,12"
|
||||
ColorChanged="ColorPicker_ColorChanged"
|
||||
FontSize="10"
|
||||
IsAlphaEnabled="False"
|
||||
IsAlphaSliderVisible="False"
|
||||
IsAlphaTextInputVisible="False"
|
||||
IsColorChannelTextInputVisible="True"
|
||||
IsColorSliderVisible="True"
|
||||
IsHexInputVisible="True"
|
||||
IsMoreButtonVisible="True" />
|
||||
<Button x:Name="OkButton"
|
||||
x:Uid="OkButton"
|
||||
Grid.Row="1"
|
||||
MinWidth="130"
|
||||
MinHeight="12"
|
||||
Margin="0,5,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
HorizontalAlignment="Right"
|
||||
Click="CustomColorButton_Click"
|
||||
Content="**OK**" />
|
||||
Content="OK"
|
||||
Style="{ThemeResource AccentButtonStyle}" />
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Flyout>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,13 @@ using namespace winrt::Windows::UI::Xaml::Controls;
|
|||
using namespace winrt::Windows::UI::Xaml::Media;
|
||||
using namespace winrt::Windows::Foundation;
|
||||
using namespace winrt::Windows::Foundation::Collections;
|
||||
using namespace winrt::Microsoft::UI::Xaml::Controls;
|
||||
|
||||
namespace winrt
|
||||
{
|
||||
namespace MUX = Microsoft::UI::Xaml;
|
||||
namespace WUX = Windows::UI::Xaml;
|
||||
}
|
||||
|
||||
namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
|
||||
{
|
||||
|
|
@ -217,10 +224,10 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
|
|||
// Return Value:
|
||||
// - <none>
|
||||
void ColorSchemes::ColorPickerChanged(IInspectable const& sender,
|
||||
ColorChangedEventArgs const& args)
|
||||
MUX::Controls::ColorChangedEventArgs const& args)
|
||||
{
|
||||
const til::color newColor{ args.NewColor() };
|
||||
if (const auto& picker{ sender.try_as<ColorPicker>() })
|
||||
if (const auto& picker{ sender.try_as<MUX::Controls::ColorPicker>() })
|
||||
{
|
||||
if (const auto& tag{ picker.Tag() })
|
||||
{
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
|
|||
void OnNavigatedTo(const winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
|
||||
|
||||
void ColorSchemeSelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs const& args);
|
||||
void ColorPickerChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::ColorChangedEventArgs const& args);
|
||||
void ColorPickerChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::Controls::ColorChangedEventArgs const& args);
|
||||
void AddNew_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
|
||||
|
||||
void Rename_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
|
||||
|
|
|
|||
|
|
@ -82,9 +82,9 @@
|
|||
|
||||
<Button.Flyout>
|
||||
<Flyout>
|
||||
<ColorPicker ColorChanged="ColorPickerChanged"
|
||||
Tag="{x:Bind Tag, Mode=OneWay}"
|
||||
Color="{x:Bind Color, Mode=OneWay}" />
|
||||
<muxc:ColorPicker ColorChanged="ColorPickerChanged"
|
||||
Tag="{x:Bind Tag, Mode=OneWay}"
|
||||
Color="{x:Bind Color, Mode=OneWay}" />
|
||||
</Flyout>
|
||||
</Button.Flyout>
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue