Skip to content

Commit

Permalink
Add settings for color adjustment to demo application (#2389)
Browse files Browse the repository at this point in the history 
* Add toggle button for color adjustment in demo application

* Allow modification of color adjustment values in demo application

* Fixing tests to account for tolerance being + or -

Co-authored-by: Kevin Bost <kitokeboo@gmail.com>
  • Loading branch information
@FantasyTeddy @Keboo
FantasyTeddy and Keboo committed Aug 2, 2021
1 parent 6833dba commit 4252ca5
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 5 deletions.
92 changes: 92 additions & 0 deletions MainDemo.Wpf/Domain/PaletteSelectorViewModel.cs
View file
@@ -1,5 +1,6 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Input;
using MaterialDesignColors;
using MaterialDesignThemes.Wpf;
Expand All @@ -17,6 +18,16 @@ public PaletteSelectorViewModel()

IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark;

if (theme is Theme internalTheme)
{
_isColorAdjusted = internalTheme.ColorAdjustment is not null;

var colorAdjustment = internalTheme.ColorAdjustment ?? new ColorAdjustment();
_desiredContrastRatio = colorAdjustment.DesiredContrastRatio;
_contrastValue = colorAdjustment.Contrast;
_colorSelectionValue = colorAdjustment.Colors;
}

if (paletteHelper.GetThemeManager() is { } themeManager)
{
themeManager.ThemeChanged += (_, e) =>
Expand All @@ -39,6 +50,87 @@ public bool IsDarkTheme
}
}

private bool _isColorAdjusted;
public bool IsColorAdjusted
{
get => _isColorAdjusted;
set
{
if (SetProperty(ref _isColorAdjusted, value))
{
ModifyTheme(theme =>
{
if (theme is Theme internalTheme)
{
internalTheme.ColorAdjustment = value
? new ColorAdjustment
{
DesiredContrastRatio = DesiredContrastRatio,
Contrast = ContrastValue,
Colors = ColorSelectionValue
}
: null;
}
});
}
}
}

private float _desiredContrastRatio = 4.5f;
public float DesiredContrastRatio
{
get => _desiredContrastRatio;
set
{
if (SetProperty(ref _desiredContrastRatio, value))
{
ModifyTheme(theme =>
{
if (theme is Theme internalTheme && internalTheme.ColorAdjustment != null)
internalTheme.ColorAdjustment.DesiredContrastRatio = value;
});
}
}
}

public IEnumerable<Contrast> ContrastValues => Enum.GetValues(typeof(Contrast)).Cast<Contrast>();

private Contrast _contrastValue;
public Contrast ContrastValue
{
get => _contrastValue;
set
{
if (SetProperty(ref _contrastValue, value))
{
ModifyTheme(theme =>
{
if (theme is Theme internalTheme && internalTheme.ColorAdjustment != null)
internalTheme.ColorAdjustment.Contrast = value;
});
}
}
}

public IEnumerable<ColorSelection> ColorSelectionValues => Enum.GetValues(typeof(ColorSelection)).Cast<ColorSelection>();

private ColorSelection _colorSelectionValue;
public ColorSelection ColorSelectionValue
{
get => _colorSelectionValue;
set
{
if (SetProperty(ref _colorSelectionValue, value))
{
ModifyTheme(theme =>
{
if (theme is Theme internalTheme && internalTheme.ColorAdjustment != null)
internalTheme.ColorAdjustment.Colors = value;
});
}
}
}

public IEnumerable<Swatch> Swatches { get; }

public ICommand ApplyPrimaryCommand { get; } = new AnotherCommandImplementation(o => ApplyPrimary((Swatch)o));
Expand Down
77 changes: 76 additions & 1 deletion MainDemo.Wpf/PaletteSelector.xaml
View file
Expand Up @@ -10,7 +10,7 @@
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
d:DataContext="{d:DesignInstance domain:PaletteSelectorViewModel}"
d:DesignHeight="300"
d:DesignWidth="300"
d:DesignWidth="400"
mc:Ignorable="d">
<UserControl.Resources>
<DataTemplate DataType="{x:Type materialDesignColors:Swatch}">
Expand Down Expand Up @@ -143,6 +143,81 @@
<TextBlock
VerticalAlignment="Center"
Text="Dark"/>

<TextBlock
VerticalAlignment="Center"
Margin="50 0 0 0"
Text="Color Adjustment"/>

<ToggleButton
Margin="8 0 0 0"
IsChecked="{Binding IsColorAdjusted}"/>

<wpf:PopupBox StaysOpen="True">
<Grid Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<TextBlock
Grid.Column="0"
Grid.Row="0"
Margin="10"
VerticalAlignment="Center"
Text="Desired Contrast Ratio"/>
<Slider
Grid.Column="1"
Grid.Row="0"
Minimum="1"
Maximum="21"
TickFrequency="0.1"
Value="{Binding DesiredContrastRatio}"
IsSnapToTickEnabled="True"
VerticalAlignment="Center"
Width="150"/>
<TextBlock
Grid.Column="2"
Grid.Row="0"
VerticalAlignment="Center"
TextAlignment="Right"
Margin="8"
Width="40"
Text="{Binding DesiredContrastRatio, StringFormat={}{0}:1}">
</TextBlock>

<TextBlock
Grid.Column="0"
Grid.Row="1"
Margin="10"
VerticalAlignment="Center"
Text="Contrast"/>
<ComboBox
Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding ContrastValues}"
SelectedItem="{Binding ContrastValue}"/>

<TextBlock
Grid.Column="0"
Grid.Row="2"
Margin="10"
VerticalAlignment="Center"
Text="Color Selection"/>
<ComboBox
Grid.Column="1"
Grid.Row="2"
ItemsSource="{Binding ColorSelectionValues}"
SelectedItem="{Binding ColorSelectionValue}"/>
</Grid>
</wpf:PopupBox>
</StackPanel>

<ItemsControl
Expand Down
2 changes: 1 addition & 1 deletion MaterialDesignColors.Wpf.Tests/ColorAssistTests.cs
View file
Expand Up @@ -15,7 +15,7 @@ public void EnsureContrastRatio_AdjustsColor()
var adjusted = foreground.EnsureContrastRatio(background, 3.0f);

double contrastRatio = adjusted.ContrastRatio(background);
Assert.True(contrastRatio >= 3.0);
Assert.True(contrastRatio >= 2.9);
Assert.True(contrastRatio <= 3.1);
}
}
Expand Down
2 changes: 1 addition & 1 deletion MaterialDesignColors.Wpf/ColorManipulation/ColorAssist.cs
View file
Expand Up @@ -88,7 +88,7 @@ public static Color EnsureContrastRatio(this Color foreground, Color background,
Color finalColor = foreground;
double? adjust = null;

while ((ratio < targetRatio || ratio > targetRatio + tollerance) &&
while ((ratio < targetRatio - tollerance || ratio > targetRatio + tollerance) &&
finalColor != Colors.White &&
finalColor != Colors.Black)
{
Expand Down
5 changes: 3 additions & 2 deletions MaterialDesignThemes.UITests/WPF/Theme/ColorAdjustTests.cs
View file
Expand Up @@ -55,16 +55,17 @@ public async Task PrimaryColor_AdjustToTheme(PrimaryColor primary)

async Task AssertContrastRatio()
{
const double tollerance = 0.1;
Color? largeTextForeground = await largeText.GetForegroundColor();
Color largeTextBackground = await largeText.GetEffectiveBackground();

Color? smallTextForeground = await smallText.GetForegroundColor();
Color smallTextBackground = await smallText.GetEffectiveBackground();

var largeContrastRatio = ColorAssist.ContrastRatio(largeTextForeground.Value, largeTextBackground);
Assert.True(largeContrastRatio >= MaterialDesignSpec.MinimumContrastLargeText, $"Large font contrast ratio '{largeContrastRatio}' does not meet material design spec {MaterialDesignSpec.MinimumContrastLargeText}");
Assert.True(largeContrastRatio >= MaterialDesignSpec.MinimumContrastLargeText - tollerance, $"Large font contrast ratio '{largeContrastRatio}' does not meet material design spec {MaterialDesignSpec.MinimumContrastLargeText}");
var smallContrastRatio = ColorAssist.ContrastRatio(smallTextForeground.Value, smallTextBackground);
Assert.True(smallContrastRatio >= MaterialDesignSpec.MinimumContrastSmallText, $"Small font contrast ratio '{smallContrastRatio}' does not meet material design spec {MaterialDesignSpec.MinimumContrastSmallText}");
Assert.True(smallContrastRatio >= MaterialDesignSpec.MinimumContrastSmallText - tollerance, $"Small font contrast ratio '{smallContrastRatio}' does not meet material design spec {MaterialDesignSpec.MinimumContrastSmallText}");
}
}
}
Expand Down

0 comments on commit 4252ca5

Please sign in to comment.