DevWiki/calculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated EquationButton contrast fixed dark mode foreground color bugs (#1155)

Browse Source 
* 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:
Stephanie Anderl 2020-05-05 10:20:05 -07:00 committed by GitHub
parent 9817738307
commit 3055a12178
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/CalcViewModel/Common/Utils.cpp
View File

@ -24,6 +24,7 @@ using namespace Windows::UI;
using namespace Windows::UI::Core;
using namespace Windows::UI::ViewManagement;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::Foundation;
using namespace Windows::Storage;
@ -302,3 +303,18 @@ bool operator!=(const Color& color1, const Color& 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"));
}

1
src/CalcViewModel/Common/Utils.h
View File

@ -409,6 +409,7 @@ namespace Utils
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

4
src/Calculator/App.xaml
View File

@ -293,6 +293,10 @@
<x:Double x:Key="CalcOperatorCaptionSize">14</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 -->
<Style x:Key="CalcButtonStyle" TargetType="Controls:CalculatorButton">
<Setter Property="MinWidth" Value="24"/>

2
src/Calculator/Controls/EquationTextBox.cpp
View File

@ -20,8 +20,10 @@ using namespace Windows::UI::Xaml::Automation;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Media;
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationColor);
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonForegroundColor);
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, ColorChooserFlyout);
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, EquationButtonContentIndex);
DEPENDENCY_PROPERTY_INITIALIZATION(EquationTextBox, HasError);

1
src/Calculator/Controls/EquationTextBox.h
View File

@ -20,6 +20,7 @@ namespace CalculatorApp
DEPENDENCY_PROPERTY_OWNER(EquationTextBox);
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(Platform::String ^, EquationButtonContentIndex);
DEPENDENCY_PROPERTY(Platform::String ^, MathEquation);

14
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
View File

@ -325,6 +325,7 @@
<VisualState.Setters>
<Setter Target="EquationBoxBorder.BorderBrush" Value="{ThemeResource EquationTextBoxBorderBrushFocused}"/>
<Setter Target="EquationBoxBorder.Background" Value="{ThemeResource TextBoxBackgroundThemeBrush}"/>
<Setter Target="MathRichEditBox.Foreground" Value="{ThemeResource TextControlForegroundFocused}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="FocusedError">
@ -385,12 +386,12 @@
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
<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="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="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="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}"/>
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
@ -408,12 +409,12 @@
<SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
<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="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="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="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}"/>
<StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
<StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
@ -803,6 +804,7 @@
IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
EquationButtonForegroundColor ="{x:Bind local:EquationInputArea.GetForegroundColor(LineColor), Mode=OneWay}"
EquationFormatRequested="EquationTextBox_EquationFormatRequested"
EquationSubmitted="EquationTextBox_Submitted"
ErrorText="{x:Bind vm:EquationViewModel.EquationErrorText(GraphEquation.GraphErrorType, GraphEquation.GraphErrorCode), Mode=OneWay}"

5
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
View File

@ -557,3 +557,8 @@ EquationViewModel ^ EquationInputArea::GetViewModelFromEquationTextBox(Object ^
return eq;
}
SolidColorBrush ^ EquationInputArea::GetForegroundColor(Color lineColor)
{
return Utils::GetContrastColor(lineColor);
}

2
src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
View File

@ -40,6 +40,8 @@ public
static Windows::UI::Xaml::Media::SolidColorBrush
^ 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);
private:
void OnPropertyChanged(Platform::String ^ propertyName);