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 Dictionary<string,MaterialIconKind> _enumNames;
-    private readonly ICommand _selectIcon;
 
     /// <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 />
+    private void Setup()
-    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
-        _searchBox = e.NameScope.Find<TextBox>("SearchBox");
+        if (_searchBox == null || _iconsContainer == null)
-        _iconsContainer = e.NameScope.Find<ItemsRepeater>("IconsContainer");
-        if (_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
+        MaterialIconPickerFlyout flyout = new();
-        _flyout.MaterialIconPicker.Value = Value;
+        flyout.FlyoutPresenterClasses.Add("material-icon-picker-presenter");
-
+        flyout.MaterialIconPicker.Value = Value;
-        _flyout.Placement = Placement;
+        flyout.Placement = Placement;
-        _flyout.ShowAt(_button != null ? _button : this);
-        _flyoutActive = true;
         
+        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"
+                        <StackPanel Grid.Column="0" IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNotNull}}" Orientation="Horizontal" Spacing="5">
-                                   Grid.Column="0"
+                            <avalonia:MaterialIcon Kind="{TemplateBinding Value}"/>
-                                   VerticalAlignment="Center"
+                            <TextBlock VerticalAlignment="Center" TextAlignment="Left" TextTrimming="CharacterEllipsis" Text="{TemplateBinding Value, Converter={StaticResource ToStringConverter}}"/>
-                                   TextAlignment="Left"
+                        </StackPanel>
-                                   TextTrimming="CharacterEllipsis"
+                       
-                                   Text="{TemplateBinding Value}"
-                                   IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNotNull}}"/>
                         <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}"

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

@@ -8,6 +8,7 @@
                       xmlns:local="clr-namespace:Artemis.UI.Screens.Sidebar"
                       xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
                       xmlns:windowing="clr-namespace:FluentAvalonia.UI.Windowing;assembly=FluentAvalonia"
+                      xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker;assembly=Artemis.UI.Shared"
                       mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="850"
                       x:Class="Artemis.UI.Screens.Sidebar.ProfileConfigurationEditView"
                       x:DataType="local:ProfileConfigurationEditViewModel"
@@ -108,27 +109,12 @@
                             <Border Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}" Width="78" Height="78">
                                 <avalonia:MaterialIcon Kind="{CompiledBinding SelectedMaterialIcon.Icon}" Width="45" Height="45" />
                             </Border>
-                            <ComboBox ItemsSource="{CompiledBinding MaterialIcons}"
+                            <materialIconPicker:MaterialIconPickerButton 
-                                      SelectedItem="{CompiledBinding SelectedMaterialIcon}"
+                                Value="{CompiledBinding SelectedMaterialIcon.Icon}"
-                                      VerticalAlignment="Bottom"
+                                Margin="10 0"
-                                      IsTextSearchEnabled="True"
+                                Width="250"
-                                      Margin="10 0"
+                                VerticalAlignment="Bottom" 
-                                      Width="250"
+                                IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}"/>
-                                      IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}">
-                                <ComboBox.ItemsPanel>
-                                    <ItemsPanelTemplate>
-                                        <VirtualizingStackPanel Width="250"/>
-                                    </ItemsPanelTemplate>
-                                </ComboBox.ItemsPanel>
-                                <ComboBox.ItemTemplate>
-                                    <DataTemplate DataType="local:ProfileIconViewModel">
-                                        <StackPanel Orientation="Horizontal">
-                                            <avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Margin="0 0 5 0" />
-                                            <TextBlock Text="{CompiledBinding DisplayName}" />
-                                        </StackPanel>
-                                    </DataTemplate>
-                                </ComboBox.ItemTemplate>
-                            </ComboBox>
                         </StackPanel>
 
                         <CheckBox VerticalAlignment="Bottom" IsChecked="{CompiledBinding FadeInAndOut}" ToolTip.Tip="Smoothly animates in and out when the profile activation conditions change.">

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditViewModel.cs

@@ -32,7 +32,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
     private bool _fadeInAndOut;
     private ProfileConfigurationHotkeyMode _hotkeyMode;
     private ProfileConfigurationIconType _iconType;
-    private ObservableCollection<ProfileIconViewModel>? _materialIcons;
     private ProfileConfiguration _profileConfiguration;
     private string _profileName;
     private Bitmap? _selectedBitmapSource;
@@ -186,12 +185,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
         set => RaiseAndSetIfChanged(ref _iconType, value);
     }
     
-    public ObservableCollection<ProfileIconViewModel>? MaterialIcons
-    {
-        get => _materialIcons;
-        set => RaiseAndSetIfChanged(ref _materialIcons, value);
-    }
-
     public ProfileIconViewModel? SelectedMaterialIcon
     {
         get => _selectedMaterialIcon;
@@ -227,7 +220,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
         SelectedMaterialIcon = !IsNew && Enum.TryParse(_profileConfiguration.Icon.IconName, out MaterialIconKind enumValue)
             ? icons.FirstOrDefault(m => m.Icon == enumValue)
             : icons.ElementAt(new Random().Next(0, icons.Count - 1));
-        MaterialIcons = icons;
     }
 
     private async Task SaveIcon()

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileIconViewModel.cs

@@ -5,11 +5,20 @@ namespace Artemis.UI.Screens.Sidebar;
 
 public class ProfileIconViewModel : ViewModelBase
 {
+    private MaterialIconKind _icon;
+
     public ProfileIconViewModel(MaterialIconKind icon)
     {
         Icon = icon;
-        DisplayName = icon.ToString();
     }
 
-    public MaterialIconKind Icon { get; }
+    public MaterialIconKind Icon
+    {
+        get => _icon;
+        set
+        {
+            RaiseAndSetIfChanged(ref _icon, value);
+            DisplayName = _icon.ToString();
+        }
+    }
 }

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

@@ -61,7 +61,8 @@
                         </Button>
                         <gradientPicker:GradientPickerButton ColorGradient="{CompiledBinding ColorGradient}" IsCompact="True" />
                         
-                        <materialIconPicker:MaterialIconPickerButton/>
+                        <materialIconPicker:MaterialIconPickerButton Name="IconPicker" Value="Abc"/>
+                        <TextBlock Text="{CompiledBinding #IconPicker.Value}"></TextBlock>
                     </StackPanel>
                 </Border>
             </StackPanel>