[Graph] Replace the Add button by a EquationTextBlock (#826)

* init * Replace the Add equation button by an EquationTextBox * Move automatically the focus to the next textbox when users press Enter * nit * localize the placeholder * rebase * rebased and disable remove context menu when the equation is the last one * replace storyboards by setters in visual states
2019-12-10 11:06:37 -08:00
parent f1bf3354c4
commit 07d012cf6b
12 changed files with 449 additions and 281 deletions
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml
@@ -2,7 +2,6 @@
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="using:CalculatorApp.Controls"
-             xmlns:converters="using:CalculatorApp.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:CalculatorApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -10,25 +9,19 @@
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">
-    
-    <Grid VerticalAlignment="Top">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="*"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>

+    <Grid>
        <ListView x:Name="EquationInputList"
                  IsItemClickEnabled="False"
                  ItemsSource="{x:Bind Equations}"
                  SelectionMode="None">

-<!-- Removes animations from the ListView Style. -->
+            <!-- Removes animations from the ListView Style. -->
            <ListView.Style>
                <Style TargetType="ListView">
                    <Setter Property="ItemContainerTransitions">
                        <Setter.Value>
-                            <TransitionCollection>
-                            </TransitionCollection>
+                            <TransitionCollection/>
                        </Setter.Value>
                    </Setter>
                </Style>
@@ -43,22 +36,23 @@
                </Style>
            </ListView.ItemContainerStyle>

-
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="vm:EquationViewModel">
-                    <controls:EquationTextBox x:Uid="EquationInputButton"
-                                              Margin="1,0,1,0"
+                    <controls:EquationTextBox x:Name="EquationInputButton"
+                                              x:Uid="EquationInputButton"
+                                              Margin="1"
                                              Style="{StaticResource EquationTextBoxStyle}"
-                                              EquationColor="{x:Bind LineColor, Mode=OneWay}"
                                              EquationButtonClicked="EquationTextBox_EquationButtonClicked"
                                              EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
+                                              EquationColor="{x:Bind LineColor, Mode=OneWay}"
                                              EquationSubmitted="InputTextBox_Submitted"
                                              GotFocus="InputTextBox_GotFocus"
                                              HasError="{x:Bind GraphEquation.HasGraphError, Mode=OneWay}"
+                                              IsAddEquationMode="{x:Bind IsLastItemInList, Mode=OneWay}"
+                                              KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked"
                                              Loaded="EquationTextBoxLoaded"
                                              LostFocus="InputTextBox_LostFocus"
-                                              RemoveButtonClicked="EquationTextBox_RemoveButtonClicked"
-                                              KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked">
+                                              RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
                        <controls:EquationTextBox.ColorChooserFlyout>
                            <Flyout x:Name="ColorChooserFlyout"
                                    x:Uid="ColorChooserFlyout"
@@ -70,35 +64,5 @@
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
-        <Button Grid.Row="1"
-                MinHeight="44"
-                Margin="2,0,2,1"
-                Padding="0"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch"
-                HorizontalContentAlignment="Stretch"
-                VerticalContentAlignment="Stretch"
-                Style="{ThemeResource CaptionButtonStyle}"
-                FontSize="14"
-                FontWeight="Normal"
-                Click="AddEquationButton_Click">
-            <Button.Content>
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto"/>
-                        <ColumnDefinition Width="1*"/>
-                    </Grid.ColumnDefinitions>
-
-                    <FontIcon MinWidth="44"
-                              FontFamily="{StaticResource SymbolThemeFontFamily}"
-                              Glyph="&#xE710;"/>
-
-                    <TextBlock x:Uid="EquationInputButtonPlaceholder"
-                               Grid.Column="1"
-                               Margin="8,0,0,0"
-                               VerticalAlignment="Center"/>
-                </Grid>
-            </Button.Content>
-        </Button>
    </Grid>
 </UserControl>
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.cpp
@@ -3,6 +3,7 @@

 #include "pch.h"
 #include "EquationInputArea.xaml.h"
+#include "Utils/VisualTree.h"

 using namespace CalculatorApp;
 using namespace CalculatorApp::Common;
@@ -21,6 +22,7 @@ using namespace Windows::UI::Xaml::Controls;
 using namespace Windows::UI::Xaml::Controls::Primitives;
 using namespace Windows::UI::Xaml::Input;
 using namespace GraphControl;
+using namespace Calculator::Utils;

 namespace
 {
@@ -31,6 +33,7 @@ EquationInputArea::EquationInputArea()
    : m_lastLineColorIndex{ -1 }
    , m_AvailableColors{ ref new Vector<SolidColorBrush ^>() }
    , m_accessibilitySettings{ ref new AccessibilitySettings() }
+    , m_equationToFocus{ nullptr }
 {
    m_accessibilitySettings->HighContrastChanged +=
        ref new TypedEventHandler<AccessibilitySettings ^, Object ^>(this, &EquationInputArea::OnHighContrastChanged);
@@ -56,14 +59,15 @@ void EquationInputArea::OnEquationsPropertyChanged()
    }
 }

-void EquationInputArea::AddEquationButton_Click(Object ^ sender, RoutedEventArgs ^ e)
-{
-    AddNewEquation();
-}
-
 void EquationInputArea::AddNewEquation()
 {
    auto eq = ref new EquationViewModel(ref new Equation());
+    eq->IsLastItemInList = true;
+
+    if (Equations->Size > 0)
+    {
+        Equations->GetAt(Equations->Size - 1)->IsLastItemInList = false;
+    }

    m_lastLineColorIndex = (m_lastLineColorIndex + 1) % AvailableColors->Size;

@@ -71,7 +75,7 @@ void EquationInputArea::AddNewEquation()
    eq->IsLineEnabled = true;
    eq->FunctionLabelIndex = ++m_lastFunctionLabelIndex;
    Equations->Append(eq);
-    EquationInputList->ScrollIntoView(eq);
+    m_equationToFocus = eq;
 }

 void EquationInputArea::InputTextBox_GotFocus(Object ^ sender, RoutedEventArgs ^ e)
@@ -84,20 +88,65 @@ void EquationInputArea::InputTextBox_LostFocus(Object ^ sender, RoutedEventArgs
    KeyboardShortcutManager::HonorShortcuts(true);
 }

-void EquationInputArea::InputTextBox_Submitted(Object ^ sender, RoutedEventArgs ^ e)
+void EquationInputArea::InputTextBox_Submitted(Object ^ sender, EquationSubmissionSource source)
 {
    auto tb = static_cast<EquationTextBox ^>(sender);
-    auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
-
-    // eq can be null if the equation has been removed
-    if (eq != nullptr)
+    if (tb == nullptr)
    {
-        eq->Expression = tb->GetEquationText();
+        return;
+    }
+    auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
+    if (eq == nullptr)
+    {
+        return;
    }

-    if (tb->HasFocus)
+    auto expressionText = tb->GetEquationText();
+    if (source == EquationSubmissionSource::FOCUS_LOST && eq->Expression == expressionText)
    {
-        FocusManager::TryMoveFocus(::FocusNavigationDirection::Left);
+        // The expression didn't change.
+        return;
+    }
+
+    eq->Expression = expressionText;
+
+    if (source == EquationSubmissionSource::ENTER_KEY || eq->Expression != nullptr && eq->Expression->Length() > 0)
+    {
+        unsigned int index = 0;
+        if (Equations->IndexOf(eq, &index) && index == Equations->Size - 1)
+        {
+            // If it's the last equation of the list
+            AddNewEquation();
+        }
+        else
+        {
+            auto nextEquation = Equations->GetAt(index + 1);
+            FocusEquationTextBox(nextEquation);
+        }
+    }
+}
+
+void EquationInputArea::FocusEquationTextBox(EquationViewModel ^ equation)
+{
+    auto nextContainer = EquationInputList->ContainerFromItem(equation);
+    if (nextContainer == nullptr)
+    {
+        return;
+    }
+    auto listviewItem = dynamic_cast<ListViewItem ^>(nextContainer);
+    if (listviewItem == nullptr)
+    {
+        return;
+    }
+    auto equationInput = VisualTree::FindDescendantByName(nextContainer, "EquationInputButton");
+    if (equationInput == nullptr)
+    {
+        return;
+    }
+    auto equationTextBox = dynamic_cast<EquationTextBox ^>(equationInput);
+    if (equationTextBox != nullptr)
+    {
+        equationTextBox->FocusTextBox();
    }
 }

@@ -113,6 +162,10 @@ void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object ^ sender, Rou
            m_lastFunctionLabelIndex--;
        }

+        if (index == Equations->Size - 1 && Equations->Size > 1)
+        {
+            Equations->GetAt(Equations->Size - 2)->IsLastItemInList = true;
+        }
        Equations->RemoveAt(index);
    }
 }
@@ -124,7 +177,7 @@ void EquationInputArea::EquationTextBox_KeyGraphFeaturesButtonClicked(Object ^ s
    // ensure the equation has been submitted before trying to get key graph features out of it
    if (tb->HasFocus)
    {
-        EquationInputArea::InputTextBox_Submitted(sender, e);
+        EquationInputArea::InputTextBox_Submitted(sender, EquationSubmissionSource::FOCUS_LOST);
    }

    auto eq = static_cast<EquationViewModel ^>(tb->DataContext);
@@ -143,10 +196,15 @@ void EquationInputArea::EquationTextBox_EquationButtonClicked(Object ^ sender, R
 void EquationInputArea::EquationTextBoxLoaded(Object ^ sender, RoutedEventArgs ^ e)
 {
    auto tb = static_cast<EquationTextBox ^>(sender);
-    auto eq = static_cast<EquationViewModel ^>(tb->DataContext);

    auto colorChooser = static_cast<EquationStylePanelControl ^>(tb->ColorChooserFlyout->Content);
    colorChooser->AvailableColors = AvailableColors;
+
+    if (tb->DataContext == m_equationToFocus)
+    {
+        m_equationToFocus = nullptr;
+        tb->FocusTextBox();
+    }
 }

 void EquationInputArea::OnHighContrastChanged(AccessibilitySettings ^ sender, Object ^ args)
--- a/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
+++ b/src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml.h
@@ -29,23 +29,25 @@ namespace CalculatorApp
        void OnPropertyChanged(Platform::String^ propertyName);
        void OnEquationsPropertyChanged();

-        void AddEquationButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
        void AddNewEquation();

        void InputTextBox_GotFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
        void InputTextBox_LostFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
-        void InputTextBox_Submitted(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void InputTextBox_Submitted(Platform::Object ^ sender, CalculatorApp::Controls::EquationSubmissionSource e);

        void OnHighContrastChanged(Windows::UI::ViewManagement::AccessibilitySettings ^ sender, Platform::Object ^ args);
        void ReloadAvailableColors(bool isHighContrast);
+        void FocusEquationTextBox(ViewModel::EquationViewModel ^ equation);
+
+        void EquationTextBox_RemoveButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void EquationTextBox_KeyGraphFeaturesButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void EquationTextBox_EquationButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        void EquationTextBoxLoaded(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);

    private:
        Windows::UI::ViewManagement::AccessibilitySettings ^ m_accessibilitySettings;
        int m_lastLineColorIndex;
        int m_lastFunctionLabelIndex;
-        void EquationTextBox_RemoveButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
-        void EquationTextBox_KeyGraphFeaturesButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
-        void EquationTextBox_EquationButtonClicked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
-        void EquationTextBoxLoaded(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
+        ViewModel::EquationViewModel ^ m_equationToFocus;
    };
 }