Implemented ToolSettingColorPicker

src/PixiEditor.AvaloniaUI/ViewModels/Tools/ToolSettings/Settings/ColorSetting.cs

@@ -1,5 +1,11 @@
-using Avalonia.Controls;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
 using Avalonia.Media;
+using Avalonia.Xaml.Interactivity;
+using ColorPicker;
+using PixiEditor.AvaloniaUI.Helpers.Behaviours;
+using PixiEditor.AvaloniaUI.Views.Input;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Tools.ToolSettings.Settings;
 
@@ -15,17 +21,9 @@ internal sealed class ColorSetting : Setting<Color>
         Value = defaultValue;
     }
 
-    //TODO: Implement
-    /*private ToolSettingColorPicker GenerateColorPicker()
+    private ToolSettingColorPicker GenerateColorPicker()
     {
-        var resourceDictionary = new ResourceDictionary();
-        resourceDictionary.Source = new Uri(
-            "pack://application:,,,/ColorPicker;component/Styles/DefaultColorPickerStyle.xaml",
-            UriKind.RelativeOrAbsolute);
-        var picker = new ToolSettingColorPicker
-        {
-            Style = (Style)resourceDictionary["DefaultColorPickerStyle"]
-        };
+        var picker = new ToolSettingColorPicker();
 
         var selectedColorBinding = new Binding("Value")
         {
@@ -34,13 +32,12 @@ internal sealed class ColorSetting : Setting<Color>
 
         var behavior = new GlobalShortcutFocusBehavior();
         Interaction.GetBehaviors(picker).Add(behavior);
-        picker.SetBinding(ToolSettingColorPicker.SelectedColorProperty, selectedColorBinding);
+        picker.Bind(ToolSettingColorPicker.SelectedColorProperty, selectedColorBinding);
         return picker;
-    }*/
+    }
 
     public override Control GenerateControl()
     {
-        return new Border();
-        //return GenerateColorPicker();
+        return GenerateColorPicker();
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Tools/ToolSettings/Settings/SizeSetting.cs

@@ -19,7 +19,6 @@ internal sealed class SizeSetting : Setting<int>
     {
         SizeInput tb = new SizeInput
         {
-            Height = 20,
             VerticalAlignment = VerticalAlignment.Center,
             MaxSize = 9999,
             IsEnabled = true

src/PixiEditor.AvaloniaUI/Views/Input/ToolSettingColorPicker.axaml

@@ -0,0 +1,17 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:colorPicker="clr-namespace:ColorPicker;assembly=ColorPicker.AvaloniaUI"
+             xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+             xmlns:views="clr-namespace:PixiEditor.AvaloniaUI.Views"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             Name="SettingColorPicker"
+             x:ClassModifier="internal"
+             x:Class="PixiEditor.AvaloniaUI.Views.Input.ToolSettingColorPicker">
+    <colorPicker:PortableColorPicker Width="40" Height="20" x:Name="ColorPicker" UseHintColor="True"
+                                     HintColor="{Binding DataContext.ColorsSubViewModel.PrimaryColor,
+        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type views:MainWindow}, AncestorLevel=1},
+        Converter={converters:GenericColorToMediaColorConverter}}"
+                                     SelectedColor="{Binding SelectedColor, ElementName=SettingColorPicker, Mode=TwoWay}"/>
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Input/ToolSettingColorPicker.axaml.cs

@@ -0,0 +1,24 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+
+namespace PixiEditor.AvaloniaUI.Views.Input;
+
+internal partial class ToolSettingColorPicker : UserControl
+{
+    public static readonly StyledProperty<Color> SelectedColorProperty = AvaloniaProperty.Register<ToolSettingColorPicker, Color>(
+        nameof(SelectedColor));
+
+    public Color SelectedColor
+    {
+        get => GetValue(SelectedColorProperty);
+        set => SetValue(SelectedColorProperty, value);
+    }
+    public ToolSettingColorPicker()
+    {
+        InitializeComponent();
+        ColorPicker.SecondaryColor = Colors.Black;
+    }
+}
+

src/PixiEditor.AvaloniaUI/Views/Main/Tools/Toolbar.axaml

@@ -8,10 +8,7 @@
              x:Class="PixiEditor.AvaloniaUI.Views.Main.Tools.Toolbar">
      <StackPanel
                 Background="{DynamicResource ThemeBackgroundBrush1}"
-                Orientation="Horizontal"
-                Grid.ColumnSpan="3"
-                Grid.Column="0"
-                Grid.Row="1">
+                Orientation="Horizontal">
                 <Button
                     Margin="1,0,0,0"
                     Command="{cmds:Command PixiEditor.Undo.Undo}"
@@ -73,9 +70,9 @@
                         <DataTemplate>
                             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10,0,10,0">
                                 <Label
-                                IsVisible="{Binding HasLabel}"
+                                IsVisible="{Binding HasLabel}" VerticalAlignment="Center"
                                 Foreground="White" ui:Translator.Key="{Binding Label.Key}" />
-                                <ContentControl Content="{Binding SettingControl}" />
+                                <ContentControl VerticalAlignment="Center" Content="{Binding SettingControl}" />
                             </StackPanel>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>

src/PixiEditor.AvaloniaUI/Views/MainView.axaml

@@ -23,7 +23,7 @@
     <Grid Focusable="True">
         <Grid.RowDefinitions>
             <RowDefinition Height="25"/>
-            <RowDefinition Height="45"/>
+            <RowDefinition Height="40"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <main1:MainTitleBar/>