Gradient picker - Added color randomization and condensed style

src/Artemis.Core/Models/Profile/Colors/ColorGradient.cs

@@ -13,52 +13,6 @@ namespace Artemis.Core;
 /// </summary>
 public class ColorGradient : IList<ColorGradientStop>, IList, INotifyCollectionChanged
 {
-    #region Equality members
-
-    /// <summary>
-    /// Determines whether all the stops in this gradient are equal to the stops in the given <paramref name="other"/> gradient.
-    /// </summary>
-    /// <param name="other">The other gradient to compare to</param>
-    protected bool Equals(ColorGradient other)
-    {
-        if (Count != other.Count)
-            return false;
-
-        for (int i = 0; i < Count; i++)
-        {
-            if (!Equals(this[i], other[i]))
-                return false;
-        }
-
-        return true;
-    }
-
-    /// <inheritdoc />
-    public override bool Equals(object? obj)
-    {
-        if (ReferenceEquals(null, obj))
-            return false;
-        if (ReferenceEquals(this, obj))
-            return true;
-        if (obj.GetType() != this.GetType())
-            return false;
-        return Equals((ColorGradient) obj);
-    }
-
-    /// <inheritdoc />
-    public override int GetHashCode()
-    {
-        unchecked
-        {
-            int hash = 19;
-            foreach (ColorGradientStop stops in this)
-                hash = hash * 31 + stops.GetHashCode();
-            return hash;
-        }
-    }
-
-    #endregion
-
     private static readonly SKColor[] FastLedRainbow =
     {
         new(0xFFFF0000), // Red
@@ -233,14 +187,7 @@ public class ColorGradient : IList<ColorGradientStop>, IList, INotifyCollectionC
     public ColorGradient GetRandom(int stops)
     {
         ColorGradient gradient = new();
-        Random random = new();
+        gradient.Randomize(stops);
-        for (int index = 0; index < stops; index++)
-        {
-            SKColor skColor = SKColor.FromHsv(random.NextSingle() * 360, 100, 100);
-            float position = 1f / (stops - 1f) * index;
-            gradient.Add(new ColorGradientStop(skColor, position));
-        }
-
         return gradient;
     }
 
@@ -360,6 +307,32 @@ public class ColorGradient : IList<ColorGradientStop>, IList, INotifyCollectionC
         }
     }
 
+    /// <summary>
+    ///     Randomizes the color gradient with the given amount of <paramref name="stops" />.
+    /// </summary>
+    /// <param name="stops">The amount of stops to put into the gradient.</param>
+    public void Randomize(int stops)
+    {
+        try
+        {
+            _updating = true;
+
+            Clear();
+            Random random = new();
+            for (int index = 0; index < stops; index++)
+            {
+                SKColor skColor = SKColor.FromHsv(random.NextSingle() * 360, 100, 100);
+                float position = 1f / (stops - 1f) * index;
+                Add(new ColorGradientStop(skColor, position));
+            }
+        }
+        finally
+        {
+            _updating = false;
+            Sort();
+        }
+    }
+
     /// <summary>
     ///     Occurs when any of the stops has changed in some way
     /// </summary>
@@ -396,6 +369,51 @@ public class ColorGradient : IList<ColorGradientStop>, IList, INotifyCollectionC
         StopChanged?.Invoke(this, EventArgs.Empty);
     }
 
+    #region Equality members
+
+    /// <summary>
+    ///     Determines whether all the stops in this gradient are equal to the stops in the given <paramref name="other" />
+    ///     gradient.
+    /// </summary>
+    /// <param name="other">The other gradient to compare to</param>
+    protected bool Equals(ColorGradient other)
+    {
+        if (Count != other.Count)
+            return false;
+
+        for (int i = 0; i < Count; i++)
+            if (!Equals(this[i], other[i]))
+                return false;
+
+        return true;
+    }
+
+    /// <inheritdoc />
+    public override bool Equals(object? obj)
+    {
+        if (ReferenceEquals(null, obj))
+            return false;
+        if (ReferenceEquals(this, obj))
+            return true;
+        if (obj.GetType() != GetType())
+            return false;
+        return Equals((ColorGradient) obj);
+    }
+
+    /// <inheritdoc />
+    public override int GetHashCode()
+    {
+        unchecked
+        {
+            int hash = 19;
+            foreach (ColorGradientStop stops in this)
+                hash = hash * 31 + stops.GetHashCode();
+            return hash;
+        }
+    }
+
+    #endregion
+
     #region Implementation of IEnumerable
 
     /// <inheritdoc />

src/Avalonia/Artemis.UI.Shared/Controls/GradientPicker/GradientPicker.cs

@@ -60,12 +60,13 @@ public class GradientPicker : TemplatedControl
         AvaloniaProperty.RegisterDirect<GradientPicker, ICommand>(nameof(DeleteStop), g => g.DeleteStop);
 
     private readonly ICommand _deleteStop;
+    private bool _shiftDown;
     private Button? _flipStops;
     private Border? _gradient;
     private Button? _rotateStops;
-    private bool _shiftDown;
     private Button? _spreadStops;
     private Button? _toggleSeamless;
+    private Button? _randomize;
     private ColorGradient? _lastColorGradient;
     private ColorPicker? _colorPicker;
 
@@ -153,6 +154,8 @@ public class GradientPicker : TemplatedControl
             _flipStops.Click -= FlipStopsOnClick;
         if (_rotateStops != null)
             _rotateStops.Click -= RotateStopsOnClick;
+        if (_randomize != null)
+            _randomize.Click -= RandomizeOnClick;
 
         _colorPicker = e.NameScope.Find<ColorPicker>("ColorPicker");
         _gradient = e.NameScope.Find<Border>("Gradient");
@@ -160,6 +163,7 @@ public class GradientPicker : TemplatedControl
         _toggleSeamless = e.NameScope.Find<Button>("ToggleSeamless");
         _flipStops = e.NameScope.Find<Button>("FlipStops");
         _rotateStops = e.NameScope.Find<Button>("RotateStops");
+        _randomize = e.NameScope.Find<Button>("Randomize");
 
         if (_gradient != null)
             _gradient.PointerPressed += GradientOnPointerPressed;
@@ -171,10 +175,13 @@ public class GradientPicker : TemplatedControl
             _flipStops.Click += FlipStopsOnClick;
         if (_rotateStops != null)
             _rotateStops.Click += RotateStopsOnClick;
+        if (_randomize != null)
+            _randomize.Click += RandomizeOnClick;
 
         base.OnApplyTemplate(e);
     }
 
+
     /// <inheritdoc />
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
@@ -309,4 +316,10 @@ public class GradientPicker : TemplatedControl
 
         ColorGradient.RotateStops(_shiftDown);
     }
+
+    private void RandomizeOnClick(object? sender, RoutedEventArgs e)
+    {
+        ColorGradient.Randomize(6);
+        SelectedColorStop = ColorGradient.First();
+    }
 }

src/Avalonia/Artemis.UI.Shared/Styles/Artemis.axaml

@@ -22,6 +22,12 @@
             </VisualBrush.Visual>
         </VisualBrush>
     </Styles.Resources>
+
+	<!-- Custom controls -->
+    <StyleInclude Source="/Styles/Controls/GradientPicker.axaml" />
+    <StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
+
+	<!-- Custom styles -->
 	<StyleInclude Source="/Styles/Border.axaml" />
     <StyleInclude Source="/Styles/Button.axaml" />
 	<StyleInclude Source="/Styles/Condensed.axaml" />
@@ -32,9 +38,6 @@
     <StyleInclude Source="/Styles/NumberBox.axaml" />
     <StyleInclude Source="/Styles/TreeView.axaml" />
 
-    <StyleInclude Source="/Styles/Controls/GradientPicker.axaml" />
-    <StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
-
     <Style Selector="Window:windows:windows10 /template/ Border#RootBorder">
         <!-- This will show if custom accent color setting is used in Settings page-->
         <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />

src/Avalonia/Artemis.UI.Shared/Styles/Condensed.axaml

@@ -75,4 +75,8 @@
         <Setter Property="MinHeight" Value="24" />
     </Style>
 
+    <Style Selector="gradientPicker|GradientPickerButton.condensed /template/ Border.gradient-display">
+        <Setter Property="Margin" Value="4" />
+        <Setter Property="CornerRadius" Value="2" />
+    </Style>
 </Styles>

src/Avalonia/Artemis.UI.Shared/Styles/Controls/GradientPicker.axaml

@@ -236,6 +236,9 @@
                                     </ToolTip.Tip>
                                     <avalonia:MaterialIcon Kind="AxisZRotateCounterclockwise" />
                                 </Button>
+                                <Button Name="Randomize" Classes="icon-button operation-button" ToolTip.Tip="Randomize the gradient.">
+                                    <avalonia:MaterialIcon Kind="ShuffleVariant" />
+                                </Button>
                             </StackPanel>
                         </Border>
                     </Grid>

src/Avalonia/Artemis.UI.Shared/Styles/Controls/GradientPickerButton.axaml

@@ -21,7 +21,7 @@
 
     <Style Selector="gradientPicker|GradientPickerButton">
         <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
-        <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}"/>
+        <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -34,13 +34,10 @@
                                      VerticalAlignment="Stretch"
                                      HorizontalContentAlignment="Stretch"
                                      VerticalContentAlignment="Stretch">
-                        <Border BorderBrush="{DynamicResource ColorPickerButtonOutline}"
+                        <Border Classes="gradient-display"
-                                BorderThickness="1"
-                                Margin="5"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="{TemplateBinding LinearGradientBrush}"
+                                Background="{TemplateBinding LinearGradientBrush}" />
-                                CornerRadius="{TemplateBinding CornerRadius}" />
                     </controls:Button>
 
                     <Viewbox Grid.Column="1"
@@ -57,5 +54,10 @@
         </Setter>
     </Style>
 
-
+    <Style Selector="gradientPicker|GradientPickerButton /template/ Border.gradient-display">
+        <Setter Property="Margin" Value="5" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ColorPickerButtonOutline}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" />
+    </Style>
 </Styles>