UI - Added new icon picker to profile configuration dialog

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

@@ -19,7 +19,20 @@ public sealed class MaterialIconPickerFlyout : Flyout
     protected override Control CreatePresenter()
     {
         _picker ??= new MaterialIconPicker.MaterialIconPicker();
-        PickerFlyoutPresenter presenter = new() {Content = MaterialIconPicker};
+        _picker.Flyout = this;
+        FlyoutPresenter presenter = new() {Content = MaterialIconPicker};
         return presenter;
     }
+
+    #region Overrides of FlyoutBase
+
+    /// <inheritdoc />
+    protected override void OnClosed()
+    {
+        if (_picker != null)
+            _picker.Flyout = null;
+        base.OnClosed();
+    }
+
+    #endregion
 }

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

@@ -5,6 +5,7 @@ using System.Linq;
 using System.Reactive.Linq;
 using System.Text.RegularExpressions;
 using System.Windows.Input;
+using Artemis.UI.Shared.Flyouts;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
@@ -28,16 +29,35 @@ public partial class MaterialIconPicker : TemplatedControl
     public static readonly StyledProperty<MaterialIconKind?> ValueProperty =
         AvaloniaProperty.Register<MaterialIconPicker, MaterialIconKind?>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
 
+    /// <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);
+
+    private readonly ICommand _selectIcon;
+    private ItemsRepeater? _iconsContainer;
+
     private SourceList<MaterialIconKind>? _iconsSource;
     private TextBox? _searchBox;
     private IDisposable? _sub;
-    private ItemsRepeater? _iconsContainer;
-    private readonly ICommand _selectIcon;
+    private readonly Dictionary<string,MaterialIconKind> _enumNames;
 
     /// <inheritdoc />
     public MaterialIconPicker()
     {
-        _selectIcon = ReactiveCommand.Create<MaterialIconKind>(i => Value = i);
+        _selectIcon = ReactiveCommand.Create<MaterialIconKind>(i =>
+        {
+            Value = i;
+            Flyout?.Hide();
+        });
+
+        // Build a list of enum names and values, this is required because a value may have more than one name
+        _enumNames = new Dictionary<string, MaterialIconKind>();
+        MaterialIconKind[] values = Enum.GetValues<MaterialIconKind>();
+        string[] names = Enum.GetNames<MaterialIconKind>();
+        for (int index = 0; index < names.Length; index++)
+            _enumNames[names[index]] = values[index];
     }
 
     /// <summary>
@@ -49,12 +69,6 @@ public partial class MaterialIconPicker : TemplatedControl
         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>
@@ -64,16 +78,14 @@ public partial class MaterialIconPicker : TemplatedControl
         private init => SetAndRaise(SelectIconProperty, ref _selectIcon, value);
     }
 
-    #region Overrides of TemplatedControl
+    internal MaterialIconPickerFlyout? Flyout { get; set; }
 
-    /// <inheritdoc />
-    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    private void Setup()
     {
-        _searchBox = e.NameScope.Find<TextBox>("SearchBox");
-        _iconsContainer = e.NameScope.Find<ItemsRepeater>("IconsContainer");
-        if (_iconsContainer == null)
+        if (_searchBox == null || _iconsContainer == null)
             return;
 
+        // Build a list of values, they are not unique because a value with multiple names occurs once per name
         _iconsSource = new SourceList<MaterialIconKind>();
         _iconsSource.AddRange(Enum.GetValues<MaterialIconKind>().Distinct());
         _sub = _iconsSource.Connect()
@@ -84,6 +96,25 @@ public partial class MaterialIconPicker : TemplatedControl
         _iconsContainer.ItemsSource = icons;
     }
 
+    #region Overrides of TemplatedControl
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        _searchBox = e.NameScope.Find<TextBox>("SearchBox");
+        _iconsContainer = e.NameScope.Find<ItemsRepeater>("IconsContainer");
+
+        Setup();
+        base.OnApplyTemplate(e);
+    }
+
+    /// <inheritdoc />
+    protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        Setup();
+        base.OnAttachedToLogicalTree(e);
+    }
+
     /// <inheritdoc />
     protected override void OnDetachedFromLogicalTree(LogicalTreeAttachmentEventArgs e)
     {
@@ -91,6 +122,9 @@ public partial class MaterialIconPicker : TemplatedControl
         _iconsSource = null;
         _sub?.Dispose();
         _sub = null;
+
+        if (_searchBox != null)
+            _searchBox.Text = "";
         base.OnDetachedFromLogicalTree(e);
     }
 
@@ -99,8 +133,11 @@ public partial class MaterialIconPicker : TemplatedControl
         if (string.IsNullOrWhiteSpace(text))
             return _ => true;
 
+        // Strip out whitespace and find all matching enum values
         text = StripWhiteSpaceRegex().Replace(text, "");
-        return data => data.ToString().Contains(text, StringComparison.InvariantCultureIgnoreCase);
+        HashSet<MaterialIconKind> values = _enumNames.Where(n => n.Key.Contains(text, StringComparison.OrdinalIgnoreCase)).Select(n => n.Value).ToHashSet();
+        // Only show those that matched
+        return data => values.Contains(data);
     }
 
     [GeneratedRegex("\\s+")]

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

@@ -31,7 +31,7 @@ public class MaterialIconPickerButton : TemplatedControl
     ///     Gets or sets the desired flyout placement.
     /// </summary>
     public static readonly StyledProperty<PlacementMode> PlacementProperty =
-        AvaloniaProperty.Register<FlyoutBase, PlacementMode>(nameof(Placement));
+        AvaloniaProperty.Register<FlyoutBase, PlacementMode>(nameof(Placement), PlacementMode.BottomEdgeAlignedLeft);
 
     private Button? _button;
     private MaterialIconPickerFlyout? _flyout;
@@ -79,14 +79,21 @@ public class MaterialIconPickerButton : TemplatedControl
         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;
-
+        MaterialIconPickerFlyout flyout = new();
+        flyout.FlyoutPresenterClasses.Add("material-icon-picker-presenter");
+        flyout.MaterialIconPicker.Value = Value;
+        flyout.Placement = Placement;
+        
+        flyout.Closed += FlyoutOnClosed;
+        flyout.ShowAt(this);
         FlyoutOpened?.Invoke(this, EventArgs.Empty);
+
+        void FlyoutOnClosed(object? closedSender, EventArgs closedEventArgs)
+        {
+            Value = flyout.MaterialIconPicker.Value;
+            flyout.Closed -= FlyoutOnClosed;
+            FlyoutClosed?.Invoke(this, EventArgs.Empty);
+        }
     }
 
     #region Overrides of TemplatedControl

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

@@ -28,7 +28,6 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate>
-
                 <Button
                     Name="MainButton"
                     Padding="0 0 12 0"

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

@@ -1,6 +1,8 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker">
+        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker"
+        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters">
     <Design.PreviewWith>
         <Border Padding="20" Width="600" Height="800">
             <StackPanel Spacing="5">
@@ -9,7 +11,8 @@
         </Border>
     </Design.PreviewWith>
 
-    <Style Selector="FlyoutPresenter.data-model-picker-presenter">
+    <Style Selector="FlyoutPresenter.material-icon-picker-presenter">
+        <Setter Property="Padding" Value="0" />
         <Setter Property="MaxWidth" Value="1200" />
         <Setter Property="MaxHeight" Value="1200" />
         <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" />
@@ -18,6 +21,9 @@
     </Style>
 
     <Style Selector="materialIconPicker|MaterialIconPickerButton">
+        <Style.Resources>
+            <converters:ToStringConverter x:Key="ToStringConverter" />
+        </Style.Resources>
         <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
         <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
         <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
@@ -33,16 +39,15 @@
                         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" 
+                        <StackPanel Grid.Column="0" IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNotNull}}" Orientation="Horizontal" Spacing="5">
+                            <avalonia:MaterialIcon Kind="{TemplateBinding Value}"/>
+                            <TextBlock VerticalAlignment="Center" TextAlignment="Left" TextTrimming="CharacterEllipsis" Text="{TemplateBinding Value, Converter={StaticResource ToStringConverter}}"/>
+                        </StackPanel>
+                       
+                        <TextBlock Grid.Column="0"
                                    Text="{TemplateBinding Placeholder}"
-                                   Foreground="{DynamicResource TextControlPlaceholderForeground}"></TextBlock>
+                                   Foreground="{DynamicResource TextControlPlaceholderForeground}"
+                                   IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNull}}" />
                         <TextBlock Name="ChevronTextBlock"
                                    Grid.Column="1"
                                    FontFamily="{DynamicResource SymbolThemeFontFamily}"