Skip to content

Commit 44a50b4

Browse files
Al12rsAl12rs
committed
Add LoaodutCardVM interface and Design VM
1 parent fb94c08 commit 44a50b4

File tree

6 files changed

+176
-14
lines changed

6 files changed

+176
-14
lines changed

‎src/NexusMods.App.UI/Controls/LoadoutCard/ILoadoutCardViewModel.cs

+25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,31 @@
1+
using System.Reactive;
2+
using Avalonia.Media;
3+
using NexusMods.App.UI.Controls.LoadoutBadge;
4+
using ReactiveUI;
5+
16
namespace NexusMods.App.UI.Controls.LoadoutCard;
27

38
public interface ILoadoutCardViewModel : IViewModelInterface
49
{
10+
ILoadoutBadgeViewModel LoadoutBadgeViewModel { get; }
11+
12+
string LoadoutName { get; }
13+
14+
IImage LoadoutImage { get; }
15+
16+
bool IsLoadoutApplied { get; }
17+
18+
string HumanizedLoadoutLastApplyTime { get; }
19+
20+
string HumanizedLoadoutCreationTime { get; }
21+
22+
string LoadoutModCount { get; }
23+
24+
bool IsDeleting { get; }
25+
26+
ReactiveCommand<Unit, Unit> VisitLoadoutCommand { get; }
27+
28+
ReactiveCommand<Unit, Unit> CloneLoadoutCommand { get; }
529

30+
ReactiveCommand<Unit, Unit> DeleteLoadoutCommand { get; }
631
}

‎src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardDesignViewModel.cs

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
using System.Reactive;
2+
using System.Reactive.Disposables;
3+
using System.Reactive.Linq;
4+
using Avalonia.Media;
5+
using Avalonia.Media.Imaging;
6+
using Avalonia.Platform;
7+
using NexusMods.App.UI.Controls.LoadoutBadge;
8+
using ReactiveUI;
9+
using ReactiveUI.Fody.Helpers;
10+
11+
namespace NexusMods.App.UI.Controls.LoadoutCard;
12+
13+
public class LoadoutCardDesignViewModel : AViewModel<ILoadoutCardViewModel>, ILoadoutCardViewModel
14+
{
15+
public LoadoutCardDesignViewModel()
16+
{
17+
this.WhenActivated(d =>
18+
{
19+
// Cycle thorough all the states for preview purposes
20+
Observable.Interval(TimeSpan.FromSeconds(2.5))
21+
.Subscribe(_ =>
22+
{
23+
IsDeleting = !IsDeleting;
24+
})
25+
.DisposeWith(d);
26+
}
27+
);
28+
}
29+
30+
public ILoadoutBadgeViewModel LoadoutBadgeViewModel { get; } = new LoadoutBadgeDesignViewModel();
31+
public string LoadoutName { get; } = "Loadout B";
32+
public IImage LoadoutImage { get; } = new Bitmap(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png")));
33+
34+
public bool IsLoadoutApplied { get; } = true;
35+
public string HumanizedLoadoutLastApplyTime { get; } = "Last applied 2 months ago";
36+
public string HumanizedLoadoutCreationTime { get; } = "Created 10 months ago";
37+
public string LoadoutModCount { get; } = "Mods 276";
38+
[Reactive] public bool IsDeleting { get; private set; } = true;
39+
public ReactiveCommand<Unit, Unit> VisitLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
40+
public ReactiveCommand<Unit, Unit> CloneLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
41+
public ReactiveCommand<Unit, Unit> DeleteLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
42+
}

‎src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml

+11-12
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
xmlns:spinner="clr-namespace:NexusMods.App.UI.Controls.Spinner"
1111
mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="400"
1212
x:Class="NexusMods.App.UI.Controls.LoadoutCard.LoadoutCardView">
13+
<Design.DataContext>
14+
<loadoutCard:LoadoutCardDesignViewModel />
15+
</Design.DataContext>
16+
1317
<Border x:Name="ContainerBorder">
1418
<Grid>
1519
<Button x:Name="CardOuterButton">
@@ -18,8 +22,7 @@
1822

1923
<Border x:Name="ImageSectionBorder">
2024
<Grid>
21-
<Image x:Name="GameImage"
22-
Source="avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png" />
25+
<Image x:Name="GameImage" />
2326
<Rectangle x:Name="GradientLayerRectangle" />
2427
<loadoutBadge:LoadoutBadge x:Name="LoadoutBadge" Classes="CardSize" />
2528
</Grid>
@@ -30,8 +33,7 @@
3033
<panels:FlexPanel x:Name="DetailsSectionFlexPanel">
3134

3235
<TextBlock x:Name="LoadoutNameTextBlock"
33-
Classes="BodyLGBold"
34-
Text="Loadout A" />
36+
Classes="BodyLGBold" />
3537

3638
<panels:FlexPanel x:Name="BodyAndActionsGroupFlexPanel">
3739

@@ -49,16 +51,13 @@
4951

5052
<TextBlock x:Name="LastAppliedTimeTextBlock"
5153
Classes="BodySMNormal ForegroundSubdued"
52-
Text="Last applied 2 months ago"
5354
IsVisible="False" />
5455

5556
<TextBlock x:Name="CreatedTimeTextBlock"
56-
Classes="BodySMNormal ForegroundSubdued"
57-
Text="Created 10 months ago" />
57+
Classes="BodySMNormal ForegroundSubdued"/>
5858

5959
<TextBlock x:Name="NumberOfModsTextBlock"
60-
Classes="BodySMNormal ForegroundSubdued"
61-
Text="Mods 276" />
60+
Classes="BodySMNormal ForegroundSubdued"/>
6261

6362
</panels:FlexPanel>
6463

@@ -85,16 +84,16 @@
8584

8685
</panels:FlexPanel>
8786
</Button>
88-
87+
8988
<!-- Needs to be on top of the card button to avoid the disabled opacity -->
9089
<panels:FlexPanel x:Name="OverlayFlexPanel" IsVisible="False">
91-
<panels:FlexPanel x:Name="DeletingSpinnerFlexPanel" >
90+
<panels:FlexPanel x:Name="DeletingSpinnerFlexPanel">
9291
<spinner:Spinner x:Name="DeletingSpinner" />
9392
<TextBlock x:Name="DeletingTextBlock"
9493
Classes="BodyXLNormal ForegroundSubdued"
9594
Text="Deleting..." />
9695
</panels:FlexPanel>
97-
<Border/>
96+
<Border />
9897
</panels:FlexPanel>
9998
</Grid>
10099
</Border>

‎src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml.cs

+86
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
using System.Reactive.Disposables;
2+
using System.Reactive.Linq;
13
using Avalonia.ReactiveUI;
4+
using ReactiveUI;
25

36
namespace NexusMods.App.UI.Controls.LoadoutCard;
47

@@ -7,6 +10,89 @@ public partial class LoadoutCardView : ReactiveUserControl<ILoadoutCardViewModel
710
public LoadoutCardView()
811
{
912
InitializeComponent();
13+
14+
this.WhenActivated(d =>
15+
{
16+
// LoadoutBadge
17+
this.OneWayBind(ViewModel,
18+
vm => vm.LoadoutBadgeViewModel,
19+
view => view.LoadoutBadge.ViewModel)
20+
.DisposeWith(d);
21+
22+
// Game Image
23+
this.OneWayBind(ViewModel,
24+
vm => vm.LoadoutImage,
25+
view => view.GameImage.Source)
26+
.DisposeWith(d);
27+
28+
// Loadout Name
29+
this.OneWayBind(ViewModel,
30+
vm => vm.LoadoutName,
31+
view => view.LoadoutNameTextBlock.Text)
32+
.DisposeWith(d);
33+
34+
// Currently applied visibility
35+
this.OneWayBind(ViewModel,
36+
vm => vm.IsLoadoutApplied,
37+
view => view.CurrentlyAppliedFlexPanel.IsVisible)
38+
.DisposeWith(d);
39+
40+
// Last applied visibility
41+
this.WhenAnyValue(view => view.ViewModel!.IsLoadoutApplied)
42+
.Select(isApplied => !isApplied)
43+
.OnUI()
44+
.BindToView(this, view => view.LastAppliedTimeTextBlock.IsVisible)
45+
.DisposeWith(d);
46+
47+
// Last applied time
48+
this.OneWayBind(ViewModel,
49+
vm => vm.HumanizedLoadoutLastApplyTime,
50+
view => view.LastAppliedTimeTextBlock.Text)
51+
.DisposeWith(d);
52+
53+
// Created time
54+
this.OneWayBind(ViewModel,
55+
vm => vm.HumanizedLoadoutCreationTime,
56+
view => view.CreatedTimeTextBlock.Text)
57+
.DisposeWith(d);
58+
59+
// Mod count
60+
this.OneWayBind(ViewModel,
61+
vm => vm.LoadoutModCount,
62+
view => view.NumberOfModsTextBlock.Text)
63+
.DisposeWith(d);
64+
65+
// Deleting state
66+
this.WhenAnyValue(view => view.ViewModel!.IsDeleting)
67+
.OnUI()
68+
.Subscribe(isDeleting =>
69+
{
70+
IsEnabled = !isDeleting;
71+
OverlayFlexPanel.IsVisible = isDeleting;
72+
CreateCopyButton.IsVisible = !isDeleting;
73+
DeleteButton.IsVisible = !isDeleting;
74+
})
75+
.DisposeWith(d);
76+
77+
// Clone loadout command
78+
this.BindCommand(ViewModel,
79+
vm => vm.CloneLoadoutCommand,
80+
view => view.CreateCopyButton)
81+
.DisposeWith(d);
82+
83+
// Delete loadout command
84+
this.BindCommand(ViewModel,
85+
vm => vm.DeleteLoadoutCommand,
86+
view => view.DeleteButton)
87+
.DisposeWith(d);
88+
89+
// Visit loadout command
90+
this.BindCommand(ViewModel,
91+
vm => vm.DeleteLoadoutCommand,
92+
view => view.DeleteButton)
93+
.DisposeWith(d);
94+
}
95+
);
1096
}
1197
}
1298

‎src/NexusMods.App.UI/NexusMods.App.UI.csproj

+6
Original file line numberDiff line numberDiff line change
@@ -561,6 +561,12 @@
561561
<Compile Update="Controls\Settings\Section\SettingSectionViewModel.cs">
562562
<DependentUpon>ISettingSectionViewModel.cs</DependentUpon>
563563
</Compile>
564+
<Compile Update="Controls\LoadoutBadge\LoadoutBadgeDesignViewModel.cs">
565+
<DependentUpon>ILoadoutBadgeViewModel.cs</DependentUpon>
566+
</Compile>
567+
<Compile Update="Controls\LoadoutCard\LoadoutCardDesignViewModel.cs">
568+
<DependentUpon>ILoadoutCardViewModel.cs</DependentUpon>
569+
</Compile>
564570
</ItemGroup>
565571

566572
<ItemGroup>

‎src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutCards/LoadoutCardStyles.axaml

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@
44
xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
55
xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
66
xmlns:element="clr-namespace:NexusMods.App.UI.Controls.Spinner;assembly=NexusMods.App.UI">
7+
78
<Design.PreviewWith>
89
<panels:FlexPanel Background="{StaticResource SurfaceLow}"
910
Width="500"
1011
Height="500"
1112
ColumnSpacing="10"
1213
JustifyContent="SpaceAround">
13-
<loadoutCard:LoadoutCardView />
14-
<loadoutCard:LoadoutCardView IsEnabled="False" />
14+
<panels:FlexPanel.Resources>
15+
<loadoutCard:LoadoutCardDesignViewModel x:Key="LoadoutCardDesignViewModel" />
16+
</panels:FlexPanel.Resources>
17+
18+
<loadoutCard:LoadoutCardView DataContext="{StaticResource LoadoutCardDesignViewModel}" />
1519
</panels:FlexPanel>
1620
</Design.PreviewWith>
1721

0 commit comments

Comments
 (0)