Adjustments to ghost textbox (#924)

* adjustments

* delete extra visual states

* Fix hover bug

* Fix a few more bugs

* Fix high contrast crash

src/CalcViewModel/GraphingCalculator/EquationViewModel.h

@@ -45,7 +45,7 @@ public
 
         OBSERVABLE_OBJECT();
         OBSERVABLE_PROPERTY_R(GraphControl::Equation ^, GraphEquation);
-        OBSERVABLE_PROPERTY_R(int, FunctionLabelIndex);
+        OBSERVABLE_PROPERTY_RW(int, FunctionLabelIndex);
         OBSERVABLE_PROPERTY_RW(bool, IsLastItemInList);
 
         property Platform::String ^ Expression

src/Calculator/App.xaml

@@ -1743,7 +1743,7 @@
                                            Grid.Row="1"
                                            Grid.Column="0"
                                            Grid.ColumnSpan="4"
-                                           Margin="{TemplateBinding BorderThickness}"
+                                           Margin="0,-1,0,0"
                                            Padding="{TemplateBinding Padding}"
                                            VerticalAlignment="Center"
                                            Foreground="{ThemeResource TextControlPlaceholderForeground}"

src/Calculator/Controls/EquationTextBox.cpp

@@ -51,9 +51,9 @@ void EquationTextBox::OnApplyTemplate()
     {
         m_richEditBox->GotFocus += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditBoxGotFocus);
         m_richEditBox->LostFocus += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditBoxLostFocus);
+        m_richEditBox->TextChanged += ref new RoutedEventHandler(this, &EquationTextBox::OnRichEditTextChanged);
         m_richEditBox->SelectionFlyout = nullptr;
-        m_richEditBox->EquationSubmitted +=
+        m_richEditBox->EquationSubmitted += ref new EventHandler<MathRichEditBoxSubmission ^>(this, &EquationTextBox::OnEquationSubmitted);
-            ref new EventHandler<MathRichEditBoxSubmission ^>(this, &EquationTextBox::OnEquationSubmitted);
         m_richEditBox->FormatRequest += ref new EventHandler<MathRichEditBoxFormatRequest ^>(this, &EquationTextBox::OnEquationFormatRequested);
     }
 
@@ -160,6 +160,12 @@ void EquationTextBox::OnColorFlyoutClosed(Object ^ sender, Object ^ e)
     UpdateCommonVisualState();
 }
 
+void EquationTextBox::OnRichEditTextChanged(Object ^ sender, RoutedEventArgs ^ e)
+{
+    UpdateCommonVisualState();
+    UpdateButtonsVisualState();
+}
+
 void EquationTextBox::OnRichEditBoxGotFocus(Object ^ sender, RoutedEventArgs ^ e)
 {
     m_HasFocus = true;
@@ -182,7 +188,7 @@ void EquationTextBox::OnDeleteButtonClicked(Object ^ sender, RoutedEventArgs ^ e
 {
     if (m_richEditBox != nullptr)
     {
-        m_richEditBox->MathText = L"";
+        m_richEditBox->TextDocument->SetText(::TextSetOptions::None, "");
         if (m_functionButton)
         {
             m_functionButton->IsEnabled = false;
@@ -248,14 +254,14 @@ void EquationTextBox::UpdateButtonsVisualState()
 {
     String ^ state;
 
-    if (IsAddEquationMode)
+    if (m_HasFocus && RichEditHasContent())
-    {
-        state = "ButtonHideRemove";
-    }
-    else if (RichEditHasContent())
     {
         state = "ButtonVisible";
     }
+    else if (IsAddEquationMode)
+    {
+        state = "ButtonHideRemove";
+    }
     else
     {
         state = "ButtonCollapsed";
@@ -272,6 +278,10 @@ void EquationTextBox::UpdateCommonVisualState()
     {
         state = "FocusedError";
     }
+    else if (IsAddEquationMode && ((m_HasFocus || m_isPointerOver) && !RichEditHasContent()))
+    {
+        state = "AddEquation";
+    }
     else if (m_HasFocus)
     {
         state = "Focused";
@@ -338,21 +348,21 @@ bool EquationTextBox::RichEditHasContent()
 
     if (m_richEditBox != nullptr)
     {
-        text = m_richEditBox->MathText;
+        m_richEditBox->TextDocument->GetText(Windows::UI::Text::TextGetOptions::NoHidden, &text);
     }
-    return !text->IsEmpty() && m_HasFocus;
+    return !text->IsEmpty();
 }
 
 void EquationTextBox::OnRichEditMenuOpening(Object ^ /*sender*/, Object ^ /*args*/)
 {
     if (m_kgfEquationMenuItem != nullptr)
     {
-        m_kgfEquationMenuItem->IsEnabled = RichEditHasContent();
+        m_kgfEquationMenuItem->IsEnabled = m_HasFocus && RichEditHasContent();
     }
 
     if (m_colorChooserMenuItem != nullptr)
     {
-        m_colorChooserMenuItem->IsEnabled = !HasError;
+        m_colorChooserMenuItem->IsEnabled = !HasError && !IsAddEquationMode;
     }
 }
 

src/Calculator/Controls/EquationTextBox.h

@@ -52,6 +52,7 @@ namespace CalculatorApp
 
             void OnRichEditBoxGotFocus(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
             void OnRichEditBoxLostFocus(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+            void OnRichEditTextChanged(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
 
             void OnDeleteButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
             void OnEquationButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -244,6 +244,12 @@
                                                 <SolidColorBrush x:Key="EquationBoxAddBackgroundBrush" Color="#9d000000"/>
                                                 <SolidColorBrush x:Key="EquationBoxErrorBackgroundBrush" Color="#33EB5757"/>
                                                 <SolidColorBrush x:Key="EquationBoxErrorBorderBrush" Color="#FFEB5757"/>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineForegroundBrush"
+                                                                 Opacity="0.6"
+                                                                 Color="{StaticResource SystemChromeWhiteColor}"/>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineBackgroundBrush"
+                                                                 Opacity="0.4"
+                                                                 Color="#FFFFFF"/>
                                                 <Thickness x:Key="EquationTextBoxBorderThickness">0,1,1,1</Thickness>
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="Light">
@@ -255,6 +261,10 @@
                                                 <SolidColorBrush x:Key="EquationBoxAddBackgroundBrush" Color="#D0FFFFFF"/>
                                                 <SolidColorBrush x:Key="EquationBoxErrorBackgroundBrush" Color="#33EB5757"/>
                                                 <SolidColorBrush x:Key="EquationBoxErrorBorderBrush" Color="#FFEB5757"/>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineForegroundBrush" Color="{StaticResource SystemChromeWhiteColor}"/>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineBackgroundBrush"
+                                                                 Opacity="0.4"
+                                                                 Color="#000000"/>
                                                 <Thickness x:Key="EquationTextBoxBorderThickness">0,1,1,1</Thickness>
                                             </ResourceDictionary>
                                             <ResourceDictionary x:Key="HighContrast">
@@ -267,6 +277,8 @@
                                                 <SolidColorBrush x:Key="EquationBoxErrorBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
                                                 <SolidColorBrush x:Key="EquationBoxErrorBorderBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
                                                 <Thickness x:Key="EquationTextBoxBorderThickness">1</Thickness>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineForegroundBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
+                                                <SolidColorBrush x:Key="EquationButtonHideLineBackgroundBrush" Color="{ThemeResource SystemColorGrayTextColor}"/>
                                             </ResourceDictionary>
                                         </ResourceDictionary.ThemeDictionaries>
                                     </ResourceDictionary>
@@ -289,7 +301,11 @@
                                         </VisualState>
                                         <VisualState x:Name="AddEquation">
                                             <VisualState.Setters>
-                                                <Setter Target="EquationBoxBorder.Background" Value="{ThemeResource EquationBoxAddBackgroundBrush}"/>
+                                                <Setter Target="FunctionNumberLabelTextBlock.Visibility" Value="Collapsed"/>
+                                                <Setter Target="EquationButton.Background" Value="{ThemeResource EquationButtonHideLineBackgroundBrush}"/>
+                                                <Setter Target="EquationButton.BorderBrush" Value="{ThemeResource EquationButtonHideLineBackgroundBrush}"/>
+                                                <Setter Target="EquationButton.Foreground" Value="{ThemeResource EquationButtonHideLineForegroundBrush}"/>
+                                                <Setter Target="EquationButton.IsEnabled" Value="false"/>
                                             </VisualState.Setters>
                                         </VisualState>
                                         <VisualState x:Name="Error">
@@ -377,7 +393,8 @@
                                                     FlowDirection="LeftToRight"
                                                     Orientation="Horizontal">
                                             <FontIcon FontFamily="{StaticResource CalculatorFontFamily}" Glyph="&#xF893;"/>
-                                            <TextBlock Margin="-5,19,0,0"
+                                            <TextBlock x:Name="FunctionNumberLabelTextBlock"
+                                                       Margin="-5,19,0,0"
                                                        FontSize="11"
                                                        Text="{TemplateBinding EquationButtonContentIndex}"/>
                                         </StackPanel>
@@ -398,12 +415,6 @@
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="EquationButtonHideLineForegroundBrush"
-                                                                     Opacity="0.6"
-                                                                     Color="{StaticResource SystemChromeWhiteColor}"/>
-                                                    <SolidColorBrush x:Key="EquationButtonHideLineBackgroundBrush"
-                                                                     Opacity="0.4"
-                                                                     Color="#FFFFFF"/>
                                                     <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
@@ -427,10 +438,6 @@
                                                     <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemChromeWhiteColor}"/>
                                                     <SolidColorBrush x:Key="ToggleButtonBorderBrushPressed" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EquationColor.Color}"/>
-                                                    <SolidColorBrush x:Key="EquationButtonHideLineForegroundBrush" Color="{StaticResource SystemChromeWhiteColor}"/>
-                                                    <SolidColorBrush x:Key="EquationButtonHideLineBackgroundBrush"
-                                                                     Opacity="0.4"
-                                                                     Color="#000000"/>
                                                     <StaticResource x:Key="ToggleButtonBackgroundChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonBorderBrushChecked" ResourceKey="EquationButtonHideLineBackgroundBrush"/>
                                                     <StaticResource x:Key="ToggleButtonForegroundChecked" ResourceKey="EquationButtonHideLineForegroundBrush"/>
@@ -451,19 +458,19 @@
                                     </ToggleButton.Resources>
                                     <ToggleButton.Style>
                                         <Style TargetType="ToggleButton">
+                                            <Setter Property="Background" Value="{ThemeResource ToggleButtonBackground}"/>
+                                            <Setter Property="BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/>
                                             <Setter Property="Template">
                                                 <Setter.Value>
                                                     <ControlTemplate TargetType="ToggleButton">
                                                         <Grid x:Name="RootGrid"
-                                                              Background="Transparent"
+                                                              Background="{TemplateBinding Background}"
-                                                              BorderBrush="Transparent"
+                                                              BorderBrush="{TemplateBinding BorderBrush}"
                                                               BorderThickness="1">
                                                             <VisualStateManager.VisualStateGroups>
                                                                 <VisualStateGroup x:Name="CommonStates">
                                                                     <VisualState x:Name="Normal">
                                                                         <VisualState.Setters>
-                                                                            <Setter Target="RootGrid.Background" Value="{ThemeResource ToggleButtonBackground}"/>
-                                                                            <Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ToggleButtonBorderBrush}"/>
                                                                             <Setter Target="Overlay.Opacity" Value="0.0"/>
                                                                             <Setter Target="ContentPresenter.Visibility" Value="Visible"/>
                                                                             <Setter Target="ShowHideIcon.Visibility" Value="Collapsed"/>

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp

@@ -179,18 +179,28 @@ void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object ^ sender, Rou
     auto tb = static_cast<EquationTextBox ^>(sender);
     auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
     unsigned int index;
+
     if (Equations->IndexOf(eq, &index))
     {
-        if (eq->FunctionLabelIndex == m_lastFunctionLabelIndex)
+        // Prevent removing the last equation
+        if (index == Equations->Size - 1)
         {
-            m_lastFunctionLabelIndex--;
+            return;
         }
 
-        if (index == Equations->Size - 1 && Equations->Size > 1)
-        {
-            Equations->GetAt(Equations->Size - 2)->IsLastItemInList = true;
-        }
         Equations->RemoveAt(index);
+        int lastIndex = Equations->Size - 1;
+
+        if (Equations->Size <= 1)
+        {
+            m_lastFunctionLabelIndex = 1;
+        }
+        else
+        {
+            m_lastFunctionLabelIndex = Equations->GetAt(lastIndex - 1)->FunctionLabelIndex + 1;
+        }
+
+        Equations->GetAt(lastIndex)->FunctionLabelIndex = m_lastFunctionLabelIndex;
     }
 }