From bb928fb2398e586c6becdaceb03831b9c84abb9e Mon Sep 17 00:00:00 2001 From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Date: Tue, 21 Jan 2025 16:43:46 +0800 Subject: [PATCH 01/11] misc: simplify PaletteDemo. --- .../ViewModels/PaletteDemoViewModel.cs | 224 +++++------------- 1 file changed, 58 insertions(+), 166 deletions(-) diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs index ab68f6e9..47fff189 100644 --- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs +++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs @@ -11,7 +11,7 @@ namespace Semi.Avalonia.Demo.ViewModels; -public class PaletteDemoViewModel : ObservableObject +public partial class PaletteDemoViewModel : ObservableObject { private readonly string[] _predefinedColorNames = [ @@ -24,31 +24,10 @@ public class PaletteDemoViewModel : ObservableObject private readonly IResourceDictionary? _lightResourceDictionary; private readonly IResourceDictionary? _darkResourceDictionary; - private ColorItemViewModel _selectedColor = null!; - - public ColorItemViewModel SelectedColor - { - get => _selectedColor; - set => SetProperty(ref _selectedColor, value); - } - - - private ObservableCollection? _lightLists; - - public ObservableCollection? LightLists - { - get => _lightLists; - set => SetProperty(ref _lightLists, value); - } - - private ObservableCollection? _darkLists; - - public ObservableCollection? DarkLists - { - get => _darkLists; - set => SetProperty(ref _darkLists, value); - } + [ObservableProperty] private ColorItemViewModel? _selectedColor; + public ObservableCollection LightLists { get; set; } = []; + public ObservableCollection DarkLists { get; set; } = []; public ObservableCollection FunctionalColors { get; set; } = []; public ObservableCollection Shadows { get; set; } = []; @@ -56,7 +35,7 @@ public PaletteDemoViewModel() { _lightResourceDictionary = new Light(); _darkResourceDictionary = new Dark(); - WeakReferenceMessenger.Default.Register(this, OnClickColorItem); + WeakReferenceMessenger.Default.Register(this, (_, item) => SelectedColor = item); } public void InitializeResources() @@ -68,7 +47,6 @@ public void InitializeResources() private void InitializePalette() { - LightLists = []; foreach (var color in _predefinedColorNames) { ColorListViewModel s = new ColorListViewModel(); @@ -76,7 +54,6 @@ private void InitializePalette() LightLists.Add(s); } - DarkLists = []; foreach (var color in _predefinedColorNames) { ColorListViewModel s = new ColorListViewModel(); @@ -87,126 +64,75 @@ private void InitializePalette() private void InitializeFunctionalColors() { - FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens)); - FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens)); + FunctionalColors.Add(new FunctionalColorGroupViewModel( + "Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens)); } private void InitializeShadows() { - Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens)); - } - - private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item) - { - SelectedColor = item; + Shadows.Add(new ShadowGroupViewModel( + "Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens)); } } -public class ColorListViewModel : ObservableObject +public partial class ColorListViewModel : ObservableObject { - private ObservableCollection? _colors; - - public ObservableCollection? Color - { - get => _colors; - set => SetProperty(ref _colors, value); - } + public ObservableCollection Color { get; set; } = []; - private string? _seriesName; - - public string? SeriesName - { - get => _seriesName; - set => SetProperty(ref _seriesName, value); - } + [ObservableProperty] private string? _seriesName; internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light) { - if (resourceDictionary is null) - { - return; - } + if (resourceDictionary is null) return; SeriesName = color; - Color = []; for (var i = 0; i < 10; i++) { - var key = "Semi" + color + i; - if (resourceDictionary.TryGetValue(key, out var value)) + var key = $"Semi{color}{i}"; + if (resourceDictionary.TryGetValue(key, out var value) && value is ISolidColorBrush brush) { - if (value is ISolidColorBrush brush) - { - string name = color + " " + i; - var item = new ColorItemViewModel(name, brush, key, light, i); - item.ColorResourceKey = item.ResourceKey + "Color"; - Color.Add(item); - } + var name = $"{color} {i}"; + var item = new ColorItemViewModel(name, brush, key, light, i); + item.ColorResourceKey = $"{item.ResourceKey}Color"; + Color.Add(item); } } } } -public class ColorItemViewModel : ObservableObject +public partial class ColorItemViewModel : ObservableObject { - private IBrush _brush = null!; - - public IBrush Brush - { - get => _brush; - set => SetProperty(ref _brush, value); - } - - private IBrush _textBrush = null!; - - public IBrush TextBrush - { - get => _textBrush; - set => SetProperty(ref _textBrush, value); - } - - private string _colorDisplayName = null!; - - public string ColorDisplayName - { - get => _colorDisplayName; - set => SetProperty(ref _colorDisplayName, value); - } - - private string _resourceKey = null!; - - public string ResourceKey - { - get => _resourceKey; - set => SetProperty(ref _resourceKey, value); - } - - private string _colorResourceKey = null!; - - public string ColorResourceKey - { - get => _colorResourceKey; - set => SetProperty(ref _colorResourceKey, value); - } - - private string _hex = null!; - - public string Hex - { - get => _hex; - set => SetProperty(ref _hex, value); - } + [ObservableProperty] private IBrush? _brush; + [ObservableProperty] private IBrush? _textBrush; + [ObservableProperty] private string? _colorDisplayName; + [ObservableProperty] private string? _resourceKey; + [ObservableProperty] private string? _colorResourceKey; + [ObservableProperty] private string? _hex; public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index) @@ -227,16 +153,9 @@ public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, strin } } -public class FunctionalColorGroupViewModel : ObservableObject +public partial class FunctionalColorGroupViewModel : ObservableObject { - private string _title = null!; - - public string Title - { - get => _title; - set => SetProperty(ref _title, value); - } - + [ObservableProperty] private string? _title; public ObservableCollection LightColors { get; set; } = []; public ObservableCollection DarkColors { get; set; } = []; @@ -265,31 +184,11 @@ public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDic } } -public class ShadowItemViewModel : ObservableObject +public partial class ShadowItemViewModel : ObservableObject { - private string _shadowDisplayName = null!; - - public string ShadowDisplayName - { - get => _shadowDisplayName; - set => SetProperty(ref _shadowDisplayName, value); - } - - private string _resourceKey = null!; - - public string ResourceKey - { - get => _resourceKey; - set => SetProperty(ref _resourceKey, value); - } - - private string _boxShadowValue = null!; - - public string BoxShadowValue - { - get => _boxShadowValue; - set => SetProperty(ref _boxShadowValue, value); - } + [ObservableProperty] private string? _shadowDisplayName; + [ObservableProperty] private string? _resourceKey; + [ObservableProperty] private string? _boxShadowValue; public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey) { @@ -299,16 +198,9 @@ public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, stri } } -public class ShadowGroupViewModel : ObservableObject +public partial class ShadowGroupViewModel : ObservableObject { - private string _title = null!; - - public string Title - { - get => _title; - set => SetProperty(ref _title, value); - } - + [ObservableProperty] private string? _title; public ObservableCollection LightShadows { get; set; } = []; public ObservableCollection DarkShadows { get; set; } = []; From a99db733ed03b8ef4b21f6c19f5c981bb0be2fd0 Mon Sep 17 00:00:00 2001 From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Date: Tue, 21 Jan 2025 18:51:45 +0800 Subject: [PATCH 02/11] feat: add VariablesDemo. --- .../Constant/ColorTokens.cs | 223 ++++++++++++++++++ .../Pages/PaletteDemo.axaml.cs | 10 +- .../Pages/VariablesDemo.axaml | 70 ++++++ .../Pages/VariablesDemo.axaml.cs | 22 ++ .../Themes/FunctionalColorGroupControl.axaml | 4 +- .../Themes/ShadowGroupControl.axaml | 4 +- .../ViewModels/PaletteDemoViewModel.cs | 129 +--------- .../ViewModels/VariablesDemoViewModel.cs | 67 ++++++ demo/Semi.Avalonia.Demo/Views/MainView.axaml | 3 + 9 files changed, 392 insertions(+), 140 deletions(-) create mode 100644 demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs create mode 100644 demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml create mode 100644 demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs create mode 100644 demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs diff --git a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs new file mode 100644 index 00000000..e8dd809c --- /dev/null +++ b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs @@ -0,0 +1,223 @@ +using System; +using System.Collections.Generic; + +namespace Semi.Avalonia.Demo.Constant; + +public static class ColorTokens +{ + public static IReadOnlyList> PrimaryTokens { get; } = new List> + { + new("SemiColorPrimary", "Primary"), + new("SemiColorPrimaryPointerover", "Primary Pointerover"), + new("SemiColorPrimaryActive", "Primary Active"), + new("SemiColorPrimaryDisabled", "Primary Disabled"), + new("SemiColorPrimaryLight", "Primary Light"), + new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"), + new("SemiColorPrimaryLightActive", "Primary Light Active"), + }; + + public static IReadOnlyList> SecondaryTokens { get; } = new List> + { + new("SemiColorSecondary", "Secondary"), + new("SemiColorSecondaryPointerover", "Secondary Pointerover"), + new("SemiColorSecondaryActive", "Secondary Active"), + new("SemiColorSecondaryDisabled", "Secondary Disabled"), + new("SemiColorSecondaryLight", "Secondary Light"), + new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"), + new("SemiColorSecondaryLightActive", "Secondary Light Active"), + }; + + public static IReadOnlyList> TertiaryTokens { get; } = new List> + { + new("SemiColorTertiary", "Tertiary"), + new("SemiColorTertiaryPointerover", "Tertiary Pointerover"), + new("SemiColorTertiaryActive", "Tertiary Active"), + new("SemiColorTertiaryLight", "Tertiary Light"), + new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"), + new("SemiColorTertiaryLightActive", "Tertiary Light Active"), + }; + + public static IReadOnlyList> InformationTokens { get; } = new List> + { + new("SemiColorInformation", "Information"), + new("SemiColorInformationPointerover", "Information Pointerover"), + new("SemiColorInformationActive", "Information Active"), + new("SemiColorInformationDisabled", "Information Disabled"), + new("SemiColorInformationLight", "Information Light"), + new("SemiColorInformationLightPointerover", "Information Light Pointerover"), + new("SemiColorInformationLightActive", "Information Light Active"), + }; + + public static IReadOnlyList> SuccessTokens { get; } = new List> + { + new("SemiColorSuccess", "Success"), + new("SemiColorSuccessPointerover", "Success Pointerover"), + new("SemiColorSuccessActive", "Success Active"), + new("SemiColorSuccessDisabled", "Success Disabled"), + new("SemiColorSuccessLight", "Success Light"), + new("SemiColorSuccessLightPointerover", "Success Light Pointerover"), + new("SemiColorSuccessLightActive", "Success Light Active"), + }; + + public static IReadOnlyList> WarningTokens { get; } = new List> + { + new("SemiColorWarning", "Warning"), + new("SemiColorWarningPointerover", "Warning Pointerover"), + new("SemiColorWarningActive", "Warning Active"), + new("SemiColorWarningLight", "Warning Light"), + new("SemiColorWarningLightPointerover", "Warning Light Pointerover"), + new("SemiColorWarningLightActive", "Warning Light Active"), + }; + + public static IReadOnlyList> DangerTokens { get; } = new List> + { + new("SemiColorDanger", "Danger"), + new("SemiColorDangerPointerover", "Danger Pointerover"), + new("SemiColorDangerActive", "Danger Active"), + new("SemiColorDangerLight", "Danger Light"), + new("SemiColorDangerLightPointerover", "Danger Light Pointerover"), + new("SemiColorDangerLightActive", "Danger Light Active"), + }; + + public static IReadOnlyList> TextTokens { get; } = new List> + { + new("SemiColorText0", "Text 0"), + new("SemiColorText1", "Text 1"), + new("SemiColorText2", "Text 2"), + new("SemiColorText3", "Text 3"), + }; + + public static IReadOnlyList> LinkTokens { get; } = new List> + { + new("SemiColorLink", "Link"), + new("SemiColorLinkPointerover", "Link Pointerover"), + new("SemiColorLinkActive", "Link Active"), + new("SemiColorLinkVisited", "Link Visited"), + }; + + public static IReadOnlyList> BackgroundTokens { get; } = new List> + { + new("SemiColorBackground0", "Background 0"), + new("SemiColorBackground1", "Background 1"), + new("SemiColorBackground2", "Background 2"), + new("SemiColorBackground3", "Background 3"), + new("SemiColorBackground4", "Background 4"), + }; + + public static IReadOnlyList> FillTokens { get; } = new List> + { + new("SemiColorFill0", "Fill 0"), + new("SemiColorFill1", "Fill 1"), + new("SemiColorFill2", "Fill 2"), + }; + + public static IReadOnlyList> BorderTokens { get; } = new List> + { + new("SemiColorBorder", "Border"), + }; + + public static IReadOnlyList> DisabledTokens { get; } = new List> + { + new("SemiColorDisabledText", "Disabled Text"), + new("SemiColorDisabledBorder", "Disabled Border"), + new("SemiColorDisabledBackground", "Disabled Background"), + new("SemiColorDisabledFill", "Disabled Fill"), + }; + + public static IReadOnlyList> ShadowTokens { get; } = new List> + { + new("SemiColorShadow", "Shadow"), + new("SemiShadowElevated", "Shadow Elevated"), + }; + + public static IReadOnlyList> HeightTokens { get; } = new List> + { + new("SemiHeightControlSmall", ""), + new("SemiHeightControlDefault", ""), + new("SemiHeightControlLarge", ""), + }; + + public static IReadOnlyList> IconSizeTokens { get; } = new List> + { + new("SemiWidthIconExtraSmall", ""), + new("SemiWidthIconSmall", ""), + new("SemiWidthIconMedium", ""), + new("SemiWidthIconLarge", ""), + new("SemiWidthIconExtraLarge", ""), + }; + + public static IReadOnlyList> CornerRadiusTokens { get; } = new List> + { + new("SemiBorderRadiusExtraSmall", ""), + new("SemiBorderRadiusSmall", ""), + new("SemiBorderRadiusMedium", ""), + new("SemiBorderRadiusLarge", ""), + new("SemiBorderRadiusFull", ""), + }; + + public static IReadOnlyList> BorderSpacingTokens { get; } = new List> + { + new("SemiBorderSpacing", ""), + new("SemiBorderSpacingControl", ""), + new("SemiBorderSpacingControlFocus", ""), + }; + + public static IReadOnlyList> BorderThicknessTokens { get; } = new List> + { + new("SemiBorderThickness", ""), + new("SemiBorderThicknessControl", ""), + new("SemiBorderThicknessControlFocus", ""), + }; + + public static IReadOnlyList> SpacingTokens { get; } = new List> + { + new("SemiSpacingNone", ""), + new("SemiSpacingSuperTight", ""), + new("SemiSpacingExtraTight", ""), + new("SemiSpacingTight", ""), + new("SemiSpacingBaseTight", ""), + new("SemiSpacingBase", ""), + new("SemiSpacingBaseLoose", ""), + new("SemiSpacingLoose", ""), + new("SemiSpacingExtraLoose", ""), + new("SemiSpacingSuperLoose", ""), + }; + + public static IReadOnlyList> ThicknessTokens { get; } = new List> + { + new("SemiThicknessNone", ""), + new("SemiThicknessSuperTight", ""), + new("SemiThicknessExtraTight", ""), + new("SemiThicknessTight", ""), + new("SemiThicknessBaseTight", ""), + new("SemiThicknessBase", ""), + new("SemiThicknessBaseLoose", ""), + new("SemiThicknessLoose", ""), + new("SemiThicknessExtraLoose", ""), + new("SemiThicknessSuperLoose", ""), + }; + + public static IReadOnlyList> FontSizeTokens { get; } = new List> + { + new("SemiFontSizeSmall", ""), + new("SemiFontSizeRegular", ""), + new("SemiFontSizeHeader6", ""), + new("SemiFontSizeHeader5", ""), + new("SemiFontSizeHeader4", ""), + new("SemiFontSizeHeader3", ""), + new("SemiFontSizeHeader2", ""), + new("SemiFontSizeHeader1", ""), + }; + + public static IReadOnlyList> FontWeightTokens { get; } = new List> + { + new("SemiFontWeightLight", ""), + new("SemiFontWeightRegular", ""), + new("SemiFontWeightBold", ""), + }; + + public static IReadOnlyList> FontFamilyTokens { get; } = new List> + { + new("SemiFontFamilyRegular", ""), + }; +} \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs index 70fb84be..44c6fe86 100644 --- a/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs +++ b/demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs @@ -1,8 +1,5 @@ -using System.Threading.Tasks; -using Avalonia; using Avalonia.Controls; using Avalonia.Controls.Primitives; -using Avalonia.Markup.Xaml; using Avalonia.Threading; using Semi.Avalonia.Demo.ViewModels; @@ -16,13 +13,10 @@ public PaletteDemo() this.DataContext = new PaletteDemoViewModel(); } - protected override async void OnApplyTemplate(TemplateAppliedEventArgs e) + protected override async void OnApplyTemplate(TemplateAppliedEventArgs e) { base.OnApplyTemplate(e); PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel; - await Dispatcher.UIThread.InvokeAsync(() => - { - vm?.InitializeResources(); - }); + await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); }); } } \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml new file mode 100644 index 00000000..44c41f36 --- /dev/null +++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs new file mode 100644 index 00000000..bc459b55 --- /dev/null +++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs @@ -0,0 +1,22 @@ +using Avalonia.Controls; +using Avalonia.Controls.Primitives; +using Avalonia.Threading; +using Semi.Avalonia.Demo.ViewModels; + +namespace Semi.Avalonia.Demo.Pages; + +public partial class VariablesDemo : UserControl +{ + public VariablesDemo() + { + InitializeComponent(); + this.DataContext = new VariablesDemoViewModel(); + } + + protected override async void OnApplyTemplate(TemplateAppliedEventArgs e) + { + base.OnApplyTemplate(e); + var vm = this.DataContext as VariablesDemoViewModel; + await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); }); + } +} \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml b/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml index 2c74653b..59718666 100644 --- a/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml +++ b/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml @@ -45,7 +45,7 @@ x:DataType="viewModels:ColorItemViewModel" Binding="{Binding ColorDisplayName}" CanUserSort="False" - Header="Name" /> + Header="Description" /> @@ -99,7 +99,7 @@ x:DataType="viewModels:ColorItemViewModel" Binding="{Binding ColorDisplayName}" CanUserSort="False" - Header="Name" /> + Header="Description" /> diff --git a/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml b/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml index d06aea41..4b0456be 100644 --- a/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml +++ b/demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml @@ -34,7 +34,7 @@ x:DataType="viewModels:ShadowItemViewModel" Binding="{Binding ShadowDisplayName}" CanUserSort="False" - Header="Name" /> + Header="Description" /> @@ -66,7 +66,7 @@ x:DataType="viewModels:ShadowItemViewModel" Binding="{Binding ShadowDisplayName}" CanUserSort="False" - Header="Name" /> + Header="Description" /> diff --git a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs index 47fff189..c11bea9d 100644 --- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs +++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs @@ -6,6 +6,7 @@ using Avalonia.Media; using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Messaging; +using Semi.Avalonia.Demo.Constant; using Semi.Avalonia.Tokens.Palette; using Semi.Avalonia.Demo.Converters; @@ -228,132 +229,4 @@ public ShadowGroupViewModel(string title, IResourceDictionary? lightDictionary, } } } -} - -public static class ColorTokens -{ - public static IReadOnlyList> PrimaryTokens { get; } = new List> - { - new("SemiColorPrimary", "Primary"), - new("SemiColorPrimaryPointerover", "Primary Pointerover"), - new("SemiColorPrimaryActive", "Primary Active"), - new("SemiColorPrimaryDisabled", "Primary Disabled"), - new("SemiColorPrimaryLight", "Primary Light"), - new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"), - new("SemiColorPrimaryLightActive", "Primary Light Active"), - }; - - public static IReadOnlyList> SecondaryTokens { get; } = new List> - { - new("SemiColorSecondary", "Secondary"), - new("SemiColorSecondaryPointerover", "Secondary Pointerover"), - new("SemiColorSecondaryActive", "Secondary Active"), - new("SemiColorSecondaryDisabled", "Secondary Disabled"), - new("SemiColorSecondaryLight", "Secondary Light"), - new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"), - new("SemiColorSecondaryLightActive", "Secondary Light Active"), - }; - - public static IReadOnlyList> TertiaryTokens { get; } = new List> - { - new("SemiColorTertiary", "Tertiary"), - new("SemiColorTertiaryPointerover", "Tertiary Pointerover"), - new("SemiColorTertiaryActive", "Tertiary Active"), - new("SemiColorTertiaryLight", "Tertiary Light"), - new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"), - new("SemiColorTertiaryLightActive", "Tertiary Light Active"), - }; - - public static IReadOnlyList> InformationTokens { get; } = new List> - { - new("SemiColorInformation", "Information"), - new("SemiColorInformationPointerover", "Information Pointerover"), - new("SemiColorInformationActive", "Information Active"), - new("SemiColorInformationDisabled", "Information Disabled"), - new("SemiColorInformationLight", "Information Light"), - new("SemiColorInformationLightPointerover", "Information Light Pointerover"), - new("SemiColorInformationLightActive", "Information Light Active"), - }; - - public static IReadOnlyList> SuccessTokens { get; } = new List> - { - new("SemiColorSuccess", "Success"), - new("SemiColorSuccessPointerover", "Success Pointerover"), - new("SemiColorSuccessActive", "Success Active"), - new("SemiColorSuccessDisabled", "Success Disabled"), - new("SemiColorSuccessLight", "Success Light"), - new("SemiColorSuccessLightPointerover", "Success Light Pointerover"), - new("SemiColorSuccessLightActive", "Success Light Active"), - }; - - public static IReadOnlyList> WarningTokens { get; } = new List> - { - new("SemiColorWarning", "Warning"), - new("SemiColorWarningPointerover", "Warning Pointerover"), - new("SemiColorWarningActive", "Warning Active"), - new("SemiColorWarningLight", "Warning Light"), - new("SemiColorWarningLightPointerover", "Warning Light Pointerover"), - new("SemiColorWarningLightActive", "Warning Light Active"), - }; - - public static IReadOnlyList> DangerTokens { get; } = new List> - { - new("SemiColorDanger", "Danger"), - new("SemiColorDangerPointerover", "Danger Pointerover"), - new("SemiColorDangerActive", "Danger Active"), - new("SemiColorDangerLight", "Danger Light"), - new("SemiColorDangerLightPointerover", "Danger Light Pointerover"), - new("SemiColorDangerLightActive", "Danger Light Active"), - }; - - public static IReadOnlyList> TextTokens { get; } = new List> - { - new("SemiColorText0", "Text 0"), - new("SemiColorText1", "Text 1"), - new("SemiColorText2", "Text 2"), - new("SemiColorText3", "Text 3"), - }; - - public static IReadOnlyList> LinkTokens { get; } = new List> - { - new("SemiColorLink", "Link"), - new("SemiColorLinkPointerover", "Link Pointerover"), - new("SemiColorLinkActive", "Link Active"), - new("SemiColorLinkVisited", "Link Visited"), - }; - - public static IReadOnlyList> BackgroundTokens { get; } = new List> - { - new("SemiColorBackground0", "Background 0"), - new("SemiColorBackground1", "Background 1"), - new("SemiColorBackground2", "Background 2"), - new("SemiColorBackground3", "Background 3"), - new("SemiColorBackground4", "Background 4"), - }; - - public static IReadOnlyList> FillTokens { get; } = new List> - { - new("SemiColorFill0", "Fill 0"), - new("SemiColorFill1", "Fill 1"), - new("SemiColorFill2", "Fill 2"), - }; - - public static IReadOnlyList> BorderTokens { get; } = new List> - { - new("SemiColorBorder", "Border"), - }; - - public static IReadOnlyList> DisabledTokens { get; } = new List> - { - new("SemiColorDisabledText", "Disabled Text"), - new("SemiColorDisabledBorder", "Disabled Border"), - new("SemiColorDisabledBackground", "Disabled Background"), - new("SemiColorDisabledFill", "Disabled Fill"), - }; - - public static IReadOnlyList> ShadowTokens { get; } = new List> - { - new("SemiColorShadow", "Shadow"), - new("SemiShadowElevated", "Shadow Elevated"), - }; } \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs new file mode 100644 index 00000000..6ce4475e --- /dev/null +++ b/demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs @@ -0,0 +1,67 @@ +using System; +using System.Collections.Generic; +using System.Collections.ObjectModel; +using Avalonia.Controls; +using CommunityToolkit.Mvvm.ComponentModel; +using Semi.Avalonia.Demo.Constant; +using Semi.Avalonia.Tokens; + +namespace Semi.Avalonia.Demo.ViewModels; + +public partial class VariablesDemoViewModel : ObservableObject +{ + private readonly IResourceDictionary? _dictionary; + public ObservableCollection VariableGrid { get; set; } = []; + + public VariablesDemoViewModel() + { + _dictionary = new Variables(); + } + + public void InitializeResources() + { + VariableGrid.Add(new VariableGridViewModel("Height", _dictionary, ColorTokens.HeightTokens)); + VariableGrid.Add(new VariableGridViewModel("Icon Size", _dictionary, ColorTokens.IconSizeTokens)); + VariableGrid.Add(new VariableGridViewModel("Border CornerRadius", _dictionary, ColorTokens.CornerRadiusTokens)); + VariableGrid.Add(new VariableGridViewModel("Border Spacing", _dictionary, ColorTokens.BorderSpacingTokens)); + VariableGrid.Add(new VariableGridViewModel("Border Thickness", _dictionary, ColorTokens.BorderThicknessTokens)); + VariableGrid.Add(new VariableGridViewModel("Spacing", _dictionary, ColorTokens.SpacingTokens)); + VariableGrid.Add(new VariableGridViewModel("Thickness", _dictionary, ColorTokens.ThicknessTokens)); + VariableGrid.Add(new VariableGridViewModel("FontSize", _dictionary, ColorTokens.FontSizeTokens)); + VariableGrid.Add(new VariableGridViewModel("FontWeight", _dictionary, ColorTokens.FontWeightTokens)); + VariableGrid.Add(new VariableGridViewModel("FontFamily", _dictionary, ColorTokens.FontFamilyTokens)); + } +} + +public partial class VariableGridViewModel : ObservableObject +{ + [ObservableProperty] private string? _title; + public ObservableCollection VariableItems { get; set; } = []; + + public VariableGridViewModel(string title, IResourceDictionary? dictionary, + IReadOnlyList> tokens) + { + Title = title; + foreach (var (key, name) in tokens) + { + if (dictionary?.TryGetValue(key, out var value) ?? false) + { + VariableItems.Add(new VariableItemViewModel(name, value ?? string.Empty, key)); + } + } + } +} + +public partial class VariableItemViewModel : ObservableObject +{ + [ObservableProperty] private string? _resourceKey; + [ObservableProperty] private string? _description; + [ObservableProperty] private string? _value; + + public VariableItemViewModel(string description, object value, string resourceKey) + { + ResourceKey = resourceKey; + Description = description; + Value = value.ToString(); + } +} \ No newline at end of file diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml index a56078fd..6e4427bb 100644 --- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml +++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml @@ -91,6 +91,9 @@ + + + From 3fceec143df70b666ef740cda0b6e7574b015398 Mon Sep 17 00:00:00 2001 From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Date: Tue, 21 Jan 2025 19:36:16 +0800 Subject: [PATCH 03/11] feat: enhance display value & add Copy button. --- .../Pages/VariablesDemo.axaml | 35 ++++++++++++++----- .../Pages/VariablesDemo.axaml.cs | 13 ++++++- .../ViewModels/VariablesDemoViewModel.cs | 20 ++++++++++- 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml index 44c41f36..23aad9d0 100644 --- a/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml +++ b/demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml @@ -3,6 +3,7 @@ xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels" + xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo" x:DataType="vm:VariablesDemoViewModel"> @@ -33,10 +34,18 @@ - + + +