Update color picker (#668)

src/Calculator/Views/GraphingCalculator/EquationInputArea.xaml

@@ -3,80 +3,59 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:controls="using:CalculatorApp.Controls"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="using:CalculatorApp"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vm="using:CalculatorApp.ViewModel"
              d:DesignHeight="300"
              d:DesignWidth="400"
              mc:Ignorable="d">
 
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>
+    <ListView x:Name="EquationInputList"
+              VerticalContentAlignment="Top"
+              IsItemClickEnabled="False"
+              ItemsSource="{x:Bind Equations}"
+              SelectionMode="None">
 
-        <ListView x:Name="EquationInputList"
-                  Grid.Row="0"
-                  Margin="0,8,0,0"
-                  IsItemClickEnabled="False"
-                  ItemsSource="{x:Bind Equations}"
-                  SelectionMode="None">
+        <ListView.ItemContainerStyle>
+            <Style TargetType="ListViewItem">
+                <Setter Property="IsTabStop" Value="False"/>
+                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                <Setter Property="Padding" Value="0"/>
+                <Setter Property="Margin" Value="0,0,0,2"/>
+            </Style>
+        </ListView.ItemContainerStyle>
 
-            <ListView.ItemContainerStyle>
-                <Style TargetType="ListViewItem">
-                    <Setter Property="IsTabStop" Value="False"/>
-                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
-                    <Setter Property="Padding" Value="0"/>
-                    <Setter Property="Margin" Value="0,0,0,2"/>
-                </Style>
-            </ListView.ItemContainerStyle>
-
-            <ListView.ItemTemplate>
-                <DataTemplate x:DataType="vm:EquationViewModel">
-                    <Grid>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition/>
-                        </Grid.ColumnDefinitions>
-                        <Grid.Resources>
-                            <SolidColorBrush x:Key="LineColorBrush" Color="{x:Bind LineColor, Mode=OneWay}"/>
-                        </Grid.Resources>
-
-                        <controls:EquationTextBox x:Uid="EquationInputButton"
-                                                  Grid.Column="1"
-                                                  Margin="0,0,3,0"
-                                                  Style="{StaticResource EquationTextBoxStyle}"
-                                                  EquationSubmitted="InputTextBox_Submitted"
-                                                  GotFocus="InputTextBox_GotFocus"
-                                                  LostFocus="InputTextBox_LostFocus"
-                                                  RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
-                            <controls:EquationTextBox.EquationColor>
-                                <SolidColorBrush x:Name="EquationLineColor" Color="{x:Bind LineColor, Mode=OneWay}"/>
-                            </controls:EquationTextBox.EquationColor>
-                            <controls:EquationTextBox.KeyGraphFeaturesContent>
-                                <StackPanel x:Name="KeyGraphFeaturesGrid" Visibility="{x:Bind KeyGraphFeaturesVisibility, Mode=OneWay}">
-                                    <TextBlock Text="Key Graph Features"/>
-                                    <TextBlock Text="{x:Bind Expression, Mode=OneWay}"/>
-                                </StackPanel>
-                            </controls:EquationTextBox.KeyGraphFeaturesContent>
-                            <controls:EquationTextBox.ColorChooserFlyout>
-                                <Flyout x:Name="ColorChooserFlyout"
-                                        x:Uid="ColorChooserFlyout"
-                                        Placement="Bottom">
-                                    <StackPanel>
-                                        <ColorPicker x:Name="EquationColorPicker" Color="{x:Bind LineColor, Mode=TwoWay}"/>
-                                    </StackPanel>
-                                </Flyout>
-                            </controls:EquationTextBox.ColorChooserFlyout>
-                        </controls:EquationTextBox>
-
-                    </Grid>
-                </DataTemplate>
-            </ListView.ItemTemplate>
-        </ListView>
-
-        <Button Grid.Row="1"
-                Margin="4"
-                Click="AddEquationButton_Click"
-                Content="+"/>
-    </Grid>
+        <ListView.ItemTemplate>
+            <DataTemplate x:DataType="vm:EquationViewModel">
+                <controls:EquationTextBox x:Uid="EquationInputButton"
+                                          Margin="0,0,3,0"
+                                          Style="{StaticResource EquationTextBoxStyle}"
+                                          EquationColor="{x:Bind LineColor, Mode=OneWay}"
+                                          EquationSubmitted="InputTextBox_Submitted"
+                                          GotFocus="InputTextBox_GotFocus"
+                                          Loaded="EquationTextBoxLoaded"
+                                          LostFocus="InputTextBox_LostFocus"
+                                          RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
+                    <controls:EquationTextBox.KeyGraphFeaturesContent>
+                        <StackPanel x:Name="KeyGraphFeaturesGrid" Visibility="{x:Bind KeyGraphFeaturesVisibility, Mode=OneWay}">
+                            <TextBlock Text="Key Graph Features"/>
+                            <TextBlock Text="{x:Bind Expression, Mode=OneWay}"/>
+                        </StackPanel>
+                    </controls:EquationTextBox.KeyGraphFeaturesContent>
+                    <controls:EquationTextBox.ColorChooserFlyout>
+                        <Flyout x:Name="ColorChooserFlyout"
+                                x:Uid="ColorChooserFlyout"
+                                Placement="Bottom">
+                            <local:EquationStylePanelControl SelectedColor="{x:Bind LineColor, Mode=TwoWay}"/>
+                        </Flyout>
+                    </controls:EquationTextBox.ColorChooserFlyout>
+                </controls:EquationTextBox>
+            </DataTemplate>
+        </ListView.ItemTemplate>
+        <ListView.Footer>
+            <Button Margin="4"
+                    Click="AddEquationButton_Click"
+                    Content="+"/>
+        </ListView.Footer>
+    </ListView>
 </UserControl>

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

@@ -1,7 +1,5 @@
 #include "pch.h"
 #include "EquationInputArea.xaml.h"
-#include "CalcViewModel/Common/KeyboardShortcutManager.h"
-#include "Controls/EquationTextBox.h"
 
 using namespace CalculatorApp;
 using namespace CalculatorApp::Common;
@@ -13,25 +11,14 @@ using namespace Windows::System;
 using namespace Windows::UI;
 using namespace Windows::UI::ViewManagement;
 using namespace Windows::UI::Xaml;
+using namespace Windows::UI::Xaml::Media;
 using namespace Windows::UI::Xaml::Controls;
 using namespace Windows::UI::Xaml::Controls::Primitives;
 using namespace Windows::UI::Xaml::Input;
+using namespace GraphControl;
 
 namespace
 {
-    const Color accentColor = (ref new UISettings())->GetColorValue(UIColorType::Accent);
-    const Color lineColors[] = {
-        accentColor,
-        Colors::DarkOrange,
-        Colors::MediumPurple,
-        Colors::ForestGreen,
-        Colors::BlueViolet,
-        Colors::DarkRed,
-        Colors::LightGoldenrodYellow,
-        Colors::DarkOliveGreen
-    };
-    const size_t lineColorsSize = std::size(lineColors);
-
     StringReference EquationsPropertyName(L"Equations");
 }
 
@@ -65,8 +52,6 @@ void EquationInputArea::AddEquationButton_Click(Object^ sender, RoutedEventArgs^
 void EquationInputArea::AddNewEquation()
 {
     auto eq = ref new EquationViewModel();
-    eq->LineColor = GetNextLineColor();
-
     Equations->Append(eq);
 }
 
@@ -85,15 +70,9 @@ void EquationInputArea::InputTextBox_Submitted(Object ^ sender, RoutedEventArgs
     auto tb = static_cast<EquationTextBox^>(sender);
     auto eq = static_cast<EquationViewModel^>(tb->DataContext);
     eq->Expression = tb->GetEquationText();
+    FocusManager::TryMoveFocus(::FocusNavigationDirection::Left);
 }
 
-Color EquationInputArea::GetNextLineColor()
-{
-    m_lastLineColorIndex = (m_lastLineColorIndex + 1) % lineColorsSize;
-    return lineColors[m_lastLineColorIndex];
-}
-
-
 void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object^ sender, RoutedEventArgs^ e)
 {
     auto tb = static_cast<EquationTextBox^>(sender);
@@ -104,3 +83,15 @@ void EquationInputArea::EquationTextBox_RemoveButtonClicked(Object^ sender, Rout
         Equations->RemoveAt(index);
     }
 }
+
+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);
+
+    m_lastLineColorIndex = (m_lastLineColorIndex + 1) % colorChooser->AvailableColors->Size;
+
+    eq->LineColor = colorChooser->AvailableColors->GetAt(m_lastLineColorIndex);
+}

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

@@ -3,6 +3,9 @@
 #include "Views/GraphingCalculator/EquationInputArea.g.h"
 #include "CalcViewModel/Common/Utils.h"
 #include "CalcViewModel/GraphingCalculator/EquationViewModel.h"
+#include "EquationStylePanelControl.xaml.h"
+#include "CalcViewModel/Common/KeyboardShortcutManager.h"
+#include "Controls/EquationTextBox.h"
 
 namespace CalculatorApp
 {
@@ -25,10 +28,9 @@ namespace CalculatorApp
         void InputTextBox_LostFocus(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
         void InputTextBox_Submitted(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
 
-        Windows::UI::Color GetNextLineColor();
-
     private:
         int m_lastLineColorIndex;
         void EquationTextBox_RemoveButtonClicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
+        void EquationTextBoxLoaded(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e);
     };
 }

src/Calculator/Views/GraphingCalculator/GraphingCalculator.xaml

@@ -365,18 +365,23 @@
             <Grid.RowDefinitions>
                 <RowDefinition Height="5*"/>
                 <RowDefinition Height="3*"/>
-                <RowDefinition Height="3*"/>
             </Grid.RowDefinitions>
 
-            <StackPanel>
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="1*"/>
+                </Grid.RowDefinitions>
                 <Button x:Name="Share" Click="OnShareClick">
                     <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE72D;"/>
-	            </Button>
-                <local:EquationInputArea Grid.Row="0" Equations="{x:Bind ViewModel.Equations}"/>
-            </StackPanel>
+                </Button>
+                <local:EquationInputArea Grid.Row="1"
+                                         Margin="0,8,0,0"
+                                         Equations="{x:Bind ViewModel.Equations}"/>
+            </Grid>
 
             <Grid x:Name="ButtonContainerGrid"
-                  Grid.Row="2"
+                  Grid.Row="1"
                   Margin="3,0,3,3"
                   UseLayoutRounding="False">
                 <Grid.RowDefinitions>

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

@@ -92,7 +92,7 @@ void GraphingCalculator::OnDataRequested(DataTransferManager^ sender, DataReques
         for (unsigned i = 0; i < equations->Size; i++)
         {
             auto expression = equations->GetAt(i)->Expression->Data();
-            auto color = equations->GetAt(i)->LineColor;
+            auto color = equations->GetAt(i)->LineColor->Color;
 
             if (equations->GetAt(i)->Expression->Length() == 0)
             {
@@ -204,11 +204,11 @@ void GraphingCalculator::SubmitTextbox(TextBox^ sender)
     }
     else if (sender->Name == "MaxTextBox")
     {
-        variableViewModel->Step = validateDouble(sender->Text, variableViewModel->Step);
+        variableViewModel->Max = validateDouble(sender->Text, variableViewModel->Max);
     }
     else if (sender->Name == "StepTextBox")
     {
-        variableViewModel->Max = validateDouble(sender->Text, variableViewModel->Max);
+        variableViewModel->Step = validateDouble(sender->Text, variableViewModel->Step);
     }
 }