Toolbar buttons tooltips (#2197)

* NavigationControl now inherits from StandardButton Updated styles to cover this change Updated strings for tooltips * added username when logged into avatar tooltip * moved back and forward to new buttons added more strings to language resource * moved some strings to language resource * Update src/NexusMods.App.UI/Resources/Language.resx Co-authored-by: Patriot99 <[email protected]> --------- Co-authored-by: Patriot99 <[email protected]>
Nexus-Mods · Oct 25, 2024 · cbfdb48 · cbfdb48
1 parent bf0855d
commit cbfdb48
Show file tree

Hide file tree

Showing 19 changed files with 315 additions and 174 deletions.
diff --git a/src/NexusMods.App.UI/Controls/Diagnostics/DiagnosticEntryView.axaml b/src/NexusMods.App.UI/Controls/Diagnostics/DiagnosticEntryView.axaml
@@ -20,7 +20,7 @@
             <panels:FlexPanel x:Name="EntryFlexPanel">
                 <icons:UnifiedIcon x:Name="SeverityIcon" />
                 <TextBlock x:Name="DescriptionText" />
-                <icons:UnifiedIcon x:Name="NavigationIcon" Classes="ChevronRight" />
+                <icons:UnifiedIcon x:Name="NavigationIcon" Value="{x:Static icons:IconValues.ChevronRight}" />
             </panels:FlexPanel>
         </navigation:NavigationControl>
     </Border>

diff --git a/src/NexusMods.App.UI/Controls/Diagnostics/DiagnosticEntryView.axaml.cs b/src/NexusMods.App.UI/Controls/Diagnostics/DiagnosticEntryView.axaml.cs
@@ -2,6 +2,7 @@
 using System.Reactive.Linq;
 using Avalonia.ReactiveUI;
 using NexusMods.Abstractions.Diagnostics;
+using NexusMods.Icons;
 using ReactiveUI;
 
 namespace NexusMods.App.UI.Controls.Diagnostics;
@@ -30,19 +31,19 @@ private void InitializeData(IDiagnosticEntryViewModel vm)
         switch (vm.Severity)
         {
             case DiagnosticSeverity.Suggestion:
-                SeverityIcon.Classes.Add("HelpCircle");
+                SeverityIcon.Value = IconValues.Help;
                 SeverityIcon.Classes.Add("ForegroundInfoStrong");
                 break;
             case DiagnosticSeverity.Warning:
-                SeverityIcon.Classes.Add("Alert");
+                SeverityIcon.Value = IconValues.Error;
                 SeverityIcon.Classes.Add("ForegroundWarningStrong");
                 break;
             case DiagnosticSeverity.Critical:
-                SeverityIcon.Classes.Add("AlertOctagon");
+                SeverityIcon.Value = IconValues.Alert;
                 SeverityIcon.Classes.Add("ForegroundDangerStrong");
                 break;
             default:
-                SeverityIcon.Classes.Add("Bell");
+                SeverityIcon.Value = IconValues.NotificationImportant;
                 break;
         }
 

diff --git a/src/NexusMods.App.UI/Controls/Navigation/NavigationControl.cs b/src/NexusMods.App.UI/Controls/Navigation/NavigationControl.cs
@@ -11,7 +11,7 @@
 namespace NexusMods.App.UI.Controls.Navigation;
 
 [PublicAPI]
-public class NavigationControl : Button
+public class NavigationControl : StandardButton
 {
     public static readonly StyledProperty<ReactiveCommand<NavigationInput, Unit>?> NavigateCommandProperty =
         AvaloniaProperty.Register<NavigationControl, ReactiveCommand<NavigationInput, Unit>?>(nameof(NavigationCommand));
@@ -65,7 +65,7 @@ public NavigationControl()
     }
 
     /// <inheritdoc/>
-    protected override Type StyleKeyOverride => typeof(Button);
+    protected override Type StyleKeyOverride => typeof(StandardButton);
 
     private bool _wasOnPointerPressedCalled;
 

diff --git a/src/NexusMods.App.UI/Controls/TopBar/ITopBarViewModel.cs b/src/NexusMods.App.UI/Controls/TopBar/ITopBarViewModel.cs
@@ -27,6 +27,7 @@ public interface ITopBarViewModel : IViewModelInterface
     public bool IsLoggedIn { get; }
     public bool IsPremium { get; }
     public IImage? Avatar { get; }
+    public string? Username { get; }
 
     public IAddPanelDropDownViewModel AddPanelDropDownViewModel { get; set; }
 

diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarDesignViewModel.cs b/src/NexusMods.App.UI/Controls/TopBar/TopBarDesignViewModel.cs
@@ -14,6 +14,7 @@ public class TopBarDesignViewModel : AViewModel<ITopBarViewModel>, ITopBarViewMo
 {
     [Reactive] public bool IsLoggedIn { get; set; }
     [Reactive] public bool IsPremium { get; set; } = true;
+    [Reactive] public string? Username { get; set; } = "insomnious";
     [Reactive] public IImage Avatar { get; set; } = new Bitmap(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png")));
     [Reactive] public string ActiveWorkspaceTitle { get; set; } = "Home";
     [Reactive] public string ActiveWorkspaceSubtitle { get; set; } = "Loadout A";

diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml b/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml
@@ -13,7 +13,8 @@
     xmlns:topBar="clr-namespace:NexusMods.App.UI.Controls.TopBar"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:resources="clr-namespace:NexusMods.App.UI.Resources"
-    xmlns:navigation="clr-namespace:NexusMods.App.UI.Controls.Navigation">
+    xmlns:navigation="clr-namespace:NexusMods.App.UI.Controls.Navigation"
+    xmlns:controls="clr-namespace:NexusMods.App.UI.Controls">
     <Design.DataContext>
         <topBar:TopBarDesignViewModel />
     </Design.DataContext>
@@ -36,12 +37,22 @@
 
 
         <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" Spacing="10">
-            <Button x:Name="GoBackInHistory" Classes="Action" Width="40" Height="40">
-                <icons:UnifiedIcon Value="{x:Static icons:IconValues.ArrowBack}" Size="24"/>
-            </Button>
-            <Button x:Name="GoForwardInHistory" Classes="Action" Width="40" Height="40">
-                <icons:UnifiedIcon Value="{x:Static icons:IconValues.ArrowForward}" Size="24"/>
-            </Button>
+
+            <controls:StandardButton x:Name="GoForwardInHistory" 
+                                     ToolTip.Tip="{x:Static resources:Language.TopBar_Forward_ToolTip}"
+                                     ShowLabel="False"
+                                     ShowIcon="Left"
+                                     Type="Tertiary"
+                                     Fill="Strong"
+                                     LeftIcon="{x:Static icons:IconValues.ArrowBack}"/>
+
+            <controls:StandardButton x:Name="GoBackInHistory" 
+                                     ToolTip.Tip="{x:Static resources:Language.TopBar_Back_ToolTip}"
+                                     ShowLabel="False"
+                                     ShowIcon="Left"
+                                     Type="Tertiary"
+                                     Fill="Strong"
+                                     LeftIcon="{x:Static icons:IconValues.ArrowForward}" />
         </StackPanel>
 
         <Menu Grid.Column="2" Margin="12 0">
@@ -53,19 +64,13 @@
 
             <Separator Width="1" Height="40"/>
 
-            <navigation:NavigationMenuItem  Classes="TopBarMenuItem" x:Name="OpenSettingsMenuItem">
-                <ToolTip.Tip>
-                    <TextBlock Text="{x:Static resources:Language.SettingsView_Title}" />
-                </ToolTip.Tip>
+            <navigation:NavigationMenuItem  Classes="TopBarMenuItem" x:Name="OpenSettingsMenuItem" ToolTip.Tip="{x:Static resources:Language.SettingsView_Title}">
                 <navigation:NavigationMenuItem.Header>
                     <icons:UnifiedIcon Classes="Cog"/>
                 </navigation:NavigationMenuItem.Header>
             </navigation:NavigationMenuItem>
 
-            <MenuItem Classes="TopBarMenuItem" Width="64">
-                <ToolTip.Tip>
-                    <TextBlock Text="{x:Static resources:Language.TopBar_Help_ToolTip}" />
-                </ToolTip.Tip>
+            <MenuItem Classes="TopBarMenuItem" Width="64" ToolTip.Tip="{x:Static resources:Language.TopBar_Help_ToolTip}">
                 <MenuItem.Header>
                     <StackPanel Orientation="Horizontal" Spacing="0" Margin="10, 0 , 10,  0">
                         <icons:UnifiedIcon Classes="Help"/>
@@ -81,9 +86,10 @@
 
             <MenuItem Classes="TopBarNoStyleMenuItem" x:Name="LoginMenuItem">
                 <MenuItem.Header>
-                    <Button Classes="Standard Primary" x:Name="LoginButton">
-                        <TextBlock Text="{x:Static resources:Language.TopBarActions__LOG_IN}"/>
-                    </Button>
+                    <controls:StandardButton x:Name="LoginButton"
+                                             Text="{x:Static resources:Language.TopBarActions__LOG_IN}"
+                                             Type="Primary"
+                                             ToolTip.Tip="{x:Static resources:Language.TopBarActions__LOG_IN_ToolTip}" />
                 </MenuItem.Header>
             </MenuItem>
 

diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml.cs b/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml.cs
@@ -1,5 +1,8 @@
 using System.Reactive.Disposables;
+using Avalonia.Controls;
 using Avalonia.ReactiveUI;
+using Avalonia.VisualTree;
+using DynamicData.Binding;
 using NexusMods.Icons;
 using ReactiveUI;
 
@@ -74,6 +77,15 @@ public TopBarView()
                     FreeLabel.IsEnabled = isLoggedIn && !isPremium;
                 })
                 .DisposeWith(d);
+            
+            this.WhenValueChanged(
+                    x => x.ViewModel!.Username
+                )
+                .Subscribe(username =>
+                {
+                    ToolTip.SetTip(AvatarMenuItem, $"Logged in to Nexus Mods as {username}");
+                })
+                .DisposeWith(d);
 
             this.OneWayBind(ViewModel, vm => vm.IsLoggedIn, view => view.LoginMenuItem.IsVisible, b => !b)
                 .DisposeWith(d);

diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarViewModel.cs b/src/NexusMods.App.UI/Controls/TopBar/TopBarViewModel.cs
@@ -1,5 +1,4 @@
 using System.Diagnostics;
-using System.Reactive;
 using System.Reactive.Disposables;
 using System.Reactive.Linq;
 using Avalonia.Media;
@@ -20,8 +19,11 @@
 using NexusMods.CrossPlatform;
 using NexusMods.CrossPlatform.Process;
 using NexusMods.Paths;
+using R3;
 using ReactiveUI;
 using ReactiveUI.Fody.Helpers;
+using ReactiveCommand = ReactiveUI.ReactiveCommand;
+using Unit = System.Reactive.Unit;
 
 namespace NexusMods.App.UI.Controls.TopBar;
 
@@ -34,23 +36,25 @@ public class TopBarViewModel : AViewModel<ITopBarViewModel>, ITopBarViewModel
     [Reactive] public string ActiveWorkspaceTitle { get; [UsedImplicitly] set; } = string.Empty;
     [Reactive] public string ActiveWorkspaceSubtitle { get; [UsedImplicitly] set; } = string.Empty;
 
-    public ReactiveCommand<NavigationInformation, Unit> OpenSettingsCommand { get; }
+    public ReactiveUI.ReactiveCommand<NavigationInformation, Unit> OpenSettingsCommand { get; }
 
-    public ReactiveCommand<NavigationInformation, Unit> ViewChangelogCommand { get; }
-    public ReactiveCommand<Unit, Unit> ViewAppLogsCommand { get; }
-    public ReactiveCommand<Unit, Unit> GiveFeedbackCommand { get; }
+    public ReactiveUI.ReactiveCommand<NavigationInformation, Unit> ViewChangelogCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> ViewAppLogsCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> GiveFeedbackCommand { get; }
 
-    public ReactiveCommand<Unit, Unit> LoginCommand { get; }
-    public ReactiveCommand<Unit, Unit> LogoutCommand { get; }
-    public ReactiveCommand<Unit, Unit> OpenNexusModsProfileCommand { get; }
-    public ReactiveCommand<Unit, Unit> OpenNexusModsPremiumCommand { get; }
-    public ReactiveCommand<Unit, Unit> OpenNexusModsAccountSettingsCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> LoginCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> LogoutCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> OpenNexusModsProfileCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> OpenNexusModsPremiumCommand { get; }
+    public ReactiveUI.ReactiveCommand<Unit, Unit> OpenNexusModsAccountSettingsCommand { get; }
 
     [Reactive] public bool IsLoggedIn { get; [UsedImplicitly] set; }
     [Reactive] public bool IsPremium { get; [UsedImplicitly] set; }
 
     private readonly ObservableAsPropertyHelper<IImage?> _avatar;
     public IImage? Avatar => _avatar.Value;
+
+    [Reactive] public string? Username { get; set; } = string.Empty;
 
     [Reactive] public IAddPanelDropDownViewModel AddPanelDropDownViewModel { get; set; } = null!;
 
@@ -154,6 +158,11 @@ public TopBarViewModel(
                 .BindToVM(this, vm => vm.IsLoggedIn)
                 .DisposeWith(d);
 
+            _loginManager.UserInfoObservable
+                .Select(u => u?.Name)
+                .ObserveOnUIThreadDispatcher()
+                .Subscribe(name => Username = name ?? "");
+            
             _loginManager.IsPremiumObservable
                 .OnUI()
                 .BindToVM(this, vm => vm.IsPremium)

diff --git a/src/NexusMods.App.UI/LeftMenu/Items/ApplyControlView.axaml b/src/NexusMods.App.UI/LeftMenu/Items/ApplyControlView.axaml
@@ -24,17 +24,14 @@
                     HorizontalAlignment="Stretch"
                     Classes="Spacing-2">
 
-            <navigation:NavigationControl Classes="Preview" HorizontalAlignment="Stretch" x:Name="ApplyDiffButton">
-                <ToolTip.Tip>
-                    <TextBlock Text="{x:Static resources:Language.ApplyControlView_ViewApplyChanges_ToolTip}" />
-                </ToolTip.Tip>
-                <StackPanel Orientation="Horizontal">
-                    <!-- <icons:UnifiedIcon Size="20" Classes="Visibility" /> -->
-                    <TextBlock x:Name="ViewApplyChangesTextBlock"
-                               Text="{x:Static resources:Language.ApplyControlView_ViewApplyChanges}" />
-                </StackPanel>
-            </navigation:NavigationControl>
-
+            <navigation:NavigationControl x:Name="ApplyDiffButton"
+                                          Text="{x:Static resources:Language.ApplyControlView_ViewApplyChanges}"
+                                          Type="Tertiary"
+                                          Fill="Weak"
+                                          Size="Small"
+                                          ToolTip.Tip="{x:Static resources:Language.ApplyControlView_ViewApplyChanges_ToolTip}"
+                                          HorizontalAlignment="Stretch"/>
+
             <!-- Apply button -->
             <Button Classes="Standard Primary"
                     HorizontalAlignment="Stretch"

diff --git a/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml b/src/NexusMods.App.UI/LeftMenu/Items/IconView.axaml
@@ -17,12 +17,15 @@
     <Design.DataContext>
         <items:IconDesignViewModel />
     </Design.DataContext>
+
+    <!-- NOTE(insomnious): This left hand menu item is getting overhauled in near future due to needing active states etc.
+    This is a temporary solution with a lot of inline styles to get back working again -->
 
-    <navigation:NavigationControl Classes="LeftMenuItem" 
-                                  x:Name="ItemButton" 
-                                  Width="184" 
-                                  Height="36"
-                                  Padding="8,0,8,0">
+    <navigation:NavigationControl x:Name="ItemButton"
+                                  Type="Tertiary"
+                                  Fill="None"
+                                  Padding="8,4"
+                                  HorizontalAlignment="Stretch">
         <Grid ColumnDefinitions="Auto, *, Auto">
             <icons:UnifiedIcon Grid.Column="0" x:Name="LeftIcon" />
             <TextBlock