Skip to content

Commit afe1167

Browse files
insomniousinsomnious
authored
Merge pull request #2449 from Nexus-Mods/left-align-healthcheck
Design tweaks for Health Check
2 parents 797feda + a99d8a8 commit afe1167

File tree

5 files changed

+129
-62
lines changed

5 files changed

+129
-62
lines changed

‎src/NexusMods.App.UI/Pages/Diagnostics/Details/DiagnosticDetailsView.axaml

+69-18
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
xmlns:reactiveUi="http://reactiveui.net"
88
xmlns:diagnostics="clr-namespace:NexusMods.App.UI.Pages.Diagnostics"
99
xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
10+
xmlns:controls="clr-namespace:NexusMods.App.UI.Controls"
1011
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="450"
1112
x:Class="NexusMods.App.UI.Pages.Diagnostics.DiagnosticDetailsView">
1213

@@ -16,32 +17,82 @@
1617

1718
<!-- NOTE(insomnious): if we need any more styling than this, we should move it to a separate style file -->
1819

19-
<ScrollViewer>
20-
<Border Padding="24" MaxWidth="1000">
20+
<Grid>
21+
<Grid.ColumnDefinitions>
22+
<ColumnDefinition Width="*" MaxWidth="1024" />
23+
</Grid.ColumnDefinitions>
2124

22-
<StackPanel Orientation="Vertical"
23-
HorizontalAlignment="Stretch"
24-
Spacing="{StaticResource Spacing-3}">
25+
<!-- need DockPanel to make the TabControl fill the available space, needed for ScrollViewer to calculate height properly -->
26+
<DockPanel Margin="24">
2527

26-
<StackPanel x:Name="TitleLineStackPanel"
27-
Orientation="Horizontal"
28-
Spacing="{StaticResource Spacing-1}">
29-
30-
<icons:UnifiedIcon x:Name="SeverityIcon"
31-
Size="20"
32-
VerticalAlignment="Center" />
28+
<!-- header with pictogram -->
29+
<StackPanel Spacing="8" DockPanel.Dock="Top">
3330

31+
<StackPanel Orientation="Horizontal" Spacing="8">
32+
<Border Width="48" Height="48">
33+
<icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramHealth}" />
34+
</Border>
35+
<TextBlock Text="Health Check:"
36+
Theme="{StaticResource HeadingSMSemiTheme}"
37+
Foreground="{StaticResource NeutralStrongBrush}"
38+
VerticalAlignment="Center" />
3439
<TextBlock x:Name="SeverityTitleTextBlock"
35-
Theme="{StaticResource TitleSMSemiTheme}"
40+
Theme="{StaticResource HeadingSMSemiTheme}"
3641
VerticalAlignment="Center" />
3742
</StackPanel>
3843

39-
<Border x:Name="HorizontalLine" Height="1" />
40-
41-
<reactiveUi:ViewModelViewHost x:Name="MarkdownRendererViewModelViewHost" />
44+
<TextBlock
45+
x:Name="SeverityExplanationTextBlock"
46+
Text="Review your Loadout for any issues and learn how to resolve them if needed."
47+
Theme="{StaticResource BodyMDNormalTheme}"
48+
Foreground="{StaticResource NeutralStrongBrush}"
49+
TextWrapping="Wrap" />
4250
</StackPanel>
4351

44-
</Border>
45-
</ScrollViewer>
52+
<Border DockPanel.Dock="Top" Classes="Toolbar"
53+
Background="Transparent"
54+
BorderThickness="0">
55+
56+
<StackPanel HorizontalAlignment="Left"
57+
Margin="0,20,0,0">
58+
<controls:StandardButton x:Name="SwitchView"
59+
Text="Back"
60+
Type="Tertiary"
61+
Size="Small"
62+
Fill="Weak"
63+
ShowIcon="Left"
64+
LeftIcon="{x:Static icons:IconValues.ArrowBack}"
65+
IsEnabled="False"/>
66+
67+
<controls:StandardButton x:Name="DeleteButton"
68+
Type="Tertiary"
69+
Size="Small"
70+
Fill="Weak"
71+
ShowIcon="Left"
72+
ShowLabel="False"
73+
LeftIcon="{x:Static icons:IconValues.Copy}"
74+
IsEnabled="False"/>
75+
</StackPanel>
76+
</Border>
77+
78+
<Border
79+
x:Name="MarkdownWrapperBorder"
80+
Margin="0,12,0,0"
81+
CornerRadius="4"
82+
BorderThickness="2"
83+
Padding="24"
84+
Background="#0D93C5FD"
85+
BorderBrush="#6693C5FD">
86+
87+
<ScrollViewer Padding="0,0,24,0">
88+
89+
<reactiveUi:ViewModelViewHost x:Name="MarkdownRendererViewModelViewHost" />
90+
91+
</ScrollViewer>
92+
</Border>
93+
94+
</DockPanel>
95+
</Grid>
96+
4697

4798
</reactiveUi:ReactiveUserControl>

‎src/NexusMods.App.UI/Pages/Diagnostics/Details/DiagnosticDetailsView.axaml.cs

+18-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
using System.Reactive.Disposables;
22
using System.Reactive.Linq;
3+
using Avalonia.Media;
34
using Avalonia.ReactiveUI;
45
using JetBrains.Annotations;
56
using NexusMods.Abstractions.Diagnostics;
@@ -32,30 +33,33 @@ private void InitializeData(IDiagnosticDetailsViewModel vm)
3233

3334
switch (vm.Severity)
3435
{
36+
/* NOTE(insomnious): Using fixed colors unless Laurence uses these colors\opacities again.
37+
* Same for the fixed text strings while we are testing the UI
38+
*/
39+
3540
case DiagnosticSeverity.Suggestion:
36-
SeverityIcon.Classes.Add("HelpCircle");
37-
SeverityIcon.Classes.Add("ForegroundInfoStrong");
38-
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_SUGGESTION.ToUpperInvariant();
41+
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_SUGGESTION;
3942
SeverityTitleTextBlock.Classes.Add("ForegroundInfoStrong");
40-
HorizontalLine.Classes.Add("InfoStrong");
43+
SeverityExplanationTextBlock.Text = "Something that doesn't indicate a problem and offers improvements to the user.";
44+
MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0D93C5FD");
45+
MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#6693C5FD");
4146
break;
4247
case DiagnosticSeverity.Warning:
43-
SeverityIcon.Classes.Add("Alert");
44-
SeverityIcon.Classes.Add("ForegroundWarningStrong");
45-
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_WARNING.ToUpperInvariant();
48+
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_WARNING;
49+
SeverityExplanationTextBlock.Text = "Something that has an unintended adverse effect on any part of the game.";
4650
SeverityTitleTextBlock.Classes.Add("ForegroundWarningStrong");
47-
HorizontalLine.Classes.Add("WarningStrong");
51+
MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0DFEF08A");
52+
MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#66FEF08A");
4853
break;
4954
case DiagnosticSeverity.Critical:
50-
SeverityIcon.Classes.Add("AlertOctagon");
51-
SeverityIcon.Classes.Add("ForegroundDangerStrong");
52-
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_CRITICAL_ERROR.ToUpperInvariant();
55+
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_CRITICAL_ERROR;
56+
SeverityExplanationTextBlock.Text = "Something that will make the game unplayable.";
5357
SeverityTitleTextBlock.Classes.Add("ForegroundDangerStrong");
54-
HorizontalLine.Classes.Add("DangerStrong");
58+
MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0DF87171");
59+
MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#66F87171");
5560
break;
5661
default:
57-
SeverityIcon.Classes.Add("Bell");
58-
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_HIDDEN.ToUpperInvariant();
62+
SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_HIDDEN;
5963
break;
6064
}
6165
}

‎src/NexusMods.App.UI/Pages/Diagnostics/List/DiagnosticListView.axaml

+36-27
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<!-- TODO: anymore work on this and it should be moved to a separate style file -->
1717

1818
<reactive:ReactiveUserControl.Resources>
19-
<ScrollViewer x:Key="TabContent" >
19+
<ScrollViewer x:Key="TabContent">
2020
<ItemsControl x:Name="HealthCheckItemsControl">
2121
<ItemsControl.ItemsPanel>
2222
<ItemsPanelTemplate>
@@ -34,34 +34,44 @@
3434
</ScrollViewer>
3535
</reactive:ReactiveUserControl.Resources>
3636

37-
<controls:EmptyState x:Name="EmptyState"
38-
Icon="{x:Static icons:IconValues.CheckCircle}"
39-
Header="{x:Static resources:Language.DiagnosticListView_EmptyState_Header}"
40-
Subtitle="{x:Static resources:Language.DiagnosticListView_EmptyState_Subtitle}">
4137

42-
<Border HorizontalAlignment="Stretch" MaxWidth="1000" Padding="24">
38+
<!-- NOTE(insomnious): Using a single column grid to limit the max width of the content while still letting it stretch.
39+
HorizontalAlignment is ignored on a control when numerical entries are set on
40+
Width/Height/MaxWidth/MaxHeight etc.
41+
-->
42+
<Grid>
43+
<Grid.ColumnDefinitions>
44+
<ColumnDefinition Width="*" MaxWidth="1024" />
45+
</Grid.ColumnDefinitions>
4346

44-
<!-- need DockPanel to make the TabControl fill the available space, needed for ScrollViewer to calculate height properly -->
45-
<DockPanel>
47+
<!-- need DockPanel to make the TabControl fill the available space, needed for ScrollViewer to calculate height properly -->
48+
<DockPanel Margin="24">
4649

47-
<StackPanel Spacing="8"
48-
DockPanel.Dock="Top">
49-
<StackPanel Orientation="Horizontal" Spacing="8">
50-
<Border Width="48" Height="48">
51-
<icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramHealth}" />
52-
</Border>
53-
<TextBlock Text="Health Check"
54-
Theme="{StaticResource HeadingSMSemiTheme}"
55-
Foreground="{StaticResource NeutralStrongBrush}"
56-
VerticalAlignment="Center" />
57-
</StackPanel>
50+
<!-- header with pictogram -->
51+
<StackPanel Spacing="8" DockPanel.Dock="Top">
5852

59-
<TextBlock
60-
Text="Review your Loadout for any issues and learn how to resolve them if needed."
61-
Theme="{StaticResource BodyMDNormalTheme}"
62-
Foreground="{StaticResource NeutralStrongBrush}" />
53+
<StackPanel Orientation="Horizontal" Spacing="8">
54+
<Border Width="48" Height="48">
55+
<icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramHealth}" />
56+
</Border>
57+
<TextBlock Text="Health Check"
58+
Theme="{StaticResource HeadingSMSemiTheme}"
59+
Foreground="{StaticResource NeutralStrongBrush}"
60+
VerticalAlignment="Center" />
6361
</StackPanel>
6462

63+
<TextBlock
64+
Text="Review your Loadout for any issues and learn how to resolve them if needed."
65+
Theme="{StaticResource BodyMDNormalTheme}"
66+
Foreground="{StaticResource NeutralStrongBrush}"
67+
TextWrapping="Wrap" />
68+
</StackPanel>
69+
70+
<controls:EmptyState x:Name="EmptyState"
71+
Icon="{x:Static icons:IconValues.CheckCircle}"
72+
Header="{x:Static resources:Language.DiagnosticListView_EmptyState_Header}"
73+
Subtitle="{x:Static resources:Language.DiagnosticListView_EmptyState_Subtitle}">
74+
6575
<TabControl x:Name="TabControl"
6676
Margin="0,24,0,0"
6777
Padding="0,24,0,0"
@@ -71,11 +81,10 @@
7181
<TabItem x:Name="WarningTab" Header="WarningTab" Content="{StaticResource TabContent}" />
7282
<TabItem x:Name="CriticalTab" Header="CriticalTab" Content="{StaticResource TabContent}" />
7383
</TabControl>
84+
</controls:EmptyState>
7485

75-
</DockPanel>
76-
</Border>
77-
78-
</controls:EmptyState>
86+
</DockPanel>
87+
</Grid>
7988

8089

8190
</reactive:ReactiveUserControl>

‎src/NexusMods.App.UI/Pages/MyGames/MyGamesView.axaml

+4-2
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,15 @@
5858
<TextBlock Text="No games detected"
5959
Theme="{StaticResource BodyMDNormalTheme}"
6060
Foreground="{StaticResource NeutralSubduedBrush}"
61-
TextAlignment="Left"/>
61+
TextAlignment="Left"
62+
TextWrapping="Wrap"/>
6263
</controls:EmptyState.Subtitle>
6364

6465
<StackPanel Spacing="24">
6566
<TextBlock Text="Add games to get started"
6667
Theme="{StaticResource BodyMDNormalTheme}"
67-
Foreground="{StaticResource NeutralStrongBrush}" />
68+
Foreground="{StaticResource NeutralStrongBrush}"
69+
TextWrapping="Wrap"/>
6870
<ItemsControl
6971
x:Name="DetectedGamesItemsControl">
7072
<ItemsControl.ItemsPanel>

‎src/NexusMods.App.UI/Pages/MyLoadouts/MyLoadoutsView.axaml

+2-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040

4141
<TextBlock Text="{x:Static resources:Language.MyLoadoutsPageDescriptionText}"
4242
Theme="{StaticResource BodyMDNormalTheme}"
43-
Foreground="{StaticResource NeutralStrongBrush}" />
43+
Foreground="{StaticResource NeutralStrongBrush}"
44+
TextWrapping="Wrap" />
4445
</StackPanel>
4546

4647
<ItemsControl x:Name="GameSectionsItemsControl">

0 commit comments

Comments
 (0)