From 9fc9c97ee793c74ae15d03c3aa62dde6fe2144af Mon Sep 17 00:00:00 2001
From: Stephanie Anderl <46726333+sanderl@users.noreply.github.com>
Date: Mon, 13 Jan 2020 15:09:45 -0800
Subject: [PATCH] Update KGF Back Button Styling (#927)

* Remove rounded corners on the back button

* Updated back button style to align with Equation button.

* Fixed issue where the forground color was white in high contrast and fixed the crash in high contrast
---
 .../KeyGraphFeaturesPanel.xaml                | 79 ++++++++++++++++++-
 1 file changed, 75 insertions(+), 4 deletions(-)

diff --git a/src/Calculator/Views/GraphingCalculator/KeyGraphFeaturesPanel.xaml b/src/Calculator/Views/GraphingCalculator/KeyGraphFeaturesPanel.xaml
index 8db279b..5e08460 100644
--- a/src/Calculator/Views/GraphingCalculator/KeyGraphFeaturesPanel.xaml
+++ b/src/Calculator/Views/GraphingCalculator/KeyGraphFeaturesPanel.xaml
@@ -1,6 +1,7 @@
 <UserControl x:Class="CalculatorApp.KeyGraphFeaturesPanel"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
              xmlns:controls="using:CalculatorApp.Controls"
              xmlns:converters="using:CalculatorApp.Converters"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -17,14 +18,86 @@
                     <!-- Can't be #ffffff due to a bug in RichEditBox considering it as the default value -->
                     <!-- and replacing it by the system value (#000000) when dark theme is used -->
                     <SolidColorBrush x:Key="TitleMathRichEditBoxForegroundBrush" Color="#feffff"/>
+                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.3</x:Double>
+                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.5</x:Double>
+                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="White"/>
+                    <Style x:Key="ThemedBackButtonStyle"
+                           BasedOn="{StaticResource BackButtonStyle}"
+                           TargetType="Button"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="Light">
                     <SolidColorBrush x:Key="TitleMathRichEditBoxForegroundBrush" Color="Black"/>
+                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0.2</x:Double>
+                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0.4</x:Double>
+                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Black"/>
+                    <Style x:Key="ThemedBackButtonStyle"
+                           BasedOn="{StaticResource BackButtonStyle}"
+                           TargetType="Button"/>
                 </ResourceDictionary>
                 <ResourceDictionary x:Key="HighContrast">
                     <SolidColorBrush x:Key="TitleMathRichEditBoxForegroundBrush" Color="{ThemeResource SystemColorWindowTextColor}"/>
+                    <x:Double x:Key="EquationButtonOverlayPointerOverOpacity">0</x:Double>
+                    <x:Double x:Key="EquationButtonOverlayPressedOpacity">0</x:Double>
+                    <SolidColorBrush x:Key="EquationButtonOverlayBackgroundBrush" Color="Transparent"/>
+                    <Style x:Key="ThemedBackButtonStyle" TargetType="Button"/>
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
+            <!-- EquationButtonBackgroundBrush is only used in Dark and Light theme. -->
+            <!-- The x:Name property is required for High Contrast theme so the brush is indexed properly. -->
+            <SolidColorBrush x:Key="EquationButtonBackgroundBrush"
+                             x:Name="EquationButtonBackgroundBrush"
+                             Color="{x:Bind ViewModel.LineColor, Mode=OneWay}"/>
+            <Style x:Key="BackButtonStyle" TargetType="Button">
+                <Setter Property="Background" Value="{ThemeResource EquationButtonBackgroundBrush}"/>
+                <Setter Property="Foreground" Value="{ThemeResource SystemChromeWhiteColor}"/>
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="Button">
+                            <Grid x:Name="RootGrid"
+                                  Background="{TemplateBinding Background}"
+                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                  CornerRadius="{TemplateBinding CornerRadius}">
+
+                                <VisualStateManager.VisualStateGroups>
+                                    <VisualStateGroup x:Name="CommonStates">
+                                        <VisualState x:Name="Normal">
+                                            <VisualState.Setters>
+                                                <Setter Target="Overlay.Opacity" Value="0.0"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="PointerOver">
+                                            <VisualState.Setters>
+                                                <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPointerOverOpacity}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                        <VisualState x:Name="Pressed">
+                                            <VisualState.Setters>
+                                                <Setter Target="Overlay.Opacity" Value="{StaticResource EquationButtonOverlayPressedOpacity}"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>
+                                </VisualStateManager.VisualStateGroups>
+                                <Rectangle x:Name="Overlay"
+                                           Fill="{ThemeResource EquationButtonOverlayBackgroundBrush}"
+                                           Opacity="0"
+                                           IsHitTestVisible="False"/>
+                                <ContentPresenter x:Name="ContentPresenter"
+                                                  Padding="{TemplateBinding Padding}"
+                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                                  AutomationProperties.AccessibilityView="Raw"
+                                                  Content="{TemplateBinding Content}"
+                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                  CornerRadius="{TemplateBinding CornerRadius}"/>
+                            </Grid>
+
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
             <Style x:Key="KGF_RichEditBoxStyle" TargetType="controls:MathRichEditBox">
                 <Setter Property="FontSize" Value="14"/>
                 <Setter Property="IsReadOnly" Value="True"/>
@@ -56,7 +129,6 @@
                 </Setter>
             </Style>
 
-
             <Style x:Name="KGF_TitleTextBlockStyle" TargetType="TextBlock">
                 <Setter Property="FontWeight" Value="Medium"/>
                 <Setter Property="FontSize" Value="16"/>
@@ -161,9 +233,8 @@
                     x:Uid="equationAnalysisBack"
                     MinWidth="44"
                     VerticalAlignment="Stretch"
-                    Style="{StaticResource ButtonRevealStyle}"
-                    Background="{x:Bind local:KeyGraphFeaturesPanel.ToSolidColorBrush(ViewModel.LineColor), Mode=OneWay}"
-                    Foreground="{ThemeResource SystemChromeWhiteColor}"
+                    Style="{ThemeResource ThemedBackButtonStyle}"
+                    contract7Present:CornerRadius="0"
                     Click="BackButton_Click">
                 <StackPanel Margin="5,0"
                             HorizontalAlignment="Center"