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.
510 lines
25 KiB
510 lines
25 KiB
<controls:UserControlBase |
|
x:Class="StabilityMatrix.Avalonia.Views.CivitAiBrowserPage" |
|
xmlns="https://github.com/avaloniaui" |
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|
xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia" |
|
xmlns:checkpointBrowser="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointBrowser" |
|
xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls" |
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
|
xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData" |
|
xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages" |
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
|
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia" |
|
xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels" |
|
xmlns:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointManager" |
|
xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters" |
|
xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia" |
|
xmlns:helpers="clr-namespace:StabilityMatrix.Avalonia.Helpers" |
|
xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls" |
|
xmlns:system="clr-namespace:System;assembly=System.Runtime" |
|
xmlns:vendorLabs="clr-namespace:StabilityMatrix.Avalonia.Controls.VendorLabs" |
|
d:DataContext="{x:Static designData:DesignData.CivitAiBrowserViewModel}" |
|
d:DesignHeight="700" |
|
d:DesignWidth="800" |
|
x:CompileBindings="True" |
|
x:DataType="checkpointBrowser:CivitAiBrowserViewModel" |
|
mc:Ignorable="d"> |
|
|
|
<UserControl.Styles> |
|
<Style Selector="Border#HoverBorder"> |
|
<Setter Property="Transitions"> |
|
<Transitions> |
|
<BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.237"/> |
|
</Transitions> |
|
</Setter> |
|
|
|
<Style Selector="^ vendorLabs|BetterAsyncImage"> |
|
<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="^ vendorLabs|BetterAsyncImage"> |
|
<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="^ vendorLabs|BetterAsyncImage"> |
|
<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> |
|
<system:Boolean x:Key="False">False</system:Boolean> |
|
<converters:KiloFormatterStringConverter x:Key="KiloFormatterConverter"/> |
|
<DataTemplate x:Key="CivitModelTemplate" DataType="{x:Type checkpointBrowser:CheckpointBrowserCardViewModel}"> |
|
<Border |
|
Name="HoverBorder" |
|
Padding="0" |
|
BorderThickness="0" |
|
Margin="8" |
|
ClipToBounds="True" |
|
CornerRadius="8"> |
|
<Border.ContextFlyout> |
|
<MenuFlyout> |
|
<MenuItem Header="{x:Static lang:Resources.Action_OpenOnCivitAi}" |
|
Command="{Binding OpenModelCommand}"> |
|
<MenuItem.Icon> |
|
<ui:SymbolIcon Symbol="Open" /> |
|
</MenuItem.Icon> |
|
</MenuItem> |
|
</MenuFlyout> |
|
</Border.ContextFlyout> |
|
<Button |
|
Name="ModelCard" |
|
Classes="transparent-full" |
|
Padding="0" |
|
BorderThickness="0" |
|
VerticalContentAlignment="Top" |
|
CornerRadius="8" |
|
Command="{Binding ShowVersionDialogCommand}" |
|
CommandParameter="{Binding CivitModel}" |
|
IsEnabled="{Binding !IsImporting}"> |
|
<Grid RowDefinitions="*, Auto"> |
|
<vendorLabs:BetterAsyncImage Grid.Row="0" |
|
CornerRadius="8" |
|
VerticalAlignment="Top" |
|
HorizontalAlignment="Center" |
|
Height="75" |
|
ZIndex="10" |
|
IsVisible="{Binding ShowSantaHats, FallbackValue=False}" |
|
Margin="0,8,0,0" |
|
Source="avares://StabilityMatrix.Avalonia/Assets/santahat.png"> |
|
<!-- <controls:BetterAdvancedImage.RenderTransform> --> |
|
<!-- <RotateTransform Angle="315"></RotateTransform> --> |
|
<!-- </controls:BetterAdvancedImage.RenderTransform> --> |
|
</vendorLabs:BetterAsyncImage> |
|
<vendorLabs:BetterAsyncImage |
|
Grid.Row="0" |
|
Grid.RowSpan="2" |
|
CornerRadius="8" |
|
Width="330" |
|
Height="400" |
|
Source="{Binding CardImage}" |
|
Stretch="UniformToFill"/> |
|
|
|
<StackPanel |
|
Grid.Row="0" |
|
HorizontalAlignment="Right" |
|
Orientation="Horizontal"> |
|
<Button |
|
Margin="0,8,8,0" |
|
HorizontalAlignment="Right" |
|
VerticalAlignment="Top" |
|
Classes="transparent-info" |
|
Command="{Binding ToggleFavoriteCommand}" |
|
FontSize="20" |
|
IsVisible="{Binding !IsFavorite}"> |
|
<Grid> |
|
<ui:SymbolIcon Symbol="StarAdd" /> |
|
</Grid> |
|
</Button> |
|
<Button |
|
Margin="0,8,8,0" |
|
HorizontalAlignment="Right" |
|
VerticalAlignment="Top" |
|
Classes="success" |
|
Command="{Binding ToggleFavoriteCommand}" |
|
FontSize="20" |
|
IsVisible="{Binding IsFavorite}"> |
|
<Grid> |
|
<ui:SymbolIcon Symbol="StarFilled" /> |
|
</Grid> |
|
</Button> |
|
</StackPanel> |
|
|
|
<!-- 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 CivitModel.Creator.ProfileUrl}" |
|
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 CivitModel.Creator.Image, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" |
|
Source="{Binding CivitModel.Creator.Image}"/> |
|
<TextBlock |
|
VerticalAlignment="Center" |
|
Effect="{StaticResource TextDropShadowEffect}" |
|
Text="{Binding CivitModel.Creator.Username}"/> |
|
</StackPanel> |
|
</Button> |
|
</Border> |
|
|
|
<StackPanel Grid.Row="0" Orientation="Horizontal"> |
|
<controls:Card |
|
Height="24" |
|
Margin="8,8,0,0" |
|
Padding="4" |
|
HorizontalAlignment="Left" |
|
VerticalAlignment="Top" |
|
Classes="info"> |
|
|
|
<TextBlock |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
FontSize="11" |
|
FontWeight="Medium" |
|
Text="{Binding CivitModel.Type}" /> |
|
</controls:Card> |
|
<controls:Card |
|
Height="24" |
|
Margin="4,8,0,0" |
|
Padding="4" |
|
HorizontalAlignment="Left" |
|
VerticalAlignment="Top" |
|
Classes="info"> |
|
|
|
<TextBlock |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
FontSize="11" |
|
FontWeight="Medium" |
|
Text="{Binding CivitModel.BaseModelType}" /> |
|
</controls:Card> |
|
<controls:Card |
|
Height="24" |
|
Margin="4,8,0,0" |
|
Padding="4" |
|
HorizontalAlignment="Left" |
|
VerticalAlignment="Top" |
|
Classes="success" |
|
IsVisible="{Binding ShowUpdateCard}"> |
|
|
|
<TextBlock |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
FontSize="11" |
|
FontWeight="Medium" |
|
Text="{Binding UpdateCardText}" /> |
|
</controls:Card> |
|
</StackPanel> |
|
<Border |
|
Grid.Row="0" |
|
Grid.RowSpan="2" |
|
Margin="0,0,0,0" |
|
HorizontalAlignment="Stretch" |
|
VerticalAlignment="Stretch" |
|
Background="#DD000000" |
|
CornerRadius="8" |
|
IsVisible="{Binding IsImporting}" |
|
ZIndex="1" /> |
|
<StackPanel |
|
Grid.Row="0" |
|
Grid.RowSpan="2" |
|
HorizontalAlignment="Stretch" |
|
VerticalAlignment="Center" |
|
IsVisible="{Binding IsImporting}" |
|
Orientation="Vertical" |
|
ZIndex="2"> |
|
<controls:ProgressRing |
|
Width="120" |
|
Height="120" |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
EndAngle="450" |
|
IsIndeterminate="False" |
|
StartAngle="90" |
|
Value="{Binding Value}" /> |
|
<TextBlock |
|
Margin="0,8,0,0" |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
Text="{Binding Text, TargetNullValue=Importing...}" /> |
|
</StackPanel> |
|
|
|
<Border |
|
Name="ModelCardBottom" |
|
Grid.Row="1"> |
|
<Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto, Auto, Auto"> |
|
|
|
<!-- |
|
TextTrimming causing issues with unicode chars until |
|
https://github.com/AvaloniaUI/Avalonia/pull/13385 is released |
|
--> |
|
<TextBlock |
|
Grid.ColumnSpan="2" |
|
MaxWidth="250" |
|
Margin="8,0,8,0" |
|
HorizontalAlignment="Left" |
|
VerticalAlignment="Center" |
|
FontWeight="SemiBold" |
|
Foreground="{DynamicResource TextControlForeground}" |
|
LetterSpacing="0.33" |
|
Text="{Binding CivitModel.Name}" |
|
TextWrapping="NoWrap" |
|
ToolTip.Tip="{Binding CivitModel.Name}" /> |
|
|
|
<TextBlock |
|
Grid.Row="1" |
|
Grid.Column="0" |
|
Margin="8,-4,0,0" |
|
VerticalAlignment="Center" |
|
FontSize="11" |
|
Foreground="{DynamicResource TextControlForeground}" |
|
Text="{Binding CivitModel.LatestModelVersionName, FallbackValue=''}" /> |
|
|
|
<StackPanel |
|
Grid.Row="2" |
|
Grid.Column="0" |
|
Orientation="Horizontal"> |
|
|
|
<controls:StarsRating |
|
Margin="8,8,0,8" |
|
Background="#66000000" |
|
FontSize="16" |
|
Foreground="{DynamicResource ThemeEldenRingOrangeColor}" |
|
Value="{Binding CivitModel.ModelVersionStats.Rating}" /> |
|
<TextBlock |
|
Margin="4,0,0,0" |
|
VerticalAlignment="Center" |
|
Text="{Binding CivitModel.ModelVersionStats.RatingCount}" |
|
TextAlignment="Center" /> |
|
</StackPanel> |
|
|
|
<StackPanel |
|
Grid.Row="2" |
|
Grid.Column="1" |
|
HorizontalAlignment="Right" |
|
Orientation="Horizontal"> |
|
<avalonia:Icon Value="fa-solid fa-heart" /> |
|
<TextBlock |
|
Margin="4,0" |
|
VerticalAlignment="Center" |
|
Text="{Binding CivitModel.Stats.ThumbsUpCount, Converter={StaticResource KiloFormatterConverter}}" /> |
|
|
|
<avalonia:Icon Margin="4,0" Value="fa-solid fa-download" /> |
|
<TextBlock |
|
Margin="0,0,4,0" |
|
VerticalAlignment="Center" |
|
Text="{Binding CivitModel.Stats.DownloadCount, Converter={StaticResource KiloFormatterConverter}}" /> |
|
</StackPanel> |
|
<Button |
|
Grid.Row="0" |
|
Grid.Column="1" |
|
Width="32" |
|
Margin="0,4,4,0" |
|
HorizontalAlignment="Right" |
|
VerticalAlignment="Top" |
|
HorizontalContentAlignment="Right" |
|
VerticalContentAlignment="Top" |
|
BorderThickness="0" |
|
Classes="transparent"> |
|
<ui:SymbolIcon FontSize="18" Symbol="MoreVertical" /> |
|
<Button.Flyout> |
|
<MenuFlyout> |
|
<MenuItem Command="{Binding OpenModelCommand}" Header="{x:Static lang:Resources.Action_OpenOnCivitAi}"> |
|
<MenuItem.Icon> |
|
<ui:SymbolIcon Symbol="Open" /> |
|
</MenuItem.Icon> |
|
</MenuItem> |
|
</MenuFlyout> |
|
</Button.Flyout> |
|
</Button> |
|
</Grid> |
|
</Border> |
|
</Grid> |
|
</Button> |
|
</Border> |
|
|
|
</DataTemplate> |
|
</UserControl.Resources> |
|
|
|
<Grid RowDefinitions="Auto,*,Auto"> |
|
|
|
<StackPanel Margin="8" Orientation="Vertical"> |
|
<Grid ColumnDefinitions="*,Auto"> |
|
|
|
<TextBox |
|
HorizontalAlignment="Stretch" |
|
KeyDown="InputElement_OnKeyDown" |
|
Text="{Binding SearchQuery, Mode=TwoWay}" |
|
Watermark="{x:Static lang:Resources.Label_ModelSearchWatermark}"> |
|
<TextBox.InnerRightContent> |
|
<Button |
|
Classes="transparent-full" |
|
Command="{Binding ClearSearchQuery}" |
|
IsVisible="{Binding SearchQuery.Length}"> |
|
<ui:SymbolIcon Symbol="Cancel" /> |
|
</Button> |
|
</TextBox.InnerRightContent> |
|
</TextBox> |
|
|
|
<Button |
|
Grid.Column="1" |
|
Width="80" |
|
Margin="8,0,8,0" |
|
VerticalAlignment="Stretch" |
|
Classes="accent" |
|
Command="{Binding SearchModelsCommand}" |
|
CommandParameter="{StaticResource False}" |
|
IsDefault="True"> |
|
<Grid> |
|
<controls:ProgressRing |
|
MinWidth="16" |
|
MinHeight="16" |
|
VerticalAlignment="Center" |
|
BorderThickness="4" |
|
IsIndeterminate="True" |
|
IsVisible="{Binding SearchModelsCommand.IsRunning}" /> |
|
<TextBlock |
|
VerticalAlignment="Center" |
|
IsVisible="{Binding !SearchModelsCommand.IsRunning}" |
|
Text="{x:Static lang:Resources.Action_Search}" /> |
|
</Grid> |
|
</Button> |
|
</Grid> |
|
<DockPanel> |
|
<StackPanel Margin="0,8,4,8" Orientation="Vertical"> |
|
<Label Content="{x:Static lang:Resources.Label_Sort}" /> |
|
<ComboBox |
|
MinWidth="100" |
|
ItemsSource="{Binding AllSortModes}" |
|
SelectedItem="{Binding SortMode}" /> |
|
</StackPanel> |
|
|
|
<StackPanel Margin="4,8" Orientation="Vertical"> |
|
<Label Content="{x:Static lang:Resources.Label_TimePeriod}" /> |
|
<ComboBox |
|
MinWidth="100" |
|
ItemsSource="{Binding AllCivitPeriods}" |
|
SelectedItem="{Binding SelectedPeriod}" /> |
|
</StackPanel> |
|
|
|
<StackPanel Margin="4,8" Orientation="Vertical"> |
|
<Label Content="{x:Static lang:Resources.Label_ModelType}" /> |
|
<ComboBox |
|
MinWidth="100" |
|
ItemsSource="{Binding AllModelTypes}" |
|
SelectedItem="{Binding SelectedModelType}" /> |
|
</StackPanel> |
|
|
|
<StackPanel Margin="4,8" Orientation="Vertical"> |
|
<Label Content="{x:Static lang:Resources.Label_BaseModel}" /> |
|
<ComboBox |
|
MinWidth="100" |
|
ItemsSource="{Binding BaseModelOptions}" |
|
SelectedItem="{Binding SelectedBaseModelType}" /> |
|
</StackPanel> |
|
|
|
|
|
<CheckBox |
|
Margin="8,8,0,0" |
|
HorizontalAlignment="Right" |
|
Content="{x:Static lang:Resources.Label_ShowNsfwContent}" |
|
IsChecked="{Binding ShowNsfw, Mode=TwoWay}" /> |
|
</DockPanel> |
|
|
|
</StackPanel> |
|
|
|
<ScrollViewer |
|
Grid.Row="1" |
|
ScrollChanged="ScrollViewer_OnScrollChanged"> |
|
<ItemsRepeater ItemTemplate="{StaticResource CivitModelTemplate}" |
|
HorizontalAlignment="Center" |
|
ItemsSource="{Binding ModelCards}"> |
|
<ItemsRepeater.Layout> |
|
<UniformGridLayout Orientation="Horizontal" /> |
|
</ItemsRepeater.Layout> |
|
</ItemsRepeater> |
|
</ScrollViewer> |
|
|
|
<TextBlock Grid.Row="2" Text="End of results" |
|
TextAlignment="Center" |
|
Margin="0,0,0,8"> |
|
<TextBlock.IsVisible> |
|
<MultiBinding Converter="{x:Static BoolConverters.And}"> |
|
<Binding Path="HasSearched"/> |
|
<Binding Path="NextPageCursor" |
|
Converter="{x:Static StringConverters.IsNullOrEmpty}"/> |
|
</MultiBinding> |
|
</TextBlock.IsVisible> |
|
</TextBlock> |
|
|
|
<TextBlock |
|
Grid.Row="0" |
|
Grid.RowSpan="3" |
|
HorizontalAlignment="Center" |
|
VerticalAlignment="Center" |
|
FontSize="20" |
|
IsVisible="{Binding NoResultsFound}" |
|
Text="{Binding NoResultsText, FallbackValue=No results found}" /> |
|
|
|
<controls:ProgressRing |
|
Grid.Row="1" |
|
Width="128" |
|
Height="128" |
|
HorizontalAlignment="Stretch" |
|
VerticalAlignment="Stretch" |
|
IsIndeterminate="True" |
|
IsVisible="{Binding ShowMainLoadingSpinner, FallbackValue=False}" /> |
|
</Grid> |
|
</controls:UserControlBase>
|
|
|