From 30a303f5244f883aaff1b175fb584c6523cde411 Mon Sep 17 00:00:00 2001 From: Coolkeke <37786276+Coolkeke@users.noreply.github.com> Date: Wed, 27 Dec 2023 00:30:42 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=AA=A8=E6=9E=B6?= =?UTF-8?q?=E5=B1=8F=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/Ursa.Demo/Models/MenuKeys.cs | 3 +- demo/Ursa.Demo/Pages/SkeletonDemo.axaml | 58 +++++++++++++++++++ demo/Ursa.Demo/Pages/SkeletonDemo.axaml.cs | 14 +++++ demo/Ursa.Demo/Ursa.Demo.csproj | 6 ++ .../Ursa.Demo/ViewModels/MainViewViewModel.cs | 1 + demo/Ursa.Demo/ViewModels/MenuViewModel.cs | 1 + .../ViewModels/SkeletonDemoViewModel.cs | 12 ++++ src/Ursa.Themes.Semi/Controls/Skeleton.axaml | 57 ++++++++++++++++++ src/Ursa.Themes.Semi/Controls/_index.axaml | 1 + .../Themes/Dark/Skeleton.axaml | 13 +++++ src/Ursa.Themes.Semi/Themes/Dark/_index.axaml | 1 + .../Themes/Light/Skeleton.axaml | 13 +++++ .../Themes/Light/_index.axaml | 1 + .../Themes/Shared/Skeleton.axaml | 4 ++ .../Themes/Shared/_index.axaml | 1 + src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj | 4 ++ src/Ursa/Controls/Skeleton.cs | 20 +++++++ 17 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 demo/Ursa.Demo/Pages/SkeletonDemo.axaml create mode 100644 demo/Ursa.Demo/Pages/SkeletonDemo.axaml.cs create mode 100644 demo/Ursa.Demo/ViewModels/SkeletonDemoViewModel.cs create mode 100644 src/Ursa.Themes.Semi/Controls/Skeleton.axaml create mode 100644 src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml create mode 100644 src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml create mode 100644 src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml create mode 100644 src/Ursa/Controls/Skeleton.cs diff --git a/demo/Ursa.Demo/Models/MenuKeys.cs b/demo/Ursa.Demo/Models/MenuKeys.cs index 8faf23a..c8a73c2 100644 --- a/demo/Ursa.Demo/Models/MenuKeys.cs +++ b/demo/Ursa.Demo/Models/MenuKeys.cs @@ -13,6 +13,7 @@ public static class MenuKeys public const string MenuKeyNavigation = "Navigation"; public const string MenuKeyPagination = "Pagination"; public const string MenuKeyTagInput = "TagInput"; - public const string MenuKeyTimeline = "Timeline"; + public const string MenuKeyTimeline = "Timeline"; + public const string MenuKeySkeleton = "Skeleton"; } \ No newline at end of file diff --git a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml new file mode 100644 index 0000000..25f8b79 --- /dev/null +++ b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml.cs b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml.cs new file mode 100644 index 0000000..6d92de3 --- /dev/null +++ b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml.cs @@ -0,0 +1,14 @@ +using Avalonia.Controls; +using Ursa.Demo.ViewModels; + +namespace Ursa.Demo.Pages +{ + public partial class SkeletonDemo : UserControl + { + public SkeletonDemo() + { + InitializeComponent(); + DataContext = new SkeletonDemoViewModel(); + } + } +} diff --git a/demo/Ursa.Demo/Ursa.Demo.csproj b/demo/Ursa.Demo/Ursa.Demo.csproj index d11b6e7..60100cf 100644 --- a/demo/Ursa.Demo/Ursa.Demo.csproj +++ b/demo/Ursa.Demo/Ursa.Demo.csproj @@ -26,4 +26,10 @@ + + + + SkeletonDemo.axaml + + diff --git a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs index 8487910..9ea9037 100644 --- a/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs +++ b/demo/Ursa.Demo/ViewModels/MainViewViewModel.cs @@ -36,6 +36,7 @@ public class MainViewViewModel : ViewModelBase MenuKeys.MenuKeyPagination => new PaginationDemoViewModel(), MenuKeys.MenuKeyTagInput => new TagInputDemoViewModel(), MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(), + MenuKeys.MenuKeySkeleton => new SkeletonDemoViewModel(), }; } } \ No newline at end of file diff --git a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs index f55365f..4fe232e 100644 --- a/demo/Ursa.Demo/ViewModels/MenuViewModel.cs +++ b/demo/Ursa.Demo/ViewModels/MenuViewModel.cs @@ -23,6 +23,7 @@ public class MenuViewModel: ViewModelBase new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination }, new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput }, new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline }, + new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton }, }; } } \ No newline at end of file diff --git a/demo/Ursa.Demo/ViewModels/SkeletonDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/SkeletonDemoViewModel.cs new file mode 100644 index 0000000..7ee4274 --- /dev/null +++ b/demo/Ursa.Demo/ViewModels/SkeletonDemoViewModel.cs @@ -0,0 +1,12 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Ursa.Demo.ViewModels +{ + public class SkeletonDemoViewModel : ViewModelBase + { + } +} diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml new file mode 100644 index 0000000..0397547 --- /dev/null +++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Ursa.Themes.Semi/Controls/_index.axaml b/src/Ursa.Themes.Semi/Controls/_index.axaml index 2038cd0..3704b77 100644 --- a/src/Ursa.Themes.Semi/Controls/_index.axaml +++ b/src/Ursa.Themes.Semi/Controls/_index.axaml @@ -13,5 +13,6 @@ + diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml new file mode 100644 index 0000000..fb45bc8 --- /dev/null +++ b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml index c2ff413..95c4266 100644 --- a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml +++ b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml @@ -13,5 +13,6 @@ + diff --git a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml new file mode 100644 index 0000000..fb45bc8 --- /dev/null +++ b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml index c2ff413..95c4266 100644 --- a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml +++ b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml @@ -13,5 +13,6 @@ + diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml new file mode 100644 index 0000000..ee0bf19 --- /dev/null +++ b/src/Ursa.Themes.Semi/Themes/Shared/Skeleton.axaml @@ -0,0 +1,4 @@ + + + + diff --git a/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml b/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml index 3d93ea5..24ca3ab 100644 --- a/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml +++ b/src/Ursa.Themes.Semi/Themes/Shared/_index.axaml @@ -11,5 +11,6 @@ + diff --git a/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj b/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj index 88fc18f..4be105c 100644 --- a/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj +++ b/src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj @@ -20,4 +20,8 @@ + + + + diff --git a/src/Ursa/Controls/Skeleton.cs b/src/Ursa/Controls/Skeleton.cs new file mode 100644 index 0000000..6c7c64d --- /dev/null +++ b/src/Ursa/Controls/Skeleton.cs @@ -0,0 +1,20 @@ +using Avalonia; +using Avalonia.Controls; +using System; +using System.Collections.Generic; +using System.Text; + +namespace Ursa.Controls +{ + public class Skeleton : ContentControl + { + + public static readonly StyledProperty IsActiveProperty = + AvaloniaProperty.Register(nameof(IsActive)); + public bool IsActive + { + get { return GetValue(IsActiveProperty); } + set { SetValue(IsActiveProperty, value); } + } + } +} From 7890071caed7ad01a090fcaa7acf1bb89574ff43 Mon Sep 17 00:00:00 2001 From: rabbitism Date: Wed, 27 Dec 2023 16:55:42 +0800 Subject: [PATCH 2/3] feat: 1. Ease and playback to avoid jumping color. 2. Temporarily use SemiGray color. --- src/Ursa.Themes.Semi/Controls/Skeleton.axaml | 82 +++++++++---------- .../Themes/Dark/Skeleton.axaml | 12 +-- .../Themes/Light/Skeleton.axaml | 12 +-- 3 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml index 0397547..2f78068 100644 --- a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml +++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml @@ -10,47 +10,47 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml index fb45bc8..24f98fc 100644 --- a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml +++ b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml @@ -1,13 +1,13 @@ - - - + + + - - - + + + diff --git a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml index fb45bc8..d51f632 100644 --- a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml +++ b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml @@ -1,13 +1,13 @@ - - - + + + - - - + + + From a5505139254fa3a94d2575f2f13ae63225a710a1 Mon Sep 17 00:00:00 2001 From: rabbitism Date: Wed, 27 Dec 2023 17:38:42 +0800 Subject: [PATCH 3/3] feat: add loading. --- demo/Ursa.Demo/Pages/SkeletonDemo.axaml | 24 +++++++++++-------- src/Ursa.Themes.Semi/Controls/Skeleton.axaml | 15 ++++++++---- .../Themes/Dark/Skeleton.axaml | 1 + .../Themes/Light/Skeleton.axaml | 1 + src/Ursa/Controls/Skeleton.cs | 13 ++++++++-- 5 files changed, 37 insertions(+), 17 deletions(-) diff --git a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml index 25f8b79..13198c0 100644 --- a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml +++ b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml @@ -13,18 +13,19 @@ - - - - - - + + + + IsActive="{Binding #active.IsChecked}" + Loading="{Binding #loading.IsChecked}"> + IsActive="{Binding #active.IsChecked}" + Loading="{Binding #loading.IsChecked}"> + IsActive="{Binding #active.IsChecked}" + Loading="{Binding #loading.IsChecked}"> + IsActive="{Binding #active.IsChecked}" + Loading="{Binding #loading.IsChecked}"> diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml index 2f78068..c7fe93b 100644 --- a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml +++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml @@ -26,22 +26,27 @@ ContentTemplate="{TemplateBinding ContentTemplate}" /> + Classes.Active="{Binding Path= IsActive, RelativeSource={RelativeSource TemplatedParent}}" + IsHitTestVisible="{TemplateBinding Loading}" + IsVisible="{TemplateBinding Loading}" + > +