Add Gradient Helper Buttons

src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs

@@ -32,6 +32,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
                 ColorStop.Position = (float) Math.Round(value / _gradientEditorViewModel.PreviewWidth, 3, MidpointRounding.AwayFromZero);
                 NotifyOfPropertyChange(nameof(Offset));
                 NotifyOfPropertyChange(nameof(OffsetPercent));
+                NotifyOfPropertyChange(nameof(OffsetFloat));
             }
         }
 
@@ -43,6 +44,20 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
                 ColorStop.Position = Math.Min(100, Math.Max(0, value)) / 100f;
                 NotifyOfPropertyChange(nameof(Offset));
                 NotifyOfPropertyChange(nameof(OffsetPercent));
+                NotifyOfPropertyChange(nameof(OffsetFloat));
+            }
+        }
+
+        // Functionally similar to Offset Percent, but doesn't round on get in order to prevent inconsistencies (and is 0 to 1)
+        public float OffsetFloat
+        {
+            get => ColorStop.Position;
+            set
+            {
+                ColorStop.Position = Math.Min(1, Math.Max(0, value));
+                NotifyOfPropertyChange(nameof(Offset));
+                NotifyOfPropertyChange(nameof(OffsetPercent));
+                NotifyOfPropertyChange(nameof(OffsetFloat));
             }
         }
 

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml

@@ -12,9 +12,9 @@
              Background="{DynamicResource MaterialDesignPaper}"
              FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
              Width="400"
-             Height="400"
+             Height="425"
-             d:DesignHeight="450"
+             d:DesignHeight="425"
-             d:DesignWidth="800"
+             d:DesignWidth="400"
              d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
     <UserControl.Resources>
         <shared:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
@@ -90,8 +90,43 @@
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
-
+            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
-            <TextBlock Margin="0 5">Selected stop</TextBlock>
+                <Button Style="{StaticResource MaterialDesignOutlinedButton}" 
+                    Margin="0 8 8 8"
+                    Command="{s:Action SpreadColorStops}" 
+                    ToolTip="Distribute Stops" IsEnabled="{Binding HasMoreThanOneStop}" 
+                    HorizontalAlignment="Left"
+                    Height="25">
+                    <StackPanel Orientation="Horizontal">
+                        <materialDesign:PackIcon Kind="DistributeHorizontalCenter"/>
+                        <TextBlock Margin="6 0 0 0">Distribute</TextBlock>
+                    </StackPanel>
+                </Button>
+                <Button Style="{StaticResource MaterialDesignOutlinedButton}" 
+                    Margin="0 8 8 8"
+                    Command="{s:Action RotateColorStops}" 
+                    ToolTip="Rotate Stops" IsEnabled="{Binding HasMoreThanOneStop}" 
+                    HorizontalAlignment="Left"
+                    Height="25">
+                    <StackPanel Orientation="Horizontal">
+                        <materialDesign:PackIcon Kind="AxisZRotateCounterclockwise" />
+                        <TextBlock Margin="6 0 0 0">Rotate</TextBlock>
+                    </StackPanel>
+                </Button>
+                <Button Style="{StaticResource MaterialDesignOutlinedButton}" 
+                    Margin="0 8 8 8"
+                    Command="{s:Action FlipColorStops}" 
+                    IsEnabled="{Binding HasMoreThanOneStop}" 
+                    HorizontalAlignment="Left"
+                    Height="25" ToolTip="Flip Stops">
+                    <StackPanel Orientation="Horizontal">
+                        <materialDesign:PackIcon Kind="FlipHorizontal"/>
+                        <TextBlock Margin="6 0 0 0">Flip</TextBlock>
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+            
+            <TextBlock Margin="0 6 0 0" FontWeight="Bold">Selected stop:</TextBlock>
 
             <Grid Margin="0 5">
                 <Grid.ColumnDefinitions>
@@ -122,8 +157,12 @@
                         Margin="8,0,0,0"
                         IsEnabled="{Binding HasSelectedColorStopViewModel}"
                         Command="{s:Action RemoveColorStop}"
-                        CommandParameter="{Binding SelectedColorStopViewModel}">
+                        CommandParameter="{Binding SelectedColorStopViewModel}"
-                    DELETE
+                        ToolTip="Delete Selected Stop">
+                    <StackPanel Orientation="Horizontal">
+                        <materialDesign:PackIcon Kind="Delete"/>
+                        <TextBlock Margin="4 0 0 0">Delete</TextBlock>
+                    </StackPanel>
                 </Button>
             </Grid>
         </StackPanel>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs

@@ -27,6 +27,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
 
             PropertyChanged += UpdateColorStopViewModels;
             ColorGradient.CollectionChanged += ColorGradientOnCollectionChanged;
+            ColorStopViewModels.CollectionChanged += ColorStopViewModelsOnCollectionChanged;
         }
 
         #region Overrides of DialogViewModelBase
@@ -53,6 +54,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
         }
 
         public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null;
+        public bool HasMoreThanOneStop => ColorStopViewModels.Count > 1;
 
         public ColorGradient ColorGradient { get; }
 
@@ -79,6 +81,7 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
             ColorStopViewModels.Insert(index, viewModel);
 
             SelectColorStop(viewModel);
+            NotifyOfPropertyChange(nameof(HasMoreThanOneStop));
         }
 
         public void RemoveColorStop(ColorStopViewModel colorStopViewModel)
@@ -90,6 +93,38 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
             ColorGradient.Remove(colorStopViewModel.ColorStop);
 
             SelectColorStop(null);
+            NotifyOfPropertyChange(nameof(HasMoreThanOneStop));
+        }
+
+        public void SpreadColorStops()
+        {
+            var stops = ColorStopViewModels.OrderBy(x => x.OffsetFloat);
+            int index = 0;
+            foreach (ColorStopViewModel stop in stops)
+            {
+                stop.OffsetFloat = index / ((float)stops.Count() - 1);
+                index++;
+            }
+        }
+
+        public void RotateColorStops()
+        {
+            var stops = ColorStopViewModels.OrderByDescending(x => x.OffsetFloat);
+            float lastStopPosition = stops.Last().OffsetFloat;
+            foreach (ColorStopViewModel stop in stops)
+            {
+                float tempStop = stop.OffsetFloat;
+                stop.OffsetFloat = lastStopPosition;
+                lastStopPosition = tempStop;
+            }
+        }
+
+        public void FlipColorStops()
+        {
+            foreach (ColorStopViewModel stop in ColorStopViewModels)
+            {
+                stop.OffsetFloat = 1 - stop.OffsetFloat;
+            }
         }
 
         public Point GetPositionInPreview(object sender, MouseEventArgs e)
@@ -127,10 +162,15 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
             foreach (ColorGradientStop colorStop in ColorGradient)
                 ColorStopViewModels.Add(new ColorStopViewModel(this, colorStop));
         }
-        
+
         private void ColorGradientOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
         {
             NotifyOfPropertyChange(nameof(ColorGradient));
         }
+
+        private void ColorStopViewModelsOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            NotifyOfPropertyChange(nameof(HasMoreThanOneStop));
+        }
     }
 }