Updated EquationButton contrast fixed dark mode foreground color bugs (#1155)
* Fixed contrast between background and foreground colors in the equation button. Fixed the issue where the text in the equation text box is white when the background is white * Adjust the foreground color algorithm * moved the contrast method to utils so that it is resuable * Moved brushes for the GetContrastColor method to the app.xaml resource dictionary * Removed the change for the edit box colors, so it can be in a different PR
This commit is contained in:
parent
9817738307
commit
3055a12178
@ -24,6 +24,7 @@ using namespace Windows::UI;
|
|||||||
using namespace Windows::UI::Core;
|
using namespace Windows::UI::Core;
|
||||||
using namespace Windows::UI::ViewManagement;
|
using namespace Windows::UI::ViewManagement;
|
||||||
using namespace Windows::UI::Xaml;
|
using namespace Windows::UI::Xaml;
|
||||||
|
using namespace Windows::UI::Xaml::Media;
|
||||||
using namespace Windows::Foundation;
|
using namespace Windows::Foundation;
|
||||||
using namespace Windows::Storage;
|
using namespace Windows::Storage;
|
||||||
|
|
||||||
@ -302,3 +303,18 @@ bool operator!=(const Color& color1, const Color& color2)
|
|||||||
{
|
{
|
||||||
return !(color1 == color2);
|
return !(color1 == color2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This method calculates the luminance ratio between White and the given background color.
|
||||||
|
// The luminance is calculate using the RGB values and does not use the A value.
|
||||||
|
// White or Black is returned
|
||||||
|
SolidColorBrush ^ Utils::GetContrastColor(Color backgroundColor)
|
||||||
|
{
|
||||||
|
auto luminance = 0.2126 * backgroundColor.R + 0.7152 * backgroundColor.G + 0.0722 * backgroundColor.B;
|
||||||
|
|
||||||
|
if ((255 + 0.05) / (luminance + 0.05) >= 2.5)
|
||||||
|
{
|
||||||
|
return static_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"WhiteBrush"));
|
||||||
|
}
|
||||||
|
|
||||||
|
return static_cast<SolidColorBrush ^>(Application::Current->Resources->Lookup(L"BlackBrush"));
|
||||||
|
}
|
||||||
|
@ -409,6 +409,7 @@ namespace Utils
|
|||||||
|
|
||||||
Platform::String ^ EscapeHtmlSpecialCharacters(Platform::String ^ originalString, std::shared_ptr<std::vector<wchar_t>> specialCharacters = nullptr);
|
Platform::String ^ EscapeHtmlSpecialCharacters(Platform::String ^ originalString, std::shared_ptr<std::vector<wchar_t>> specialCharacters = nullptr);
|
||||||
|
|
||||||
|
Windows::UI::Xaml::Media::SolidColorBrush ^ GetContrastColor(Windows::UI::Color backgroundColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
// This goes into the header to define the property, in the public: section of the class
|
// This goes into the header to define the property, in the public: section of the class
|
||||||
|
@ -293,6 +293,10 @@
|
|||||||
<x:Double x:Key="CalcOperatorCaptionSize">14</x:Double>
|
<x:Double x:Key="CalcOperatorCaptionSize">14</x:Double>
|
||||||
<x:Double x:Key="CalcOperatorTextIconCaptionSize">16</x:Double>
|
<x:Double x:Key="CalcOperatorTextIconCaptionSize">16</x:Double>
|
||||||
|
|
||||||
|
<!-- White and black color brushes used for the Utils::GetContrastColor-->
|
||||||
|
<SolidColorBrush x:Key="WhiteBrush" Color="White"/>
|
||||||
|
<SolidColorBrush x:Key="BlackBrush" Color="Black"/>
|
||||||
|
|
||||||
<!-- Base style for calc buttons -->
|
<!-- Base style for calc buttons -->
|
||||||
<Style x:Key="CalcButtonStyle" TargetType="Controls:CalculatorButton">
|
<Style x:Key="CalcButtonStyle" TargetType="Controls:CalculatorButton">
|
||||||
<Setter Property="MinWidth" Value="24"/>
|
<Setter Property="MinWidth" Value="24"/>
|
||||||
|
@ -20,8 +20,10 @@ using namespace Windows::UI::Xaml::Automation;
|
|||||||
using namespace Windows::UI::Xaml::Controls;
|
using namespace Windows::UI::Xaml::Controls;
|
||||||
using namespace Windows::UI::Xaml::Input;
|
using namespace Windows::UI::Xaml::Input;
|
||||||
using namespace Windows::UI::Xaml::Controls::Primitives;
|
using namespace Windows::UI::Xaml::Controls::Primitives;
|
||||||
|
using namespace Windows::UI::Xaml::Media;
|
||||||
|
|
||||||
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationColor);
|
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationColor);
|
||||||
|
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonForegroundColor);
|
||||||
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, ColorChooserFlyout);
|
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, ColorChooserFlyout);
|
||||||
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonContentIndex);
|
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonContentIndex);
|
||||||
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, HasError);
|
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, HasError);
|
||||||
|
@ -20,6 +20,7 @@ namespace CalculatorApp
|
|||||||
|
|
||||||
DEPENDENCY_PROPERTY_OWNER(EquationTextBox);
|
DEPENDENCY_PROPERTY_OWNER(EquationTextBox);
|
||||||
DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush ^, EquationColor);
|
DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush ^, EquationColor);
|
||||||
|
DEPENDENCY_PROPERTY(Windows::UI::Xaml::Media::SolidColorBrush ^, EquationButtonForegroundColor);
|
||||||
DEPENDENCY_PROPERTY(Windows::UI::Xaml::Controls::Flyout ^, ColorChooserFlyout);
|
DEPENDENCY_PROPERTY(Windows::UI::Xaml::Controls::Flyout ^, ColorChooserFlyout);
|
||||||
DEPENDENCY_PROPERTY(Platform::String ^, EquationButtonContentIndex);
|
DEPENDENCY_PROPERTY(Platform::String ^, EquationButtonContentIndex);
|
||||||
DEPENDENCY_PROPERTY(Platform::String ^, MathEquation);
|
DEPENDENCY_PROPERTY(Platform::String ^, MathEquation);
|
||||||
|
@ -325,6 +325,7 @@
|
|||||||
<VisualState.Setters>
|
<VisualState.Setters>
|
||||||
<Setter Target="EquationBoxBorder.BorderBrush" Value="{ThemeResource EquationTextBoxBorderBrushFocused}"/>
|
<Setter Target="EquationBoxBorder.BorderBrush" Value="{ThemeResource EquationTextBoxBorderBrushFocused}"/>
|
||||||
<Setter Target="EquationBoxBorder.Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>
|
<Setter Target="EquationBoxBorder.Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>
|
||||||
|
<Setter Target="MathRichEditBox.Foreground" Value="{ThemeResource TextControlForegroundFocused}"/>
|
||||||
</VisualState.Setters>
|
</VisualState.Setters>
|
||||||
</VisualState>
|
</VisualState>
|
||||||
<VisualState x:Name="FocusedError">
|
<VisualState x:Name="FocusedError">
|
||||||
@ -385,12 +386,12 @@
|
|||||||
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
|
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForeground" Color="White"/>
|
<SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemChromeWhiteColor}"/>
|
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
|
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
||||||
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
||||||
@ -408,12 +409,12 @@
|
|||||||
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
|
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForeground" Color="White"/>
|
<SolidColorBrush x:Key="ToggleButtonForeground" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemChromeWhiteColor}"/>
|
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
|
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationButtonForegroundColor.Color}"/>
|
||||||
<SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
<SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
|
||||||
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
||||||
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
|
||||||
@ -803,6 +804,7 @@
|
|||||||
IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
|
IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
|
||||||
EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
|
EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
|
||||||
EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
|
EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
|
||||||
|
EquationButtonForegroundColor ="{x:Bind local:EquationInputArea.GetForegroundColor(LineColor), Mode=OneWay}"
|
||||||
EquationFormatRequested="EquationTextBox_EquationFormatRequested"
|
EquationFormatRequested="EquationTextBox_EquationFormatRequested"
|
||||||
EquationSubmitted="EquationTextBox_Submitted"
|
EquationSubmitted="EquationTextBox_Submitted"
|
||||||
ErrorText="{x:Bind vm:EquationViewModel.EquationErrorText(GraphEquation.GraphErrorType, GraphEquation.GraphErrorCode), Mode=OneWay}"
|
ErrorText="{x:Bind vm:EquationViewModel.EquationErrorText(GraphEquation.GraphErrorType, GraphEquation.GraphErrorCode), Mode=OneWay}"
|
||||||
|
@ -557,3 +557,8 @@ EquationViewModel ^ EquationInputArea::GetViewModelFromEquationTextBox(Object ^
|
|||||||
|
|
||||||
return eq;
|
return eq;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
SolidColorBrush ^ EquationInputArea::GetForegroundColor(Color lineColor)
|
||||||
|
{
|
||||||
|
return Utils::GetContrastColor(lineColor);
|
||||||
|
}
|
||||||
|
@ -40,6 +40,8 @@ public
|
|||||||
static Windows::UI::Xaml::Media::SolidColorBrush
|
static Windows::UI::Xaml::Media::SolidColorBrush
|
||||||
^ ToSolidColorBrush(Windows::UI::Color color) { return ref new Windows::UI::Xaml::Media::SolidColorBrush(color); }
|
^ ToSolidColorBrush(Windows::UI::Color color) { return ref new Windows::UI::Xaml::Media::SolidColorBrush(color); }
|
||||||
|
|
||||||
|
static Windows::UI::Xaml::Media::SolidColorBrush ^ GetForegroundColor(Windows::UI::Color lineColor);
|
||||||
|
|
||||||
void FocusEquationTextBox(ViewModel::EquationViewModel ^ equation);
|
void FocusEquationTextBox(ViewModel::EquationViewModel ^ equation);
|
||||||
private:
|
private:
|
||||||
void OnPropertyChanged(Platform::String ^ propertyName);
|
void OnPropertyChanged(Platform::String ^ propertyName);
|
||||||
|
Loading…
Reference in New Issue
Block a user