Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reorder the color chips grid in the color schemes page #14223

Merged
5 commits merged into from Nov 1, 2022
Merged

Reorder the color chips grid in the color schemes page #14223

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1c6965
reorder color chip grid
PankajBhojwani Oct 14, 2022
dc7200f
border background
PankajBhojwani Oct 18, 2022
f4b5d97
update size, padding
PankajBhojwani Oct 18, 2022
b18b5bf
move padding etc to grid itself, remove border
PankajBhojwani Oct 25, 2022
b9ec64a
comment
PankajBhojwani Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
102 changes: 49 additions & 53 deletions src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
View file
Open in desktop
Expand Up @@ -20,8 +20,8 @@

<DataTemplate x:Key="ColorPreviewChipTemplate"
x:DataType="local:ColorTableEntry">
<Border Width="15"
Height="15"
<Border Width="12"
Height="12"
Background="{x:Bind local:Converters.ColorToBrush(Color)}"
CornerRadius="2" />
</DataTemplate>
Expand All @@ -40,7 +40,6 @@
<StackPanel Style="{StaticResource SettingsStackStyle}">
<TextBlock x:Uid="ColorSchemesDisclaimer"
Style="{StaticResource DisclaimerStyle}" />

<ListView x:Name="ColorSchemeListView"
MaxWidth="{StaticResource StandardControlMaxWidth}"
ItemsSource="{x:Bind ViewModel.AllColorSchemes, Mode=OneWay}"
Expand All @@ -55,31 +54,17 @@
Style="{StaticResource SchemeGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
Style="{StaticResource SettingsPageItemHeaderStyle}"
Text="{x:Bind Name, Mode=OneWay}" />
<Border Grid.Column="1"
Margin="10,0,0,0"
Padding="2,0,2,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="{ThemeResource SystemAltMediumLowColor}"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
BorderThickness="1"
CornerRadius="1"
Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
<TextBlock x:Uid="ColorScheme_DefaultTag"
Grid.Column="1"
Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
</Border>
<Grid Grid.Column="2"
<!-- Set the height of the inner grid as 48 to be 3/4 of the ListViewItem height -->
<Grid Grid.Column="0"
Height="48"
PankajBhojwani marked this conversation as resolved.
Show resolved Hide resolved
Padding="12,11,8,8"
VerticalAlignment="Center"
ColumnSpacing="4"
RowSpacing="4">
Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
ColumnSpacing="2"
CornerRadius="4"
RowSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
Expand All @@ -95,99 +80,110 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.RowSpan="2"
Grid.Column="0"
Background="{x:Bind local:Converters.ColorToBrush(BackgroundColor.Color), Mode=OneWay}"
CornerRadius="2">
<TextBlock Padding="10,0,10,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontFamily="Cascadia Code"
Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
Text="AaBbCc" />
</Border>
<ContentControl Grid.Row="0"
Grid.Column="1"
Grid.Column="0"
Content="{x:Bind ColorEntryAt(0), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="2"
Grid.Column="1"
Content="{x:Bind ColorEntryAt(1), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="3"
Grid.Column="2"
Content="{x:Bind ColorEntryAt(2), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="4"
Grid.Column="3"
Content="{x:Bind ColorEntryAt(3), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="5"
Grid.Column="4"
Content="{x:Bind ColorEntryAt(4), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="6"
Grid.Column="5"
Content="{x:Bind ColorEntryAt(5), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="7"
Grid.Column="6"
Content="{x:Bind ColorEntryAt(6), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="0"
Grid.Column="8"
Grid.Column="7"
Content="{x:Bind ColorEntryAt(7), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="1"
Grid.Column="0"
Content="{x:Bind ColorEntryAt(8), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="2"
Grid.Column="1"
Content="{x:Bind ColorEntryAt(9), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="3"
Grid.Column="2"
Content="{x:Bind ColorEntryAt(10), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="4"
Grid.Column="3"
Content="{x:Bind ColorEntryAt(11), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="5"
Grid.Column="4"
Content="{x:Bind ColorEntryAt(12), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="6"
Grid.Column="5"
Content="{x:Bind ColorEntryAt(13), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="7"
Grid.Column="6"
Content="{x:Bind ColorEntryAt(14), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<ContentControl Grid.Row="1"
Grid.Column="8"
Grid.Column="7"
Content="{x:Bind ColorEntryAt(15), Mode=OneWay}"
ContentTemplate="{StaticResource ColorPreviewChipTemplate}"
IsTabStop="False" />
<TextBlock Grid.RowSpan="2"
Grid.Column="8"
Padding="10,0,10,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am still pretty weirded out about this. Why does this work for the accessibility tools? What are they seeing that offers them the actual name?

it looks like it's the ToString for the item itself... hmm

image

good for now but that probably explains why the default tag wasn't working

FontFamily="Cascadia Code"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DHowett did we ever figure out what happens if we can't find Cascadia Code? Should we care?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, it falls back to Segoe UI or something. It's weird but not world-ending.

Foreground="{x:Bind local:Converters.ColorToBrush(ForegroundColor.Color), Mode=OneWay}"
Text="{x:Bind Name, Mode=OneWay}" />
</Grid>
<Border Grid.Column="1"
Margin="10,0,0,0"
Padding="2,0,2,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="{ThemeResource SystemAltMediumLowColor}"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
BorderThickness="1"
CornerRadius="1"
Visibility="{x:Bind IsDefaultScheme, Mode=OneWay}">
<TextBlock x:Uid="ColorScheme_DefaultTag"
Grid.Column="1"
Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Expand Down