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] 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 0000000..e8dd809 --- /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 70fb84b..44c6fe8 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 partial class PaletteDemo : UserControl 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 0000000..44c41f3 --- /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 0000000..bc459b5 --- /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 2c74653..5971866 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 d06aea4..4b0456b 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 47fff18..c11bea9 100644 --- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs +++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs @@ -6,6 +6,7 @@ using Avalonia.Controls; 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 partial class ShadowGroupViewModel : ObservableObject } } } -} - -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 0000000..6ce4475 --- /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 a56078f..6e4427b 100644 --- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml +++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml @@ -91,6 +91,9 @@ + + +