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

Do not collapse Update Rates button in a transient state (#619)

Browse Source 
* Do not collapse Update Rates button in a transient state

* Address PR feedback and add animation to everything affected by IsCurrencyLoadingVisible
This commit is contained in:
Zach Herman 2019-09-26 11:38:40 -07:00 committed by Pepe Rivera
parent 80912a33d0
commit f6f864c88c
2 changed files with 90 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/Calculator/Views/UnitConverter.xaml
View File

@ -260,14 +260,6 @@
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="TimestampFadeInAnimation">
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="CurrencyTimestampTextBlock"
Storyboard.TargetProperty="Opacity"
To="1"/>
</Storyboard>
<MenuFlyout x:Key="CalculationResultContextMenu">
<MenuFlyoutItem x:Name="CopyMenuItem"
x:Uid="CopyMenuItem"
@ -448,14 +440,85 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CurrencyLoadingStates">
<VisualStateGroup.Transitions>
<VisualTransition From="CurrencyLoadingState" To="CurrencyLoadedState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Units1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Value1Container" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Units2" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Value2Container" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="CurrencyRatioEqualityBlock"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="CurrencyTimestampTextBlock"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="Units1"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="Value1Container"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="Units2"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation Duration="0:0:1"
From="0"
Storyboard.TargetName="Value2Container"
Storyboard.TargetProperty="Opacity"
To="1"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="CurrencyLoadingState">
<VisualState.Setters>
<Setter Target="CurrencyRatioEqualityBlock.Opacity" Value="0"/>
<Setter Target="CurrencyTimestampTextBlock.Opacity" Value="0"/>
<Setter Target="CurrencyLoadingGrid.Visibility" Value="Visible"/>
<Setter Target="Units1.Visibility" Value="Collapsed"/>
<Setter Target="Value1Container.Visibility" Value="Collapsed"/>
<Setter Target="Units2.Visibility" Value="Collapsed"/>
<Setter Target="Value2Container.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CurrencyLoadedState">
<VisualState.Setters>
<Setter Target="CurrencyRatioEqualityBlock.Opacity" Value="1"/>
<Setter Target="CurrencyTimestampTextBlock.Opacity" Value="1"/>
<Setter Target="CurrencyLoadingGrid.Visibility" Value="Collapsed"/>
<Setter Target="Units1.Visibility" Value="Visible"/>
<Setter Target="Value1Container.Visibility" Value="Visible"/>
<Setter Target="Units2.Visibility" Value="Visible"/>
<Setter Target="Value2Container.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="CurrencyLoadingGrid"
Grid.Row="1"
Grid.RowSpan="5"
Grid.Column="0"
Grid.ColumnSpan="4"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}">
Grid.ColumnSpan="4">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="7*"/>
@ -475,8 +538,7 @@
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
Style="{ThemeResource ValueContainerStyle}"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
Style="{ThemeResource ValueContainerStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
@ -520,15 +582,13 @@
ItemTemplate="{StaticResource UnitTemplate}"
ItemsSource="{Binding Units, Converter={StaticResource AlwaysSelectedConverter}}"
SelectedItem="{Binding Unit1, Mode=TwoWay, Converter={StaticResource ValidSelectedItemConverter}}"
TabIndex="2"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
TabIndex="2"/>
<Grid x:Name="Value2Container"
Grid.Row="3"
Grid.Column="1"
HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
Style="{ThemeResource ValueContainerStyle}"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
Style="{ThemeResource ValueContainerStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
@ -572,8 +632,7 @@
ItemTemplate="{StaticResource UnitTemplate}"
ItemsSource="{Binding Units, Converter={StaticResource AlwaysSelectedConverter}}"
SelectedItem="{Binding Unit2, Mode=TwoWay, Converter={StaticResource ValidSelectedItemConverter}}"
TabIndex="4"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}"/>
TabIndex="4"/>
<StackPanel x:Name="SupplementaryResultsPanelInGrid"
Grid.Row="5"
@ -583,8 +642,7 @@
HorizontalAlignment="{x:Bind FlowDirectionHorizontalAlignment}"
VerticalAlignment="Top"
FlowDirection="{x:Bind LayoutDirection}"
SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged"
Visibility="{x:Bind Model.IsCurrencyLoadingVisible, Mode=OneWay, Converter={StaticResource BooleanToVisibilityNegationConverter}}">
SizeChanged="SupplementaryResultsPanelInGrid_SizeChanged">
<local:SupplementaryResults x:Name="SupplementaryResults"
HorizontalAlignment="Left"
VerticalAlignment="Center"

10
src/Calculator/Views/UnitConverter.xaml.cpp
View File

@ -290,6 +290,10 @@ void UnitConverter::SetDefaultFocus()
}
void UnitConverter::CurrencyRefreshButton_Click(_In_ Object ^ /*sender*/, _In_ RoutedEventArgs ^ /*e*/)
{
// If IsCurrencyLoadingVisible is true that means CurrencyRefreshButton_Click was recently called
// and is still executing. In this case there is no reason to process the click.
if (!Model->IsCurrencyLoadingVisible)
{
if (Model->NetworkBehavior == NetworkAccessBehavior::OptIn)
{
@ -298,6 +302,7 @@ void UnitConverter::CurrencyRefreshButton_Click(_In_ Object ^ /*sender*/, _In_ R
Model->RefreshCurrencyRatios();
}
}
void UnitConverter::OnDataContextChanged(_In_ FrameworkElement ^ sender, _In_ DataContextChangedEventArgs ^ args)
{
@ -320,15 +325,16 @@ void UnitConverter::OnIsDisplayVisibleChanged()
{
if (Model->IsCurrencyLoadingVisible)
{
VisualStateManager::GoToState(this, L"CurrencyLoadingState", false);
StartProgressRingWithDelay();
}
else
{
HideProgressRing();
if (m_isAnimationEnabled && Model->IsCurrencyCurrentCategory && !Model->CurrencyTimestamp->IsEmpty())
if (Model->IsCurrencyCurrentCategory && !Model->CurrencyTimestamp->IsEmpty())
{
TimestampFadeInAnimation->Begin();
VisualStateManager::GoToState(this, L"CurrencyLoadedState", m_isAnimationEnabled);
}
}
}