feat: update about page

This commit is contained in:
estrogen elf
2025-05-29 23:07:39 -05:00
parent ef16642c04
commit 826134888e
5 changed files with 200 additions and 156 deletions

View File

@@ -15,6 +15,7 @@
<sty:FluentAvaloniaTheme PreferSystemTheme="False" PreferUserAccentColor="False" /> <sty:FluentAvaloniaTheme PreferSystemTheme="False" PreferUserAccentColor="False" />
<materialIcons:MaterialIconStyles /> <materialIcons:MaterialIconStyles />
<StyleInclude Source="Controls/Card.axaml"/> <StyleInclude Source="Controls/Card.axaml"/>
<StyleInclude Source="Controls/UserCard.axaml"/>
<StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" /> <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/> <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
</Application.Styles> </Application.Styles>

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,71 @@
<Styles 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:i="https://github.com/projektanker/icons.avalonia"
xmlns:controls="using:Needlework.Net.Controls">
<Design.PreviewWith>
<WrapPanel>
<controls:UserCard
Width="300"
Height="400"
UserImage="/Assets/Users/blossomishymae.png"
UserName="estrogen elf"
UserGithub="BlossomiShymae">
Needlework.Net is the .NET rewrite of Needlework. This tool was made to help others with LCU and Game Client development. Feel free to ask any questions
or help contribute to the project! Made with love. 💜
</controls:UserCard>
</WrapPanel>
</Design.PreviewWith>
<Style Selector="controls|UserCard">
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border CornerRadius="16,16,16,16"
Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
Margin="0 50 0 0"
Padding="16 66 16 16">
<Grid RowDefinitions="auto,auto,auto"
ColumnDefinitions="*">
<TextBlock Grid.Row="0"
Grid.Column="0"
Theme="{StaticResource SubtitleTextBlockStyle}"
Margin="0 0 0 4"
Text="{TemplateBinding UserName}"/>
<Grid Grid.Row="1"
Grid.Column="0"
RowDefinitions="*"
ColumnDefinitions="auto,auto"
Margin="0 0 0 16">
<Button Grid.Row="0"
Grid.Column="0"
Theme="{StaticResource TransparentButton}"
FontSize="20"
Name="PART_GithubButton">
<i:Icon Value="fa-github"/>
</Button>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="8 0 0 0"
VerticalAlignment="Center"
Text="{TemplateBinding UserGithub}"/>
</Grid>
<TextBlock Grid.Row="2"
Grid.Column="0"
TextWrapping="WrapWithOverflow"
Text="{TemplateBinding Content}"/>
</Grid>
</Border>
<Border CornerRadius="100"
Width="100"
Height="100"
Margin="{TemplateBinding UserImageMargin}"
ClipToBounds="True">
<Image Source="{TemplateBinding UserImage}"
RenderOptions.BitmapInterpolationMode="HighQuality"/>
</Border>
</Grid>
</ControlTemplate>
</Setter>
</Style>
</Styles>

View File

@@ -0,0 +1,91 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Interactivity;
using Avalonia.Media;
using System.Diagnostics;
namespace Needlework.Net.Controls;
[TemplatePart("PART_GithubButton", typeof(Button))]
public partial class UserCard : ContentControl
{
private Button? _githubButton;
public UserCard()
{
UserImageMargin = new(0, !double.IsNaN(Height) ? 100 - Height : 0, 0, 0);
}
public static readonly StyledProperty<IImage?> UserImageProperty =
AvaloniaProperty.Register<UserCard, IImage?>(nameof(UserImage), defaultValue: null);
public IImage? UserImage
{
get { return GetValue(UserImageProperty); }
set { SetValue(UserImageProperty, value); }
}
public static readonly StyledProperty<string?> UserNameProperty =
AvaloniaProperty.Register<UserCard, string?>(nameof(UserName), defaultValue: null);
public string? UserName
{
get { return GetValue(UserNameProperty); }
set { SetValue(UserNameProperty, value); }
}
public static readonly StyledProperty<string?> UserGithubProperty =
AvaloniaProperty.Register<UserCard, string?>(nameof(UserGithub), defaultValue: null);
public string? UserGithub
{
get { return GetValue(UserGithubProperty); }
set { SetValue(UserGithubProperty, value); }
}
public static readonly DirectProperty<UserCard, Thickness> UserImageMarginProperty =
AvaloniaProperty.RegisterDirect<UserCard, Thickness>(nameof(UserImageMargin), o => o.UserImageMargin);
private Thickness _userImageMargin = new(0, 0, 0, 0);
public Thickness UserImageMargin
{
get { return _userImageMargin; }
private set { SetAndRaise(UserImageMarginProperty, ref _userImageMargin, value); }
}
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
base.OnApplyTemplate(e);
SizeChanged += UserCard_SizeChanged;
if (_githubButton != null)
{
_githubButton.Click -= GithubButton_Click;
}
_githubButton = e.NameScope.Find("PART_GithubButton") as Button;
if (_githubButton != null)
{
_githubButton.Click += GithubButton_Click;
}
}
private void UserCard_SizeChanged(object? sender, SizeChangedEventArgs e)
{
UserImageMargin = new(0, !double.IsNaN(e.NewSize.Height) ? 100 - e.NewSize.Height : 0, 0, 0);
}
private void GithubButton_Click(object? sender, RoutedEventArgs e)
{
var process = new Process()
{
StartInfo = new ProcessStartInfo($"https://github.com/{UserGithub}") { UseShellExecute = true }
};
process.Start();
}
}

View File

@@ -8,160 +8,41 @@
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Needlework.Net.Views.Pages.AboutView" x:Class="Needlework.Net.Views.Pages.AboutView"
x:DataType="vm:AboutViewModel"> x:DataType="vm:AboutViewModel">
<UserControl.Styles> <ScrollViewer Margin="8">
<Style Selector="Button"> <WrapPanel HorizontalAlignment="Center">
<Setter Property="Theme" Value="{StaticResource TransparentButton}"/> <WrapPanel.Styles>
<Setter Property="Command" Value="{Binding OpenUrlCommand}"/> <Style Selector="controls|UserCard">
<Setter Property="Width" Value="272"/>
<Setter Property="MaxHeight" Value="378"/>
<Setter Property="Margin" Value="0 16 32 16"/>
</Style> </Style>
<Style Selector="i|Icon"> </WrapPanel.Styles>
<Setter Property="FontSize" Value="20" /> <controls:UserCard UserImage="/Assets/Users/blossomishymae.png"
</Style> UserName="estrogen elf"
</UserControl.Styles> UserGithub="BlossomiShymae">
<Grid Margin="8" Needlework.Net is the .NET rewrite of Needlework. This tool was made to help others with LCU and Game Client development. Feel free to ask any questions
VerticalAlignment="Center"
HorizontalAlignment="Center">
<StackPanel Spacing="8">
<Grid HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<controls:Card Margin="8">
<Image Source="/Assets/Users/blossomishymae.png"
RenderOptions.BitmapInterpolationMode="MediumQuality"
Width="200"
Height="200"/>
</controls:Card>
<StackPanel Margin="8 0 0 0">
<controls:Card Width="400" Margin="8">
<StackPanel Orientation="Horizontal">
<TextBlock Theme="{StaticResource TitleTextBlockStyle}"
Margin="0 0 8 0">Blossomi Shymae</TextBlock>
<Button CommandParameter="https://github.com/BlossomiShymae">
<i:Icon Value="fa-github"/>
</Button>
</StackPanel>
</controls:Card>
<controls:Card Width="400" Margin="8">
<StackPanel >
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}">About</TextBlock>
<TextBlock TextWrapping="Wrap">
Needlework.Net is the .NET rewrite of Needlework. This tool was made to help others with LCU development. Feel free to ask any questions
or help contribute to the project! Made with love. 💜 or help contribute to the project! Made with love. 💜
</TextBlock> </controls:UserCard>
</StackPanel> <controls:UserCard UserImage="/Assets/Users/dysolix.png"
</controls:Card> UserName="dysolix"
</StackPanel> UserGithub="dysolix">
</StackPanel> For providing LCU Schema, the auto-generated OpenAPI document for the LCU.
</Grid> </controls:UserCard>
<Border Width="800"> <controls:UserCard UserImage="/Assets/Users/sylv.jpg"
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}">Thanks to the friends and people who made this tool possible...</TextBlock> UserName="Sylv"
</Border> UserGithub="AlsoSylv">
<WrapPanel Orientation="Horizontal"> For providing a fixed up-to-date Game Client schema.
<StackPanel Orientation="Horizontal" </controls:UserCard>
Margin="8"> <controls:UserCard UserImage="/Assets/Users/ray.png"
<controls:Card> UserName="Ray"
<Image Source="/Assets/Users/dysolix.png" UserGithub="Hi-Ray">
RenderOptions.BitmapInterpolationMode="MediumQuality" For guidance, advice, and providing help via HextechDocs.
Width="100" </controls:UserCard>
Height="100"/> <controls:UserCard UserImage="/Assets/Users/dubble.png"
</controls:Card> UserName="dubble"
<StackPanel Margin="2 0 0 0"> UserGithub="cuppachino">
<controls:Card Width="250" Margin="2"> For encouraging me to publish Needlework.Net and other ideas.
<StackPanel Orientation="Horizontal"> </controls:UserCard>
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}"
Margin="0 0 8 0">dysolix</TextBlock>
<Button CommandParameter="https://github.com/dysolix">
<i:Icon Value="fa-github"/>
</Button>
</StackPanel>
</controls:Card>
<controls:Card Width="250" Margin="2">
<StackPanel >
<TextBlock TextWrapping="Wrap">
For providing and hosting an auto-generated OpenAPI document of the LCU.
</TextBlock>
</StackPanel>
</controls:Card>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="8">
<controls:Card>
<Image Source="/Assets/Users/ray.png"
RenderOptions.BitmapInterpolationMode="MediumQuality"
Width="100"
Height="100"/>
</controls:Card>
<StackPanel Margin="2 0 0 0">
<controls:Card Width="250" Margin="2">
<StackPanel Orientation="Horizontal">
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}"
Margin="0 0 8 0">Ray</TextBlock>
<Button CommandParameter="https://github.com/Hi-Ray">
<i:Icon Value="fa-github"/>
</Button>
</StackPanel>
</controls:Card>
<controls:Card Width="250" Margin="2">
<StackPanel >
<TextBlock TextWrapping="Wrap">
For guidance, advice, or providing help via HextechDocs.
</TextBlock>
</StackPanel>
</controls:Card>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="8">
<controls:Card>
<Image Source="/Assets/Users/dubble.png"
RenderOptions.BitmapInterpolationMode="MediumQuality"
Width="100"
Height="100"/>
</controls:Card>
<StackPanel Margin="4 0 0 0">
<controls:Card Width="250" Margin="2">
<StackPanel Orientation="Horizontal">
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}"
Margin="0 0 8 0">dubble</TextBlock>
<Button CommandParameter="https://github.com/cuppachino">
<i:Icon Value="fa-github"/>
</Button>
</StackPanel>
</controls:Card>
<controls:Card Width="250" Margin="2">
<StackPanel >
<TextBlock TextWrapping="Wrap">
For encouraging me to publish Needlework. This project may never have seen the light of day without him.
</TextBlock>
</StackPanel>
</controls:Card>
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal"
Margin="8">
<controls:Card>
<Image Source="/Assets/Users/community.png"
RenderOptions.BitmapInterpolationMode="MediumQuality"
Width="100"
Height="100"/>
</controls:Card>
<StackPanel Margin="4 0 0 0">
<controls:Card Width="250" Margin="2">
<StackPanel Orientation="Horizontal">
<TextBlock Theme="{StaticResource SubtitleTextBlockStyle}"
Width="250"
TextWrapping="Wrap">Third Party Developer Community</TextBlock>
</StackPanel>
</controls:Card>
<controls:Card Width="250" Margin="2">
<StackPanel >
<TextBlock TextWrapping="Wrap">
For providing numerous documentation on the LCU.
</TextBlock>
</StackPanel>
</controls:Card>
</StackPanel>
</StackPanel>
</WrapPanel> </WrapPanel>
</StackPanel> </ScrollViewer>
</Grid>
</UserControl> </UserControl>