FluentTerminal/FluentTerminal.App/Views/SettingsPages/ThemeSettings.xaml

<Page
    x:Class="FluentTerminal.App.Views.SettingsPages.ThemeSettings"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodels="using:FluentTerminal.App.ViewModels"
    xmlns:views="using:FluentTerminal.App.Views"
    mc:Ignorable="d">
    <Grid x:Name="Root">
        <Grid.Background>
            <AcrylicBrush
                BackgroundSource="HostBackdrop"
                FallbackColor="{x:Bind ViewModel.SelectedTheme.Background, Mode=OneWay}"
                TintColor="{x:Bind ViewModel.SelectedTheme.Background, Mode=OneWay}"
                TintOpacity="{x:Bind ViewModel.BackgroundOpacity, Mode=OneWay}" />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="32" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border
            Grid.RowSpan="3"
            Grid.Column="0"
            Background="{ThemeResource SystemControlAcrylicWindowBrush}" />
        <Grid
            Grid.Row="1"
            Grid.ColumnSpan="2"
            Margin="0,0,0,24">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock
                Margin="24,10,0,0"
                VerticalAlignment="Center"
                FontSize="28"
                Style="{StaticResource TitleTextBlockStyle}"
                Text="Themes" />
            <CommandBar
                Grid.Column="1"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="Transparent"
                DefaultLabelPosition="Right"
                Visibility="{x:Bind ViewModel.SelectedTheme.InEditMode, Mode=OneWay, Converter={StaticResource FalseToVisibleConverter}}">
                <AppBarButton
                    Name="SetActiveButton"
                    Command="{x:Bind ViewModel.SelectedTheme.SetActiveCommand, Mode=OneWay}"
                    Icon="Accept"
                    IsEnabled="{Binding ViewModel.SelectedTheme.IsActive, Mode=OneWay, Converter={StaticResource NegateConverter}}"
                    Label="Set Active" />
                <AppBarButton
                    Name="ExportButton"
                    Command="{x:Bind ViewModel.SelectedTheme.ExportCommand, Mode=OneWay}"
                    Label="Export">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEE71;" />
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton
                    Name="CloneButton"
                    Command="{x:Bind ViewModel.CloneCommand, Mode=OneWay}"
                    CommandParameter="{x:Bind ViewModel.SelectedTheme, Mode=OneWay}"
                    Icon="Copy"
                    Label="Clone" />
                <AppBarButton
                    Name="EditButton"
                    Command="{x:Bind ViewModel.SelectedTheme.EditCommand, Mode=OneWay}"
                    Icon="Edit"
                    Label="Edit" />
                <AppBarButton
                    Name="DeleteButton"
                    Command="{x:Bind ViewModel.SelectedTheme.DeleteCommand, Mode=OneWay}"
                    Icon="Delete"
                    Label="Delete" />
            </CommandBar>
            <CommandBar
                Grid.Column="1"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="Transparent"
                DefaultLabelPosition="Right"
                Visibility="{x:Bind ViewModel.SelectedTheme.InEditMode, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
                <AppBarButton
                    Name="SaveButton"
                    Command="{x:Bind ViewModel.SelectedTheme.SaveChangesCommand, Mode=OneWay}"
                    Icon="Save"
                    Label="Save" />
                <AppBarButton
                    Name="CancelButton"
                    Command="{x:Bind ViewModel.SelectedTheme.CancelEditCommand, Mode=OneWay}"
                    Icon="Cancel"
                    Label="Cancel" />
            </CommandBar>
        </Grid>
        <ScrollViewer
            Grid.Row="2"
            Grid.Column="0"
            VerticalScrollBarVisibility="Auto">
            <StackPanel>
                <ListView ItemsSource="{x:Bind ViewModel.Themes}" SelectedItem="{x:Bind ViewModel.SelectedTheme, Mode=TwoWay}">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="viewmodels:ThemeViewModel">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{x:Bind Name, Mode=OneWay}" />
                                <Viewbox
                                    Grid.Column="1"
                                    Width="16"
                                    Height="16"
                                    HorizontalAlignment="Right">
                                    <SymbolIcon Symbol="Accept" Visibility="{x:Bind IsActive, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
                                </Viewbox>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
                <Button
                    Height="48"
                    Margin="0,12,0,0"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Left"
                    Background="Transparent"
                    Command="{x:Bind ViewModel.CreateThemeCommand}"
                    Style="{StaticResource ButtonRevealStyle}">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Viewbox
                                Width="12"
                                Height="12"
                                Margin="0,0,6,0">
                                <SymbolIcon Symbol="Add" />
                            </Viewbox>
                            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="Create new" />
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Button
                    Height="48"
                    Margin="0,0,0,0"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Left"
                    Background="Transparent"
                    Command="{x:Bind ViewModel.ImportThemeCommand}"
                    Style="{StaticResource ButtonRevealStyle}">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Viewbox
                                Width="12"
                                Height="12"
                                Margin="0,0,6,0">
                                <SymbolIcon Symbol="OpenFile" />
                            </Viewbox>
                            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="Import" />
                        </StackPanel>
                    </Button.Content>
                </Button>
            </StackPanel>
        </ScrollViewer>

        <ContentControl
            Grid.Row="2"
            Grid.Column="1"
            Margin="24,0,0,0"
            HorizontalContentAlignment="Stretch"
            Content="{x:Bind ViewModel.SelectedTheme, Mode=TwoWay}"
            RequestedTheme="{x:Bind ViewModel.SelectedTheme.Background, Mode=OneWay, Converter={StaticResource BackgroundToApplicationThemeConverter}}">
            <ContentControl.ContentTemplate>
                <DataTemplate x:DataType="viewmodels:ThemeViewModel">
                    <ScrollViewer Padding="0,0,24,0" VerticalScrollBarVisibility="Auto">
                        <StackPanel>
                            <TextBlock
                                Style="{StaticResource SubtitleTextBlockStyle}"
                                Text="{x:Bind Name, Mode=OneWay}"
                                Visibility="{x:Bind InEditMode, Mode=OneWay, Converter={StaticResource FalseToVisibleConverter}}">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="{x:Bind Foreground, Mode=OneWay}" />
                                </TextBlock.Foreground>
                            </TextBlock>
                            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="{x:Bind Author, Mode=OneWay}" />
                            <TextBox
                                Header="Name"
                                Text="{x:Bind Name, Mode=TwoWay}"
                                Visibility="{x:Bind InEditMode, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
                            <TextBox
                                Margin="0,24,0,0"
                                Header="Author"
                                Text="{x:Bind Author, Mode=TwoWay}"
                                Visibility="{x:Bind InEditMode, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
                            <Grid Margin="0,48,0,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.Resources>
                                    <Style TargetType="Border">
                                        <Setter Property="Margin" Value="0,0,0,0" />
                                        <Setter Property="Width" Value="24" />
                                        <Setter Property="Height" Value="24" />
                                    </Style>
                                </Grid.Resources>
                                <StackPanel Grid.Row="0" Orientation="Horizontal">
                                    <views:TerminalColorPicker
                                        ColorName="Black"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Black, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Red"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Red, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Green"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Green, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Yellow"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Yellow, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Blue"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Blue, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Magenta"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Magenta, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Cyan"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Cyan, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="White"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind White, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                </StackPanel>
                                <StackPanel Grid.Row="1" Orientation="Horizontal">
                                    <views:TerminalColorPicker
                                        ColorName="Bright Black"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightBlack, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Red"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightRed, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Green"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightGreen, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Yellow"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightYellow, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Blue"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightBlue, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Magenta"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightMagenta, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright Cyan"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightCyan, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Bright White"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind BrightWhite, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                </StackPanel>
                                <StackPanel Grid.Row="2" Orientation="Horizontal">
                                    <views:TerminalColorPicker
                                        ColorName="Foreground"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Foreground, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Background"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Background, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Cursor"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind Cursor, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Cursor Accent"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        SelectedColor="{x:Bind CursorAccent, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=false}" />
                                    <views:TerminalColorPicker
                                        ColorName="Selection"
                                        EnableEditing="{x:Bind InEditMode, Mode=OneWay}"
                                        IsAlphaEnabled="True"
                                        SelectedColor="{x:Bind Selection, Mode=TwoWay, Converter={StaticResource StringToColorConverter}, ConverterParameter=true}" />
                                </StackPanel>
                                <TextBlock
                                    Grid.Row="3"
                                    Margin="0,6,0,0"
                                    Text="Click on a color to edit"
                                    Visibility="{x:Bind InEditMode, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
                            </Grid>
                        </StackPanel>
                    </ScrollViewer>
                </DataTemplate>
            </ContentControl.ContentTemplate>
        </ContentControl>
    </Grid>
</Page>