Improve install app card UI (#4771)

Co-authored-by: Chris Titus <contact@christitus.com>
This commit is contained in:
Vyas Devgna
2026-07-11 11:21:59 -05:00
committed by GitHub
co-authored by Chris Titus
parent 0dcd361c51
commit 007995c112
3 changed files with 36 additions and 31 deletions
+5 -4
View File
@@ -1,9 +1,10 @@
{ {
"shared": { "shared": {
"AppEntryWidth": "200", "AppEntryWidth": "220",
"AppEntryFontSize": "11", "AppEntryFontSize": "13.2",
"AppEntryMargin": "1,0,1,0", "AppEntryIconSize": "28",
"AppEntryBorderThickness": "0", "AppEntryMargin": "3",
"AppEntryBorderThickness": "1",
"CustomDialogFontSize": "12", "CustomDialogFontSize": "12",
"CustomDialogFontSizeHeader": "14", "CustomDialogFontSizeHeader": "14",
"CustomDialogLogoSize": "25", "CustomDialogLogoSize": "25",
@@ -60,6 +60,30 @@ function Initialize-InstallAppEntry {
$borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor") $borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
}) })
$contentPanel = New-Object Windows.Controls.StackPanel
$contentPanel.Orientation = "Horizontal"
$contentPanel.VerticalAlignment = [Windows.VerticalAlignment]::Center
$icon = New-Object Windows.Controls.Grid
$icon.SetResourceReference([Windows.FrameworkElement]::WidthProperty, "AppEntryIconSize")
$icon.SetResourceReference([Windows.FrameworkElement]::HeightProperty, "AppEntryIconSize")
$icon.Margin = New-Object Windows.Thickness(0, 0, 8, 0)
$fallback = New-Object Windows.Controls.TextBlock
$fallback.Text = $Apps.$appKey.content.TrimStart(".").Substring(0, 1).ToUpper()
$fallback.FontWeight = "Bold"; $fallback.HorizontalAlignment = "Center"; $fallback.VerticalAlignment = "Center"
if ($Apps.$appKey.link) { $fallback.Visibility = "Collapsed" }
$fallback.SetResourceReference([Windows.Controls.TextBlock]::FontSizeProperty, "AppEntryFontSize")
$fallback.SetResourceReference([Windows.Controls.TextBlock]::ForegroundProperty, "ToggleButtonOnColor")
[void]$icon.Children.Add($fallback)
if ($Apps.$appKey.link) {
$logo = New-Object Windows.Controls.Image
$logo.Stretch = [Windows.Media.Stretch]::Uniform
$logo.Source = "https://www.google.com/s2/favicons?sz=64&domain_url=$([uri]::EscapeDataString($Apps.$appKey.link))"
$logo.Add_ImageFailed({ $this.Visibility = "Collapsed"; $this.Parent.Children[0].Visibility = "Visible" })
[void]$icon.Children.Add($logo)
}
[void]$contentPanel.Children.Add($icon)
# Create the TextBlock for the application name # Create the TextBlock for the application name
$appName = New-Object Windows.Controls.TextBlock $appName = New-Object Windows.Controls.TextBlock
$appName.Style = $sync.Form.Resources.AppEntryNameStyle $appName.Style = $sync.Form.Resources.AppEntryNameStyle
@@ -73,7 +97,8 @@ function Initialize-InstallAppEntry {
[void]$appName.Inlines.Add($fossRun) [void]$appName.Inlines.Add($fossRun)
} }
$checkBox.Content = $appName [void]$contentPanel.Children.Add($appName)
$checkBox.Content = $contentPanel
# Add accessibility properties to make the elements screen reader friendly # Add accessibility properties to make the elements screen reader friendly
$checkBox.SetValue([Windows.Automation.AutomationProperties]::NameProperty, $app.content) $checkBox.SetValue([Windows.Automation.AutomationProperties]::NameProperty, $app.content)
+5 -26
View File
@@ -84,8 +84,8 @@
<Style x:Key="AppEntryBorderStyle" TargetType="Border"> <Style x:Key="AppEntryBorderStyle" TargetType="Border">
<Setter Property="BorderBrush" Value="Gray"/> <Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="{DynamicResource AppEntryBorderThickness}"/> <Setter Property="BorderThickness" Value="{DynamicResource AppEntryBorderThickness}"/>
<Setter Property="CornerRadius" Value="2"/> <Setter Property="CornerRadius" Value="5"/>
<Setter Property="Padding" Value="{DynamicResource AppEntryMargin}"/> <Setter Property="Padding" Value="6,4"/>
<Setter Property="Width" Value="{DynamicResource AppEntryWidth}"/> <Setter Property="Width" Value="{DynamicResource AppEntryWidth}"/>
<Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Margin" Value="{DynamicResource AppEntryMargin}"/> <Setter Property="Margin" Value="{DynamicResource AppEntryMargin}"/>
@@ -100,30 +100,9 @@
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate TargetType="CheckBox"> <ControlTemplate TargetType="CheckBox">
<StackPanel Orientation="Horizontal"> <ContentPresenter Content="{TemplateBinding Content}"
<Grid Width="16" Height="16" Margin="0,0,8,0"> VerticalAlignment="Center"
<Border Name="CheckBoxBorder" HorizontalAlignment="Left"/>
BorderBrush="{DynamicResource MainForegroundColor}"
Background="{DynamicResource ButtonBackgroundColor}"
BorderThickness="1"
Width="12"
Height="12"
CornerRadius="2"/>
<Path Name="CheckMark"
Stroke="{DynamicResource ToggleButtonOnColor}"
StrokeThickness="2"
Data="M 2 8 L 6 12 L 14 4"
Visibility="Collapsed"/>
</Grid>
<ContentPresenter Content="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>