Profile editor - Fixed easing options not applying

Device properties - Fixed layout changes not saving

src/Artemis.UI/Screens/ProfileEditor/Panels/Properties/Timeline/Keyframes/TimelineEasingView.axaml

@@ -3,17 +3,21 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:keyframes="clr-namespace:Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes.TimelineEasingView"
              x:DataType="keyframes:TimelineEasingViewModel">
-    <StackPanel Orientation="Horizontal">
-        <Polyline Stroke="{DynamicResource TextFillColorPrimaryBrush}"
+    <Grid ColumnDefinitions="25,30,*">
+        <avalonia:MaterialIcon Grid.Column="0" Kind="Check" IsVisible="{CompiledBinding IsEasingModeSelected}" HorizontalAlignment="Left"/>
+        <Polyline Grid.Column="1" 
+                  Stroke="{DynamicResource TextFillColorPrimaryBrush}"
                   StrokeThickness="1"
                   Points="{CompiledBinding EasingPoints}"
                   Stretch="Uniform"
                   Width="20"
                   Height="20"
-                  Margin="0 0 10 0" />
-        <TextBlock Text="{CompiledBinding Description}" />
-    </StackPanel>
+                  HorizontalAlignment="Left"/>
+        <TextBlock Grid.Column="2" Text="{CompiledBinding Description}" HorizontalAlignment="Left"/>
+    </Grid>
+
 </UserControl>

src/Artemis.UI/Screens/ProfileEditor/Panels/Properties/Timeline/Keyframes/TimelineEasingViewModel.cs

@@ -1,8 +1,10 @@
 using System.Collections.Generic;
+using System.Reactive;
 using Artemis.Core;
 using Artemis.UI.Shared;
 using Avalonia;
 using Humanizer;
+using ReactiveUI;
 
 namespace Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes;
 
@@ -10,11 +12,12 @@ public class TimelineEasingViewModel : ViewModelBase
 {
     private readonly ILayerPropertyKeyframe _keyframe;
 
-    public TimelineEasingViewModel(Easings.Functions easingFunction, ILayerPropertyKeyframe keyframe)
+    public TimelineEasingViewModel(Easings.Functions easingFunction, ILayerPropertyKeyframe keyframe, ReactiveCommand<Easings.Functions, Unit> selectEasingFunction)
     {
         _keyframe = keyframe;
 
         EasingFunction = easingFunction;
+        SelectEasingFunction = selectEasingFunction;
         Description = easingFunction.Humanize();
 
         EasingPoints = new List<Point>();
@@ -27,6 +30,7 @@ public class TimelineEasingViewModel : ViewModelBase
     }
 
     public Easings.Functions EasingFunction { get; }
+    public ReactiveCommand<Easings.Functions, Unit> SelectEasingFunction { get; }
     public List<Point> EasingPoints { get; }
     public string Description { get; }
     public bool IsEasingModeSelected => _keyframe.EasingFunction == EasingFunction;

src/Artemis.UI/Screens/ProfileEditor/Panels/Properties/Timeline/Keyframes/TimelineKeyframeView.axaml

@@ -3,6 +3,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             xmlns:keyframes="clr-namespace:Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes.TimelineKeyframeView"
              ClipToBounds="False">
@@ -34,16 +35,9 @@
             <MenuFlyout Opening="FlyoutBase_OnOpening">
                 <MenuItem Header="Easing" ItemsSource="{Binding EasingViewModels}">
                     <MenuItem.Styles>
-                        <Style Selector="MenuItem > MenuItem">
-                            <Setter Property="Icon">
-                                <Setter.Value>
-                                    <Template>
-                                        <CheckBox IsHitTestVisible="False" IsChecked="{Binding IsEasingModeSelected}" />
-                                    </Template>
-                                </Setter.Value>
-                            </Setter>
-                            <Setter Property="Command" Value="{Binding $parent[UserControl].DataContext.SelectEasingFunction}" />
-                            <Setter Property="CommandParameter" Value="{Binding EasingFunction}" />
+                        <Style Selector="MenuItem > MenuItem" x:DataType="keyframes:TimelineEasingViewModel">
+                            <Setter Property="Command" Value="{CompiledBinding SelectEasingFunction}" />
+                            <Setter Property="CommandParameter" Value="{CompiledBinding EasingFunction}" />
                         </Style>
                     </MenuItem.Styles>
                     <MenuItem.Icon>

src/Artemis.UI/Screens/ProfileEditor/Panels/Properties/Timeline/Keyframes/TimelineKeyframeViewModel.cs

@@ -54,10 +54,12 @@ public class TimelineKeyframeViewModel<T> : ActivatableViewModelBase, ITimelineK
         Copy = ReactiveCommand.CreateFromTask(ExecuteCopy);
         Paste = ReactiveCommand.CreateFromTask(ExecutePaste);
         Delete = ReactiveCommand.Create(ExecuteDelete);
+        SelectEasingFunction = ReactiveCommand.Create<Easings.Functions>(ExecuteSelectEasingFunction);
     }
 
     public LayerPropertyKeyframe<T> LayerPropertyKeyframe { get; }
     public ObservableCollection<TimelineEasingViewModel> EasingViewModels { get; }
+    
 
     public double X
     {
@@ -93,7 +95,8 @@ public class TimelineKeyframeViewModel<T> : ActivatableViewModelBase, ITimelineK
     public ReactiveCommand<Unit, Unit> Copy { get; }
     public ReactiveCommand<Unit, Unit> Paste { get; }
     public ReactiveCommand<Unit, Unit> Delete { get; }
-
+    public ReactiveCommand<Easings.Functions, Unit> SelectEasingFunction { get; }
+    
     public bool IsSelected => _isSelected?.Value ?? false;
     public TimeSpan Position => LayerPropertyKeyframe.Position;
     public ILayerPropertyKeyframe Keyframe => LayerPropertyKeyframe;
@@ -255,10 +258,10 @@ public class TimelineKeyframeViewModel<T> : ActivatableViewModelBase, ITimelineK
 
         EasingViewModels.AddRange(Enum.GetValues(typeof(Easings.Functions))
             .Cast<Easings.Functions>()
-            .Select(e => new TimelineEasingViewModel(e, Keyframe)));
+            .Select(e => new TimelineEasingViewModel(e, Keyframe, SelectEasingFunction)));
     }
 
-    public void SelectEasingFunction(Easings.Functions easingFunction)
+    private void ExecuteSelectEasingFunction(Easings.Functions easingFunction)
     {
         _profileEditorService.ExecuteCommand(new ChangeKeyframeEasing(Keyframe, easingFunction));
     }