Rework ServerSelector app UI (#27)

* Rework ServerSelector app UI

* fix border on linux

---------

Co-authored-by: Mikhail Tyukin <mishakeys20@gmail.com>
This commit is contained in:
GreenXeMotion
2025-04-07 03:56:44 +06:00
committed by GitHub
parent 3769b8ef58
commit fb274baebf
5 changed files with 331 additions and 15 deletions

View File

@@ -1,11 +1,25 @@
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sty="using:FluentAvalonia.Styling"
xmlns:sty="using:FluentAvalonia.Styling"
x:Class="ServerSelector.App"
RequestedThemeVariant="Default">
RequestedThemeVariant="Dark">
<!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
<Application.Styles>
<sty:FluentAvaloniaTheme />
<sty:FluentAvaloniaTheme />
<Style Selector="Button">
<Setter Property="Transitions">
<Transitions>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2"/>
</Transitions>
</Setter>
</Style>
<Style Selector="Button:pointerover">
<Setter Property="RenderTransform" Value="scale(1.05)"/>
<Setter Property="Opacity" Value="0.9"/>
</Style>
<Style Selector="Button:pressed">
<Setter Property="RenderTransform" Value="scale(0.95)"/>
</Style>
</Application.Styles>
</Application>

View File

@@ -7,6 +7,88 @@
x:Class="ServerSelector.Views.MainView"
xmlns:ui="using:FluentAvalonia.UI.Controls"
>
<UserControl.Styles>
<!-- Modern Utility Button Style -->
<Style Selector="Button.utility">
<Setter Property="Width" Value="32"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="#3E3E42"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontWeight" Value="DemiBold"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Content" Value="•••"/>
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<DoubleTransition Property="Opacity" Duration="0:0:0.2"/>
</Transitions>
</Setter>
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ContentPresenter Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Button.utility:pointerover">
<Setter Property="Background" Value="#4b4b4e"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="RenderTransform" Value="translateY(-1px)"/>
<Setter Property="Opacity" Value="0.9"/>
</Style>
<Style Selector="Button.utility:pressed">
<Setter Property="Background" Value="#505054"/>
<Setter Property="RenderTransform" Value="translateY(1px)"/>
<Setter Property="Opacity" Value="0.8"/>
</Style>
<!-- Modern Save Button Style -->
<Style Selector="Button.save-button">
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="38"/>
<Setter Property="Background" Value="#3CB371"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="16,8"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<DoubleTransition Property="Opacity" Duration="0:0:0.2"/>
</Transitions>
</Setter>
</Style>
<Style Selector="Button.save-button:pointerover">
<Setter Property="Background" Value="#45C67D"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Opacity" Value="0.95"/>
</Style>
<Style Selector="Button.save-button:pressed">
<Setter Property="Background" Value="#318F5A"/>
<Setter Property="Opacity" Value="0.9"/>
<Setter Property="RenderTransform" Value="scale(0.98)"/>
</Style>
</UserControl.Styles>
<Grid>
<TabControl x:Name="MainUI">
<TabItem Header="PC" x:Name="TabPc">
@@ -34,7 +116,7 @@
<TextBlock VerticalAlignment="Center" Margin="5" Grid.Row="0" Grid.Column="0">Game path: </TextBlock>
<TextBox x:Name="txtGamePath" Grid.Row="0" Grid.Column="1" TextChanged="GamePath_TextChanged" ToolTip.Tip="The folder with the game and launcher folders.">C:\NIKKE\</TextBox>
<Button x:Name="btnSelectGamePath" Grid.Row="0" Grid.Column="2" Content="..." Click="BtnSelectGamePath_Click"></Button>
<Button x:Name="btnSelectGamePath" Grid.Row="0" Grid.Column="2" Classes="utility" Click="BtnSelectGamePath_Click">...</Button>
<TextBlock VerticalAlignment="Center" Margin="5" Grid.Row="4" Grid.Column="0">Server: </TextBlock>
@@ -51,7 +133,15 @@
<CheckBox x:Name="ChkOffline" VerticalAlignment="Center" Margin="5" Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="3" ToolTip.Tip="Enables the ability to run the game offline by making the game download the assets from the server, and not the official server. This only works if enableOffline is enabled on the server. Please note that this should not be enabled on public servers due to copyright issues, as assets are downloaded through said server. This is required if you want to use an older version of the game.">Enable offline mode</CheckBox>
<TextBlock Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="WrapWithOverflow" VerticalAlignment="Center" Margin="5" x:Name="LblStatus" ToolTip.Tip="Shows the status of the patches to the game. All patches are reverted when server is set to official.">Status: OK</TextBlock>
<Button HorizontalAlignment="Right" Margin="5" Click="Save_Click" Grid.Row="10" Grid.Column="1" Grid.ColumnSpan="2" Classes="accent">Save</Button>
<Button HorizontalAlignment="Right"
Margin="5"
Click="Save_Click"
Grid.Row="10"
Grid.Column="1"
Grid.ColumnSpan="2"
Classes="save-button">
Save Changes
</Button>
</Grid>
</TabItem>
<TabItem Header="Android">
@@ -70,16 +160,12 @@
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="5">APK path: </TextBlock>
<TextBox x:Name="txtApkPath" Grid.Row="0" Grid.Column="1"></TextBox>
<Button x:Name="btnSelectApkPath" Grid.Row="0" Grid.Column="2" Content="..."></Button>
<Button x:Name="btnSelectApkPath" Grid.Row="0" Grid.Column="2" Classes="utility">...</Button>
<TextBlock VerticalAlignment="Center" Grid.Row="2" Grid.Column="0" Margin="5">IP: </TextBlock>

View File

@@ -5,7 +5,6 @@ using FluentAvalonia.UI.Controls;
using System;
using System.IO;
using System.Net;
using System.Runtime.InteropServices;
using System.Security.Principal;
namespace ServerSelector.Views;
@@ -108,7 +107,7 @@ public partial class MainView : UserControl
return;
SetLoadingScreenVisible(true);
LblStatus.Text = "Status: " + await ServerSwitcher.CheckIntegrity(GamePath, LauncherPath) + ", for game version " + ServerSwitcher.PatchGameVersion;
LblStatus.Text = "Status: " + await ServerSwitcher.CheckIntegrity(GamePath, LauncherPath);
SetLoadingScreenVisible(false);
}
@@ -211,6 +210,11 @@ public partial class MainView : UserControl
}
}
private void BtnSelectApkPath_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
// To be implemented
}
private void GamePath_TextChanged(object? sender, TextChangedEventArgs e)
{
UpdateIntegrityLabel();

View File

@@ -4,8 +4,200 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:ServerSelector.Views"
mc:Ignorable="d" d:DesignWidth="370" d:DesignHeight="300"
xmlns:ui="using:FluentAvalonia.UI.Controls"
mc:Ignorable="d" d:DesignWidth="380" d:DesignHeight="300"
x:Class="ServerSelector.Views.MainWindow"
Title="Server Switcher" Width="370" Height="300" CanResize="True">
<views:MainView />
Width="380" Height="360"
WindowStartupLocation="CenterScreen"
TransparencyLevelHint="AcrylicBlur"
Background="Transparent"
ExtendClientAreaToDecorationsHint="True"
ExtendClientAreaChromeHints="NoChrome"
ExtendClientAreaTitleBarHeightHint="-1"
SystemDecorations="BorderOnly">
<Window.Styles>
<!-- Global Button Style -->
<Style Selector="Button">
<Setter Property="Background" Value="#2D2D30"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,8"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="RenderTransform" Value="none"/>
</Style>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#3E3E42"/>
<Setter Property="RenderTransform" Value="scale(1.02)"/>
</Style>
<Style Selector="Button:pressed">
<Setter Property="RenderTransform" Value="scale(0.98)"/>
</Style>
<!-- Primary Button Style -->
<Style Selector="Button.primary">
<Setter Property="Background" Value="#007ACC"/>
</Style>
<Style Selector="Button.primary:pointerover">
<Setter Property="Background" Value="#1C97EA"/>
</Style>
<!-- Secondary Button Style -->
<Style Selector="Button.secondary">
<Setter Property="Background" Value="#3E3E42"/>
</Style>
<Style Selector="Button.secondary:pointerover">
<Setter Property="Background" Value="#505054"/>
</Style>
<!-- Danger Button Style -->
<Style Selector="Button.danger">
<Setter Property="Background" Value="#E51400"/>
</Style>
<Style Selector="Button.danger:pointerover">
<Setter Property="Background" Value="#FF2D1A"/>
</Style>
</Window.Styles>
<Panel>
<!-- Gradient Background -->
<Panel>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
<GradientStop Offset="0" Color="#15171E"/>
<GradientStop Offset="1" Color="#1A1C23"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Panel>
<!-- Enhanced Acrylic Effect -->
<ExperimentalAcrylicBorder IsHitTestVisible="False">
<ExperimentalAcrylicBorder.Material>
<ExperimentalAcrylicMaterial
BackgroundSource="Digger"
TintColor="#151515"
TintOpacity="0.3"
MaterialOpacity="0.2"
FallbackColor="#151515"/>
</ExperimentalAcrylicBorder.Material>
</ExperimentalAcrylicBorder>
<!-- Additional Overlay for Depth -->
<Border IsHitTestVisible="False">
<Border.Background>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Offset="0" Color="#15000000"/>
<GradientStop Offset="1" Color="#45000000"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Grid RowDefinitions="Auto,Auto,*" Margin="20">
<!-- Header with Window Controls -->
<Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Height="40">
<!-- Draggable Title Area -->
<Grid Grid.Column="0" Grid.ColumnSpan="2"
Background="Transparent"
PointerPressed="WindowPointerPressed">
<TextBlock Text="SERVER SWITCHER"
FontSize="14"
FontWeight="SemiBold"
Foreground="White"
VerticalAlignment="Center"
Margin="5,0,0,0"/>
</Grid>
<!-- Window Controls -->
<StackPanel Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right"
Spacing="0">
<!-- Minimize Button -->
<Button Click="MinimizeButton_Click"
Width="40" Height="30"
Padding="0"
Margin="0"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
CornerRadius="0">
<Button.Styles>
<Style Selector="Button">
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#25FFFFFF"/>
<Setter Property="Cursor" Value="Hand"/>
</Style>
<Style Selector="Button:pressed">
<Setter Property="Background" Value="#15FFFFFF"/>
</Style>
</Button.Styles>
<TextBlock Text="─"
FontSize="14"
FontWeight="Bold"/>
</Button>
<!-- Close Button -->
<Button Click="CloseButton_Click"
Width="40" Height="30"
Padding="0"
Margin="1,0,1,0"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
Background="#DC143C"
BorderThickness="0"
CornerRadius="4">
<Button.Styles>
<Style Selector="Button">
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ContentPresenter Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter>
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" Easing="CubicEaseOut"/>
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#E32636"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="RenderTransform" Value="translateY(-1px)"/>
</Style>
<Style Selector="Button:pressed">
<Setter Property="Background" Value="#B22222"/>
<Setter Property="RenderTransform" Value="translateY(1px)"/>
</Style>
</Button.Styles>
<TextBlock Text="×"
FontSize="20"
FontWeight="Bold"
VerticalAlignment="Center"/>
</Button>
</StackPanel>
</Grid>
<!-- Main Content -->
<views:MainView Grid.Row="2" Margin="5"/>
</Grid>
</Panel>
</Window>

View File

@@ -1,4 +1,6 @@
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
namespace ServerSelector.Views;
@@ -8,4 +10,22 @@ public partial class MainWindow : Window
{
InitializeComponent();
}
private void WindowPointerPressed(object? sender, PointerPressedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
{
BeginMoveDrag(e);
}
}
private void MinimizeButton_Click(object sender, RoutedEventArgs e)
{
WindowState = WindowState.Minimized;
}
private void CloseButton_Click(object sender, RoutedEventArgs e)
{
Close();
}
}