Skip to content

Commit 8150c1a

Browse files
lukeblevinslukeblevins
committed
Add Lottie double pulse animation for newly-posted StatusCenter progress banners
1 parent 68b6a2e commit 8150c1a

File tree

6 files changed

+57
-27
lines changed

6 files changed

+57
-27
lines changed

‎Files/Assets/AnimatedVisuals/LottiePulseStatusCenter.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.5.7","fr":30,"ip":0,"op":60,"w":24,"h":24,"nm":"Comp 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"pointer","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12.3805,11.447,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.412,0.412,0.833],"y":[0.998,0.998,3.63]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[5,5,100]},{"i":{"x":[0.548,0.548,0.833],"y":[1.001,1.001,-2.565]},"o":{"x":[0.951,0.951,0.167],"y":[-0.004,-0.004,-3.006]},"t":28,"s":[8.3095,8.3095,100]},{"t":60.0000024438501,"s":[5,5,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[91.375,91.375],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.522,2.212],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[105.072,104.426],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":150.000006109625,"op":150.000006109625,"st":0,"bm":0,"hidden":0},{"ddd":0,"ind":2,"ty":4,"nm":"pulse","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[100]},{"t":31.0000012626559,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[12.3805,11.447,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[5,5,100]},{"t":31.0000012626559,"s":[25,25,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[91.375,91.375],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.47058823529411764,0.8431372549019608,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1.522,2.212],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[105.072,104.426],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150.000006109625,"st":0,"bm":0}],"markers":[]}

‎Files/Files.csproj

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@
370370
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
371371
</Content>
372372
<Content Include="Assets\Custom Glyphs\fluentui.ttf" />
373+
<Content Include="Assets\AnimatedVisuals\LottiePulseStatusCenter.json" />
373374
<None Include="Assets\terminal\terminal.json">
374375
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
375376
</None>
@@ -683,6 +684,9 @@
683684
<PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.DataGrid">
684685
<Version>6.1.1</Version>
685686
</PackageReference>
687+
<PackageReference Include="Microsoft.Toolkit.Uwp.UI.Lottie">
688+
<Version>6.1.0</Version>
689+
</PackageReference>
686690
<PackageReference Include="Microsoft.UI.Xaml">
687691
<Version>2.4.3</Version>
688692
</PackageReference>

‎Files/MultilingualResources/Files.hu-HU.xlf

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1445,4 +1445,4 @@
14451445
</group>
14461446
</body>
14471447
</file>
1448-
</xliff>
1448+
</xliff>

‎Files/UserControls/StatusBarControl.xaml

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:local="using:Files.UserControls"
77
xmlns:local1="using:Files"
8+
xmlns:lottie="using:Microsoft.Toolkit.Uwp.UI.Lottie"
89
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
911
d:DesignHeight="40"
1012
d:DesignWidth="400"
1113
mc:Ignorable="d">
@@ -141,32 +143,39 @@
141143
</MenuFlyout>
142144
</Button.Flyout>
143145
</Button>
144-
145-
<Button
146-
x:Uid="StatusCenter"
147-
Width="34"
148-
Height="30"
149-
Margin="2,0,2,0"
150-
AutomationProperties.Name="Status center"
151-
Background="Transparent"
152-
Content="&#xF16A;"
153-
CornerRadius="2"
154-
FontFamily="Segoe MDL2 Assets"
155-
FontSize="16"
156-
Style="{StaticResource ToolBarButtonStyle}"
157-
ToolTipService.ToolTip="Ongoing tasks"
158-
Visibility="Visible">
159-
<Button.Flyout>
160-
<Flyout>
161-
<local:StatusCenter
162-
x:Name="OngoingTasksControl"
163-
Width="300"
164-
MinHeight="300"
165-
MaxHeight="400"
166-
x:FieldModifier="public" />
167-
</Flyout>
168-
</Button.Flyout>
169-
</Button>
146+
<Grid>
147+
<muxc:AnimatedVisualPlayer
148+
x:Name="StatusCenterPulseVisualPlayer"
149+
AutoPlay="False"
150+
Visibility="Collapsed">
151+
<lottie:LottieVisualSource x:Name="StatusCenterPulseVisualSource" UriSource="ms-appx:///Assets/AnimatedVisuals/LottiePulseStatusCenter.json" />
152+
</muxc:AnimatedVisualPlayer>
153+
<Button
154+
x:Uid="StatusCenter"
155+
Width="34"
156+
Height="30"
157+
Margin="2,0,2,0"
158+
AutomationProperties.Name="Status center"
159+
Background="Transparent"
160+
Content="&#xF16A;"
161+
CornerRadius="2"
162+
FontFamily="Segoe MDL2 Assets"
163+
FontSize="16"
164+
Style="{StaticResource ToolBarButtonStyle}"
165+
ToolTipService.ToolTip="Ongoing tasks"
166+
Visibility="Visible">
167+
<Button.Flyout>
168+
<Flyout>
169+
<local:StatusCenter
170+
x:Name="OngoingTasksControl"
171+
Width="300"
172+
MinHeight="300"
173+
MaxHeight="400"
174+
x:FieldModifier="public" />
175+
</Flyout>
176+
</Button.Flyout>
177+
</Button>
178+
</Grid>
170179
</StackPanel>
171180
</Grid>
172181
</UserControl>

‎Files/UserControls/StatusBarControl.xaml.cs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,20 @@ public sealed partial class StatusBarControl : UserControl
1818
public StatusBarControl()
1919
{
2020
this.InitializeComponent();
21+
OngoingTasksControl.ProgressBannerPosted += OngoingTasksControl_ProgressBannerPosted;
22+
}
23+
24+
private void OngoingTasksControl_ProgressBannerPosted(object sender, EventArgs e)
25+
{
26+
PlayBannerAddedVisualAnimation();
27+
}
28+
29+
public async void PlayBannerAddedVisualAnimation()
30+
{
31+
StatusCenterPulseVisualPlayer.Visibility = Windows.UI.Xaml.Visibility.Visible;
32+
await StatusCenterPulseVisualPlayer.PlayAsync(0, 1, false);
33+
await StatusCenterPulseVisualPlayer.PlayAsync(0, 1, false);
34+
StatusCenterPulseVisualPlayer.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
2135
}
2236
}
2337
}

‎Files/UserControls/StatusCenter.xaml.cs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ namespace Files.UserControls
1515
public sealed partial class StatusCenter : UserControl
1616
{
1717
public static ObservableCollection<StatusBanner> StatusBannersSource { get; set; } = new ObservableCollection<StatusBanner>();
18+
public event EventHandler ProgressBannerPosted;
1819

1920
public StatusCenter()
2021
{
@@ -35,6 +36,7 @@ public PostedStatusBanner PostBanner(string title, string message, uint initialP
3536
{
3637
var item = new StatusBanner(message, title, initialProgress, severity, operation);
3738
StatusBannersSource.Add(item);
39+
ProgressBannerPosted?.Invoke(this, EventArgs.Empty);
3840
return new PostedStatusBanner(item);
3941
}
4042

0 commit comments

Comments
 (0)