Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various UI tweaks 3 #2708

Merged
merged 18 commits into from
Feb 25, 2025
Merged

Various UI tweaks 3 #2708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e2a67bb
right aligned bottom banner
insomnious Feb 20, 2025
110a1a2
Added WeakAlt fill for non-translucent colors
insomnious Feb 20, 2025
fae3677
wip cleaned out toolbar
insomnious Feb 20, 2025
09fc78f
Updated LibraryView toolbar
insomnious Feb 20, 2025
5d16aa0
updated toolbars throughout
insomnious Feb 20, 2025
a9912eb
WIP new split button control theme and styles
insomnious Feb 20, 2025
f4b3fd9
reduced font size on small button
insomnious Feb 20, 2025
f11a95e
refactored toolbar class
insomnious Feb 20, 2025
6c44d92
changed library to use split button
insomnious Feb 20, 2025
25d787b
increased icon spacing
insomnious Feb 20, 2025
0f2130e
Add tooltip for install button split button
insomnious Feb 24, 2025
83195f5
Text changes for buttons and tooltips
insomnious Feb 24, 2025
8347e21
Spacing on Actions column stackpanel
insomnious Feb 24, 2025
1d3af37
Added lighter (SurfaceMid) fallback image for collection background
insomnious Feb 24, 2025
68b3ee4
Missed file commit
insomnious Feb 24, 2025
d0c18d7
Merge branch 'main' into ui-tweaks-3
insomnious Feb 24, 2025
048c6f5
Remove menu item for unused 'delete all downloads'
insomnious Feb 24, 2025
59226f4
PR feedback changes
insomnious Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/NexusMods.App.UI/Assets/collection-background-fallback.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions src/NexusMods.App.UI/Controls/DevelopmentBuildBanner/DevelopmentBuildBannerView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
Background="{StaticResource SurfaceBaseBrush}"
CornerRadius="0">

<StackPanel Orientation="Horizontal" Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Right">
<TextBlock
Text="{Binding AppName, RelativeSource={RelativeSource AncestorType={x:Type developmentBuildBanner:DevelopmentBuildBannerView}}}"
Theme="{StaticResource BodyMDBoldTheme}"
Expand All @@ -35,7 +35,7 @@
<TextBlock
Text="{Binding AppVersion, RelativeSource={RelativeSource AncestorType={x:Type developmentBuildBanner:DevelopmentBuildBannerView}}}"
Theme="{StaticResource BodyMDBoldTheme}"
Foreground="{StaticResource NeutralModerateBrush}"
Foreground="{StaticResource NeutralSubduedBrush}"
VerticalAlignment="Center" />

<!-- feedback button -->
Expand All @@ -46,7 +46,8 @@
Size="Small"
LeftIcon="{x:Static icons:IconValues.ThumbsUpDownOutline}"
ShowIcon="Left"
ToolTip.Tip="{x:Static resources:Language.TopBar_GiveFeedback_ToolTip}" />
ToolTip.Tip="{x:Static resources:Language.TopBar_GiveFeedback_ToolTip}"
Margin="8,0,0,0"/>
</StackPanel>

</Border>
Expand Down
7 changes: 6 additions & 1 deletion src/NexusMods.App.UI/Controls/StandardButton.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,14 @@ public enum Fills
Strong,

/// <summary>
/// Weak fill.
/// Weak fill (translucent).
/// </summary>
Weak,

/// <summary>
/// Weak solid fill.
/// </summary>
WeakAlt,
}

#endregion
Expand Down
2 changes: 1 addition & 1 deletion src/NexusMods.App.UI/ImagePipelines.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ public static class ImagePipelines
private const string MarkdownRendererRemoteImagePipelineKey = nameof(MarkdownRendererRemoteImagePipelineKey);

private static readonly Bitmap CollectionTileFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/collection-tile-fallback.png")));
private static readonly Bitmap CollectionBackgroundFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/black-box.png")));
private static readonly Bitmap CollectionBackgroundFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/collection-background-fallback.png")));
private static readonly Bitmap UserAvatarFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/avatar.webp")));
internal static readonly Bitmap ModPageThumbnailFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/transparent.png")));
internal static readonly Bitmap MarkdownFallback = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/transparent.png")));
Expand Down
8 changes: 0 additions & 8 deletions src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,6 @@
<TextBlock>Open JSON file</TextBlock>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="MenuItemDeleteAllDownloads" Classes="Critical">
<MenuItem.Icon>
<icons:UnifiedIcon Value="{x:Static icons:IconValues.DeleteOutline}" />
</MenuItem.Icon>
<MenuItem.Header>
<TextBlock>Delete all downloads</TextBlock>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="MenuItemDeleteCollectionRevision" Classes="Critical">
<MenuItem.Icon>
<icons:UnifiedIcon Value="{x:Static icons:IconValues.DeleteOutline}" />
Expand Down
3 changes: 0 additions & 3 deletions src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,6 @@ public CollectionDownloadView()
this.BindCommand(ViewModel, vm => vm.CommandOpenJsonFile, view => view.MenuItemOpenJsonFile)
.DisposeWith(d);

this.BindCommand(ViewModel, vm => vm.CommandDeleteAllDownloads, view => view.MenuItemDeleteAllDownloads)
.DisposeWith(d);

this.BindCommand(ViewModel, vm => vm.CommandDeleteCollectionRevision, view => view.MenuItemDeleteCollectionRevision)
.DisposeWith(d);

Expand Down
20 changes: 10 additions & 10 deletions src/NexusMods.App.UI/Pages/Diff/ApplyDiff/ApplyDiffView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@
xmlns:trees="clr-namespace:NexusMods.App.UI.Controls.Trees"
xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
xmlns:resources="clr-namespace:NexusMods.App.UI.Resources"
xmlns:controls="clr-namespace:NexusMods.App.UI.Controls"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="NexusMods.App.UI.Pages.Diff.ApplyDiff.ApplyDiffView">
<Design.DataContext>
<applyDiff:ApplyDiffDesignViewModel />
</Design.DataContext>

<Grid RowDefinitions="Auto, *">
<Border Classes="Toolbar" Grid.Row="0">
<StackPanel>
<Button x:Name="RefreshButton">
<StackPanel>
<icons:UnifiedIcon Classes="Refresh" />
<TextBlock Text="{x:Static resources:Language.ApplyDiff_Refresh}" />
</StackPanel>
</Button>
<controls:StandardButton x:Name="RefreshButton"
LeftIcon="{x:Static icons:IconValues.Refresh}"
Text="Refresh"
ShowIcon="Left"
Size="Small"
Fill="WeakAlt" />
</StackPanel>
</Border>
<reactiveUi:ViewModelViewHost Grid.Row="1" x:Name="TreeViewHost"/>

<reactiveUi:ViewModelViewHost Grid.Row="1" x:Name="TreeViewHost" />
</Grid>
</reactiveUi:ReactiveUserControl>

8 changes: 6 additions & 2 deletions src/NexusMods.App.UI/Pages/ItemContentsFileTree/ItemContentsFileTreeView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,17 @@
Text="Edit File"
LeftIcon="{x:Static icons:IconValues.FileEdit}"
ShowIcon="Left"
Size="Small"/>
Size="Small"
Type="Tertiary"
Fill="WeakAlt"/>

<controls:StandardButton x:Name="RemoveButton"
Text="Delete"
LeftIcon="{x:Static icons:IconValues.DeleteForever}"
ShowIcon="Left"
Size="Small"/>
Size="Small"
Type="Tertiary"
Fill="WeakAlt"/>
</StackPanel>
</Border>

Expand Down
152 changes: 71 additions & 81 deletions src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,96 +65,86 @@
</StackPanel>
</Expander.Header>
<!-- Empty State -->
<Grid RowDefinitions="Auto, *">
<!-- Toolbar -->
<Border Grid.Row="0" Classes="Toolbar">
<!-- Note(sewer): Alignment of toolbars is usually dictated by `Toolbar.xaml` style file, however,
the new library page is a special case. It is the only toolbar in the App to be left aligned,
rather than right aligned. So the alignment is set here directly for the time being.
Whether this will apply to more toolbars in the future remains to be seen -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

<controls:StandardButton x:Name="AddModButton"
Text="{x:Static resources:Language.FileOriginPage_AddMod}"
Type="Tertiary"
Size="Small"
Fill="Weak"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.PlaylistAdd}"
ToolTip.Tip="{x:Static resources:Language.FileOriginPage_AddMod_ToolTip}" />

<controls:StandardButton x:Name="AddModAdvancedButton"
Text="{x:Static resources:Language.FileOriginPage_AddModAdvanced}"
Type="Tertiary"
Size="Small"
Fill="Weak"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.PlaylistAdd}"
ToolTip.Tip="{x:Static resources:Language.FileOriginPage_AddModAdvanced_ToolTip}" />

<controls:StandardButton x:Name="RemoveModButton"
Text="{x:Static resources:Language.FileOriginPage_DeleteMod}"
Type="Tertiary"
Size="Small"
Fill="Weak"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.DeleteOutline}"
ToolTip.Tip="{x:Static resources:Language.FileOriginPage_DeleteMod_ToolTip}" />

<Line />

<!-- Get Mods Section -->
<TextBlock Classes="NotTitle" Text="{x:Static resources:Language.FileOriginsPage_GetMods}" />

<controls:StandardButton x:Name="GetModsFromDriveButton"
Text="{x:Static resources:Language.FileOriginsPage_FromDrive}"
Type="Tertiary"
Size="Small"
Fill="Weak"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.HardDrive}"
ToolTip.Tip="{x:Static resources:Language.FileOriginsPage_FromDrive_ToolTip}" />

<controls:StandardButton x:Name="GetModsFromNexusButton"
Text="{x:Static resources:Language.FileOriginsPage_FromNexusMods}"
Type="Tertiary"
Size="Small"
Fill="Weak"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.Nexus}"
ToolTip.Tip="{x:Static resources:Language.FileOriginsPage_FromNexus_ToolTip}" />

<!-- Updates Section -->
<Line />
<Grid RowDefinitions="Auto, *">
<!-- Toolbar -->
<Border Grid.Row="0" Classes="Toolbar">
<StackPanel>

<SplitButton x:Name="InstallModSplitButton"
Classes="Compact"
Content="{x:Static resources:Language.FileOriginPage_AddMod}"
ToolTip.Tip="{x:Static resources:Language.FileOriginPage_AddMod_ToolTip}">
<SplitButton.Flyout>
<MenuFlyout>
<MenuItem x:Name="InstallModMenuItem" Header="{x:Static resources:Language.FileOriginPage_AddMod}" />
<MenuItem x:Name="AdvancedInstallModMenuItem" Header="{x:Static resources:Language.FileOriginPage_AddModAdvanced}" />
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>

<controls:StandardButton x:Name="RemoveModButton"
Text="{x:Static resources:Language.FileOriginPage_DeleteMod}"
Type="Tertiary"
Size="Small"
Fill="WeakAlt"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.DeleteOutline}"
ToolTip.Tip="{x:Static resources:Language.FileOriginPage_DeleteMod_ToolTip}" />

<!-- 'Updates' button. -->
<!-- This button's text is updated at runtime to set number of mods -->
<SplitButton x:Name="UpdateAll" IsVisible="False" Content="{x:Static resources:Language.FileOriginPage_UpdateAll}" />
<controls:StandardButton x:Name="Refresh" ShowIcon="Left" ShowLabel="False" Size="Small" LeftIcon="{x:Static icons:IconValues.Refresh}" />
<Separator />

<!-- Get Mods Section -->
<TextBlock Text="{x:Static resources:Language.FileOriginsPage_GetMods}" />

<controls:StandardButton x:Name="GetModsFromDriveButton"
Text="{x:Static resources:Language.FileOriginsPage_FromDrive}"
Type="Tertiary"
Size="Small"
Fill="WeakAlt"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.HardDrive}"
ToolTip.Tip="{x:Static resources:Language.FileOriginsPage_FromDrive_ToolTip}" />

<controls:StandardButton x:Name="GetModsFromNexusButton"
Text="{x:Static resources:Language.FileOriginsPage_FromNexusMods}"
Type="Tertiary"
Size="Small"
Fill="WeakAlt"
ShowIcon="Left"
LeftIcon="{x:Static icons:IconValues.Nexus}"
ToolTip.Tip="{x:Static resources:Language.FileOriginsPage_FromNexus_ToolTip}" />

<!-- Updates Section -->
<Separator />

<!-- 'Updates' button. -->
<controls:StandardButton x:Name="Refresh" ShowIcon="Left" ShowLabel="False" Size="Small"
Type="Tertiary" Fill="WeakAlt"
LeftIcon="{x:Static icons:IconValues.Refresh}"
ToolTip.Tip="Refresh" />
</StackPanel>
</Border>

<controls:EmptyState x:Name="EmptyState" Grid.Row="1"
Header="{x:Static resources:Language.EmptyLibraryTitleText}">
<controls:EmptyState.Subtitle>
<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>
</Border>

<controls:EmptyState x:Name="EmptyState" Grid.Row="1"
Header="{x:Static resources:Language.EmptyLibraryTitleText}">
<controls:EmptyState.Subtitle>
<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>
</controls:EmptyState.Subtitle>

<TreeDataGrid Grid.Row="1" x:Name="TreeDataGridLibrary"
ShowColumnHeaders="True"
CanUserResizeColumns="True"
CanUserSortColumns="True"
HorizontalAlignment="Stretch" />
</controls:EmptyState>
</Grid>
</controls:EmptyState>
</Grid>
</Expander>
</Grid>

Expand Down
12 changes: 6 additions & 6 deletions src/NexusMods.App.UI/Pages/LibraryPage/LibraryView.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,13 @@ public LibraryView()
this.BindCommand(ViewModel, vm => vm.RemoveSelectedItemsCommand, view => view.RemoveModButton)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.InstallSelectedItemsCommand, view => view.AddModButton)
this.BindCommand(ViewModel, vm => vm.InstallSelectedItemsCommand, view => view.InstallModSplitButton)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.InstallSelectedItemsWithAdvancedInstallerCommand, view => view.AddModAdvancedButton)

this.BindCommand(ViewModel, vm => vm.InstallSelectedItemsCommand, view => view.InstallModMenuItem)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.InstallSelectedItemsWithAdvancedInstallerCommand, view => view.AdvancedInstallModMenuItem)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.OpenFilePickerCommand, view => view.GetModsFromDriveButton)
Expand All @@ -70,9 +73,6 @@ public LibraryView()

this.BindCommand(ViewModel, vm => vm.RefreshUpdatesCommand, view => view.Refresh)
.AddTo(disposables);

this.BindCommand(ViewModel, vm => vm.UpdateAllCommand, view => view.UpdateAll)
.AddTo(disposables);
});
}
}
Loading
Loading