mirror of
https://github.com/Artemis-RGB/Artemis
synced 2025-12-13 05:48:35 +00:00
Added acrylic blur test
This commit is contained in:
parent
0e077e31b3
commit
e03d6b20e9
22
src/Artemis.UI/Controls/AcrylicBlur/AcrylicBlur.axaml
Normal file
22
src/Artemis.UI/Controls/AcrylicBlur/AcrylicBlur.axaml
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<ResourceDictionary xmlns="https://github.com/avaloniaui"
|
||||||
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
|
xmlns:controls="clr-namespace:Artemis.UI.Controls"
|
||||||
|
xmlns:acrylicBlur="clr-namespace:Artemis.UI.Controls.AcrylicBlur"
|
||||||
|
x:ClassModifier="internal">
|
||||||
|
<ControlTheme x:Key="{x:Type acrylicBlur:AcrylicBlur}" TargetType="acrylicBlur:AcrylicBlur">
|
||||||
|
<Setter Property="Template">
|
||||||
|
<ControlTemplate>
|
||||||
|
<ContentPresenter Name="PART_ContentPresenter"
|
||||||
|
Background="{TemplateBinding Background}"
|
||||||
|
BorderBrush="{TemplateBinding BorderBrush}"
|
||||||
|
BorderThickness="{TemplateBinding BorderThickness}"
|
||||||
|
CornerRadius="{TemplateBinding CornerRadius}"
|
||||||
|
ContentTemplate="{TemplateBinding ContentTemplate}"
|
||||||
|
Content="{TemplateBinding Content}"
|
||||||
|
Padding="{TemplateBinding Padding}"
|
||||||
|
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||||
|
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
|
||||||
|
</ControlTemplate>
|
||||||
|
</Setter>
|
||||||
|
</ControlTheme>
|
||||||
|
</ResourceDictionary>
|
||||||
45
src/Artemis.UI/Controls/AcrylicBlur/AcrylicBlur.cs
Normal file
45
src/Artemis.UI/Controls/AcrylicBlur/AcrylicBlur.cs
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
using Avalonia;
|
||||||
|
using Avalonia.Controls;
|
||||||
|
using Avalonia.Media;
|
||||||
|
|
||||||
|
namespace Artemis.UI.Controls.AcrylicBlur;
|
||||||
|
|
||||||
|
public class AcrylicBlur : ContentControl
|
||||||
|
{
|
||||||
|
private static readonly ImmutableExperimentalAcrylicMaterial DefaultAcrylicMaterial = (ImmutableExperimentalAcrylicMaterial) new ExperimentalAcrylicMaterial()
|
||||||
|
{
|
||||||
|
MaterialOpacity = 0.1,
|
||||||
|
TintColor = new Color(255, 7, 7, 7),
|
||||||
|
TintOpacity = 1,
|
||||||
|
PlatformTransparencyCompensationLevel = 0
|
||||||
|
}.ToImmutable();
|
||||||
|
|
||||||
|
public static readonly StyledProperty<ExperimentalAcrylicMaterial?> MaterialProperty =
|
||||||
|
AvaloniaProperty.Register<AcrylicBlur, ExperimentalAcrylicMaterial?>(nameof(Material));
|
||||||
|
|
||||||
|
public ExperimentalAcrylicMaterial? Material
|
||||||
|
{
|
||||||
|
get => GetValue(MaterialProperty);
|
||||||
|
set => SetValue(MaterialProperty, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
public static readonly StyledProperty<int> BlurProperty = AvaloniaProperty.Register<AcrylicBlur, int>(nameof(Blur));
|
||||||
|
|
||||||
|
public int Blur
|
||||||
|
{
|
||||||
|
get => GetValue(BlurProperty);
|
||||||
|
set => SetValue(BlurProperty, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
static AcrylicBlur()
|
||||||
|
{
|
||||||
|
AffectsRender<AcrylicBlur>(MaterialProperty);
|
||||||
|
AffectsRender<AcrylicBlur>(BlurProperty);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override void Render(DrawingContext context)
|
||||||
|
{
|
||||||
|
ImmutableExperimentalAcrylicMaterial mat = Material != null ? (ImmutableExperimentalAcrylicMaterial) Material.ToImmutable() : DefaultAcrylicMaterial;
|
||||||
|
context.Custom(new AcrylicBlurRenderOperation(this, mat, Blur, new Rect(default, Bounds.Size)));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
using System;
|
||||||
|
using System.IO;
|
||||||
|
using Avalonia;
|
||||||
|
using Avalonia.Media;
|
||||||
|
using Avalonia.Platform;
|
||||||
|
using Avalonia.Rendering.SceneGraph;
|
||||||
|
using Avalonia.Skia;
|
||||||
|
using Avalonia.Threading;
|
||||||
|
using SkiaSharp;
|
||||||
|
|
||||||
|
namespace Artemis.UI.Controls.AcrylicBlur;
|
||||||
|
|
||||||
|
public class AcrylicBlurRenderOperation : ICustomDrawOperation
|
||||||
|
{
|
||||||
|
private static SKShader? _acrylicNoiseShader;
|
||||||
|
|
||||||
|
private readonly AcrylicBlur _acrylicBlur;
|
||||||
|
private readonly ImmutableExperimentalAcrylicMaterial _material;
|
||||||
|
private readonly int _blur;
|
||||||
|
private readonly Rect _bounds;
|
||||||
|
private SKImage? _backgroundSnapshot;
|
||||||
|
private bool _disposed;
|
||||||
|
|
||||||
|
public AcrylicBlurRenderOperation(AcrylicBlur acrylicBlur, ImmutableExperimentalAcrylicMaterial material, int blur, Rect bounds)
|
||||||
|
{
|
||||||
|
_acrylicBlur = acrylicBlur;
|
||||||
|
_material = material;
|
||||||
|
_blur = blur;
|
||||||
|
_bounds = bounds;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void Dispose()
|
||||||
|
{
|
||||||
|
if (_disposed)
|
||||||
|
return;
|
||||||
|
|
||||||
|
_backgroundSnapshot?.Dispose();
|
||||||
|
_disposed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public bool HitTest(Point p) => _bounds.Contains(p);
|
||||||
|
|
||||||
|
static SKColorFilter CreateAlphaColorFilter(double opacity)
|
||||||
|
{
|
||||||
|
if (opacity > 1)
|
||||||
|
opacity = 1;
|
||||||
|
byte[] c = new byte[256];
|
||||||
|
byte[] a = new byte[256];
|
||||||
|
for (int i = 0; i < 256; i++)
|
||||||
|
{
|
||||||
|
c[i] = (byte) i;
|
||||||
|
a[i] = (byte) (i * opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
return SKColorFilter.CreateTable(a, c, c, c);
|
||||||
|
}
|
||||||
|
|
||||||
|
public void Render(ImmediateDrawingContext context)
|
||||||
|
{
|
||||||
|
if (_disposed)
|
||||||
|
throw new ObjectDisposedException(nameof(AcrylicBlurRenderOperation));
|
||||||
|
|
||||||
|
ISkiaSharpApiLeaseFeature? leaseFeature = context.PlatformImpl.GetFeature<ISkiaSharpApiLeaseFeature>();
|
||||||
|
if (leaseFeature == null)
|
||||||
|
return;
|
||||||
|
using ISkiaSharpApiLease lease = leaseFeature.Lease();
|
||||||
|
|
||||||
|
if (!lease.SkCanvas.TotalMatrix.TryInvert(out SKMatrix currentInvertedTransform) || lease.SkSurface == null)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (lease.SkCanvas.GetLocalClipBounds(out SKRect bounds) && !bounds.Contains(SKRect.Create(bounds.Left, bounds.Top, (float) _acrylicBlur.Bounds.Width, (float) _acrylicBlur.Bounds.Height)))
|
||||||
|
{
|
||||||
|
Dispatcher.UIThread.Invoke(() => _acrylicBlur.InvalidateVisual());
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
_backgroundSnapshot?.Dispose();
|
||||||
|
_backgroundSnapshot = lease.SkSurface.Snapshot();
|
||||||
|
}
|
||||||
|
|
||||||
|
_backgroundSnapshot ??= lease.SkSurface.Snapshot();
|
||||||
|
using SKShader? backdropShader = SKShader.CreateImage(_backgroundSnapshot, SKShaderTileMode.Clamp, SKShaderTileMode.Clamp, currentInvertedTransform);
|
||||||
|
using SKSurface? blurred = SKSurface.Create(
|
||||||
|
lease.GrContext,
|
||||||
|
false,
|
||||||
|
new SKImageInfo((int) Math.Ceiling(_bounds.Width), (int) Math.Ceiling(_bounds.Height), SKImageInfo.PlatformColorType, SKAlphaType.Premul)
|
||||||
|
);
|
||||||
|
using (SKImageFilter? filter = SKImageFilter.CreateBlur(_blur, _blur, SKShaderTileMode.Clamp))
|
||||||
|
using (SKPaint blurPaint = new SKPaint {Shader = backdropShader, ImageFilter = filter})
|
||||||
|
{
|
||||||
|
blurred.Canvas.DrawRect(0, 0, (float) _bounds.Width, (float) _bounds.Height, blurPaint);
|
||||||
|
|
||||||
|
using (SKImage? blurSnap = blurred.Snapshot())
|
||||||
|
using (SKShader? blurSnapShader = SKShader.CreateImage(blurSnap))
|
||||||
|
using (SKPaint blurSnapPaint = new SKPaint {Shader = blurSnapShader, IsAntialias = true})
|
||||||
|
{
|
||||||
|
// Rendering twice to reduce opacity
|
||||||
|
lease.SkCanvas.DrawRect(0, 0, (float) _bounds.Width, (float) _bounds.Height, blurSnapPaint);
|
||||||
|
lease.SkCanvas.DrawRect(0, 0, (float) _bounds.Width, (float) _bounds.Height, blurSnapPaint);
|
||||||
|
}
|
||||||
|
|
||||||
|
//return;
|
||||||
|
using SKPaint acrylliPaint = new SKPaint();
|
||||||
|
acrylliPaint.IsAntialias = true;
|
||||||
|
|
||||||
|
double opacity = 1;
|
||||||
|
|
||||||
|
const double noiseOpacity = 0.0225;
|
||||||
|
|
||||||
|
Color tintColor = _material.TintColor;
|
||||||
|
SKColor tint = new SKColor(tintColor.R, tintColor.G, tintColor.B, tintColor.A);
|
||||||
|
|
||||||
|
if (_acrylicNoiseShader == null)
|
||||||
|
{
|
||||||
|
using Stream? stream = typeof(SkiaPlatform).Assembly.GetManifestResourceStream("Avalonia.Skia.Assets.NoiseAsset_256X256_PNG.png");
|
||||||
|
using SKBitmap? bitmap = SKBitmap.Decode(stream);
|
||||||
|
_acrylicNoiseShader = SKShader.CreateBitmap(bitmap, SKShaderTileMode.Repeat, SKShaderTileMode.Repeat).WithColorFilter(CreateAlphaColorFilter(noiseOpacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
using (SKShader? backdrop = SKShader.CreateColor(new SKColor(_material.MaterialColor.R, _material.MaterialColor.G, _material.MaterialColor.B, _material.MaterialColor.A)))
|
||||||
|
using (SKShader? tintShader = SKShader.CreateColor(tint))
|
||||||
|
using (SKShader? effectiveTint = SKShader.CreateCompose(backdrop, tintShader))
|
||||||
|
using (SKShader? compose = SKShader.CreateCompose(effectiveTint, _acrylicNoiseShader))
|
||||||
|
{
|
||||||
|
acrylliPaint.Shader = compose;
|
||||||
|
acrylliPaint.IsAntialias = true;
|
||||||
|
lease.SkCanvas.DrawRect(0, 0, (float) _bounds.Width, (float) _bounds.Height, acrylliPaint);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public Rect Bounds => _bounds.Inflate(4);
|
||||||
|
|
||||||
|
public bool Equals(ICustomDrawOperation? other)
|
||||||
|
{
|
||||||
|
return other is AcrylicBlurRenderOperation op && op._bounds == _bounds && op._material.Equals(_material);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -5,31 +5,40 @@
|
|||||||
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
|
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
|
||||||
xmlns:entries="clr-namespace:Artemis.UI.Screens.Workshop.Profile"
|
xmlns:entries="clr-namespace:Artemis.UI.Screens.Workshop.Profile"
|
||||||
xmlns:entries1="clr-namespace:Artemis.UI.Screens.Workshop.Entries"
|
xmlns:entries1="clr-namespace:Artemis.UI.Screens.Workshop.Entries"
|
||||||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="120"
|
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="110"
|
||||||
x:Class="Artemis.UI.Screens.Workshop.Entries.EntryListView"
|
x:Class="Artemis.UI.Screens.Workshop.Entries.EntryListView"
|
||||||
x:DataType="entries1:EntryListViewModel">
|
x:DataType="entries1:EntryListViewModel">
|
||||||
<Border Classes="card" MinHeight="120">
|
<Button MinHeight="110"
|
||||||
|
MaxHeight="140"
|
||||||
|
Padding="16"
|
||||||
|
CornerRadius="8"
|
||||||
|
HorizontalAlignment="Stretch"
|
||||||
|
HorizontalContentAlignment="Stretch"
|
||||||
|
Command="{CompiledBinding NavigateToEntry}">
|
||||||
<Grid ColumnDefinitions="Auto,*,Auto">
|
<Grid ColumnDefinitions="Auto,*,Auto">
|
||||||
|
<!-- Icon -->
|
||||||
<Border Grid.Column="0"
|
<Border Grid.Column="0"
|
||||||
Cursor="Hand"
|
|
||||||
CornerRadius="12"
|
CornerRadius="12"
|
||||||
Background="{StaticResource ControlStrokeColorOnAccentDefault}"
|
Background="{StaticResource ControlStrokeColorOnAccentDefault}"
|
||||||
VerticalAlignment="Center"
|
VerticalAlignment="Center"
|
||||||
Margin="0 0 10 0"
|
Margin="0 0 10 0"
|
||||||
Width="90"
|
Width="80"
|
||||||
Height="90"
|
Height="80">
|
||||||
PointerReleased="InputElement_OnPointerReleased">
|
<avalonia:MaterialIcon Kind="HandOkay" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="70" Height="70" />
|
||||||
<avalonia:MaterialIcon Kind="HandOkay" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="80" Height="80"/>
|
|
||||||
</Border>
|
</Border>
|
||||||
|
|
||||||
|
<!-- Body -->
|
||||||
<Grid Grid.Column="1" VerticalAlignment="Stretch" RowDefinitions="Auto,*,Auto">
|
<Grid Grid.Column="1" VerticalAlignment="Stretch" RowDefinitions="Auto,*,Auto">
|
||||||
<TextBlock Grid.Row="0" Margin="0 0 0 5" Cursor="Hand" PointerReleased="InputElement_OnPointerReleased">
|
<TextBlock Grid.Row="0" Margin="0 0 0 5" TextTrimming="CharacterEllipsis" >
|
||||||
<Run Classes="h4" Text="{CompiledBinding Entry.Name, FallbackValue=Title}" />
|
<Run Classes="h5" Text="{CompiledBinding Entry.Name, FallbackValue=Title}" />
|
||||||
<Run Classes="subtitle">by</Run>
|
<Run Classes="subtitle">by</Run>
|
||||||
<Run Classes="subtitle" Text="{CompiledBinding Entry.Author, FallbackValue=Author}" />
|
<Run Classes="subtitle" Text="{CompiledBinding Entry.Author, FallbackValue=Author}" />
|
||||||
</TextBlock>
|
</TextBlock>
|
||||||
<TextBlock Grid.Row="1" FontSize="15" Classes="subtitle" Text="{CompiledBinding Entry.Summary, FallbackValue=Summary}"></TextBlock>
|
<TextBlock Grid.Row="1"
|
||||||
|
Classes="subtitle"
|
||||||
|
TextWrapping="Wrap"
|
||||||
|
TextTrimming="CharacterEllipsis"
|
||||||
|
Text="{CompiledBinding Entry.Summary, FallbackValue=Summary}"></TextBlock>
|
||||||
|
|
||||||
<ItemsControl Grid.Row="2" ItemsSource="{CompiledBinding Entry.Categories}">
|
<ItemsControl Grid.Row="2" ItemsSource="{CompiledBinding Entry.Categories}">
|
||||||
<ItemsControl.ItemsPanel>
|
<ItemsControl.ItemsPanel>
|
||||||
@ -41,12 +50,14 @@
|
|||||||
<DataTemplate>
|
<DataTemplate>
|
||||||
<StackPanel Orientation="Horizontal">
|
<StackPanel Orientation="Horizontal">
|
||||||
<avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Margin="0 0 3 0"></avalonia:MaterialIcon>
|
<avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Margin="0 0 3 0"></avalonia:MaterialIcon>
|
||||||
<TextBlock Text="{CompiledBinding Name}" />
|
<TextBlock Text="{CompiledBinding Name}" TextTrimming="CharacterEllipsis" />
|
||||||
</StackPanel>
|
</StackPanel>
|
||||||
</DataTemplate>
|
</DataTemplate>
|
||||||
</ItemsControl.ItemTemplate>
|
</ItemsControl.ItemTemplate>
|
||||||
</ItemsControl>
|
</ItemsControl>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
<!-- Info -->
|
||||||
<StackPanel Grid.Column="2">
|
<StackPanel Grid.Column="2">
|
||||||
<TextBlock TextAlignment="Right" Text="{CompiledBinding Entry.CreatedAt, StringFormat={}{0:g}, FallbackValue=01-01-1337}" />
|
<TextBlock TextAlignment="Right" Text="{CompiledBinding Entry.CreatedAt, StringFormat={}{0:g}, FallbackValue=01-01-1337}" />
|
||||||
<TextBlock TextAlignment="Right">
|
<TextBlock TextAlignment="Right">
|
||||||
@ -54,8 +65,7 @@
|
|||||||
<Run Classes="h5" Text="{CompiledBinding Entry.Downloads, FallbackValue=0}" />
|
<Run Classes="h5" Text="{CompiledBinding Entry.Downloads, FallbackValue=0}" />
|
||||||
<Run>downloads</Run>
|
<Run>downloads</Run>
|
||||||
</TextBlock>
|
</TextBlock>
|
||||||
|
|
||||||
</StackPanel>
|
</StackPanel>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Border>
|
</Button>
|
||||||
</UserControl>
|
</UserControl>
|
||||||
@ -16,9 +16,4 @@ public partial class EntryListView : ReactiveUserControl<EntryListViewModel>
|
|||||||
{
|
{
|
||||||
AvaloniaXamlLoader.Load(this);
|
AvaloniaXamlLoader.Load(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private async void InputElement_OnPointerReleased(object? sender, PointerReleasedEventArgs e)
|
|
||||||
{
|
|
||||||
await ViewModel.NavigateToEntry();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -1,8 +1,10 @@
|
|||||||
using System;
|
using System;
|
||||||
|
using System.Reactive;
|
||||||
using System.Threading.Tasks;
|
using System.Threading.Tasks;
|
||||||
using Artemis.UI.Shared;
|
using Artemis.UI.Shared;
|
||||||
using Artemis.UI.Shared.Routing;
|
using Artemis.UI.Shared.Routing;
|
||||||
using Artemis.WebClient.Workshop;
|
using Artemis.WebClient.Workshop;
|
||||||
|
using ReactiveUI;
|
||||||
|
|
||||||
namespace Artemis.UI.Screens.Workshop.Entries;
|
namespace Artemis.UI.Screens.Workshop.Entries;
|
||||||
|
|
||||||
@ -14,11 +16,13 @@ public class EntryListViewModel : ViewModelBase
|
|||||||
{
|
{
|
||||||
_router = router;
|
_router = router;
|
||||||
Entry = entry;
|
Entry = entry;
|
||||||
|
NavigateToEntry = ReactiveCommand.CreateFromTask(ExecuteNavigateToEntry);
|
||||||
}
|
}
|
||||||
|
|
||||||
public IGetEntries_Entries_Items Entry { get; }
|
public IGetEntries_Entries_Items Entry { get; }
|
||||||
|
public ReactiveCommand<Unit,Unit> NavigateToEntry { get; }
|
||||||
|
|
||||||
public async Task NavigateToEntry()
|
private async Task ExecuteNavigateToEntry()
|
||||||
{
|
{
|
||||||
switch (Entry.EntryType)
|
switch (Entry.EntryType)
|
||||||
{
|
{
|
||||||
|
|||||||
@ -4,55 +4,78 @@
|
|||||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||||
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
|
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
|
||||||
xmlns:home="clr-namespace:Artemis.UI.Screens.Workshop.Home"
|
xmlns:home="clr-namespace:Artemis.UI.Screens.Workshop.Home"
|
||||||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
|
xmlns:controls="clr-namespace:Artemis.UI.Controls"
|
||||||
|
xmlns:acrylicBlur="clr-namespace:Artemis.UI.Controls.AcrylicBlur"
|
||||||
|
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
|
||||||
x:Class="Artemis.UI.Screens.Workshop.Home.WorkshopHomeView"
|
x:Class="Artemis.UI.Screens.Workshop.Home.WorkshopHomeView"
|
||||||
x:DataType="home:WorkshopHomeViewModel">
|
x:DataType="home:WorkshopHomeViewModel">
|
||||||
<Border Classes="router-container">
|
<Border Classes="router-container">
|
||||||
<Grid RowDefinitions="200,*">
|
<Grid RowDefinitions="200,*,*">
|
||||||
<Image Grid.Row="0"
|
<Image Grid.Row="0"
|
||||||
Grid.RowSpan="2"
|
Grid.RowSpan="2"
|
||||||
VerticalAlignment="Top"
|
VerticalAlignment="Top"
|
||||||
Source="/Assets/Images/workshop-banner.jpg"
|
Source="/Assets/Images/workshop-banner.jpg"
|
||||||
Height="200"
|
Height="200"
|
||||||
Stretch="UniformToFill"
|
Stretch="UniformToFill"
|
||||||
RenderOptions.BitmapInterpolationMode="HighQuality">
|
RenderOptions.BitmapInterpolationMode="HighQuality">
|
||||||
<Image.OpacityMask>
|
<Image.OpacityMask>
|
||||||
<LinearGradientBrush StartPoint="0%,70%" EndPoint="0%,100%">
|
<LinearGradientBrush StartPoint="0%,70%" EndPoint="0%,100%">
|
||||||
<GradientStops>
|
<GradientStops>
|
||||||
<GradientStop Color="Black" Offset="0"></GradientStop>
|
<GradientStop Color="Black" Offset="0"></GradientStop>
|
||||||
<GradientStop Color="Transparent" Offset="100"></GradientStop>
|
<GradientStop Color="Transparent" Offset="100"></GradientStop>
|
||||||
</GradientStops>
|
</GradientStops>
|
||||||
</LinearGradientBrush>
|
</LinearGradientBrush>
|
||||||
</Image.OpacityMask>
|
</Image.OpacityMask>
|
||||||
</Image>
|
</Image>
|
||||||
|
|
||||||
<TextBlock Grid.Row="0"
|
<TextBlock Grid.Row="0"
|
||||||
TextWrapping="Wrap"
|
TextWrapping="Wrap"
|
||||||
Foreground="White"
|
Foreground="White"
|
||||||
FontSize="32"
|
FontSize="32"
|
||||||
Margin="30"
|
Margin="30"
|
||||||
Text="Welcome to the Artemis Workshop!">
|
Text="Welcome to the Artemis Workshop!">
|
||||||
<TextBlock.Effect>
|
<TextBlock.Effect>
|
||||||
<DropShadowEffect Color="Black" OffsetX="2" OffsetY="2" BlurRadius="5"></DropShadowEffect>
|
<DropShadowEffect Color="Black" OffsetX="2" OffsetY="2" BlurRadius="5"></DropShadowEffect>
|
||||||
</TextBlock.Effect>
|
</TextBlock.Effect>
|
||||||
</TextBlock>
|
</TextBlock>
|
||||||
|
|
||||||
<StackPanel Grid.Row="1" Margin="30 -75 30 0" Spacing="10" Orientation="Horizontal" VerticalAlignment="Top">
|
<StackPanel Grid.Row="1" Margin="30 -75 30 0" Spacing="10" Orientation="Horizontal" VerticalAlignment="Top">
|
||||||
<Button Width="150" Height="180" Command="{CompiledBinding Navigate}" CommandParameter="workshop/profiles/1" VerticalContentAlignment="Top">
|
<Border CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
|
||||||
<StackPanel>
|
<acrylicBlur:AcrylicBlur Blur="17">
|
||||||
<avalonia:MaterialIcon Kind="FolderVideo" HorizontalAlignment="Left" Width="60" Height="60" Margin="0 5"/>
|
<Button Width="150" Height="180" Command="{CompiledBinding Navigate}" CommandParameter="workshop/profiles/1" VerticalContentAlignment="Top">
|
||||||
<TextBlock TextWrapping="Wrap" FontSize="16" Margin="0 5">Profiles</TextBlock>
|
<StackPanel>
|
||||||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.8">Browse new profiles created by other users.</TextBlock>
|
<avalonia:MaterialIcon Kind="FolderVideo" HorizontalAlignment="Left" Width="60" Height="60" Margin="0 5" />
|
||||||
</StackPanel>
|
<TextBlock TextWrapping="Wrap" FontSize="16" Margin="0 5">Profiles</TextBlock>
|
||||||
</Button>
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.8">Browse new profiles created by other users.</TextBlock>
|
||||||
<Button Width="150" Height="180" Command="{CompiledBinding Navigate}" CommandParameter="workshop/layouts/1" VerticalContentAlignment="Top">
|
</StackPanel>
|
||||||
<StackPanel>
|
</Button>
|
||||||
<avalonia:MaterialIcon Kind="KeyboardVariant" HorizontalAlignment="Left" Width="60" Height="60" Margin="0 5"/>
|
</acrylicBlur:AcrylicBlur>
|
||||||
<TextBlock TextWrapping="Wrap" FontSize="16" Margin="0 5">Layouts</TextBlock>
|
</Border>
|
||||||
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.8">Layouts make your devices look great in the editor.</TextBlock>
|
|
||||||
</StackPanel>
|
<Border CornerRadius="{DynamicResource ControlCornerRadius}" ClipToBounds="True">
|
||||||
</Button>
|
<acrylicBlur:AcrylicBlur Blur="17">
|
||||||
</StackPanel>
|
<Button Width="150" Height="180" Command="{CompiledBinding Navigate}" CommandParameter="workshop/layouts/1" VerticalContentAlignment="Top">
|
||||||
</Grid>
|
<StackPanel>
|
||||||
|
<avalonia:MaterialIcon Kind="KeyboardVariant" HorizontalAlignment="Left" Width="60" Height="60" Margin="0 5" />
|
||||||
|
<TextBlock TextWrapping="Wrap" FontSize="16" Margin="0 5">Layouts</TextBlock>
|
||||||
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.8">Layouts make your devices look great in the editor.</TextBlock>
|
||||||
|
</StackPanel>
|
||||||
|
</Button>
|
||||||
|
</acrylicBlur:AcrylicBlur>
|
||||||
|
</Border>
|
||||||
|
</StackPanel>
|
||||||
|
|
||||||
|
|
||||||
|
<Grid Grid.Row="1" Width="320" Height="200">
|
||||||
|
<Grid>
|
||||||
|
<Rectangle Fill="Aqua" Height="200" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" />
|
||||||
|
<Ellipse Fill="Magenta" Height="152" Width="152" HorizontalAlignment="Center" VerticalAlignment="Center" />
|
||||||
|
<Rectangle Fill="Yellow" Height="100" Width="80" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
|
||||||
|
</Grid>
|
||||||
|
<acrylicBlur:AcrylicBlur Margin="12" Blur="17">
|
||||||
|
<TextBlock>Test</TextBlock>
|
||||||
|
</acrylicBlur:AcrylicBlur>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
</Border>
|
</Border>
|
||||||
</UserControl>
|
</UserControl>
|
||||||
@ -16,20 +16,10 @@
|
|||||||
<Border Classes="card" VerticalAlignment="Stretch" Margin="0,0,5,0">
|
<Border Classes="card" VerticalAlignment="Stretch" Margin="0,0,5,0">
|
||||||
<ContentControl Content="{CompiledBinding CategoriesViewModel}"></ContentControl>
|
<ContentControl Content="{CompiledBinding CategoriesViewModel}"></ContentControl>
|
||||||
</Border>
|
</Border>
|
||||||
|
|
||||||
<TextBlock Classes="card-title">
|
|
||||||
Filters
|
|
||||||
</TextBlock>
|
|
||||||
<Border Classes="card" VerticalAlignment="Stretch" Margin="0,0,5,0">
|
|
||||||
<StackPanel>
|
|
||||||
<Label>Author</Label>
|
|
||||||
<AutoCompleteBox Watermark="Search authors.." />
|
|
||||||
</StackPanel>
|
|
||||||
</Border>
|
|
||||||
|
|
||||||
</StackPanel>
|
</StackPanel>
|
||||||
|
|
||||||
<ScrollViewer Grid.Column="1" Grid.Row="0">
|
<ProgressBar Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Margin="0 26 20 0" IsVisible="{CompiledBinding IsLoading}" IsIndeterminate="True"/>
|
||||||
|
<ScrollViewer Grid.Column="1" Grid.Row="0" Margin="0 26 0 0">
|
||||||
<ItemsRepeater ItemsSource="{CompiledBinding Entries}" Margin="0 0 20 0">
|
<ItemsRepeater ItemsSource="{CompiledBinding Entries}" Margin="0 0 20 0">
|
||||||
<ItemsRepeater.ItemTemplate>
|
<ItemsRepeater.ItemTemplate>
|
||||||
<DataTemplate>
|
<DataTemplate>
|
||||||
@ -41,6 +31,7 @@
|
|||||||
|
|
||||||
<pagination:Pagination Grid.Column="1"
|
<pagination:Pagination Grid.Column="1"
|
||||||
Grid.Row="1"
|
Grid.Row="1"
|
||||||
|
Margin="0 20 0 10"
|
||||||
IsVisible="{CompiledBinding ShowPagination}"
|
IsVisible="{CompiledBinding ShowPagination}"
|
||||||
Value="{CompiledBinding Page}"
|
Value="{CompiledBinding Page}"
|
||||||
Maximum="{CompiledBinding TotalPages}"
|
Maximum="{CompiledBinding TotalPages}"
|
||||||
|
|||||||
@ -10,6 +10,8 @@ using Artemis.UI.Screens.Workshop.Entries;
|
|||||||
using Artemis.UI.Screens.Workshop.Parameters;
|
using Artemis.UI.Screens.Workshop.Parameters;
|
||||||
using Artemis.UI.Shared;
|
using Artemis.UI.Shared;
|
||||||
using Artemis.UI.Shared.Routing;
|
using Artemis.UI.Shared.Routing;
|
||||||
|
using Artemis.UI.Shared.Services;
|
||||||
|
using Artemis.UI.Shared.Services.Builders;
|
||||||
using Artemis.WebClient.Workshop;
|
using Artemis.WebClient.Workshop;
|
||||||
using ReactiveUI;
|
using ReactiveUI;
|
||||||
using StrawberryShake;
|
using StrawberryShake;
|
||||||
@ -19,18 +21,23 @@ namespace Artemis.UI.Screens.Workshop.Profile;
|
|||||||
public class ProfileListViewModel : RoutableScreen<ActivatableViewModelBase, WorkshopListParameters>, IWorkshopViewModel
|
public class ProfileListViewModel : RoutableScreen<ActivatableViewModelBase, WorkshopListParameters>, IWorkshopViewModel
|
||||||
{
|
{
|
||||||
private readonly IRouter _router;
|
private readonly IRouter _router;
|
||||||
|
private readonly INotificationService _notificationService;
|
||||||
private readonly IWorkshopClient _workshopClient;
|
private readonly IWorkshopClient _workshopClient;
|
||||||
private readonly ObservableAsPropertyHelper<bool> _showPagination;
|
private readonly ObservableAsPropertyHelper<bool> _showPagination;
|
||||||
|
private readonly ObservableAsPropertyHelper<bool> _isLoading;
|
||||||
private List<EntryListViewModel>? _entries;
|
private List<EntryListViewModel>? _entries;
|
||||||
private int _page;
|
private int _page;
|
||||||
|
private int _loadedPage = -1;
|
||||||
private int _totalPages = 1;
|
private int _totalPages = 1;
|
||||||
private int _entriesPerPage = 5;
|
private int _entriesPerPage = 10;
|
||||||
|
|
||||||
public ProfileListViewModel(IWorkshopClient workshopClient, IRouter router, CategoriesViewModel categoriesViewModel)
|
public ProfileListViewModel(IWorkshopClient workshopClient, IRouter router, CategoriesViewModel categoriesViewModel, INotificationService notificationService)
|
||||||
{
|
{
|
||||||
_workshopClient = workshopClient;
|
_workshopClient = workshopClient;
|
||||||
_router = router;
|
_router = router;
|
||||||
|
_notificationService = notificationService;
|
||||||
_showPagination = this.WhenAnyValue(vm => vm.TotalPages).Select(t => t > 1).ToProperty(this, vm => vm.ShowPagination);
|
_showPagination = this.WhenAnyValue(vm => vm.TotalPages).Select(t => t > 1).ToProperty(this, vm => vm.ShowPagination);
|
||||||
|
_isLoading = this.WhenAnyValue(vm => vm.Page, vm => vm.LoadedPage, (p, c) => p != c).ToProperty(this, vm => vm.IsLoading);
|
||||||
|
|
||||||
CategoriesViewModel = categoriesViewModel;
|
CategoriesViewModel = categoriesViewModel;
|
||||||
|
|
||||||
@ -49,6 +56,8 @@ public class ProfileListViewModel : RoutableScreen<ActivatableViewModelBase, Wor
|
|||||||
}
|
}
|
||||||
|
|
||||||
public bool ShowPagination => _showPagination.Value;
|
public bool ShowPagination => _showPagination.Value;
|
||||||
|
public bool IsLoading => _isLoading.Value;
|
||||||
|
|
||||||
public CategoriesViewModel CategoriesViewModel { get; }
|
public CategoriesViewModel CategoriesViewModel { get; }
|
||||||
|
|
||||||
public List<EntryListViewModel>? Entries
|
public List<EntryListViewModel>? Entries
|
||||||
@ -63,6 +72,12 @@ public class ProfileListViewModel : RoutableScreen<ActivatableViewModelBase, Wor
|
|||||||
set => RaiseAndSetIfChanged(ref _page, value);
|
set => RaiseAndSetIfChanged(ref _page, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public int LoadedPage
|
||||||
|
{
|
||||||
|
get => _loadedPage;
|
||||||
|
set => RaiseAndSetIfChanged(ref _loadedPage, value);
|
||||||
|
}
|
||||||
|
|
||||||
public int TotalPages
|
public int TotalPages
|
||||||
{
|
{
|
||||||
get => _totalPages;
|
get => _totalPages;
|
||||||
@ -88,15 +103,32 @@ public class ProfileListViewModel : RoutableScreen<ActivatableViewModelBase, Wor
|
|||||||
|
|
||||||
private async Task Query(CancellationToken cancellationToken)
|
private async Task Query(CancellationToken cancellationToken)
|
||||||
{
|
{
|
||||||
EntryFilterInput filter = GetFilter();
|
try
|
||||||
IOperationResult<IGetEntriesResult> entries = await _workshopClient.GetEntries.ExecuteAsync(filter, EntriesPerPage * (Page - 1), EntriesPerPage, cancellationToken);
|
|
||||||
if (!entries.IsErrorResult() && entries.Data?.Entries?.Items != null)
|
|
||||||
{
|
{
|
||||||
Entries = entries.Data.Entries.Items.Select(n => new EntryListViewModel(n, _router)).ToList();
|
EntryFilterInput filter = GetFilter();
|
||||||
TotalPages = (int) Math.Ceiling(entries.Data.Entries.TotalCount / (double) EntriesPerPage);
|
IOperationResult<IGetEntriesResult> entries = await _workshopClient.GetEntries.ExecuteAsync(filter, EntriesPerPage * (Page - 1), EntriesPerPage, cancellationToken);
|
||||||
|
entries.EnsureNoErrors();
|
||||||
|
|
||||||
|
if (entries.Data?.Entries?.Items != null)
|
||||||
|
{
|
||||||
|
Entries = entries.Data.Entries.Items.Select(n => new EntryListViewModel(n, _router)).ToList();
|
||||||
|
TotalPages = (int) Math.Ceiling(entries.Data.Entries.TotalCount / (double) EntriesPerPage);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
TotalPages = 1;
|
||||||
|
}
|
||||||
|
catch (Exception e)
|
||||||
|
{
|
||||||
|
_notificationService.CreateNotification()
|
||||||
|
.WithTitle("Failed to load entries")
|
||||||
|
.WithMessage(e.Message)
|
||||||
|
.WithSeverity(NotificationSeverity.Error)
|
||||||
|
.Show();
|
||||||
|
}
|
||||||
|
finally
|
||||||
|
{
|
||||||
|
LoadedPage = Page;
|
||||||
}
|
}
|
||||||
else
|
|
||||||
TotalPages = 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private EntryFilterInput GetFilter()
|
private EntryFilterInput GetFilter()
|
||||||
|
|||||||
@ -13,6 +13,7 @@
|
|||||||
<ResourceDictionary>
|
<ResourceDictionary>
|
||||||
<ResourceDictionary.MergedDictionaries>
|
<ResourceDictionary.MergedDictionaries>
|
||||||
<MergeResourceInclude Source="TreeView.axaml"></MergeResourceInclude>
|
<MergeResourceInclude Source="TreeView.axaml"></MergeResourceInclude>
|
||||||
|
<MergeResourceInclude Source="/Controls/AcrylicBlur/AcrylicBlur.axaml"></MergeResourceInclude>
|
||||||
</ResourceDictionary.MergedDictionaries>
|
</ResourceDictionary.MergedDictionaries>
|
||||||
</ResourceDictionary>
|
</ResourceDictionary>
|
||||||
</Styles.Resources>
|
</Styles.Resources>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user