Add Figma-style Dock sample

Dock.slnx

@@ -49,6 +49,7 @@
     <Project Path="samples/DockCodeOnlyMvvmSample/DockCodeOnlyMvvmSample.csproj" />
     <Project Path="samples/DockCodeOnlySample/DockCodeOnlySample.csproj" />
     <Project Path="samples/DockControlPanelsSample/DockControlPanelsSample.csproj" />
+    <Project Path="samples/DockFigmaSample/DockFigmaSample.csproj" />
     <Project Path="samples/DockFluentCodeOnlySample/DockFluentCodeOnlySample.csproj" />
     <Project Path="samples/DockInpcSample/DockInpcSample.csproj" />
     <Project Path="samples/DockMvvmSample/DockMvvmSample.csproj" />

samples/DockFigmaSample/App.axaml

@@ -0,0 +1,19 @@
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:converters="using:DockFigmaSample.Converters"
+             xmlns:local="using:DockFigmaSample"
+             x:Class="DockFigmaSample.App">
+  <Application.DataTemplates>
+    <local:ViewLocator />
+  </Application.DataTemplates>
+
+  <Application.Resources>
+    <converters:EnumEqualsConverter x:Key="EnumEqualsConverter" />
+  </Application.Resources>
+
+  <Application.Styles>
+    <FluentTheme />
+    <DockFluentTheme />
+    <StyleInclude Source="avares://DockFigmaSample/Styles/FigmaTheme.axaml" />
+  </Application.Styles>
+</Application>

samples/DockFigmaSample/App.axaml.cs

@@ -0,0 +1,61 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+using DockFigmaSample.ViewModels;
+using DockFigmaSample.ViewModels.Documents;
+using DockFigmaSample.ViewModels.Tools;
+using DockFigmaSample.Views;
+using DockFigmaSample.Views.Documents;
+using DockFigmaSample.Views.Tools;
+using ReactiveUI;
+using Splat;
+
+namespace DockFigmaSample;
+
+public class App : Application
+{
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+        RegisterViews();
+    }
+
+    private static void RegisterViews()
+    {
+        Locator.CurrentMutable.Register<IViewFor<MainWindowViewModel>>(() => new MainWindow());
+        Locator.CurrentMutable.Register<IViewFor<HomeViewModel>>(() => new HomeView());
+        Locator.CurrentMutable.Register<IViewFor<WorkspaceViewModel>>(() => new WorkspaceView());
+
+        Locator.CurrentMutable.Register<IViewFor<CanvasDocumentViewModel>>(() => new CanvasDocumentView());
+        Locator.CurrentMutable.Register<IViewFor<DesignCanvasViewModel>>(() => new DesignCanvasView());
+        Locator.CurrentMutable.Register<IViewFor<PrototypeCanvasViewModel>>(() => new PrototypeCanvasView());
+        Locator.CurrentMutable.Register<IViewFor<InspectCanvasViewModel>>(() => new InspectCanvasView());
+
+        Locator.CurrentMutable.Register<IViewFor<ToolbarToolViewModel>>(() => new ToolbarToolView());
+        Locator.CurrentMutable.Register<IViewFor<LayersToolViewModel>>(() => new LayersToolView());
+        Locator.CurrentMutable.Register<IViewFor<AssetsToolViewModel>>(() => new AssetsToolView());
+        Locator.CurrentMutable.Register<IViewFor<InspectorToolViewModel>>(() => new InspectorToolView());
+        Locator.CurrentMutable.Register<IViewFor<InspectorDesignViewModel>>(() => new InspectorDesignView());
+        Locator.CurrentMutable.Register<IViewFor<InspectorPrototypeViewModel>>(() => new InspectorPrototypeView());
+        Locator.CurrentMutable.Register<IViewFor<InspectorInspectViewModel>>(() => new InspectorInspectView());
+        Locator.CurrentMutable.Register<IViewFor<CommentsToolViewModel>>(() => new CommentsToolView());
+    }
+
+    public override void OnFrameworkInitializationCompleted()
+    {
+        var vm = new MainWindowViewModel();
+
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+        {
+            desktop.MainWindow = new MainWindow
+            {
+                DataContext = vm
+            };
+        }
+
+        base.OnFrameworkInitializationCompleted();
+#if DEBUG
+        this.AttachDevTools();
+#endif
+    }
+}

samples/DockFigmaSample/Converters/EnumEqualsConverter.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+
+namespace DockFigmaSample.Converters;
+
+public class EnumEqualsConverter : IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is null || parameter is null)
+        {
+            return false;
+        }
+
+        return value.Equals(parameter);
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is true && parameter is not null)
+        {
+            return parameter;
+        }
+
+        return AvaloniaProperty.UnsetValue;
+    }
+}

samples/DockFigmaSample/DockFigmaSample.csproj

@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <OutputType>WinExe</OutputType>
+    <GenerateAssemblyInfo>false</GenerateAssemblyInfo>
+    <IsPackable>false</IsPackable>
+    <Nullable>enable</Nullable>
+    <AvaloniaNameGeneratorBehavior>OnlyProperties</AvaloniaNameGeneratorBehavior>
+    <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
+    <CompilerGeneratedFilesOutputPath>$(BaseIntermediateOutputPath)\GeneratedFiles</CompilerGeneratedFilesOutputPath>
+  </PropertyGroup>
+  <Import Project="..\..\build\ReferenceAssemblies.props" />
+  <Import Project="..\..\build\Avalonia.props" />
+  <Import Project="..\..\build\Avalonia.Themes.Fluent.props" />
+  <Import Project="..\..\build\Avalonia.Desktop.props" />
+  <Import Project="..\..\build\ReactiveUI.Avalonia.props" />
+  <Import Project="..\..\build\Avalonia.Diagnostics.props" />
+  <ItemGroup>
+    <ProjectReference Include="..\..\src\Dock.Model.ReactiveUI.Services\Dock.Model.ReactiveUI.Services.csproj" />
+    <ProjectReference Include="..\..\src\Dock.Model.ReactiveUI\Dock.Model.ReactiveUI.csproj" />
+    <ProjectReference Include="..\..\src\Dock.Avalonia\Dock.Avalonia.csproj" />
+    <ProjectReference Include="..\..\src\Dock.Avalonia.Diagnostics\Dock.Avalonia.Diagnostics.csproj" />
+    <ProjectReference Include="..\..\src\Dock.Avalonia.Themes.Fluent\Dock.Avalonia.Themes.Fluent.csproj" />
+  </ItemGroup>
+</Project>

samples/DockFigmaSample/Models/AssetSwatch.cs

@@ -0,0 +1,17 @@
+using Avalonia.Media;
+
+namespace DockFigmaSample.Models;
+
+public class AssetSwatch
+{
+    public AssetSwatch(string name, Color color)
+    {
+        Name = name;
+        Brush = new SolidColorBrush(color);
+        Hex = $"#{color.R:X2}{color.G:X2}{color.B:X2}";
+    }
+
+    public string Name { get; }
+    public IBrush Brush { get; }
+    public string Hex { get; }
+}

samples/DockFigmaSample/Models/CommentItem.cs

@@ -0,0 +1,42 @@
+using System;
+
+namespace DockFigmaSample.Models;
+
+public class CommentItem
+{
+    public CommentItem(string author, string body, string time)
+    {
+        Author = author;
+        Body = body;
+        Time = time;
+        Initials = GetInitials(author);
+    }
+
+    public string Author { get; }
+    public string Body { get; }
+    public string Time { get; }
+    public string Initials { get; }
+
+    private static string GetInitials(string author)
+    {
+        if (string.IsNullOrWhiteSpace(author))
+        {
+            return "?";
+        }
+
+        var parts = author.Split(' ', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+        if (parts.Length == 0)
+        {
+            return "?";
+        }
+
+        if (parts.Length == 1)
+        {
+            return parts[0].Substring(0, 1).ToUpperInvariant();
+        }
+
+        var first = parts[0].Substring(0, 1).ToUpperInvariant();
+        var last = parts[^1].Substring(0, 1).ToUpperInvariant();
+        return first + last;
+    }
+}

samples/DockFigmaSample/Models/ComponentItem.cs

@@ -0,0 +1,13 @@
+namespace DockFigmaSample.Models;
+
+public class ComponentItem
+{
+    public ComponentItem(string name, string description)
+    {
+        Name = name;
+        Description = description;
+    }
+
+    public string Name { get; }
+    public string Description { get; }
+}

samples/DockFigmaSample/Models/InspectSpecItem.cs

@@ -0,0 +1,13 @@
+namespace DockFigmaSample.Models;
+
+public class InspectSpecItem
+{
+    public InspectSpecItem(string label, string value)
+    {
+        Label = label;
+        Value = value;
+    }
+
+    public string Label { get; }
+    public string Value { get; }
+}

samples/DockFigmaSample/Models/LayerItem.cs

@@ -0,0 +1,21 @@
+using Avalonia;
+
+namespace DockFigmaSample.Models;
+
+public class LayerItem
+{
+    public LayerItem(string name, string type, int depth, bool isVisible = true, bool isLocked = false)
+    {
+        Name = name;
+        Type = type;
+        IsVisible = isVisible;
+        IsLocked = isLocked;
+        Indent = new Thickness(8 + depth * 16, 2, 8, 2);
+    }
+
+    public string Name { get; }
+    public string Type { get; }
+    public bool IsVisible { get; }
+    public bool IsLocked { get; }
+    public Thickness Indent { get; }
+}

samples/DockFigmaSample/Models/PrototypeFlowItem.cs

@@ -0,0 +1,15 @@
+namespace DockFigmaSample.Models;
+
+public class PrototypeFlowItem
+{
+    public PrototypeFlowItem(string trigger, string action, string destination)
+    {
+        Trigger = trigger;
+        Action = action;
+        Destination = destination;
+    }
+
+    public string Trigger { get; }
+    public string Action { get; }
+    public string Destination { get; }
+}

samples/DockFigmaSample/Models/RecentFileItem.cs

@@ -0,0 +1,19 @@
+using Avalonia.Media;
+
+namespace DockFigmaSample.Models;
+
+public class RecentFileItem
+{
+    public RecentFileItem(string name, string team, string updated, Color accent)
+    {
+        Name = name;
+        Team = team;
+        Updated = updated;
+        AccentBrush = new SolidColorBrush(accent);
+    }
+
+    public string Name { get; }
+    public string Team { get; }
+    public string Updated { get; }
+    public IBrush AccentBrush { get; }
+}

samples/DockFigmaSample/Models/SampleData.cs

@@ -0,0 +1,85 @@
+using System.Collections.ObjectModel;
+using Avalonia.Media;
+
+namespace DockFigmaSample.Models;
+
+public static class SampleData
+{
+    public static ObservableCollection<LayerItem> CreateLayers() => new()
+    {
+        new LayerItem("Landing Page", "Frame", 0),
+        new LayerItem("Hero", "Group", 1),
+        new LayerItem("Headline", "Text", 2),
+        new LayerItem("Subhead", "Text", 2),
+        new LayerItem("CTA", "Group", 2),
+        new LayerItem("Button Primary", "Rectangle", 3),
+        new LayerItem("Button Label", "Text", 3),
+        new LayerItem("Product Cards", "Group", 1),
+        new LayerItem("Card 01", "Frame", 2),
+        new LayerItem("Card 02", "Frame", 2),
+        new LayerItem("Card 03", "Frame", 2),
+        new LayerItem("Footer", "Group", 1, isLocked: true)
+    };
+
+    public static ObservableCollection<ComponentItem> CreateComponents() => new()
+    {
+        new ComponentItem("Button / Primary", "CTA with gradient fill"),
+        new ComponentItem("Badge / Status", "Rounded pill badge"),
+        new ComponentItem("Card / Pricing", "Card with shadow"),
+        new ComponentItem("Input / Search", "Leading icon input"),
+        new ComponentItem("Nav / Top", "Logo + actions")
+    };
+
+    public static ObservableCollection<AssetSwatch> CreateSwatches() => new()
+    {
+        new AssetSwatch("Primary", Color.Parse("#3D7EFF")),
+        new AssetSwatch("Warm", Color.Parse("#FF8A4C")),
+        new AssetSwatch("Mint", Color.Parse("#22C55E")),
+        new AssetSwatch("Ink", Color.Parse("#1E2228")),
+        new AssetSwatch("Canvas", Color.Parse("#ECEFF3")),
+        new AssetSwatch("Lavender", Color.Parse("#9A8CFF"))
+    };
+
+    public static ObservableCollection<CommentItem> CreateComments() => new()
+    {
+        new CommentItem("Ava Fox", "Can we nudge the hero title up 12px?", "2m"),
+        new CommentItem("Noah Reed", "The pricing cards feel tight on mobile.", "9m"),
+        new CommentItem("Iris Park", "Try a softer background behind the CTA.", "1h")
+    };
+
+    public static ObservableCollection<RecentFileItem> CreateRecentFiles() => new()
+    {
+        new RecentFileItem("Marketing Site", "Nimbus", "Updated 12m ago", Color.Parse("#3D7EFF")),
+        new RecentFileItem("Onboarding Flow", "Nimbus", "Updated 2h ago", Color.Parse("#FF8A4C")),
+        new RecentFileItem("Design System", "Atlas", "Updated yesterday", Color.Parse("#22C55E")),
+        new RecentFileItem("Mobile Kit", "Atlas", "Updated 4d ago", Color.Parse("#F97316"))
+    };
+
+    public static ObservableCollection<PrototypeFlowItem> CreatePrototypeFlows() => new()
+    {
+        new PrototypeFlowItem("On Click", "Navigate", "Pricing Modal"),
+        new PrototypeFlowItem("On Hover", "Swap", "Button / Hover"),
+        new PrototypeFlowItem("After Delay", "Auto Animate", "Hero Alt")
+    };
+
+    public static ObservableCollection<InspectSpecItem> CreateInspectSpecs() => new()
+    {
+        new InspectSpecItem("Spacing", "24 px"),
+        new InspectSpecItem("Padding", "32 px"),
+        new InspectSpecItem("Radius", "24 px"),
+        new InspectSpecItem("Shadow", "0 24 48 0"),
+        new InspectSpecItem("Font", "Space Grotesk / 28")
+    };
+
+    public static ObservableCollection<ToolItem> CreateToolbarTools() => new()
+    {
+        new ToolItem("Move", "V", true),
+        new ToolItem("Frame", "F"),
+        new ToolItem("Section", "S"),
+        new ToolItem("Rectangle", "R"),
+        new ToolItem("Ellipse", "O"),
+        new ToolItem("Pen", "P"),
+        new ToolItem("Text", "T"),
+        new ToolItem("Comment", "C")
+    };
+}

samples/DockFigmaSample/Models/ToolItem.cs

@@ -0,0 +1,15 @@
+namespace DockFigmaSample.Models;
+
+public class ToolItem
+{
+    public ToolItem(string name, string glyph, bool isActive = false)
+    {
+        Name = name;
+        Glyph = glyph;
+        IsActive = isActive;
+    }
+
+    public string Name { get; }
+    public string Glyph { get; }
+    public bool IsActive { get; }
+}