EditColorScheme.xaml

<!--
    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
    the MIT License. See LICENSE in the project root for license information.
-->
<Page x:Class="Microsoft.Terminal.Settings.Editor.EditColorScheme"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:model="using:Microsoft.Terminal.Settings.Model"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="GroupHeaderStyle"
                   BasedOn="{StaticResource SubtitleTextBlockStyle}"
                   TargetType="TextBlock">
                <Setter Property="Margin" Value="0,0,0,4" />
            </Style>

            <Style x:Key="ColorLabelStyle"
                   TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

            <Style x:Key="ColorTableGridStyle"
                   TargetType="Grid">
                <Setter Property="RowSpacing" Value="10" />
                <Setter Property="ColumnSpacing" Value="10" />
            </Style>

            <Style x:Key="ColorControlStyle"
                   TargetType="ContentControl">
                <Setter Property="IsTabStop" Value="False" />
            </Style>

            <Style x:Key="ColorSchemesColorButtonStyle"
                   BasedOn="{StaticResource ColorButtonStyle}"
                   TargetType="Button" />

            <Style TargetType="ColorPicker">
                <Setter Property="IsColorSliderVisible" Value="False" />
                <Setter Property="IsColorChannelTextInputVisible" Value="False" />
                <Setter Property="IsHexInputVisible" Value="True" />
                <Setter Property="IsAlphaSliderVisible" Value="True" />
                <Setter Property="IsAlphaTextInputVisible" Value="True" />
            </Style>

            <DataTemplate x:Key="ColorTableEntryTemplate"
                          x:DataType="local:ColorTableEntry">
                <Button AutomationProperties.Name="{x:Bind AccessibleName, Mode=OneWay}"
                        Background="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
                        Style="{StaticResource ColorSchemesColorButtonStyle}"
                        ToolTipService.ToolTip="{x:Bind AccessibleName, Mode=OneWay}">
                    <Button.Flyout>
                        <Flyout>
                            <muxc:ColorPicker ColorChanged="ColorPickerChanged"
                                              Tag="{x:Bind Tag, Mode=OneWay}"
                                              Color="{x:Bind Color, Mode=OneWay}" />
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </DataTemplate>

            <DataTemplate x:Key="ColorTableTextBlockTemplate"
                          x:DataType="local:ColorTableEntry">
                <TextBlock AutomationProperties.Name="{x:Bind Name}"
                           FontFamily="Cascadia Code"
                           FontSize="14"
                           Foreground="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
                           Text="{x:Bind Name}"
                           ToolTipService.ToolTip="{x:Bind Name}" />
            </DataTemplate>

        </ResourceDictionary>
    </Page.Resources>

    <StackPanel Style="{StaticResource SettingsStackStyle}">
        <Border MaxWidth="{StaticResource StandardControlMaxWidth}">
            <!--  Preview of the selected scheme  -->
            <Grid Width="350"
                  Height="160"
                  MaxWidth="{StaticResource StandardControlMaxWidth}"
                  Margin="4"
                  HorizontalAlignment="Left"
                  Background="{x:Bind local:Converters.ColorToBrush(ViewModel.BackgroundColor.Color), Mode=OneWay}"
                  BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                  BorderThickness="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <ContentControl Grid.Row="0"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ForegroundColor, Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="1"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(0), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="2"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(1), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="3"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(2), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="4"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(3), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="5"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(4), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="6"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(5), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="7"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(6), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="8"
                                Grid.Column="0"
                                Content="{x:Bind ViewModel.ColorEntryAt(7), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="1"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(8), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="2"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(9), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="3"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(10), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="4"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(11), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="5"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(12), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="6"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(13), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="7"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(14), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />
                <ContentControl Grid.Row="8"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(15), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableTextBlockTemplate}"
                                IsTabStop="False" />

            </Grid>
        </Border>

        <local:SettingContainer x:Uid="ColorScheme_ColorsHeader"
                                StartExpanded="True"
                                Style="{StaticResource ExpanderSettingContainerStyle}">
            <Grid x:Name="ColorTableGrid"
                  Style="{StaticResource ColorTableGridStyle}"
                  XYFocusKeyboardNavigation="Enabled">
                <Grid.ColumnDefinitions>
                    <!--  Labels  -->
                    <ColumnDefinition Width="Auto" />

                    <!--  Regular Colors  -->
                    <ColumnDefinition Width="Auto" />

                    <!--  Bright Colors  -->
                    <ColumnDefinition Width="Auto" />

                    <ColumnDefinition Width="50" />

                    <!--  Labels  -->
                    <ColumnDefinition Width="Auto" />

                    <!--  Regular Colors  -->
                    <ColumnDefinition Width="Auto" />

                    <!--  Bright Colors  -->
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock x:Uid="ColorScheme_Black"
                           Grid.Row="0"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightBlack"
                                Grid.Row="0"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(0), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Red"
                           Grid.Row="1"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightRed"
                                Grid.Row="1"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(1), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Green"
                           Grid.Row="2"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightGreen"
                                Grid.Row="2"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(2), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Yellow"
                           Grid.Row="3"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightYellow"
                                Grid.Row="3"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(3), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Blue"
                           Grid.Row="4"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightBlue"
                                Grid.Row="4"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(4), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Purple"
                           Grid.Row="5"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightPurple"
                                Grid.Row="5"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(5), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_Cyan"
                           Grid.Row="6"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightCyan"
                                Grid.Row="6"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(6), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <TextBlock x:Uid="ColorScheme_White"
                           Grid.Row="7"
                           Grid.Column="0"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="NonBrightWhite"
                                Grid.Row="7"
                                Grid.Column="1"
                                Content="{x:Bind ViewModel.ColorEntryAt(7), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightBlack"
                                Grid.Row="0"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(8), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightRed"
                                Grid.Row="1"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(9), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightGreen"
                                Grid.Row="2"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(10), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightYellow"
                                Grid.Row="3"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(11), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightBlue"
                                Grid.Row="4"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(12), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightPurple"
                                Grid.Row="5"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(13), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightCyan"
                                Grid.Row="6"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(14), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
                <ContentControl x:Name="BrightWhite"
                                Grid.Row="7"
                                Grid.Column="2"
                                Content="{x:Bind ViewModel.ColorEntryAt(15), Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />

                <!--  Foreground  -->
                <TextBlock x:Uid="ColorScheme_Foreground"
                           Grid.Row="0"
                           Grid.Column="4"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="ForegroundButton"
                                Grid.Row="0"
                                Grid.Column="5"
                                Content="{x:Bind ViewModel.ForegroundColor, Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />

                <!--  Background  -->
                <TextBlock x:Uid="ColorScheme_Background"
                           Grid.Row="1"
                           Grid.Column="4"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="BackgroundButton"
                                Grid.Row="1"
                                Grid.Column="5"
                                Content="{x:Bind ViewModel.BackgroundColor, Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />

                <!--  Cursor Color  -->
                <TextBlock x:Uid="ColorScheme_CursorColor"
                           Grid.Row="2"
                           Grid.Column="4"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="CursorColorButton"
                                Grid.Row="2"
                                Grid.Column="5"
                                Content="{x:Bind ViewModel.CursorColor, Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />

                <!--  Selection Background  -->
                <TextBlock x:Uid="ColorScheme_SelectionBackground"
                           Grid.Row="3"
                           Grid.Column="4"
                           Style="{StaticResource ColorLabelStyle}" />
                <ContentControl x:Name="SelectionBackgroundButton"
                                Grid.Row="3"
                                Grid.Column="5"
                                Content="{x:Bind ViewModel.SelectionBackgroundColor, Mode=OneWay}"
                                ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                Style="{StaticResource ColorControlStyle}" />
            </Grid>
        </local:SettingContainer>

        <local:SettingContainer x:Name="SetAsDefaultContainer"
                                x:Uid="ColorScheme_SetAsDefault">
            <Button x:Name="SetAsDefaultButton"
                    x:Uid="ColorScheme_SetAsDefaultButton"
                    Click="{x:Bind ViewModel.SetAsDefault_Click}"
                    Style="{StaticResource BrowseButtonStyle}" />
        </local:SettingContainer>

        <local:SettingContainer x:Name="RenameContainer"
                                x:Uid="ColorScheme_Rename"
                                IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme), Mode=OneWay}"
                                Style="{StaticResource ExpanderSettingContainerStyle}">
            <StackPanel Orientation="Horizontal"
                        XYFocusKeyboardNavigation="Enabled">
                <!--  Shown when color scheme name is already in use  -->
                <muxc:TeachingTip x:Name="RenameErrorTip"
                                  x:Uid="ColorScheme_RenameErrorTip" />
                <!--  Name text box  -->
                <TextBox x:Name="NameBox"
                         PreviewKeyDown="NameBox_PreviewKeyDown"
                         Style="{StaticResource TextBoxSettingStyle}" />
                <!--  Accept rename button  -->
                <Button x:Name="RenameAcceptButton"
                        x:Uid="RenameAccept"
                        Click="RenameAccept_Click"
                        Style="{StaticResource AccentSmallButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE8FB;" />
                    </StackPanel>
                </Button>
                <!--  Cancel rename button  -->
                <Button x:Name="RenameCancelButton"
                        x:Uid="RenameCancel"
                        Click="RenameCancel_Click"
                        Style="{StaticResource SmallButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE711;" />
                    </StackPanel>
                </Button>
            </StackPanel>
        </local:SettingContainer>

        <Grid MaxWidth="1000"
              Margin="2,6,0,0"
              ColumnSpacing="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="DeleteButton"
                    Grid.Column="0"
                    IsEnabled="{x:Bind local:Converters.InvertBoolean(ViewModel.IsInBoxScheme)}"
                    Style="{StaticResource DeleteButtonStyle}">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE74D;" />
                        <TextBlock x:Uid="ColorScheme_DeleteButton"
                                   Style="{StaticResource IconButtonTextBlockStyle}" />
                    </StackPanel>
                </Button.Content>
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
                                       Style="{StaticResource CustomFlyoutTextStyle}" />
                            <Button x:Uid="ColorScheme_DeleteConfirmationButton"
                                    Click="{x:Bind ViewModel.DeleteConfirmation_Click}" />
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <TextBlock x:Name="SelectedSchemeDisclaimer"
                       x:Uid="ColorScheme_DeleteButtonDisclaimerInBox"
                       Grid.Column="1"
                       VerticalAlignment="Center"
                       Style="{StaticResource DisclaimerStyle}"
                       TextWrapping="Wrap"
                       Visibility="{x:Bind ViewModel.IsInBoxScheme}" />
        </Grid>
    </StackPanel>
</Page>