Skip to content

Commit

Permalink
Merge pull request #2376 from Nexus-Mods/feat/mygames-design-tweaks
Browse files Browse the repository at this point in the history 
My Games design change
  • Loading branch information
@insomnious
insomnious authored Dec 17, 2024
2 parents e36e0fb + ee422b4 commit 201e01c
Show file tree
Hide file tree
Showing 14 changed files with 1,692 additions and 812 deletions.
53 changes: 53 additions & 0 deletions src/NexusMods.App.UI/Assets/Pictograms/game-3d.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 38 additions & 1 deletion src/NexusMods.App.UI/Controls/EmptyState.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Primitives;
using Avalonia.Metadata;
Expand All @@ -9,6 +10,9 @@ namespace NexusMods.App.UI.Controls;
[PseudoClasses(":active", ":icon")]
public class EmptyState : TemplatedControl
{
private TextBlock? _header;
private UnifiedIcon? _icon;

public static readonly StyledProperty<bool> IsActiveProperty = AvaloniaProperty.Register<EmptyState, bool>(nameof(IsActive));

public static readonly StyledProperty<IconValue?> IconProperty = AvaloniaProperty.Register<EmptyState, IconValue?>(nameof(Icon));
Expand Down Expand Up @@ -60,16 +64,49 @@ protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs chang
{
PseudoClasses.Add(":active");
}
} else if (change.Property == IconProperty)
}
else if (change.Property == IconProperty)
{
PseudoClasses.Remove(":icon");

if (change.NewValue is IconValue)
{
PseudoClasses.Add(":icon");
}

UpdateIconVisibility();
}
else if (change.Property == HeaderProperty)
{
UpdateHeaderVisibility();
}

base.OnPropertyChanged(change);
}

protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
{
_header = e.NameScope.Find<TextBlock>("HeaderTextBlock");
_icon = e.NameScope.Find<UnifiedIcon>("Icon");

if (_header is not null)
UpdateHeaderVisibility();

if (_icon is not null)
UpdateIconVisibility();

base.OnApplyTemplate(e);
}

private void UpdateHeaderVisibility()
{
if (_header is not null)
_header.IsVisible = !string.IsNullOrEmpty(Header);
}

private void UpdateIconVisibility()
{
if (_icon is not null)
_icon.IsVisible = Icon is not null;
}
}
2 changes: 1 addition & 1 deletion src/NexusMods.App.UI/Controls/GameWidget/GameWidget.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
Text="{x:Static resources:Language.GameWidget__Add_game}"
LeftIcon="{x:Static icons:IconValues.Add}"
ShowIcon="Left"
Type="Secondary"
Type="Primary"
Fill="Strong" />
</StackPanel>

Expand Down
21 changes: 10 additions & 11 deletions src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
xmlns:resources="clr-namespace:NexusMods.App.UI.Resources"
xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
xmlns:controls="clr-namespace:NexusMods.App.UI.Controls"
xmlns:navigation="clr-namespace:NexusMods.App.UI.Controls.Navigation"
mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="450"
x:Class="NexusMods.App.UI.Pages.LibraryPage.LibraryView">

Expand Down Expand Up @@ -79,18 +80,16 @@
</Border>

<!-- Empty State -->
<controls:EmptyState x:Name="EmptyState" Grid.Row="1" Header="{x:Static resources:Language.EmptyLibraryTitleText}">
<controls:EmptyState x:Name="EmptyState" Grid.Row="1"
Header="{x:Static resources:Language.EmptyLibraryTitleText}">
<controls:EmptyState.Subtitle>
<StackPanel>
<Button Classes="Hyperlink Secondary"
x:Name="EmptyLibraryLinkButton">
<TextBlock Classes="BodyLGNormal ForegroundSubdued"
x:Name="EmptyLibrarySubtitleTextBlock" />
</Button>
<Button Classes="BareIcon OpenInNew ForegroundSubdued"
Height="18"
Width="18"
x:Name="OpenLinkBareIconButton" />
<StackPanel Orientation="Vertical" Spacing="16">
<TextBlock x:Name="EmptyLibraryTextBlock" Text="Subtitle"/>
<controls:StandardButton x:Name="EmptyLibraryLinkButton"
Text="Open Nexus Mods"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.Nexus}"
HorizontalAlignment="Center"/>
</StackPanel>
</controls:EmptyState.Subtitle>

Expand Down
7 changes: 2 additions & 5 deletions src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,11 @@ public LibraryView()
this.OneWayBind(ViewModel, vm => vm.Adapter.IsSourceEmpty.Value, view => view.EmptyState.IsActive)
.AddTo(disposables);

this.OneWayBind(ViewModel, vm => vm.EmptyLibrarySubtitleText, view => view.EmptyLibrarySubtitleTextBlock.Text)
this.OneWayBind(ViewModel, vm => vm.EmptyLibrarySubtitleText, view => view.EmptyLibraryTextBlock.Text)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.OpenNexusModsCommand, view => view.EmptyLibraryLinkButton)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.OpenNexusModsCommand, view => view.OpenLinkBareIconButton)
.AddTo(disposables);
});
}
}
9 changes: 6 additions & 3 deletions src/NexusMods.App.UI/Pages/LoadoutPage/LoadoutView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,17 @@
</Border>


<controls:EmptyState Grid.Row="1" x:Name="EmptyState">
<controls:EmptyState x:Name="EmptyState" Grid.Row="1"
Header="Header">

<controls:EmptyState.Subtitle>
<StackPanel>
<StackPanel Orientation="Vertical" Spacing="16">
<TextBlock Text="{x:Static resources:Language.LoadoutGrid_EmptyModlistSubtitle_Add_from_library}" />
<navigation:NavigationControl x:Name="ViewLibraryButton"
Text="Library"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.ModLibrary}"/>
LeftIcon="{x:Static icons:IconValues.ModLibrary}"
HorizontalAlignment="Center"/>
</StackPanel>
</controls:EmptyState.Subtitle>

Expand Down
131 changes: 83 additions & 48 deletions src/NexusMods.App.UI/Pages/MyGames/MyGamesView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,68 +16,103 @@
xmlns:controls="clr-namespace:NexusMods.App.UI.Controls"
xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels">

<Design.DataContext>
<myGames:MyGamesDesignViewModel />
</Design.DataContext>

<ScrollViewer>
<StackPanel Margin="24"
Orientation="Vertical"
Spacing="24">

<Border x:Name="AddGamesToGetStarted"
Padding="24"
BorderThickness="1"
Padding="0"
BorderThickness="0"
BorderBrush="{StaticResource StrokeTranslucentWeakBrush}"
CornerRadius="8">

<StackPanel Spacing="24">
<TextBlock Text="Add games to get started"
Theme="{StaticResource HeadingXSSemiTheme}"
Foreground="{StaticResource NeutralStrongBrush}" />
<TextBlock x:Name="NoGamesDetectedText"
Text="No games detected"
Theme="{StaticResource BodyMDNormalTheme}"
Foreground="{StaticResource NeutralSubduedBrush}" />
<ItemsControl
x:Name="DetectedGamesItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<panels:FlexPanel
RowSpacing="24"
ColumnSpacing="24"
Wrap="Wrap" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="gameWidget:IGameWidgetViewModel">
<reactiveUi:ViewModelViewHost
ViewModel="{CompiledBinding .}"
Width="184"
Height="293" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<StackPanel Spacing="8">

<StackPanel Orientation="Horizontal" Spacing="8">
<Border Width="48" Height="48">
<icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramGame3D}" />
</Border>
<TextBlock Text="My Games"
Theme="{StaticResource HeadingSMSemiTheme}"
Foreground="{StaticResource NeutralStrongBrush}"
VerticalAlignment="Center" />
</StackPanel>

<controls:EmptyState x:Name="DetectedGamesEmptyState"
Margin="0"
HorizontalAlignment="Left">

<controls:EmptyState.Styles>
<Style Selector="Border#EmptyStateBorder">
<Setter Property="Margin" Value="0" />
</Style>
</controls:EmptyState.Styles>

<controls:EmptyState.Subtitle>
<TextBlock Text="No games detected"
Theme="{StaticResource BodyMDNormalTheme}"
Foreground="{StaticResource NeutralSubduedBrush}"
TextAlignment="Left"/>
</controls:EmptyState.Subtitle>

<StackPanel Spacing="24">
<TextBlock Text="Add games to get started"
Theme="{StaticResource BodyMDNormalTheme}"
Foreground="{StaticResource NeutralStrongBrush}" />
<ItemsControl
x:Name="DetectedGamesItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<panels:FlexPanel
RowSpacing="24"
ColumnSpacing="24"
Wrap="Wrap" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="gameWidget:IGameWidgetViewModel">
<reactiveUi:ViewModelViewHost
ViewModel="{CompiledBinding .}"
Width="184"
Height="293" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>

</controls:EmptyState>

</StackPanel>
</Border>

<Separator
Background="{StaticResource StrokeTranslucentWeakBrush}"
Margin="0" />

<Border x:Name="AllCurrentlySupportedGames"
Padding="24"
BorderThickness="1"
Padding="0"
BorderThickness="0"
BorderBrush="{StaticResource StrokeTranslucentWeakBrush}"
CornerRadius="8">

<StackPanel Spacing="24">

<TextBlock Text="All currently supported games"
Theme="{StaticResource HeadingXSSemiTheme}"
Foreground="{StaticResource NeutralStrongBrush}" />

<ItemsControl x:Name="SupportedGamesItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<panels:FlexPanel
<panels:FlexPanel
Wrap="Wrap"
RowSpacing="12"
RowSpacing="12"
ColumnSpacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Expand All @@ -90,17 +125,17 @@
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

<controls:StandardButton x:Name="OpenRoadmapButton"
Text="More games coming soon"
Fill="None"
Type="Secondary"
Size="Small"
ShowIcon="Right"
RightIcon="{x:Static icons:IconValues.OpenInNew}"
Margin="0, 0, 0, 0" />
<Separator
Text="More games coming soon"
Fill="Weak"
Type="Tertiary"
Size="Small"
ShowIcon="None"
RightIcon="{x:Static icons:IconValues.OpenInNew}"
Margin="0, 0, 0, 0" />

<Separator
Background="{StaticResource StrokeTranslucentWeakBrush}"
Margin="0" />

Expand All @@ -111,9 +146,9 @@
Foreground="{StaticResource NeutralSubduedBrush}"
TextWrapping="Wrap" />
<controls:StandardButton x:Name="GiveFeedbackButton"
Text="Report supported game not found"
Fill="None"
Type="Secondary"
Text="Report game not found"
Fill="Weak"
Type="Tertiary"
Size="Small"
Margin="0, 0, 0, 0" />
</StackPanel>
Expand Down
Loading

0 comments on commit 201e01c

Please sign in to comment.