TODO example app: show dog.svg when the TODO list is empty.

fsprojects · Oct 22, 2023 · 09f1a7a · 09f1a7a
1 parent 39587cc
commit 09f1a7a
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 24 deletions.
diff --git a/src/Examples/Component Examples/Examples.TodoApp/Assets/Icons/dog.svg b/src/Examples/Component Examples/Examples.TodoApp/Assets/Icons/dog.svg
diff --git a/src/Examples/Component Examples/Examples.TodoApp/Examples.TodoApp.fsproj b/src/Examples/Component Examples/Examples.TodoApp/Examples.TodoApp.fsproj
@@ -14,10 +14,12 @@
         <AvaloniaResource Include="Assets\Icons\show.png" />
         <AvaloniaResource Include="Assets\Icons\hide.png" />
         <AvaloniaResource Include="Assets\Icons\save.png" />
+        <AvaloniaResource Include="Assets\Icons\dog.svg" />
     </ItemGroup>
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Svg.Skia" Version="11.0.0.3" />
         <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
         <ProjectReference Include="..\..\..\Avalonia.FuncUI\Avalonia.FuncUI.fsproj" />
     </ItemGroup>

diff --git a/src/Examples/Component Examples/Examples.TodoApp/Program.fs b/src/Examples/Component Examples/Examples.TodoApp/Program.fs
@@ -15,6 +15,7 @@ open Avalonia.Media.Imaging
 open Avalonia.Media.Immutable
 open Avalonia.Platform
 open Avalonia.Styling
+open Avalonia.Svg.Skia
 open Avalonia.Themes.Fluent
 open Avalonia.FuncUI.Hosts
 open Avalonia.Controls
@@ -63,6 +64,8 @@ module Icons =
     let show = lazy new Bitmap(AssetLoader.Open(Uri("avares://Examples.TodoApp/Assets/Icons/show.png")))
     let hide = lazy new Bitmap(AssetLoader.Open(Uri("avares://Examples.TodoApp/Assets/Icons/hide.png")))
     let save = lazy new Bitmap(AssetLoader.Open(Uri("avares://Examples.TodoApp/Assets/Icons/save.png")))
+    let dog = lazy SvgImage(Source = SvgSource.Load("avares://Examples.TodoApp/Assets/Icons/dog.svg", null))
+
 
 [<RequireQualifiedAccess>]
 module ControlThemes =
@@ -73,7 +76,6 @@ module ControlThemes =
         | false, _ -> failwithf "Could not find theme 'InlineButton'"
     )
 
-
 module Views =
 
     let listItemView (item: IWritable<TodoItem>) =
@@ -213,30 +215,39 @@ module Views =
             let items = ctx.usePassed AppState.items
             let hideDoneItems = ctx.usePassed AppState.hideDoneItems
 
-            StackPanel.create [
-                StackPanel.orientation Orientation.Vertical
-                StackPanel.verticalScrollBarVisibility ScrollBarVisibility.Visible
-                StackPanel.children [
-                    let items =
-                        items
-                        |> State.sequenceBy (fun item -> item.ItemId)
-                        |> List.filter (fun item ->
-                            if hideDoneItems.Current then
-                                not item.Current.Done
-                             else
-                                 true
-                        )
-
-                    for item in items do
-                        listItemView item
-
-                        Rectangle.create [
-                            Rectangle.fill Brushes.LightGray
-                            Rectangle.height 1.0
-                            Rectangle.horizontalAlignment HorizontalAlignment.Stretch
-                        ]
+            if items.Current.IsEmpty then
+                Image.create [
+                    Image.width 100
+                    Image.height 100
+                    Image.source Icons.dog.Value
+                    Image.verticalAlignment VerticalAlignment.Center
+                    Image.horizontalAlignment HorizontalAlignment.Center
+                ]
+            else
+                StackPanel.create [
+                    StackPanel.orientation Orientation.Vertical
+                    StackPanel.verticalScrollBarVisibility ScrollBarVisibility.Visible
+                    StackPanel.children [
+                        let items =
+                            items
+                            |> State.sequenceBy (fun item -> item.ItemId)
+                            |> List.filter (fun item ->
+                                if hideDoneItems.Current then
+                                    not item.Current.Done
+                                 else
+                                     true
+                            )
+
+                        for item in items do
+                            listItemView item
+
+                            Rectangle.create [
+                                Rectangle.fill Brushes.LightGray
+                                Rectangle.height 1.0
+                                Rectangle.horizontalAlignment HorizontalAlignment.Stretch
+                            ]
+                    ]
                 ]
-            ]
         )
 
     let toolbarView () =
@@ -347,6 +358,7 @@ module Views =
 
             DockPanel.create [
                 DockPanel.children [
+
                     (* toolbar *)
                     ContentControl.create [
                         ContentControl.dock Dock.Top