Merge pull request #62 from irihitech/timeline

Timeline refactoring
2024-01-08 23:40:45 +08:00
parent 35b108138d 21a3eba728
commit 5cf6b8ad0f
11 changed files with 738 additions and 228 deletions
--- a/demo/Ursa.Demo/Converters/TimelineIconConverter.cs
+++ b/demo/Ursa.Demo/Converters/TimelineIconConverter.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using Ursa.Controls;
+
+namespace Ursa.Demo.Converters;
+
+public class TimelineIconConverter: IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is TimelineItemType t)
+        {
+            return t switch
+            {
+                TimelineItemType.Success => Brushes.Green,
+                TimelineItemType.Ongoing => Brushes.Blue,
+                TimelineItemType.Error => Brushes.Red,
+                _ => Brushes.Gray
+            };
+        }
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
--- a/demo/Ursa.Demo/Pages/IntroductionDemo.axaml
+++ b/demo/Ursa.Demo/Pages/IntroductionDemo.axaml
@@ -144,27 +144,29 @@
                                       IPAddress="{Binding Address}" />
                            <u:IPv4Box HorizontalAlignment="Stretch" IsEnabled="False" />
                        </StackPanel>
-                        <u:Timeline Grid.Column="1">
+                        <u:Timeline Grid.Column="1" HorizontalAlignment="Left" Mode="Alternate">
                            <u:TimelineItem
-                                Content="ToDo"
-                                ItemType="Default"
-                                Time="2022-01-01" />
+                                Content="Step 1"
+                                Header="ToDo"
+                                Type="Default"
+                                Time="2023-01-14 09:24:05"/>
                            <u:TimelineItem
-                                Content="Start"
-                                ItemType="Ongoing"
-                                Time="2022-01-02" />
+                                Content="Step 2"
+                                Header="Start"
+                                Position="Right"
+                                Type="Ongoing"
+                                Time="2024-01-04 22:32:58"/>
                            <u:TimelineItem
-                                Content="In between"
-                                ItemType="Success"
-                                Time="2022-01-03" />
+                                Content="Step 3"
+                                Header="In Between"
+                                Type="Warning"
+                                Time="2024-01-05 00:08:29"/>
                            <u:TimelineItem
-                                Content="In between"
-                                ItemType="Warning"
-                                Time="2022-01-04" />
-                            <u:TimelineItem
-                                Content="Finished"
-                                ItemType="Error"
-                                Time="2022-01-05" />
+                                Content="Step 4"
+                                Header="Finished"
+                                Position="Right"
+                                Type="Success" 
+                                Time="2024-01-05 00:27:44"/>
                        </u:Timeline>
                        <StackPanel Grid.Column="2" Spacing="20">
                            <u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
--- a/demo/Ursa.Demo/Pages/TimelineDemo.axaml
+++ b/demo/Ursa.Demo/Pages/TimelineDemo.axaml
@@ -4,55 +4,84 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:selectors="clr-namespace:Ursa.Demo.TemplateSelectors"
    xmlns:u="https://irihi.tech/ursa"
    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
-    x:CompileBindings="False"
+    x:CompileBindings="True"
    x:DataType="viewModels:TimelineDemoViewModel"
    mc:Ignorable="d">
    <UserControl.Resources>
-        <u:TimelineFormatConverter x:Key="FormatConverter" />
+        <ResourceDictionary>
+            <selectors:TimelineIconTemplateSelector x:Key="IconSelector" >
+                <SolidColorBrush x:Key="Default" Color="{DynamicResource SemiGray6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Ongoing" Color="{DynamicResource SemiBlue6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Success" Color="{DynamicResource SemiGreen6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Warning" Color="{DynamicResource SemiOrange6Color}"></SolidColorBrush>
+                <SolidColorBrush x:Key="Error" Color="{DynamicResource SemiRed6Color}"></SolidColorBrush>
+            </selectors:TimelineIconTemplateSelector>
+        </ResourceDictionary>
    </UserControl.Resources>
-    <StackPanel>
-        <u:Timeline>
-            <u:TimelineItem
-                Content="Start"
-                ItemType="Warning"
-                Time="2022-01-01" />
-            <u:TimelineItem
-                Content="In between"
-                ItemType="Ongoing"
-                Time="2022-01-02" />
-            <u:TimelineItem
-                Content="Finished"
-                ItemType="Error"
-                Time="2022-01-03" />
-            <u:TimelineItem
-                Content="Finished"
-                IconForeground="Yellow"
-                ItemType="Default"
-                Time="2022-01-03" />
+    <WrapPanel>
+        <u:Timeline
+            Mode="Alternate"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+                
        </u:Timeline>
-        <u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
-            <u:Timeline.ItemTemplate>
-                <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
-                    <u:TimelineItem
-                        Content="{Binding Content}"
-                        ItemType="{Binding ItemType}"
-                        Time="{Binding Time}"
-                        TimeFormat="{Binding TimeFormat}">
-                        <u:TimelineItem.ContentTemplate>
-                            <DataTemplate>
-                                <TextBlock
-                                    MaxWidth="100"
-                                    Text="{Binding}"
-                                    TextWrapping="Wrap" />
-                            </DataTemplate>
-                        </u:TimelineItem.ContentTemplate>
-                    </u:TimelineItem>
-                </DataTemplate>
-            </u:Timeline.ItemTemplate>
+        <u:Timeline
+            Mode="Left"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
        </u:Timeline>
-    </StackPanel>
+        <u:Timeline
+            Mode="Right"
+            HorizontalAlignment="Left"
+            ContentMemberBinding="{ReflectionBinding Description}"
+            HeaderMemberBinding="{ReflectionBinding Header}"
+            IconMemberBinding="{ReflectionBinding ItemType}"
+            IconTemplate="{StaticResource IconSelector}"
+            ItemsSource="{Binding Items}"
+            TimeMemberBinding="{ReflectionBinding Time}" >
+        </u:Timeline>
+        <u:Timeline HorizontalAlignment="Left" Mode="Alternate">
+            <u:TimelineItem
+                Content="Step 1"
+                Header="第一步"
+                Position="Left"
+                Type="Default" />
+            <u:TimelineItem
+                Content="Step 2"
+                Header="第二步"
+                Position="Right"
+                Type="Success" />
+            <u:TimelineItem
+                Content="Step 3"
+                Header="第三步"
+                Position="Separate"
+                Type="Warning" />
+            <u:TimelineItem
+                Content="Step 4"
+                Header="第四步"
+                Position="Separate"
+                Type="Ongoing" />
+            <u:TimelineItem
+                Content="Step 5"
+                Header="第五步"
+                Position="Separate"
+                TimeFormat="yyyy-MM-dd"
+                Type="Error" />
+        </u:Timeline>
+    </WrapPanel>
 </UserControl>
--- a/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs
+++ b/demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs
@@ -0,0 +1,34 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Shapes;
+using Avalonia.Controls.Templates;
+using Avalonia.Media;
+using Ursa.Controls;
+
+namespace Ursa.Demo.TemplateSelectors;
+
+public class TimelineIconTemplateSelector: ResourceDictionary, IDataTemplate
+{
+    
+    public Control? Build(object? param)
+    {
+        if (param is TimelineItemType t)
+        {
+            string s = t.ToString();
+            if (ContainsKey(s))
+            {
+                object? o = this[s];
+                if (o is SolidColorBrush c)
+                {
+                    var ellipse = new Ellipse() { Width = 12, Height = 12, Fill = c };
+                    return ellipse;
+                }
+            }
+        }
+        return null;
+    }
+
+    public bool Match(object? data)
+    {
+        return data is TimelineItemType;
+    }
+}
--- a/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
@@ -11,41 +11,24 @@ public class TimelineDemoViewModel: ViewModelBase
        new()
        {
            Time = DateTime.Now,
-            TimeFormat = "yyyy-MM-dd HH:mm:ss",
            Description = "Item 1",
-            Content = "First",
+            Header = "审核中",
            ItemType = TimelineItemType.Success,
        },
        new()
        {
            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
            Description = "Item 2",
-            Content = "Content 2",
-            ItemType = TimelineItemType.Success,
-        },
-        new()
-        {
-            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 3",
-            Content = "Content 3",
+            Header = "发布成功",
            ItemType = TimelineItemType.Ongoing,
        },
        new()
        {
            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 4",
-            Content = "Content 4"
-        },
-        new()
-        {
-            Time = DateTime.Now,
-            TimeFormat = "HH:mm:ss",
-            Description = "Item 5",
-            Content = "Content 5"
-        },
+            Description = "Item 3",
+            Header = "审核失败",
+            ItemType = TimelineItemType.Error,
+        }
    };
 }

@@ -54,6 +37,6 @@ public class TimelineItemViewModel: ObservableObject
    public DateTime Time { get; set; }
    public string? TimeFormat { get; set; }
    public string? Description { get; set; }    
-    public string? Content { get; set; }
+    public string? Header { get; set; }
    public TimelineItemType ItemType { get; set; }
 }