feat(ui): animate folder expand in the sidebar
This commit is contained in:
@@ -867,6 +867,19 @@
|
|||||||
<Setter Property="BorderBrush" Value="Transparent" />
|
<Setter Property="BorderBrush" Value="Transparent" />
|
||||||
</Style>
|
</Style>
|
||||||
<!-- Folder tree rows sit tighter than the smart lists — a deep tree gets long fast. -->
|
<!-- 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">
|
<Style Selector="Border.list-item.tree-row">
|
||||||
<Setter Property="Padding" Value="4,4,10,4" />
|
<Setter Property="Padding" Value="4,4,10,4" />
|
||||||
</Style>
|
</Style>
|
||||||
|
|||||||
@@ -18,6 +18,8 @@ public sealed partial class ListFolderNavItemViewModel : ViewModelBase
|
|||||||
[ObservableProperty] private string _iconKey = "Folder";
|
[ObservableProperty] private string _iconKey = "Folder";
|
||||||
/// <summary>Hex colour for name + guide line; null = theme default.</summary>
|
/// <summary>Hex colour for name + guide line; null = theme default.</summary>
|
||||||
[ObservableProperty] private string? _color;
|
[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]
|
[ObservableProperty]
|
||||||
[NotifyPropertyChangedFor(nameof(ShowCount))]
|
[NotifyPropertyChangedFor(nameof(ShowCount))]
|
||||||
private bool _isCollapsed;
|
private bool _isCollapsed;
|
||||||
|
|||||||
@@ -730,6 +730,7 @@ public sealed partial class ListsIslandViewModel : ViewModelBase, IDisposable
|
|||||||
private void ToggleFolder(ListFolderNavItemViewModel? folder)
|
private void ToggleFolder(ListFolderNavItemViewModel? folder)
|
||||||
{
|
{
|
||||||
if (folder is null) return;
|
if (folder is null) return;
|
||||||
|
folder.AnimateExpand = true;
|
||||||
folder.IsCollapsed = !folder.IsCollapsed;
|
folder.IsCollapsed = !folder.IsCollapsed;
|
||||||
if (_folderCollapseCts.TryGetValue(folder.Id, out var previous)) previous.Cancel();
|
if (_folderCollapseCts.TryGetValue(folder.Id, out var previous)) previous.Cancel();
|
||||||
var cts = new CancellationTokenSource();
|
var cts = new CancellationTokenSource();
|
||||||
|
|||||||
@@ -162,7 +162,8 @@
|
|||||||
|
|
||||||
<!-- Guide line drops from under the chevron's centre (tree-row padding 4 + half the 9px
|
<!-- 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. -->
|
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"
|
<Border Width="1" HorizontalAlignment="Left" Margin="8,0,0,4"
|
||||||
Background="{Binding Color, Converter={x:Static converters:HexBrushConverter.Instance}, ConverterParameter=LineBrush}"
|
Background="{Binding Color, Converter={x:Static converters:HexBrushConverter.Instance}, ConverterParameter=LineBrush}"
|
||||||
IsHitTestVisible="False"/>
|
IsHitTestVisible="False"/>
|
||||||
|
|||||||
Reference in New Issue
Block a user