DarthAffe/Artemis
1
0
Fork 0
mirror of https://github.com/Artemis-RGB/Artemis synced 2025-12-12 13:28:33 +00:00
Code Issues Releases Wiki Activity

UI - Added new icon picker to profile configuration dialog

Browse Source
This commit is contained in:
Robert 2023-05-18 19:39:15 +02:00
parent 07f8209b7b
commit ed3a770881
9 changed files with 119 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/Artemis.UI.Shared/Controls/Flyouts/MaterialIconPickerFlyout.cs
View File

@ -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
}

69
src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPicker.cs
View File

@ -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+")]

23
src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPickerButton.cs
View File

@ -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

1
src/Artemis.UI.Shared/Styles/Controls/GradientPickerButton.axaml
View File

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

27
src/Artemis.UI.Shared/Styles/Controls/MaterialIconPickerButton.axaml
View File

@ -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}"

28
src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditView.axaml
View File

@ -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}"
SelectedItem="{CompiledBinding SelectedMaterialIcon}"
VerticalAlignment="Bottom"
IsTextSearchEnabled="True"
Margin="10 0"
Width="250"
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>
<materialIconPicker:MaterialIconPickerButton
Value="{CompiledBinding SelectedMaterialIcon.Icon}"
Margin="10 0"
Width="250"
VerticalAlignment="Bottom"
IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}"/>
</StackPanel>
<CheckBox VerticalAlignment="Bottom" IsChecked="{CompiledBinding FadeInAndOut}" ToolTip.Tip="Smoothly animates in and out when the profile activation conditions change.">

10
src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditViewModel.cs
View File

@ -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;
@ -185,13 +184,7 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
get => _iconType;
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()

13
src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileIconViewModel.cs
View File

@ -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();
}
}
}

3
src/Artemis.UI/Screens/Workshop/WorkshopView.axaml
View File

@ -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>