You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
15 KiB
255 lines
15 KiB
<controls:UserControlBase xmlns="https://github.com/avaloniaui" |
|
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:controls="clr-namespace:StabilityMatrix.Avalonia.Controls" |
|
xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels" |
|
xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia" |
|
xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData" |
|
xmlns:openArt="clr-namespace:StabilityMatrix.Core.Models.Api.OpenArt" |
|
xmlns:controls1="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia" |
|
xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages" |
|
xmlns:avalonia="https://github.com/projektanker/icons.avalonia" |
|
xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls" |
|
xmlns:models="clr-namespace:StabilityMatrix.Avalonia.Models" |
|
xmlns:helpers="clr-namespace:StabilityMatrix.Avalonia.Helpers" |
|
xmlns:fluent="clr-namespace:FluentIcons.Avalonia.Fluent;assembly=FluentIcons.Avalonia.Fluent" |
|
xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia" |
|
xmlns:vendorLabs="clr-namespace:StabilityMatrix.Avalonia.Controls.VendorLabs" |
|
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" |
|
d:DataContext="{x:Static designData:DesignData.InstalledWorkflowsViewModel}" |
|
x:DataType="viewModels:InstalledWorkflowsViewModel" |
|
x:Class="StabilityMatrix.Avalonia.Views.InstalledWorkflowsPage"> |
|
<UserControl.Styles> |
|
<Style Selector="Border#HoverBorder"> |
|
<Setter Property="Transitions"> |
|
<Transitions> |
|
<BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.237" /> |
|
</Transitions> |
|
</Setter> |
|
|
|
<Style Selector="^ labs|AsyncImage"> |
|
<Setter Property="Transitions"> |
|
<Transitions> |
|
<TransformOperationsTransition Property="RenderTransform" |
|
Duration="0:0:0.237"> |
|
<TransformOperationsTransition.Easing> |
|
<QuadraticEaseInOut /> |
|
</TransformOperationsTransition.Easing> |
|
</TransformOperationsTransition> |
|
</Transitions> |
|
</Setter> |
|
</Style> |
|
|
|
<Style Selector="^:pointerover"> |
|
<Setter Property="BoxShadow" Value="0 0 40 0 #60000000" /> |
|
<Setter Property="Cursor" Value="Hand" /> |
|
<Style Selector="^ asyncImageLoader|AdvancedImage"> |
|
<Setter Property="CornerRadius" Value="12" /> |
|
<Setter Property="RenderTransform" Value="scale(1.03, 1.03)" /> |
|
</Style> |
|
<Style Selector="^ Border#ModelCardBottom"> |
|
<Setter Property="Background" Value="#CC000000" /> |
|
</Style> |
|
</Style> |
|
|
|
<Style Selector="^:not(:pointerover)"> |
|
<Setter Property="BoxShadow" Value="0 0 20 0 #60000000" /> |
|
<Setter Property="Cursor" Value="Arrow" /> |
|
<Style Selector="^ asyncImageLoader|AdvancedImage"> |
|
<Setter Property="CornerRadius" Value="8" /> |
|
<Setter Property="RenderTransform" Value="scale(1, 1)" /> |
|
</Style> |
|
<Style Selector="^ Border#ModelCardBottom"> |
|
<Setter Property="Background" Value="#99000000" /> |
|
</Style> |
|
</Style> |
|
</Style> |
|
</UserControl.Styles> |
|
|
|
<UserControl.Resources> |
|
<input:StandardUICommand |
|
x:Key="OpenInExplorerCommand" |
|
Command="{Binding OpenInExplorerCommand}" /> |
|
<input:StandardUICommand |
|
x:Key="OpenOnOpenArtCommand" |
|
Command="{Binding OpenOnOpenArtCommand}" /> |
|
<input:StandardUICommand |
|
x:Key="DeleteCommand" |
|
Command="{Binding DeleteCommand}" /> |
|
</UserControl.Resources> |
|
|
|
<Grid RowDefinitions="Auto, *"> |
|
<controls1:CommandBar Grid.Row="0" Grid.Column="0" |
|
VerticalAlignment="Center" |
|
HorizontalAlignment="Left" |
|
VerticalContentAlignment="Center" |
|
DefaultLabelPosition="Right"> |
|
<controls1:CommandBar.PrimaryCommands> |
|
<controls1:CommandBarButton |
|
IconSource="Refresh" |
|
VerticalAlignment="Center" |
|
Label="{x:Static lang:Resources.Action_Refresh}" |
|
Command="{Binding LoadInstalledWorkflowsCommand}" /> |
|
|
|
<controls1:CommandBarSeparator /> |
|
|
|
<controls1:CommandBarElementContainer> |
|
<StackPanel Orientation="Horizontal"> |
|
<avalonia:Icon FontSize="18" |
|
Value="fa-solid fa-info" |
|
Margin="8,0" /> |
|
<TextBlock Text="Drag & drop one of the cards below into ComfyUI to load the workflow" |
|
VerticalAlignment="Center" /> |
|
</StackPanel> |
|
</controls1:CommandBarElementContainer> |
|
</controls1:CommandBar.PrimaryCommands> |
|
</controls1:CommandBar> |
|
|
|
<ScrollViewer Grid.Column="0" |
|
Grid.Row="1"> |
|
<ItemsRepeater ItemsSource="{Binding DisplayedWorkflows}"> |
|
<ItemsRepeater.Layout> |
|
<!-- <UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4"/> --> |
|
<UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4" /> |
|
</ItemsRepeater.Layout> |
|
<ItemsRepeater.ItemTemplate> |
|
<DataTemplate x:DataType="{x:Type models:OpenArtMetadata}"> |
|
<Border |
|
Name="HoverBorder" |
|
Padding="0" |
|
BorderThickness="0" |
|
Margin="8" |
|
ClipToBounds="True" |
|
CornerRadius="8"> |
|
<Interaction.Behaviors> |
|
<BehaviorCollection> |
|
<controls:BetterContextDragBehavior |
|
Context="{Binding FilePath}" |
|
DataFormat="Files" |
|
HorizontalDragThreshold="6" |
|
VerticalDragThreshold="6" /> |
|
</BehaviorCollection> |
|
</Interaction.Behaviors> |
|
<Border.ContextFlyout> |
|
<MenuFlyout> |
|
<MenuItem Header="{x:Static lang:Resources.Action_OpenOnOpenArt}" |
|
IsVisible="{Binding HasMetadata}" |
|
Command="{StaticResource OpenOnOpenArtCommand}" |
|
CommandParameter="{Binding }"> |
|
<MenuItem.Icon> |
|
<fluent:SymbolIcon Symbol="Open" /> |
|
</MenuItem.Icon> |
|
</MenuItem> |
|
<MenuItem Header="{x:Static lang:Resources.Action_OpenInExplorer}" |
|
Command="{StaticResource OpenInExplorerCommand}" |
|
CommandParameter="{Binding }"> |
|
<MenuItem.Icon> |
|
<fluent:SymbolIcon Symbol="Folder" /> |
|
</MenuItem.Icon> |
|
</MenuItem> |
|
<MenuItem Header="{x:Static lang:Resources.Action_Delete}" |
|
Command="{StaticResource DeleteCommand}" |
|
CommandParameter="{Binding }"> |
|
<MenuItem.Icon> |
|
<fluent:SymbolIcon Symbol="Delete" /> |
|
</MenuItem.Icon> |
|
</MenuItem> |
|
</MenuFlyout> |
|
</Border.ContextFlyout> |
|
<Button |
|
Name="ModelCard" |
|
Classes="transparent-full" |
|
Padding="0" |
|
BorderThickness="0" |
|
VerticalContentAlignment="Top" |
|
CornerRadius="8"> |
|
<Grid RowDefinitions="*, Auto"> |
|
<vendorLabs:BetterAsyncImage |
|
Grid.Row="0" |
|
Grid.RowSpan="2" |
|
CornerRadius="8" |
|
Width="330" |
|
Height="400" |
|
Source="{Binding FirstThumbnail}" |
|
IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}" |
|
Stretch="UniformToFill" /> |
|
|
|
<avalonia:Icon Grid.Row="0" |
|
Grid.RowSpan="2" |
|
CornerRadius="8" |
|
Width="330" |
|
Height="400" |
|
FontSize="100" |
|
IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}" |
|
Value="fa-regular fa-file-code" /> |
|
|
|
<!-- Username pill card --> |
|
<Border |
|
BoxShadow="inset 1.2 0 80 1.8 #66000000" |
|
CornerRadius="16" |
|
Margin="4" |
|
Grid.Row="0" |
|
HorizontalAlignment="Left" |
|
VerticalAlignment="Bottom"> |
|
<Border.Resources> |
|
<DropShadowEffect |
|
x:Key="TextDropShadowEffect" |
|
BlurRadius="12" |
|
Color="#FF000000" |
|
Opacity="0.9" /> |
|
<DropShadowEffect |
|
x:Key="ImageDropShadowEffect" |
|
BlurRadius="12" |
|
Color="#FF000000" |
|
Opacity="0.2" /> |
|
</Border.Resources> |
|
<Button |
|
Command="{x:Static helpers:IOCommands.OpenUrlCommand}" |
|
CommandParameter="{Binding Workflow.Creator.DevProfileUrl}" |
|
CornerRadius="16" |
|
Classes="transparent" |
|
Padding="10,4"> |
|
<StackPanel Orientation="Horizontal" Spacing="6"> |
|
<vendorLabs:BetterAsyncImage |
|
Width="22" |
|
Height="22" |
|
Effect="{StaticResource ImageDropShadowEffect}" |
|
CornerRadius="11" |
|
RenderOptions.BitmapInterpolationMode="HighQuality" |
|
IsVisible="{Binding Workflow.Creator.Avatar, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" |
|
Source="{Binding Workflow.Creator.Avatar}" /> |
|
<TextBlock |
|
VerticalAlignment="Center" |
|
Foreground="{DynamicResource TextControlForeground}" |
|
Effect="{StaticResource TextDropShadowEffect}" |
|
Text="{Binding Workflow.Creator.Name}" /> |
|
</StackPanel> |
|
</Button> |
|
</Border> |
|
|
|
<Border |
|
Name="ModelCardBottom" |
|
Grid.Row="1"> |
|
<TextBlock |
|
Padding="16" |
|
Margin="8,0,8,0" |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
FontWeight="SemiBold" |
|
Foreground="{DynamicResource TextControlForeground}" |
|
LetterSpacing="0.33" |
|
TextWrapping="Wrap" |
|
MaxWidth="315" |
|
Text="{Binding Workflow.Name}" |
|
ToolTip.Tip="{Binding Workflow.Name}" /> |
|
</Border> |
|
</Grid> |
|
</Button> |
|
</Border> |
|
</DataTemplate> |
|
</ItemsRepeater.ItemTemplate> |
|
</ItemsRepeater> |
|
</ScrollViewer> |
|
</Grid> |
|
</controls:UserControlBase>
|
|
|