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

Fix styling bugs in graph settings and style panel (#1202)

Browse Source
This commit is contained in:
Pepe Rivera
2020-05-08 12:14:01 -07:00
committed by GitHub
parent 7b4ff49df8
commit 66b64afd75
6 changed files with 94 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Calculator/App.xaml
View File

@@ -85,19 +85,6 @@
<SolidColorBrush x:Key="EquationBrush13" Color="#B0896D"/>
<SolidColorBrush x:Key="EquationBrush14" Color="#FFFFFF"/>
<SolidColorBrush x:Key="DividerBrush" Color="#60FFFFFF"/>
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}"
TargetType="TextBox">
<Setter Property="BorderBrush" Value="#50ffffff"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<Thickness x:Key="HighContrastThicknessTop">0,0,0,0</Thickness>
@@ -177,18 +164,6 @@
<SolidColorBrush x:Key="EquationBrush13" Color="#FF8E562E"/>
<SolidColorBrush x:Key="EquationBrush14" Color="#FF000000"/>
<SolidColorBrush x:Key="DividerBrush" Color="#33000000"/>
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}"
TargetType="TextBox">
<Setter Property="BorderBrush" Value="#70000000"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<Thickness x:Key="HighContrastThicknessTop">0,1,0,0</Thickness>
@@ -224,25 +199,6 @@
<SolidColorBrush x:Key="EquationBrush3" Color="{ThemeResource SystemColorHotlightColor}"/>
<SolidColorBrush x:Key="EquationBrush4" Color="{ThemeResource SystemColorWindowTextColor}"/>
<SolidColorBrush x:Key="DividerBrush" Color="Transparent"/>
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="Red"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="{StaticResource SystemColorWindowTextColor}"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{StaticResource SystemColorWindowColor}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/>
<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="MinWidth" Value="30"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
@@ -1817,24 +1773,6 @@
</Setter>
</Style>
<Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/>
<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="MinWidth" Value="30"/>
</Style>
<Style x:Key="VariableTextErrorBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}"
TargetType="TextBox">
<Setter Property="BorderBrush" Value="{ThemeResource GraphSettingsErrorBorderBrush}"/>
<Setter Property="Background" Value="{ThemeResource GraphSettingsErrorBackgroundBrush}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

18
src/Calculator/EquationStylePanelControl.xaml
View File

@@ -6,6 +6,11 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel>
<TextBlock x:Uid="LineOptionsHeading"
Margin="8,0,0,16"
FontSize="20"
FontWeight="Medium"
AutomationProperties.HeadingLevel="Level2"/>
<GridView x:Name="ColorChooser"
ItemsSource="{x:Bind AvailableColors}"
Loaded="ColorChooserLoaded"
@@ -92,14 +97,17 @@
</GridView>
<ComboBox x:Name="StyleChooserBox"
x:Uid="StyleChooserBox"
MinWidth="200"
Margin="8,0"
Foreground="{ThemeResource AppControlPageTextBaseHighColorBrush}"
Loaded="StyleChooserBox_Loaded"
SelectedItem="{x:Bind SelectedStyle}"
SelectionChanged="StyleChooserBox_SelectionChanged"
Visibility="Visible"
IsEnabled="{x:Bind EnableLineStylePicker}">
IsEnabled="{x:Bind EnableLineStylePicker, Mode=OneWay}">
<ComboBox.Header>
<TextBlock x:Uid="StyleChooserBoxHeading" Margin="0,0,8,8"/>
</ComboBox.Header>
<ComboBox.ItemTemplate>
<!-- Set x:DataType to be Platform::Object so that we can pass it to the x:Bind function directly since we cannot pass an enum in c++/cx -->
<DataTemplate x:DataType="x:Object">
@@ -107,8 +115,10 @@
Height="20"
MaxWidth="200"
AutomationProperties.Name="{x:Bind local:EquationStylePanelControl.GetLineAutomationName((x:Object))}">
<Line VerticalAlignment="Center"
Stroke="{ThemeResource AppControlPageTextBaseHighColorBrush}"
<Line x:Name="LineItem"
VerticalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
StrokeThickness="2.5"
StrokeDashArray="{x:Bind local:EquationStylePanelControl.GetLinePattern((x:Object))}"
X1="0"

8
src/Calculator/Resources/en-US/Resources.resw
View File

@@ -3951,7 +3951,7 @@
<value>Color</value>
<comment>Label for the Line Color section of the style picker</comment>
</data>
<data name="StyleChooserBox.Header" xml:space="preserve">
<data name="StyleChooserBoxHeading.Text" xml:space="preserve">
<value>Style</value>
<comment>Label for the Line Style section of the style picker</comment>
</data>
@@ -4435,10 +4435,14 @@
<value>Variable options</value>
<comment>Screen reader prompt for the variable settings button</comment>
</data>
<data name="LineThicknessBox.Header" xml:space="preserve">
<data name="LineThicknessBoxHeading.Text" xml:space="preserve">
<value>Line Thickness</value>
<comment>Heading for the Graph Options flyout in Graphing mode.</comment>
</data>
<data name="LineOptionsHeading.Text" xml:space="preserve">
<value>Line Options</value>
<comment>Heading for the equation style flyout in Graphing mode.</comment>
</data>
<data name="SmallLineWidthAutomationName" xml:space="preserve">
<value>Small Line Width</value>
<comment>Automation name for line width setting</comment>

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

@@ -23,21 +23,67 @@
Tapped="VariableAreaTapped">
<Grid.Resources>
<ResourceDictionary>
<Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/>
<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="MinWidth" Value="30"/>
</Style>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}"
TargetType="TextBox">
<Setter Property="BorderBrush" Value="#50ffffff"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle"
BasedOn="{StaticResource VariableTextBoxStyle}"
TargetType="TextBox">
<Setter Property="BorderBrush" Value="#70000000"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{StaticResource SystemColorButtonTextColor}"/>
<SolidColorBrush x:Key="SliderLegendBrush" Color="{StaticResource SystemColorWindowTextColor}"/>
<Style x:Key="VariableContainerStyle" TargetType="Border">
<Setter Property="Background" Value="{StaticResource SystemColorWindowColor}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
</Style>
<Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="1,0,0,0"/>
<Setter Property="Padding" Value="2,6,2,2"/>
<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="MinWidth" Value="30"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
@@ -801,7 +847,6 @@
DataContext="{x:Bind Mode=OneWay}"
DataContextChanged="EquationTextBox_DataContextChanged"
EquationButtonClicked="EquationTextBox_EquationButtonClicked"
IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
EquationButtonForegroundColor ="{x:Bind local:EquationInputArea.GetForegroundColor(LineColor), Mode=OneWay}"
@@ -811,6 +856,7 @@
GotFocus="EquationTextBox_GotFocus"
HasError="{x:Bind GraphEquation.HasGraphError, Mode=OneWay}"
IsAddEquationMode="{x:Bind IsLastItemInList, Mode=OneWay}"
IsEquationLineDisabled="{x:Bind IsLineEnabled, Converter={StaticResource BooleanNegationConverter}, Mode=OneWay}"
KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked"
Loaded="EquationTextBox_Loaded"
LostFocus="EquationTextBox_LostFocus"

52
src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml
View File

@@ -9,6 +9,21 @@
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="#33EB5757"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="#FFEB5757"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="GraphSettingsErrorBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="GraphSettingsErrorBorderBrush" Color="Red"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<Style x:Key="TrigUnitsRadioButtonStyle" TargetType="RadioButton">
<Setter Property="MinHeight" Value="38"/>
<Setter Property="MinWidth" Value="90"/>
@@ -72,28 +87,16 @@
<Setter Property="FontWeight" Value="Medium"/>
</Style>
<Style x:Key="ErrorTextBoxStyle" TargetType="TextBox">
<Setter Property="BorderBrush" Value="{ThemeResource GraphSettingsErrorBorderBrush}"/>
<Setter Property="Background" Value="{ThemeResource GraphSettingsErrorBackgroundBrush}"/>
</Style>
<DataTemplate x:Key="XYTextBoxHeaderTemplate" x:DataType="x:String">
<TextBlock FontSize="14" Text="{x:Bind}"/>
</DataTemplate>
<converters:BooleanNegationConverter x:Key="BooleanNegationConverter"/>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
<SolidColorBrush x:Key="TextControlForegroundFocused" Color="{StaticResource SystemColorButtonTextColor}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</UserControl.Resources>
@@ -132,7 +135,6 @@
<TextBox x:Name="SettingsXMin"
x:Uid="GraphSettingsXMin"
MaxWidth="160"
HorizontalAlignment="Left"
Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMinError), Mode=OneWay}"
HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -141,17 +143,14 @@
x:Uid="GraphSettingsXMax"
Grid.Column="2"
MaxWidth="160"
HorizontalAlignment="Left"
Style="{x:Bind SelectTextBoxStyle(ViewModel.XError, ViewModel.XMaxError), Mode=OneWay}"
HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
Text="{x:Bind ViewModel.XMax, Mode=TwoWay}"/>
<TextBox x:Name="SettingsYMin"
x:Uid="GraphSettingsYMin"
Grid.Row="2"
MaxWidth="160"
HorizontalAlignment="Left"
Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMinError), Mode=OneWay}"
HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -161,7 +160,6 @@
Grid.Row="2"
Grid.Column="2"
MaxWidth="160"
HorizontalAlignment="Left"
Style="{x:Bind SelectTextBoxStyle(ViewModel.YError, ViewModel.YMaxError), Mode=OneWay}"
HeaderTemplate="{StaticResource XYTextBoxHeaderTemplate}"
PreviewKeyDown="GridSettingsTextBox_PreviewKeyDown"
@@ -190,11 +188,11 @@
IsChecked="{x:Bind ViewModel.TrigModeGradians, Mode=TwoWay}"/>
</StackPanel>
<ComboBox x:Name="LineThicknessBox"
x:Uid="LineThicknessBox"
MinWidth="200"
Margin="0,12,0,0"
SelectedItem="{x:Bind ViewModel.Graph.LineWidth, Mode=TwoWay}">
<TextBlock x:Uid="LineThicknessBoxHeading"
Margin="0,16,0,6"
Style="{StaticResource SubTitleTextBoxStyle}"
AutomationProperties.HeadingLevel="Level2"/>
<ComboBox MinWidth="200" SelectedItem="{x:Bind ViewModel.Graph.LineWidth, Mode=TwoWay}">
<ComboBox.Items>
<x:Double>1.0</x:Double>
<x:Double>2.0</x:Double>

4
src/Calculator/Views/GraphingCalculator/GraphingSettings.xaml.cpp
View File

@@ -39,11 +39,11 @@ Style ^ GraphingSettings::SelectTextBoxStyle(bool incorrectRange, bool error)
{
if (incorrectRange || error)
{
return static_cast<::Style ^>(Application::Current->Resources->Lookup(L"VariableTextErrorBoxStyle"));
return static_cast<::Style ^>(this->Resources->Lookup(L"ErrorTextBoxStyle"));
}
else
{
return static_cast<::Style ^>(Application::Current->Resources->Lookup(L"ThemedVariableTextBoxStyle"));
return nullptr;
}
}