Skip to content

Add settings for color adjustment to demo application #2389

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

Merged
Keboo merged 3 commits into from
Aug 2, 2021
Merged

Add settings for color adjustment to demo application #2389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6f2dcb
Add toggle button for color adjustment in demo application
FantasyTeddy Aug 1, 2021
f8f1862
Allow modification of color adjustment values in demo application
FantasyTeddy Aug 1, 2021
a72619b
Fixing tests to account for tolerance being + or -
Keboo Aug 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions MainDemo.Wpf/Domain/PaletteSelectorViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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