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

Merge branch 'feature/icon-picker' into development

Browse Source
This commit is contained in:
Robert 2023-05-18 19:44:21 +02:00
commit cb98f25780
11 changed files with 467 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/Artemis.UI.Shared/Controls/Flyouts/MaterialIconPickerFlyout.cs Normal file
View File

@ -0,0 +1,38 @@
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();
_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
}

147
src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPicker.cs Normal file
View File

@ -0,0 +1,147 @@
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 Artemis.UI.Shared.Flyouts;
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);
/// <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 readonly Dictionary<string,MaterialIconKind> _enumNames;
/// <inheritdoc />
public MaterialIconPicker()
{
_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>
/// 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 ICommand SelectIcon
{
get => _selectIcon;
private init => SetAndRaise(SelectIconProperty, ref _selectIcon, value);
}
internal MaterialIconPickerFlyout? Flyout { get; set; }
private void Setup()
{
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()
.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;
}
#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)
{
_iconsSource?.Dispose();
_iconsSource = null;
_sub?.Dispose();
_sub = null;
if (_searchBox != null)
_searchBox.Text = "";
base.OnDetachedFromLogicalTree(e);
}
private Func<MaterialIconKind, bool> CreatePredicate(string? text)
{
if (string.IsNullOrWhiteSpace(text))
return _ => true;
// Strip out whitespace and find all matching enum values
text = StripWhiteSpaceRegex().Replace(text, "");
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+")]
private static partial Regex StripWhiteSpaceRegex();
#endregion
}

137
src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPickerButton.cs Normal file
View File

@ -0,0 +1,137 @@
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), PlacementMode.BottomEdgeAlignedLeft);
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;
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
/// <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
}

2
src/Artemis.UI.Shared/Styles/Artemis.axaml
View File

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

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"

55
src/Artemis.UI.Shared/Styles/Controls/MaterialIconPicker.axaml Normal file
View File

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

65
src/Artemis.UI.Shared/Styles/Controls/MaterialIconPickerButton.axaml Normal file
View File

@ -0,0 +1,65 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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">
<materialIconPicker:MaterialIconPickerButton Value="Achievement" />
</StackPanel>
</Border>
</Design.PreviewWith>
<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}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
</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}" />
<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">
<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}"
IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNull}}" />
<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>

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

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

@ -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,9 @@
Create random gradient
</Button>
<gradientPicker:GradientPickerButton ColorGradient="{CompiledBinding ColorGradient}" IsCompact="True" />
<materialIconPicker:MaterialIconPickerButton Name="IconPicker" Value="Abc"/>
<TextBlock Text="{CompiledBinding #IconPicker.Value}"></TextBlock>
</StackPanel>
</Border>
</StackPanel>