picker ui wip

src/PixiEditor/Models/DocumentModels/ChangeExecutionController.cs

@@ -181,6 +181,7 @@ internal class ChangeExecutionController
 
     public void MouseMoveInlet(MouseOnCanvasEventArgs args)
     {
+        // Todo: Remove pen restriction when avalonia merges https://github.com/AvaloniaUI/Avalonia/pull/20075
         if (args.IntermediatePoints != null && args.PointerType == PointerType.Pen)
         {
             foreach (var point in args.IntermediatePoints)

src/PixiEditor/Views/Input/BrushPicker.axaml

@@ -3,13 +3,71 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:input="clr-namespace:PixiEditor.Views.Input"
+             xmlns:localization="clr-namespace:PixiEditor.UI.Common.Localization;assembly=PixiEditor.UI.Common"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:ClassModifier="internal"
              x:Class="PixiEditor.Views.Input.BrushPicker">
-    <ComboBox VerticalAlignment="Center"
-              MinWidth="85"
-              ItemsSource="{Binding Brushes, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type input:BrushPicker}}}"
-              SelectedIndex="{Binding BrushIndex,
-              RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type input:BrushPicker}}, Mode=TwoWay}">
-    </ComboBox>
+    <ToggleButton>
+        <ToggleButton.Styles>
+            <Style Selector="FlyoutPresenter">
+                <Setter Property="Cursor" Value="Arrow"/>
+            </Style>
+        </ToggleButton.Styles>
+        <ToggleButton.Flyout>
+            <Flyout
+                IsOpen="{Binding IsChecked, RelativeSource={RelativeSource AncestorType=ToggleButton}, Mode=TwoWay}"
+                Placement="BottomEdgeAlignedLeft"
+                ShowMode="Transient">
+                <Grid Width="300" Height="400" Margin="10">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <TextBox Watermark="{localization:Translate Key=SEARCH}" />
+                        <ComboBox Grid.Column="1" Margin="5,0,0,0" />
+                        <StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="0" Spacing="5"
+                                    Margin="5,0,0,0">
+                            <ToggleButton Classes="pixi-icon"
+                                          Name="SortButton"
+                                          Content="{DynamicResource icon-arrow-up}" />
+                            <ToggleButton Classes="pixi-icon"
+                                          Content="{DynamicResource icon-grid}" />
+                        </StackPanel>
+
+                        <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
+                                    HorizontalAlignment="Right" Margin="0,5,5,0" Spacing="5"
+                                    IsVisible="{Binding IsChecked, ElementName=SortButton}">
+                            <TextBlock Text="{localization:Translate Key=SORT_BY}" />
+                            <ComboBox SelectedIndex="0">
+                                <ComboBoxItem Content="{localization:Translate Key=ALPHABETICAL}" />
+                            </ComboBox>
+                        </StackPanel>
+
+                        <StackPanel Margin="5, 5, 0, 0" Orientation="Horizontal" Grid.Column="2" Grid.Row="1" Spacing="5">
+                            <ToggleButton
+                                          IsVisible="{Binding IsChecked, ElementName=SortButton}"
+                                          Content="{DynamicResource icon-arrow-up}"
+                                          Classes="pixi-icon" />
+                            <ToggleButton
+                                          IsVisible="{Binding IsChecked, ElementName=SortButton}"
+                                          Content="{DynamicResource icon-arrow-down}"
+                                          Classes="pixi-icon" />
+                        </StackPanel>
+                    </Grid>
+                </Grid>
+            </Flyout>
+        </ToggleButton.Flyout>
+    </ToggleButton>
 </UserControl>