mirror of
https://github.com/Artemis-RGB/Artemis
synced 2025-12-12 13:28:33 +00:00
UI - Initial icon picker commit
This commit is contained in:
Robert
parent
c86dba30fc
commit
07f8209b7b
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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" />
|
||||
|
||||
@ -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>
|
||||
@ -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=""
|
||||
VerticalAlignment="Center"
|
||||
TextAlignment="Right"
|
||||
Padding="2 2 2 0"
|
||||
Margin="5 0" />
|
||||
</Grid>
|
||||
</Button>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</Style>
|
||||
</Styles>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user