feat: update styles, simplify index calculation.

This commit is contained in:
rabbitism
2023-06-29 11:12:56 +08:00
parent b848cad0a3
commit 5911ac04fb
8 changed files with 94 additions and 29 deletions

View File

@@ -6,7 +6,7 @@
<ControlTheme x:Key="{x:Type u:TagInput}" TargetType="u:TagInput">
<Setter Property="InputTheme" Value="{DynamicResource TagInputTextBoxTheme}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="MinHeight" Value="{DynamicResource TagInputDefaultHeight}" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="ItemTemplate">
<DataTemplate>
@@ -16,10 +16,13 @@
<Setter Property="Template">
<ControlTemplate TargetType="u:TagInput">
<Border
Name="PART_RootBorder"
MinHeight="30"
Padding="8,4"
VerticalAlignment="Stretch"
Background="{DynamicResource SemiColorFill0}"
Background="{DynamicResource TextBoxDefaultBackground}"
BorderBrush="{DynamicResource TextBoxDefaultBorderBrush}"
BorderThickness="1"
CornerRadius="3">
<Panel HorizontalAlignment="Stretch">
<ItemsControl
@@ -39,6 +42,12 @@
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border#PART_RootBorder">
<Setter Property="Border.Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
</Style>
<Style Selector="^:focus-within /template/ Border#PART_RootBorder">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="TagInputTextBoxTheme" TargetType="TextBox">
@@ -48,6 +57,7 @@
<Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
<Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
<Setter Property="TextBox.Cursor" Value="Ibeam" />
<Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
@@ -87,15 +97,19 @@
<ControlTheme x:Key="{x:Type u:ClosableTag}" TargetType="u:ClosableTag">
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="u:ClosableTag.Foreground" Value="{DynamicResource LabelTagLightGreyForeground}" />
<Setter Property="u:ClosableTag.Background" Value="{DynamicResource ClosableTagBackground}" />
<Setter Property="u:ClosableTag.BorderBrush" Value="{DynamicResource SemiColorBorder}" />
<Setter Property="u:ClosableTag.BorderThickness" Value="1" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate TargetType="u:ClosableTag">
<Border
Margin="1"
Padding="4,2"
Background="{DynamicResource SemiColorBackground0}"
BorderBrush="{DynamicResource SemiColorBorder}"
BorderThickness="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="3">
<DockPanel LastChildFill="True">
<PathIcon
@@ -104,11 +118,13 @@
Height="8"
Margin="4,0"
Background="Transparent"
Data="M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z"
DockPanel.Dock="Right" />
Data="{DynamicResource ClosableTagCloseIconGlyph}"
DockPanel.Dock="Right"
Foreground="{TemplateBinding Foreground}" />
<TextBlock
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
FontSize="12"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Content}"
TextTrimming="CharacterEllipsis" />
</DockPanel>

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="ClosableTagBackground" Opacity="0.15" Color="#888D92" />
</ResourceDictionary>

View File

@@ -9,6 +9,7 @@
<MergeResourceInclude Source="Loading.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="ClosableTagBackground" Color="White" />
</ResourceDictionary>

View File

@@ -9,6 +9,7 @@
<MergeResourceInclude Source="Loading.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,5 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<PathGeometry x:Key="ClosableTagCloseIconGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
<x:Double x:Key="TagInputDefaultHeight">32</x:Double>
</ResourceDictionary>

View File

@@ -8,5 +8,6 @@
<MergeResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="NavigationMenu.axaml" />
<MergeResourceInclude Source="Pagination.axaml" />
<MergeResourceInclude Source="TagInput.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -14,26 +14,31 @@ using Avalonia.Styling;
namespace Ursa.Controls;
[TemplatePart (PART_ItemsControl, typeof (ItemsControl))]
public class TagInput: TemplatedControl
[TemplatePart(PART_ItemsControl, typeof(ItemsControl))]
public class TagInput : TemplatedControl
{
public const string PART_ItemsControl = "PART_ItemsControl";
private readonly TextBox _textBox;
private ItemsControl? _itemsControl;
public static readonly StyledProperty<IList<string>> TagsProperty = AvaloniaProperty.Register<TagInput, IList<string>>(
nameof(Tags));
public static readonly StyledProperty<IList<string>> TagsProperty =
AvaloniaProperty.Register<TagInput, IList<string>>(
nameof(Tags));
public IList<string> Tags
{
get => GetValue(TagsProperty);
set => SetValue(TagsProperty, value);
}
public static readonly DirectProperty<TagInput, IList> ItemsProperty = AvaloniaProperty.RegisterDirect<TagInput, IList>(
nameof(Items), o => o.Items);
public static readonly DirectProperty<TagInput, IList> ItemsProperty =
AvaloniaProperty.RegisterDirect<TagInput, IList>(
nameof(Items), o => o.Items);
private IList _items;
public IList Items
{
get => _items;
@@ -48,8 +53,9 @@ public class TagInput: TemplatedControl
Tags = new ObservableCollection<string>();
}
public static readonly StyledProperty<ControlTheme> InputThemeProperty = AvaloniaProperty.Register<TagInput, ControlTheme>(
nameof(InputTheme));
public static readonly StyledProperty<ControlTheme> InputThemeProperty =
AvaloniaProperty.Register<TagInput, ControlTheme>(
nameof(InputTheme));
public ControlTheme InputTheme
{
@@ -57,8 +63,9 @@ public class TagInput: TemplatedControl
set => SetValue(InputThemeProperty, value);
}
public static readonly StyledProperty<IDataTemplate?> ItemTemplateProperty = AvaloniaProperty.Register<TagInput, IDataTemplate?>(
nameof(ItemTemplate));
public static readonly StyledProperty<IDataTemplate?> ItemTemplateProperty =
AvaloniaProperty.Register<TagInput, IDataTemplate?>(
nameof(ItemTemplate));
public IDataTemplate? ItemTemplate
{
@@ -84,6 +91,27 @@ public class TagInput: TemplatedControl
set => SetValue(AllowDuplicatesProperty, value);
}
public static readonly StyledProperty<object?> InnerLeftContentProperty =
AvaloniaProperty.Register<TagInput, object?>(
nameof(InnerLeftContent));
public object? InnerLeftContent
{
get => GetValue(InnerLeftContentProperty);
set => SetValue(InnerLeftContentProperty, value);
}
public static readonly StyledProperty<object?> InnerRightContentProperty =
AvaloniaProperty.Register<TagInput, object?>(
nameof(InnerRightContent));
public object? InnerRightContent
{
get => GetValue(InnerRightContentProperty);
set => SetValue(InnerRightContentProperty, value);
}
static TagInput()
{
InputThemeProperty.Changed.AddClassHandler<TagInput>((o, e) => o.OnInputThemePropertyChanged(e));
@@ -93,7 +121,7 @@ public class TagInput: TemplatedControl
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
_itemsControl = e.NameScope.Find<ItemsControl>(PART_ItemsControl);
_itemsControl = e.NameScope.Find<ItemsControl>(PART_ItemsControl);
Items.Add(_textBox);
}
@@ -105,14 +133,15 @@ public class TagInput: TemplatedControl
_textBox.Theme = newTheme;
}
}
private void OnTagsPropertyChanged(AvaloniaPropertyChangedEventArgs args)
{
var newTags = args.GetNewValue<IList<string>>();
for (int i = 0; i < Items.Count - 1; i++)
{
Items.RemoveAt(Items.Count-1);
Items.RemoveAt(Items.Count - 1);
}
for (int i = 0; i < newTags.Count; i++)
{
Items.Insert(Items.Count - 1, newTags[i]);
@@ -140,11 +169,14 @@ public class TagInput: TemplatedControl
{
values = values.Distinct().Except(Tags).ToArray();
}
for(int i = 0; i < values.Length; i++)
for (int i = 0; i < values.Length; i++)
{
Items.Insert(Items.Count - 1, values[i]);
Tags.Insert(Items.Count - 2, values[i]);
int index = Items.Count - 1;
Items.Insert(index, values[i]);
Tags.Insert(index, values[i]);
}
_textBox.Text = "";
}
}
@@ -156,8 +188,9 @@ public class TagInput: TemplatedControl
{
return;
}
Items.RemoveAt(Items.Count - 2);
Tags.RemoveAt(Items.Count - 1);
int index = Items.Count - 2;
Items.RemoveAt(index);
Tags.RemoveAt(index);
}
}
}