UI - Initial icon picker commit

src/Artemis.UI.Shared/Controls/Flyouts/MaterialIconPickerFlyout.cs

@@ -0,0 +1,25 @@
+using Avalonia.Controls;
+using FluentAvalonia.UI.Controls;
+
+namespace Artemis.UI.Shared.Flyouts;
+
+/// <summary>
+///     Defines a flyout that hosts a data model picker.
+/// </summary>
+public sealed class MaterialIconPickerFlyout : Flyout
+{
+    private MaterialIconPicker.MaterialIconPicker? _picker;
+
+    /// <summary>
+    ///     Gets the data model picker that the flyout hosts.
+    /// </summary>
+    public MaterialIconPicker.MaterialIconPicker MaterialIconPicker => _picker ??= new MaterialIconPicker.MaterialIconPicker();
+    
+    /// <inheritdoc />
+    protected override Control CreatePresenter()
+    {
+        _picker ??= new MaterialIconPicker.MaterialIconPicker();
+        PickerFlyoutPresenter presenter = new() {Content = MaterialIconPicker};
+        return presenter;
+    }
+}

src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPicker.cs

@@ -0,0 +1,110 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive.Linq;
+using System.Text.RegularExpressions;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.LogicalTree;
+using DynamicData;
+using DynamicData.Binding;
+using Material.Icons;
+using ReactiveUI;
+
+namespace Artemis.UI.Shared.MaterialIconPicker;
+
+/// <summary>
+///     Represents a Material icon picker picker that can be used to search and select a Material icon.
+/// </summary>
+public partial class MaterialIconPicker : TemplatedControl
+{
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public static readonly StyledProperty<MaterialIconKind?> ValueProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, MaterialIconKind?>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
+
+    private SourceList<MaterialIconKind>? _iconsSource;
+    private TextBox? _searchBox;
+    private IDisposable? _sub;
+    private ItemsRepeater? _iconsContainer;
+    private readonly ICommand _selectIcon;
+
+    /// <inheritdoc />
+    public MaterialIconPicker()
+    {
+        _selectIcon = ReactiveCommand.Create<MaterialIconKind>(i => Value = i);
+    }
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public MaterialIconKind? Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets the command to execute when deleting stops.
+    /// </summary>
+    public static readonly DirectProperty<MaterialIconPicker, ICommand> SelectIconProperty =
+        AvaloniaProperty.RegisterDirect<MaterialIconPicker, ICommand>(nameof(SelectIcon), g => g.SelectIcon);
+
+    /// <summary>
+    ///     Gets the command to execute when deleting stops.
+    /// </summary>
+    public ICommand SelectIcon
+    {
+        get => _selectIcon;
+        private init => SetAndRaise(SelectIconProperty, ref _selectIcon, value);
+    }
+
+    #region Overrides of TemplatedControl
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        _searchBox = e.NameScope.Find<TextBox>("SearchBox");
+        _iconsContainer = e.NameScope.Find<ItemsRepeater>("IconsContainer");
+        if (_iconsContainer == null)
+            return;
+
+        _iconsSource = new SourceList<MaterialIconKind>();
+        _iconsSource.AddRange(Enum.GetValues<MaterialIconKind>().Distinct());
+        _sub = _iconsSource.Connect()
+            .Filter(_searchBox.WhenAnyValue(s => s.Text).Throttle(TimeSpan.FromMilliseconds(100)).Select(CreatePredicate))
+            .Sort(SortExpressionComparer<MaterialIconKind>.Descending(p => p.ToString()))
+            .Bind(out ReadOnlyObservableCollection<MaterialIconKind> icons)
+            .Subscribe();
+        _iconsContainer.ItemsSource = icons;
+    }
+
+    /// <inheritdoc />
+    protected override void OnDetachedFromLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        _iconsSource?.Dispose();
+        _iconsSource = null;
+        _sub?.Dispose();
+        _sub = null;
+        base.OnDetachedFromLogicalTree(e);
+    }
+
+    private Func<MaterialIconKind, bool> CreatePredicate(string? text)
+    {
+        if (string.IsNullOrWhiteSpace(text))
+            return _ => true;
+
+        text = StripWhiteSpaceRegex().Replace(text, "");
+        return data => data.ToString().Contains(text, StringComparison.InvariantCultureIgnoreCase);
+    }
+
+    [GeneratedRegex("\\s+")]
+    private static partial Regex StripWhiteSpaceRegex();
+
+    #endregion
+}

src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPickerButton.cs

@@ -0,0 +1,130 @@
+using System;
+using Artemis.UI.Shared.Flyouts;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Interactivity;
+using FluentAvalonia.Core;
+using Material.Icons;
+
+namespace Artemis.UI.Shared.MaterialIconPicker;
+
+/// <summary>
+///     Represents a button that can be used to pick a data model path in a flyout.
+/// </summary>
+public class MaterialIconPickerButton : TemplatedControl
+{
+    /// <summary>
+    ///     Gets or sets the placeholder to show when nothing is selected.
+    /// </summary>
+    public static readonly StyledProperty<string> PlaceholderProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, string>(nameof(Placeholder), "Click to select");
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public static readonly StyledProperty<MaterialIconKind?> ValueProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, MaterialIconKind?>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
+
+    /// <summary>
+    ///     Gets or sets the desired flyout placement.
+    /// </summary>
+    public static readonly StyledProperty<PlacementMode> PlacementProperty =
+        AvaloniaProperty.Register<FlyoutBase, PlacementMode>(nameof(Placement));
+
+    private Button? _button;
+    private MaterialIconPickerFlyout? _flyout;
+    private bool _flyoutActive;
+
+    /// <summary>
+    ///     Gets or sets the placeholder to show when nothing is selected.
+    /// </summary>
+    public string Placeholder
+    {
+        get => GetValue(PlaceholderProperty);
+        set => SetValue(PlaceholderProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public MaterialIconKind? Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets or sets the desired flyout placement.
+    /// </summary>
+    public PlacementMode Placement
+    {
+        get => GetValue(PlacementProperty);
+        set => SetValue(PlacementProperty, value);
+    }
+
+    /// <summary>
+    ///     Raised when the flyout opens.
+    /// </summary>
+    public event TypedEventHandler<MaterialIconPickerButton, EventArgs>? FlyoutOpened;
+
+    /// <summary>
+    ///     Raised when the flyout closes.
+    /// </summary>
+    public event TypedEventHandler<MaterialIconPickerButton, EventArgs>? FlyoutClosed;
+
+    private void OnButtonClick(object? sender, RoutedEventArgs e)
+    {
+        if (_flyout == null)
+            return;
+
+        // Logic here is taken from Fluent Avalonia's ColorPicker which also reuses the same control since it's large
+        _flyout.MaterialIconPicker.Value = Value;
+
+        _flyout.Placement = Placement;
+        _flyout.ShowAt(_button != null ? _button : this);
+        _flyoutActive = true;
+
+        FlyoutOpened?.Invoke(this, EventArgs.Empty);
+    }
+
+    #region Overrides of TemplatedControl
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        if (_button != null)
+            _button.Click -= OnButtonClick;
+        base.OnApplyTemplate(e);
+        _button = e.NameScope.Find<Button>("MainButton");
+        if (_button != null)
+            _button.Click += OnButtonClick;
+    }
+
+    /// <inheritdoc />
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        _flyout ??= new MaterialIconPickerFlyout();
+        _flyout.Closed += OnFlyoutClosed;
+    }
+
+    private void OnFlyoutClosed(object? sender, EventArgs e)
+    {
+        if (_flyoutActive)
+        {
+            FlyoutClosed?.Invoke(this, EventArgs.Empty);
+            _flyoutActive = false;
+        }
+    }
+
+
+    /// <inheritdoc />
+    protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        if (_flyout != null)
+            _flyout.Closed -= OnFlyoutClosed;
+    }
+
+    #endregion
+}

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

@@ -18,6 +18,8 @@
     <StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
     <StyleInclude Source="/Styles/Controls/DataModelPicker.axaml" />
     <StyleInclude Source="/Styles/Controls/DataModelPickerButton.axaml" />
+    <StyleInclude Source="/Styles/Controls/MaterialIconPicker.axaml" />
+    <StyleInclude Source="/Styles/Controls/MaterialIconPickerButton.axaml" />
 
     <!-- Custom styles -->
     <StyleInclude Source="/Styles/Border.axaml" />

src/Artemis.UI.Shared/Styles/Controls/MaterialIconPicker.axaml

@@ -0,0 +1,55 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker"
+        xmlns:icons="clr-namespace:Material.Icons;assembly=Material.Icons">
+    <Design.PreviewWith>
+        <materialIconPicker:MaterialIconPicker />
+    </Design.PreviewWith>
+
+    <Style Selector="materialIconPicker|MaterialIconPicker">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid RowDefinitions="Auto,*" Width="525" Height="485" Margin="10">
+                    <TextBox Grid.Row="0" Watermark="Search" Name="SearchBox" />
+
+                    <Border Grid.Row="1" Classes="card card-condensed" Margin="0 10 0 0">
+                        <ScrollViewer Name="IconsViewer"
+                                      HorizontalScrollBarVisibility="Disabled"
+                                      VerticalScrollBarVisibility="Auto"
+                                      VerticalAlignment="Top">
+                            <ItemsRepeater Name="IconsContainer">
+                                <ItemsRepeater.Layout>
+                                    <WrapLayout />
+                                </ItemsRepeater.Layout>
+                                <ItemsRepeater.ItemTemplate>
+                                    <DataTemplate x:DataType="icons:MaterialIconKind">
+                                        <Button VerticalAlignment="Bottom"
+                                                HorizontalAlignment="Right"
+                                                Width="72" 
+                                                Height="75"
+                                                Margin="5"
+                                                Padding="1"
+                                                ToolTip.Tip="{CompiledBinding}"
+                                                Command="{CompiledBinding SelectIcon, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialIconPicker:MaterialIconPicker}}}"
+                                                CommandParameter="{CompiledBinding}">
+                                            <StackPanel Orientation="Vertical">
+                                                <avalonia:MaterialIcon Kind="{CompiledBinding}" Width="35" Height="35"/>
+                                                <TextBlock Text="{CompiledBinding}" 
+                                                           TextAlignment="Center" 
+                                                           TextTrimming="CharacterEllipsis"
+                                                           Classes="subtitle" 
+                                                           Margin="0 8 0 0"
+                                                           FontSize="10"/>
+                                            </StackPanel>
+                                        </Button>
+                                    </DataTemplate>
+                                </ItemsRepeater.ItemTemplate>
+                            </ItemsRepeater>
+                        </ScrollViewer>
+                    </Border>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

src/Artemis.UI.Shared/Styles/Controls/MaterialIconPickerButton.axaml

@@ -0,0 +1,60 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker">
+    <Design.PreviewWith>
+        <Border Padding="20" Width="600" Height="800">
+            <StackPanel Spacing="5">
+                <materialIconPicker:MaterialIconPickerButton Value="Achievement" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <Style Selector="FlyoutPresenter.data-model-picker-presenter">
+        <Setter Property="MaxWidth" Value="1200" />
+        <Setter Property="MaxHeight" Value="1200" />
+        <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
+    </Style>
+
+    <Style Selector="materialIconPicker|MaterialIconPickerButton">
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
+        <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
+        <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Button Name="MainButton"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        HorizontalContentAlignment="Stretch">
+                    <Grid ColumnDefinitions="*,Auto" HorizontalAlignment="Stretch">
+                        <TextBlock Name="MainButtonLabel"
+                                   Grid.Column="0"
+                                   VerticalAlignment="Center"
+                                   TextAlignment="Left"
+                                   TextTrimming="CharacterEllipsis"
+                                   Text="{TemplateBinding Value}"
+                                   IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNotNull}}"/>
+                        <TextBlock Grid.Column="0" 
+                                   Text="{TemplateBinding Placeholder}"
+                                   Foreground="{DynamicResource TextControlPlaceholderForeground}"></TextBlock>
+                        <TextBlock Name="ChevronTextBlock"
+                                   Grid.Column="1"
+                                   FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                                   FontSize="13"
+                                   Text="&#xE70D;"
+                                   VerticalAlignment="Center"
+                                   TextAlignment="Right"
+                                   Padding="2 2 2 0"
+                                   Margin="5 0" />
+                    </Grid>
+                </Button>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditView.axaml

@@ -117,7 +117,7 @@
                                       IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}">
                                 <ComboBox.ItemsPanel>
                                     <ItemsPanelTemplate>
-                                        <VirtualizingStackPanel />
+                                        <VirtualizingStackPanel Width="250"/>
                                     </ItemsPanelTemplate>
                                 </ComboBox.ItemsPanel>
                                 <ComboBox.ItemTemplate>

src/Artemis.UI/Screens/Workshop/WorkshopView.axaml

@@ -9,6 +9,7 @@
              xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
              xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker;assembly=Artemis.UI.Shared"
+             xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800"
              x:Class="Artemis.UI.Screens.Workshop.WorkshopView"
              x:DataType="workshop:WorkshopViewModel">
@@ -59,6 +60,8 @@
                             Create random gradient
                         </Button>
                         <gradientPicker:GradientPickerButton ColorGradient="{CompiledBinding ColorGradient}" IsCompact="True" />
+                        
+                        <materialIconPicker:MaterialIconPickerButton/>
                     </StackPanel>
                 </Border>
             </StackPanel>