Refactor app recommendation visuals to use shapes for improved clarity (#788)

This commit is contained in:
Jeffrey
2026-10-07 23:48:19 +02:00
committed by GitHub
parent 741f80d0b8
commit 1b84f2d6fb
2 changed files with 32 additions and 13 deletions
+11 -6
View File
@@ -157,18 +157,23 @@
<Setter Property="Margin" Value="8,0,8,0"/>
</Style>
<!-- Column widths for the app table rows and header (dot | name | description | id) -->
<!-- Column widths for the app table rows and header (indicator | name | description | id) -->
<GridLength x:Key="AppTableDotColWidth">16</GridLength>
<GridLength x:Key="AppTableNameColWidth">180</GridLength>
<GridLength x:Key="AppTableDescColWidth">1*</GridLength>
<GridLength x:Key="AppTableIdColWidth">261</GridLength>
<!-- Recommendation dot shape style for app table rows -->
<Style x:Key="AppRecommendationDotStyle" TargetType="Ellipse">
<!-- Recommendation indicator style shared by circles, diamonds, and triangles -->
<Style x:Key="AppRecommendationIndicatorStyle" TargetType="Shape">
<Setter Property="Width" Value="9"/>
<Setter Property="Height" Value="9"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="1"/>
</Setter.Value>
</Setter>
</Style>
<!-- Container style for each dynamically-created app table row -->
@@ -184,7 +189,7 @@
<SolidColorBrush x:Key="ValidationErrorColor" Color="#c42b1c"/>
<SolidColorBrush x:Key="ValidationSuccessColor" Color="#28a745"/>
<!-- App recommendation dot / legend colors -->
<!-- App recommendation indicator / legend colors -->
<SolidColorBrush x:Key="AppRecommendationSafeColor" Color="#4CAF50"/>
<SolidColorBrush x:Key="AppRecommendationOptionalColor" Color="#FFC107"/>
<SolidColorBrush x:Key="AppRecommendationUnsafeColor" Color="#F44336"/>
@@ -710,12 +715,12 @@
</StackPanel>
<!-- Optional (default) -->
<StackPanel Orientation="Horizontal" Margin="0,0,16,0" ToolTip="%LANG:AppLegendOptionalTooltip%">
<Ellipse Width="9" Height="9" Fill="{DynamicResource AppRecommendationOptionalColor}" VerticalAlignment="Center" Margin="0,0,6,0"/>
<Polygon Points="4.5,0 9,4.5 4.5,9 0,4.5" Stretch="Fill" Width="9" Height="9" Fill="{DynamicResource AppRecommendationOptionalColor}" VerticalAlignment="Center" Margin="0,0,6,0"/>
<TextBlock Text="%LANG:AppLegendOptional%" Foreground="{DynamicResource AppFgColor}" FontSize="12" VerticalAlignment="Center" Opacity="0.8"/>
</StackPanel>
<!-- Not Recommended (unsafe) -->
<StackPanel Orientation="Horizontal" ToolTip="%LANG:AppLegendNotRecommendedTooltip%">
<Ellipse Width="9" Height="9" Fill="{DynamicResource AppRecommendationUnsafeColor}" VerticalAlignment="Center" Margin="0,0,6,0"/>
<Polygon Points="0,9 4.5,0 9,9" Stretch="Fill" Width="9" Height="9" Fill="{DynamicResource AppRecommendationUnsafeColor}" VerticalAlignment="Center" Margin="0,0,6,0"/>
<TextBlock Text="%LANG:AppLegendNotRecommended%" Foreground="{DynamicResource AppFgColor}" FontSize="12" VerticalAlignment="Center" Opacity="0.8"/>
</StackPanel>
</StackPanel>
+21 -7
View File
@@ -431,7 +431,7 @@ function Add-AppsToMainWindow {
$checkbox.IsChecked = $app.IsChecked
$checkbox.Style = $Window.Resources['AppsPanelCheckBoxStyle']
# Build table row: Recommendation dot | Name | Description | App ID
# Build table row: Recommendation indicator | Name | Description | App ID
$row = New-Object System.Windows.Controls.Grid
$row.Style = $Window.Resources['AppTableRowStyle']
$c0 = New-Object System.Windows.Controls.ColumnDefinition; $c0.Width = $Window.Resources['AppTableDotColWidth']
@@ -441,16 +441,30 @@ function Add-AppsToMainWindow {
$row.ColumnDefinitions.Add($c0); $row.ColumnDefinitions.Add($c1)
$row.ColumnDefinitions.Add($c2); $row.ColumnDefinitions.Add($c3)
$dot = New-Object System.Windows.Shapes.Ellipse
$dot.Style = $Window.Resources['AppRecommendationDotStyle']
$dot.Fill = switch ($app.Recommendation) { 'safe' { $brushSafe } 'unsafe' { $brushUnsafe } default { $brushDefault } }
$indicator = switch ($app.Recommendation) {
'safe' { New-Object System.Windows.Shapes.Ellipse }
'unsafe' {
$triangle = New-Object System.Windows.Shapes.Polygon
$triangle.Points = [System.Windows.Media.PointCollection]::Parse('0,9 4.5,0 9,9')
$triangle.Stretch = 'Fill'
$triangle
}
default {
$diamond = New-Object System.Windows.Shapes.Polygon
$diamond.Points = [System.Windows.Media.PointCollection]::Parse('4.5,0 9,4.5 4.5,9 0,4.5')
$diamond.Stretch = 'Fill'
$diamond
}
}
$indicator.Style = $Window.Resources['AppRecommendationIndicatorStyle']
$indicator.Fill = switch ($app.Recommendation) { 'safe' { $brushSafe } 'unsafe' { $brushUnsafe } default { $brushDefault } }
$recommendationKey = switch ($app.Recommendation) {
'safe' { 'AppLegendRecommendedTooltip' }
'unsafe' { 'AppLegendNotRecommendedTooltip' }
default { 'AppLegendOptionalTooltip' }
}
$dot.SetResourceReference([System.Windows.FrameworkElement]::ToolTipProperty, "Language_$recommendationKey")
[System.Windows.Controls.Grid]::SetColumn($dot, 0)
$indicator.SetResourceReference([System.Windows.FrameworkElement]::ToolTipProperty, "Language_$recommendationKey")
[System.Windows.Controls.Grid]::SetColumn($indicator, 0)
$tbName = New-Object System.Windows.Controls.TextBlock
$tbName.Text = $app.FriendlyName
@@ -469,7 +483,7 @@ function Add-AppsToMainWindow {
$tbId.ToolTip = $app.AppIdDisplay
[System.Windows.Controls.Grid]::SetColumn($tbId, 3)
$row.Children.Add($dot) | Out-Null
$row.Children.Add($indicator) | Out-Null
$row.Children.Add($tbName) | Out-Null
$row.Children.Add($tbDesc) | Out-Null
$row.Children.Add($tbId) | Out-Null