add some initial animations to make things more sensible
MODIFY
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
WalletWasabi.Fluent/Views/NavBar/NavBar.axaml
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.Wallets DockPanel Ellipse" x:DataType="vmw:WalletViewModelBase">
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets Ellipse">
+ <Setter Property="Fill" Value="{DynamicResource SystemAccentColor}" />
<Setter Property="Width" Value="8" />
<Setter Property="Height" Value="8" />
- <Setter Property="Margin" Value="6,4" />
- <Setter Property="Fill" Value="{DynamicResource SystemAccentColor}" />
- <Setter Property="IsVisible" Value="{Binding IsLoggedIn}" />
+ <Setter Property="Margin" Value="6" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" />
+ <Setter Property="Opacity" Value="0" />
+ <Setter Property="Transitions">
+ <Transitions>
+ <BrushTransition Property="Fill" Duration="0:0:2"/>
+ </Transitions>
+ </Setter>
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.Wallets DockPanel TextBlock" x:DataType="vmw:WalletViewModelBase">
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets Ellipse:not(.isLoading).isLoggedIn">
+ <Setter Property="Opacity" Value="1" />
+ </Style>
+
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets Ellipse.isLoading.isLoggedIn">
+ <Style.Animations>
+ <Animation IterationCount="Infinite" Duration="0:0:1">
+ <KeyFrame Cue="50%">
+ <Setter Property="Opacity" Value="1" />
+ </KeyFrame>
+ </Animation>
+ </Style.Animations>
+ </Style>
+
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets Ellipse.isLoggedIn.isCoinjoining">
+ <Setter Property="Fill" Value="{DynamicResource CoinjoinActiveColor}" />
+ <Style.Animations>
+ <Animation IterationCount="Infinite" Duration="0:0:1">
+ <KeyFrame Cue="50%">
+ <Setter Property="Opacity" Value="1" />
+ </KeyFrame>
+ </Animation>
+ </Style.Animations>
+ </Style>
+
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets DockPanel TextBlock" x:DataType="vmw:WalletViewModelBase">
<Setter Property="Text" Value="{Binding Title}" />
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.Utilities DockPanel TextBlock" x:DataType="vm:NavBarItemViewModel">
+ <Style Selector=":is(Panel).NavBarItemPanel.utilities DockPanel TextBlock" x:DataType="vm:NavBarItemViewModel">
<Setter Property="Text" Value="{Binding Title}" />
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.Wallets" x:DataType="vmw:WalletViewModelBase">
+ <Style Selector=":is(Panel).NavBarItemPanel.wallets" x:DataType="vmw:WalletViewModelBase">
<Setter Property="ToolTip.Tip" Value="{Binding Title}" />
</Style>
- <Style Selector=":is(Panel).NavBarItemPanel.Utilities" x:DataType="vm:NavBarItemViewModel">
+ <Style Selector=":is(Panel).NavBarItemPanel.utilities" x:DataType="vm:NavBarItemViewModel">
<Setter Property="ToolTip.Tip" Value="{Binding Title}" />
</Style>
</Setter>
</Style>
+
<Style Selector="c|NavBarItem:selected :is(Panel).NavBarItemPanel DockPanel LayoutTransformControl">
<Setter Property="LayoutTransform" Value="scaleY(0)" />
<Setter Property="Opacity" Value="0" />
</c:NavBarListBox.ItemsPanel>
<c:NavBarListBox.DataTemplates>
<DataTemplate DataType="vm:NavBarItemViewModel">
- <Panel Classes="NavBarItemPanel Utilities">
+ <Panel Classes="NavBarItemPanel utilities">
<DockPanel>
<LayoutTransformControl>
<TextBlock />
VerticalAlignment="Stretch">
<c:NavBarListBox.DataTemplates>
<DataTemplate DataType="vmw:WalletViewModelBase">
- <Panel Classes="NavBarItemPanel Wallets">
- <Ellipse />
+ <Panel Classes="NavBarItemPanel wallets">
+ <Ellipse Classes.isLoading="{Binding IsLoading}"
+ Classes.isLoggedIn="{Binding IsLoggedIn}"
+ Classes.isCoinjoining="{Binding IsCoinJoining}"/>
<DockPanel>
<LayoutTransformControl>
<TextBlock />

add some initial animations to make things more sensible