Merge pull request #1621 from insomnious/1608-premium-pill-topbar-change

Premium pill in topbar change
Nexus-Mods · Jun 17, 2024 · 94831c2 · 94831c2
2 parents 8eab2e2 + 6cf5482
commit 94831c2
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 13 deletions.
diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml b/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml
@@ -26,7 +26,7 @@
                    Margin="16,0"
                    x:Name="ActiveWorkspaceTitleTextBlock" />
 
-        <Menu Grid.Column="2" Margin="16 0">
+        <Menu Grid.Column="2" Margin="12 0">
             <MenuItem Classes="TopBarNoStyleMenuItem">
                 <MenuItem.Header>
                     <reactiveUi:ViewModelViewHost VerticalAlignment="Center" x:Name="AddPanelViewModelViewHost" />
@@ -60,15 +60,15 @@
                 <MenuItem Header="{x:Static resources:Language.ViewAppLogsMenuItem_Header}" x:Name="ViewAppLogsMenuItem"/>
                 <MenuItem Header="{x:Static resources:Language.GiveFeedbackMenuItem_Header}" x:Name="GiveFeedbackMenuItem"/>
             </MenuItem>
-
+            
             <MenuItem Classes="TopBarNoStyleMenuItem" x:Name="LoginMenuItem">
                 <MenuItem.Header>
-                    <Button Classes="Standard Primary" x:Name="LoginButton" Height="40">
+                    <Button Classes="Standard Primary" x:Name="LoginButton">
                         <TextBlock Text="{x:Static resources:Language.TopBarActions__LOG_IN}"/>
                     </Button>
                 </MenuItem.Header>
             </MenuItem>
-
+            
             <MenuItem Classes="TopBarMenuItem" Width="64" x:Name="AvatarMenuItem">
                 <MenuItem.Header>
                     <StackPanel Orientation="Horizontal" Spacing="0" Margin="6">
@@ -81,7 +81,17 @@
                 <MenuItem Header="{x:Static resources:Language.TopBar_AccountSettings}" x:Name="OpenNexusModsAccountSettingsMenuItem" />
                 <MenuItem Header="{x:Static resources:Language.TopBar_SignOut}" x:Name="SignOutMenuItem" />
             </MenuItem>
+
+            <MenuItem Classes="TopBarLabelMenuItem" x:Name="PremiumLabel" IsEnabled="False">
+                <MenuItem.Header>
+                    <TextBlock 
+                        Classes="TitleMDSemi" 
+                        VerticalAlignment="Center"
+                        Margin="0"
+                        Text="{x:Static resources:Language.Nexus_Premium_Status__Premium}"/>
+                </MenuItem.Header>
+            </MenuItem>
         </Menu>
-
+        
     </Grid>
 </reactiveUi:ReactiveUserControl>
diff --git a/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml.cs b/src/NexusMods.App.UI/Controls/TopBar/TopBarView.axaml.cs
@@ -50,7 +50,14 @@ public TopBarView()
 
             this.BindCommand(ViewModel, vm => vm.LogoutCommand, view => view.SignOutMenuItem)
                 .DisposeWith(d);
-
+
+            this.WhenAnyValue(
+                    x => x.ViewModel!.IsLoggedIn,
+                    x => x.ViewModel!.IsPremium,
+                    (isLoggedIn, isPremium) => isLoggedIn && isPremium
+                )
+                .BindToView (this, view => view.PremiumLabel.IsVisible)
+                .DisposeWith(d);
 
             this.OneWayBind(ViewModel, vm => vm.IsLoggedIn, view => view.LoginMenuItem.IsVisible, b => !b)
                 .DisposeWith(d);

diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/TopBar/TopBarStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/TopBar/TopBarStyles.axaml
@@ -9,23 +9,23 @@
     </Design.PreviewWith>
 
     <Styles.Resources>
-        <SolidColorBrush x:Key="White10" Color="White" Opacity="{StaticResource OpacityWeak}"/>
+        <SolidColorBrush x:Key="White10" Color="White" Opacity="{StaticResource OpacityWeak}" />
     </Styles.Resources>
 
     <!-- Style Definitions -->
     <Style Selector="ui|TopBarView">
         <Style Selector="^ Menu">
-            <Setter Property="Height" Value="40"/>
+            <Setter Property="Height" Value="40" />
 
             <Style Selector="^ /template/ ItemsPresenter#PART_ItemsPresenter StackPanel">
-                <Setter Property="Spacing" Value="{StaticResource Spacing-2}"/>
+                <Setter Property="Spacing" Value="{StaticResource Spacing-2}" />
             </Style>
 
             <Style Selector="^ Separator">
-                <Setter Property="Margin" Value="0"/>
-                <Setter Property="Width" Value="1"/>
-                <Setter Property="Height" Value="40"/>
-                <Setter Property="Background" Value="{StaticResource White10}"/>
+                <Setter Property="Margin" Value="0" />
+                <Setter Property="Width" Value="1" />
+                <Setter Property="Height" Value="40" />
+                <Setter Property="Background" Value="{StaticResource White10}" />
             </Style>
 
             <Style Selector="^ MenuItem.TopBarNoStyleMenuItem">
@@ -43,6 +43,25 @@
                 </Style>
             </Style>
 
+            <Style Selector="^ MenuItem.TopBarLabelMenuItem">
+                <Setter Property="Padding" Value="0" />
+
+                <Style Selector="^ /template/ Border#PART_LayoutRoot">
+                    <Setter Property="Background" Value="Transparent" />
+                    <Setter Property="CornerRadius" Value="0" />
+                    <Setter Property="BorderThickness" Value="0" />
+                    <Setter Property="BorderBrush" Value="Transparent" />
+
+                    <Style Selector="^:disabled">
+                        <Setter Property="Opacity" Value="1" />
+                    </Style>
+                </Style>
+
+                <Style Selector="^ TextBlock">
+                    <Setter Property="Foreground" Value="{StaticResource NeutralStrong}" />
+                </Style>
+            </Style>
+
             <Style Selector="^ MenuItem.TopBarMenuItem">
                 <Setter Property="Width" Value="40" />
                 <Setter Property="Height" Value="40" />
@@ -59,6 +78,15 @@
                     <Setter Property="Foreground" Value="{StaticResource NeutralSubdued}" />
                 </Style>
 
+                <!-- avatar needs to be round -->
+                <Style Selector="^ icons|UnifiedIcon#AvatarIcon Image">
+                    <Setter Property="Clip">
+                        <Setter.Value>
+                            <EllipseGeometry Center="14,14" RadiusX="14" RadiusY="14" />
+                        </Setter.Value>
+                    </Setter>
+                </Style>
+
                 <!-- Hover state (yes, this is using :selected) -->
                 <Style Selector="^:selected">
                     <Style Selector="^ /template/ Border#PART_LayoutRoot">