Merge pull request #1539 from Nexus-Mods/spine_left_men_styles

Spine Loadout ImageButtons Styling and Tooltip fix
Nexus-Mods · Jun 5, 2024 · 750e850 · 750e850
2 parents acfdaef + 87d7349
commit 750e850
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 98 deletions.
diff --git a/docs/development-guidelines/UIStylingGuidelines.md b/docs/development-guidelines/UIStylingGuidelines.md
@@ -29,15 +29,20 @@ Each setter element identifies the property that will be changed by name, and th
 
 !!! example
 
-    ```xml
-    <Style Selector="selector syntax">
-         <Setter Property="property name" Value="new value"/>
+```xml
+<Style Selector="selector syntax">
+    <Setter Property="property name" Value="new value"/>
          ...
-    </Style>
-    ```
+</Style>
+```
 
 The Avalonia UI style selector syntax is analogous to that used by CSS (cascading style sheets).
 
+!!! warning "If selectors are not made specific enough, ToolTips and Context menu contents will also be affected"
+
+Selectors should either use the `x:Name`, a Class or the hierarchical path of the control to be styled, 
+to avoid affecting other controls of the same type. 
+
 ### Example
 
 This is an example of how a style is written and applied to a `Control` element, with a style class to help selection:

diff --git a/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml b/src/NexusMods.App.UI/Controls/Spine/Buttons/Icon/IconButton.axaml
@@ -11,6 +11,7 @@
     xmlns:reactiveUi="http://reactiveui.net"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons">
+
     <Design.DataContext>
         <icon:IconButtonDesignViewModel />
     </Design.DataContext>
@@ -26,17 +27,16 @@
         <Button.Template>
             <ControlTemplate>
                 <Grid>
-                    <icons:UnifiedIcon
-                        Classes="HelpCircle"
-                        Size="20"
-                        HorizontalAlignment="Center"
-                        Margin="0"
-                        Padding="0"
-                        VerticalAlignment="Center" />
-                    <Border
-                        Classes="Rounded-full"
-                        Height="50"
-                        Width="50" />
+                    <icons:UnifiedIcon Classes="HelpCircle"
+                                       Size="20"
+                                       HorizontalAlignment="Center"
+                                       Margin="0"
+                                       Padding="0"
+                                       VerticalAlignment="Center" />
+                    <Border x:Name="IconButtonInnerBorder"
+                            Classes="Rounded-full"
+                            Height="50"
+                            Width="50" />
                 </Grid>
             </ControlTemplate>
         </Button.Template>

diff --git a/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml b/src/NexusMods.App.UI/Controls/Spine/Buttons/Image/ImageButton.axaml
@@ -1,6 +1,6 @@
 <reactiveUi:ReactiveUserControl
-    d:DesignHeight="90"
-    d:DesignWidth="90"
+    d:DesignHeight="150"
+    d:DesignWidth="150"
     mc:Ignorable="d"
     x:Class="NexusMods.App.UI.Controls.Spine.Buttons.Image.ImageButton"
     x:TypeArguments="buttons:IImageButtonViewModel"
@@ -15,27 +15,18 @@
         <buttons:ImageButtonDesignViewModel />
     </Design.DataContext>
 
-    <Button
-        Classes="Spine Image"
-        Height="64"
-        Width="64"
-        x:Name="Button">
+    <Button Classes="ImageButton"
+            x:Name="Button"
+            HorizontalAlignment="Stretch">
         <ToolTip.Tip>
-            <TextBlock x:Name="ToolTipTextBlock"/>
+            <TextBlock x:Name="ToolTipTextBlock" />
         </ToolTip.Tip>
-
-        <Grid>
-            <icons:UnifiedIcon
-                Size="50"
-                x:Name="Image">
-                <icons:UnifiedIcon.Clip>
-                    <EllipseGeometry Rect="0, 0, 50, 50" />
-                </icons:UnifiedIcon.Clip>
-            </icons:UnifiedIcon>
-            <Border
-                Height="50"
-                Width="50" />
-        </Grid>
-
+        <Border x:Name="ClippingBorder">
+            <Grid x:Name="InnerGrid">
+                <icons:UnifiedIcon x:Name="Image" />
+                <Rectangle x:Name="Mask" />
+                <Border x:Name="DecorationBorder" />
+            </Grid>
+        </Border>
     </Button>
 </reactiveUi:ReactiveUserControl>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Resources/Palette/Colors/ElementColors.axaml
@@ -27,10 +27,14 @@
     <!-- NeutralTranslucent -->
 
     <!-- Colors -->
-    <StaticResource x:Key="SurfaceTranslucentLow" ResourceKey="BrandTranslucentLight100" />
+    <StaticResource x:Key="SurfaceTranslucentLow" ResourceKey="BrandTranslucentLight50" />
+    <StaticResource x:Key="SurfaceTranslucentMid" ResourceKey="BrandTranslucentLight100" />
+    <StaticResource x:Key="SurfaceTranslucentHigh" ResourceKey="BrandTranslucentLight200" />
 
     <!-- SolidColorBrushes -->
     <SolidColorBrush x:Key="SurfaceTranslucentLowBrush" Color="{StaticResource SurfaceTranslucentLow}" />
+    <SolidColorBrush x:Key="SurfaceTranslucentMidBrush" Color="{StaticResource SurfaceTranslucentMid}" />
+    <SolidColorBrush x:Key="SurfaceTranslucentHighBrush" Color="{StaticResource SurfaceTranslucentHigh}" />
 
     <!-- TransparentBrush -->
     <!-- NOTE: Avalonia treats Transparent color as click through, so it can't be used correctly as a background color. -->