feat(ui): animate folder expand in the sidebar

This commit is contained in:
mika kuns
2026-09-30 10:19:35 +02:00
parent 60358100be
commit 928e3905d9
4 changed files with 18 additions and 1 deletions
+13
View File
@@ -867,6 +867,19 @@
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<!-- Folder tree rows sit tighter than the smart lists — a deep tree gets long fast. -->
<!-- Folder expand: children drop down from under the header. Collapse stays instant. -->
<Style Selector="Panel.folder-children">
<Setter Property="RenderTransformOrigin" Value="50%,0%" />
<Setter Property="RenderTransform" Value="scaleY(1)" />
</Style>
<Style Selector="Panel.folder-children.animate[IsVisible=True]">
<Style.Animations>
<Animation Duration="0:0:0.16" Easing="CubicEaseOut" FillMode="Forward">
<KeyFrame Cue="0%"> <Setter Property="ScaleTransform.ScaleY" Value="0.4"/><Setter Property="Opacity" Value="0"/></KeyFrame>
<KeyFrame Cue="100%"><Setter Property="ScaleTransform.ScaleY" Value="1"/><Setter Property="Opacity" Value="1"/></KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Border.list-item.tree-row">
<Setter Property="Padding" Value="4,4,10,4" />
</Style>
@@ -18,6 +18,8 @@ public sealed partial class ListFolderNavItemViewModel : ViewModelBase
[ObservableProperty] private string _iconKey = "Folder";
/// <summary>Hex colour for name + guide line; null = theme default.</summary>
[ObservableProperty] private string? _color;
/// <summary>Set on the first user toggle so the expand animation skips folders that load already open.</summary>
[ObservableProperty] private bool _animateExpand;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(ShowCount))]
private bool _isCollapsed;
@@ -730,6 +730,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
private void ToggleFolder(ListFolderNavItemViewModel? folder)
{
if (folder is null) return;
folder.AnimateExpand = true;
folder.IsCollapsed = !folder.IsCollapsed;
if (_folderCollapseCts.TryGetValue(folder.Id, out var previous)) previous.Cancel();
var cts = new CancellationTokenSource();
@@ -162,7 +162,8 @@
<!-- Guide line drops from under the chevron's centre (tree-row padding 4 + half the 9px
glyph); children start past it so their highlight never touches the line. -->
<Panel IsVisible="{Binding !IsCollapsed}">
<Panel Classes="folder-children" Classes.animate="{Binding AnimateExpand}"
IsVisible="{Binding !IsCollapsed}">
<Border Width="1" HorizontalAlignment="Left" Margin="8,0,0,4"
Background="{Binding Color, Converter={x:Static converters:HexBrushConverter.Instance}, ConverterParameter=LineBrush}"
IsHitTestVisible="False"/>