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

Make variable boxes collapsible on click (#916)

Browse Source 
* fix

* PR comments

* fix bug

Co-authored-by: Eric Wong <eriwong@microsoft.com>
This commit is contained in:
Pepe Rivera 2020-01-13 10:08:23 -08:00 committed by GitHub
parent 80e9b82bdc
commit 3d1f0e9440
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/pipelines/azure-pipelines.release.yaml
View File

@ -9,8 +9,8 @@ pr: none
variables: variables:
versionMajor: 10 versionMajor: 10
versionMinor: 1910 versionMinor: 1912
versionBuild: $[counter('10.1910.*', 0)] versionBuild: $[counter('10.1912.*', 0)]
versionPatch: 0 versionPatch: 0
name: '$(versionMajor).$(versionMinor).$(versionBuild).$(versionPatch)' name: '$(versionMajor).$(versionMinor).$(versionBuild).$(versionPatch)'

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

@ -17,19 +17,18 @@
<converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/> <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>
<DataTemplate x:Key="VariableDataTemplate" x:DataType="vm:VariableViewModel"> <DataTemplate x:Key="VariableDataTemplate" x:DataType="vm:VariableViewModel">
<Grid> <Grid DataContext="{x:Bind}" Tapped="VariableAreaTapped">
<Grid.Resources> <Grid.Resources>
<ResourceDictionary> <ResourceDictionary>
<Style x:Key="VariableTextBoxStyle" TargetType="TextBox"> <Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="10,0,0,0"/> <Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/> <Setter Property="Padding" Value="2,6,2,2"/>
<Setter Property="TextAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/>
<Setter Property="Background" Value="Transparent"/> <Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/> <Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="FontSize" Value="14"/> <Setter Property="FontSize" Value="14"/>
<Setter Property="InputScope" Value="Number"/> <Setter Property="InputScope" Value="Number"/>
<Setter Property="MaxWidth" Value="46"/>
<Setter Property="MinWidth" Value="30"/> <Setter Property="MinWidth" Value="30"/>
</Style> </Style>
@ -40,7 +39,7 @@
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/> <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/> <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
<Style x:Key="VariableContainerStyle" TargetType="Border"> <Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="#34000000"/> <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style> </Style>
<Style x:Key="ThemedVariableTextBoxStyle" <Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}" BasedOn="{StaticResource VariableTextBoxStyle}"
@ -54,7 +53,7 @@
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/> <SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/> <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
<Style x:Key="VariableContainerStyle" TargetType="Border"> <Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="#34ffffff"/> <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style> </Style>
<Style x:Key="ThemedVariableTextBoxStyle" <Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}" BasedOn="{StaticResource VariableTextBoxStyle}"
@ -74,87 +73,70 @@
<Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/> <Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
</Style> </Style>
<Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox"> <Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
<Setter Property="InputScope" Value="Number"/> <Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/>
<Setter Property="TextAlignment" Value="Center"/> <Setter Property="TextAlignment" Value="Center"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="InputScope" Value="Number"/> <Setter Property="InputScope" Value="Number"/>
<Setter Property="MaxWidth" Value="80"/> <Setter Property="MinWidth" Value="30"/>
<Setter Property="MinWidth" Value="40"/>
</Style> </Style>
</ResourceDictionary> </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries> </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary> </ResourceDictionary>
</Grid.Resources> </Grid.Resources>
<Border Margin="0,3" Style="{ThemeResource VariableContainerStyle}"> <Border Margin="0,3" Style="{ThemeResource VariableContainerStyle}">
<StackPanel Padding="12,0" DataContext="{x:Bind}"> <StackPanel Padding="12,0,12,6">
<Grid HorizontalAlignment="Stretch"> <Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock MinWidth="10" <TextBlock MinWidth="16"
Margin="0,4,0,0" Margin="8,8,0,0"
VerticalAlignment="Center" VerticalAlignment="Center"
FontWeight="SemiBold" FontSize="16"
FontStyle="Italic"
Text="{x:Bind Name}"/> Text="{x:Bind Name}"/>
<TextBlock Grid.Column="1"
MinWidth="16"
Margin="6,8,0,0"
VerticalAlignment="Center"
FontSize="16"
FontStyle="Italic"
Text="="/>
<TextBox x:Name="ValueTextBox" <TextBox x:Name="ValueTextBox"
Grid.Column="1" Grid.Column="2"
Margin="6,0,0,0"
Padding="0,10,0,0"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Center" VerticalAlignment="Center"
Style="{StaticResource ThemedVariableTextBoxStyle}" Style="{StaticResource ThemedVariableTextBoxStyle}"
FontStyle="Italic"
GotFocus="TextBoxGotFocus" GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown" KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus" LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Value, Mode=OneWay}"/> Text="{x:Bind Value, Mode=OneWay}">
<ToggleButton x:Uid="sliderOptionsButton" <TextBox.Resources>
Grid.Column="2"
Margin="0,0,-8,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Background="Transparent"
FontFamily="{StaticResource SymbolThemeFontFamily}"
Content="&#xE713;"
IsChecked="{x:Bind SliderSettingsVisible, Mode=TwoWay}">
<ToggleButton.Resources>
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource SystemAccentColor}"/>
<x:Double x:Key="TextControlThemeMinWidth">32</x:Double> <x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
</ToggleButton.Resources> </TextBox.Resources>
</ToggleButton> </TextBox>
</Grid>
<Grid Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center"
Foreground="{ThemeResource SliderLegendBrush}"
Text="{x:Bind Min, Mode=OneWay}"/>
<Slider Grid.Column="1"
Margin="8,0"
VerticalAlignment="Center"
Maximum="{x:Bind Max, Mode=TwoWay}"
Minimum="{x:Bind Min, Mode=TwoWay}"
StepFrequency="{x:Bind Step, Mode=TwoWay}"
Value="{x:Bind Value, Mode=TwoWay}"/>
<TextBlock Grid.Column="2"
VerticalAlignment="Center"
Foreground="{ThemeResource SliderLegendBrush}"
Text="{x:Bind Max, Mode=OneWay}"/>
</Grid> </Grid>
<Slider Grid.Column="1"
Margin="8,0,8,-6"
VerticalAlignment="Center"
Maximum="{x:Bind Max, Mode=TwoWay}"
Minimum="{x:Bind Min, Mode=TwoWay}"
StepFrequency="{x:Bind Step, Mode=TwoWay}"
Value="{x:Bind Value, Mode=TwoWay}"/>
<Grid Grid.Row="1" <Grid Grid.Row="1"
Padding="0,6,0,12" Padding="8,0,8,8"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
Visibility="{x:Bind SliderSettingsVisible, Mode=OneWay}"> Visibility="{x:Bind SliderSettingsVisible, Mode=OneWay}">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
@ -168,30 +150,36 @@
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock x:Uid="MinTextBlock" <TextBlock x:Uid="MinTextBlock"
Margin="0,4,0,0" Margin="0,12,4,0"
VerticalAlignment="Center"/> VerticalAlignment="Center"
FontSize="11"/>
<TextBox x:Name="MinTextBox" <TextBox x:Name="MinTextBox"
Grid.Column="1" Grid.Column="1"
MaxWidth="18"
Padding="2,16,2,2"
Style="{StaticResource ThemedVariableTextBoxStyle}" Style="{StaticResource ThemedVariableTextBoxStyle}"
FontSize="11"
GotFocus="TextBoxGotFocus" GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown" KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus" LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Min, Mode=OneWay}"/> Text="{x:Bind Min, Mode=OneWay}"/>
</Grid> </Grid>
<Grid Grid.Column="1" <Grid Grid.Column="1" HorizontalAlignment="Center">
Margin="4,0"
HorizontalAlignment="Center">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock x:Uid="StepTextBlock" <TextBlock x:Uid="StepTextBlock"
Margin="0,4,0,0" Margin="0,12,4,0"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center"/> VerticalAlignment="Center"
FontSize="11"/>
<TextBox x:Name="StepTextBox" <TextBox x:Name="StepTextBox"
Grid.Column="1" Grid.Column="1"
MaxWidth="18"
Padding="2,16,2,2"
Style="{StaticResource ThemedVariableTextBoxStyle}" Style="{StaticResource ThemedVariableTextBoxStyle}"
FontSize="11"
GotFocus="TextBoxGotFocus" GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown" KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus" LosingFocus="TextBoxLosingFocus"
@ -203,17 +191,26 @@
<ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TextBlock x:Uid="MaxTextBlock" <TextBlock x:Uid="MaxTextBlock"
Margin="0,4,0,0" Margin="0,12,4,0"
VerticalAlignment="Center"/> VerticalAlignment="Center"
FontSize="11"/>
<TextBox x:Name="MaxTextBox" <TextBox x:Name="MaxTextBox"
Grid.Column="1" Grid.Column="1"
MaxWidth="18"
Padding="2,16,2,2"
Style="{StaticResource ThemedVariableTextBoxStyle}" Style="{StaticResource ThemedVariableTextBoxStyle}"
FontSize="11"
GotFocus="TextBoxGotFocus" GotFocus="TextBoxGotFocus"
KeyDown="TextBoxKeyDown" KeyDown="TextBoxKeyDown"
LosingFocus="TextBoxLosingFocus" LosingFocus="TextBoxLosingFocus"
Text="{x:Bind Max, Mode=OneWay}"/> Text="{x:Bind Max, Mode=OneWay}"/>
</Grid> </Grid>
</Grid> </Grid>
<FontIcon Margin="0,6,0,0"
VerticalAlignment="Center"
FontFamily="{StaticResource CalculatorFontFamily}"
FontSize="9"
Glyph="{x:Bind local:EquationInputArea.GetChevronIcon(SliderSettingsVisible), Mode=OneWay}"/>
</StackPanel> </StackPanel>
</Border> </Border>
</Grid> </Grid>
@ -806,11 +803,10 @@
</DataTemplate> </DataTemplate>
</mux:ItemsRepeater.ItemTemplate> </mux:ItemsRepeater.ItemTemplate>
</mux:ItemsRepeater> </mux:ItemsRepeater>
<StackPanel Visibility="{x:Bind local:EquationInputArea.ManageEditVariablesButtonVisibility(Variables.Size), Mode=OneWay}">
<StackPanel Margin="12" Visibility="{x:Bind local:EquationInputArea.ManageEditVariablesButtonVisibility(Variables.Size), Mode=OneWay}"> <Rectangle Height="1"
<TextBlock x:Uid="VaiablesHeader" Margin="12"
Margin="0,6" Fill="#33000000"/>
FontWeight="SemiBold"/>
<mux:ItemsRepeater x:Name="VariableListView" <mux:ItemsRepeater x:Name="VariableListView"
ItemTemplate="{StaticResource VariableDataTemplate}" ItemTemplate="{StaticResource VariableDataTemplate}"
ItemsSource="{x:Bind Variables, Mode=OneWay}" ItemsSource="{x:Bind Variables, Mode=OneWay}"

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

@ -386,6 +386,26 @@ double EquationInputArea::validateDouble(String ^ value, double defaultValue)
return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible; return numberOfVariables == 0 ? ::Visibility::Collapsed : ::Visibility::Visible;
} }
String ^ EquationInputArea::GetChevronIcon(bool isCollapsed)
{
return isCollapsed ? L"\uE70E" : L"\uE70D";
}
void EquationInputArea::VariableAreaTapped(Object ^ sender, TappedRoutedEventArgs ^ e)
{
auto selectedVariableViewModel = static_cast<VariableViewModel ^>(static_cast<Grid ^>(sender)->DataContext);
selectedVariableViewModel->SliderSettingsVisible = !selectedVariableViewModel->SliderSettingsVisible;
// Collapse all other slider settings that are open
for (auto variableViewModel : Variables)
{
if (variableViewModel != selectedVariableViewModel)
{
variableViewModel->SliderSettingsVisible = false;
}
}
}
void EquationInputArea::EquationTextBox_EquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e) void EquationInputArea::EquationTextBox_EquationFormatRequested(Object ^ sender, MathRichEditBoxFormatRequest ^ e)
{ {
EquationFormatRequested(sender, e); EquationFormatRequested(sender, e);

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

@ -30,6 +30,8 @@ namespace CalculatorApp
public: public:
static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables); static Windows::UI::Xaml::Visibility ManageEditVariablesButtonVisibility(unsigned int numberOfVariables);
static Platform::String ^ GetChevronIcon(bool isCollapsed);
static Windows::UI::Xaml::Media::SolidColorBrush static Windows::UI::Xaml::Media::SolidColorBrush
^ ToSolidColorBrush(Windows::UI::Color color) { return ref new Windows::UI::Xaml::Media::SolidColorBrush(color); } ^ ToSolidColorBrush(Windows::UI::Color color) { return ref new Windows::UI::Xaml::Media::SolidColorBrush(color); }
@ -64,6 +66,7 @@ namespace CalculatorApp
int m_lastLineColorIndex; int m_lastLineColorIndex;
int m_lastFunctionLabelIndex; int m_lastFunctionLabelIndex;
ViewModel::EquationViewModel ^ m_equationToFocus; ViewModel::EquationViewModel ^ m_equationToFocus;
void VariableAreaTapped(Platform::Object ^ sender, Windows::UI::Xaml::Input::TappedRoutedEventArgs ^ e);
void EquationTextBox_EquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e); void EquationTextBox_EquationFormatRequested(Platform::Object ^ sender, CalculatorApp::Controls::MathRichEditBoxFormatRequest ^ e);
}; };
} }