Re-Redesign of the Install Tab (#3350)

* Initial Remove Expanded View

* more cleanup

* Add word wrapping for Tooltips

* Update tooltip colors in themes and XAML styles

* Rename Properties for consistency

* More Cleanup, and simplification. Also added support for screenreaders

* Remove unused variables and shorten window naming

* Rename Invoke-WPFUIApps to Initialize-WPFUI and update function calls for consistency

* Rename Invoke-WPFUIApps.ps1 to Initialize-WPFUI.ps1

* Add TODO comments for sidebar UI generation in Initialize-WPFUI function
This commit is contained in:
Martin Wiethan
2025-05-12 22:45:57 +02:00
committed by GitHub
parent 14e761f438
commit 962b18e8fa
22 changed files with 200 additions and 553 deletions

View File

@ -12,10 +12,23 @@ function Find-AppsByNameOrDescription {
)
# Reset the visibility if the search string is empty or the search is cleared
if ([string]::IsNullOrWhiteSpace($SearchString)) {
Set-CategoryVisibility -Category "*"
return
$sync.ItemsControl.Items | ForEach-Object {
$_.Visibility = [Windows.Visibility]::Visible
$_.Children | ForEach-Object {
if ($null -ne $_) {
$_.Visibility = [Windows.Visibility]::Visible
}
}
}
return
}
$sync.ItemsControl.Items | ForEach-Object {
# Ensure ToggleButtons remain visible
if ($_.Tag -like "CategoryToggleButton") {
$_.Visibility = [Windows.Visibility]::Visible
return
}
# Hide all CategoryWrapPanel and ToggleButton
$_.Visibility = [Windows.Visibility]::Collapsed
if ($_.Tag -like "CategoryWrapPanel_*") {

View File

@ -45,7 +45,6 @@ function Find-TweaksByNameOrDescription {
# Search for matching tweaks when search string is not null
$tweakspanel = $sync.Form.FindName("tweakspanel")
$matchFound = $false
$tweakspanel.Children | ForEach-Object {
$categoryBorder = $_
@ -96,9 +95,6 @@ function Find-TweaksByNameOrDescription {
# Set the visibility based on if any item matched
$categoryBorder.Visibility = if ($categoryVisible) { [Windows.Visibility]::Visible } else { [Windows.Visibility]::Collapsed }
if ($categoryVisible) {
$matchFound = $true
}
}
}
}

View File

@ -15,14 +15,11 @@ function Initialize-InstallAppEntry {
# Create the outer Border for the application type
$border = New-Object Windows.Controls.Border
$border.Style = $sync.Form.Resources.AppTileBorderStyle
$border.Style = $sync.Form.Resources.AppEntryBorderStyle
$border.Tag = $appKey
$border.ToolTip = $Apps.$appKey.description
$border.Add_MouseUp({
if ($_.ChangedButton -eq [System.Windows.Input.MouseButton]::Right) {
Invoke-WPFPresets -imported $true -checkboxfilterpattern "WPFInstall*";
}
$childCheckbox = ($this.Child.Children | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
$childCheckbox = ($this.Child | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
$childCheckBox.isChecked = -not $childCheckbox.IsChecked
})
$border.Add_MouseEnter({
@ -35,101 +32,35 @@ function Initialize-InstallAppEntry {
$this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
}
})
# Create a DockPanel inside the Border
$dockPanel = New-Object Windows.Controls.DockPanel
$dockPanel.LastChildFill = $true
$border.Child = $dockPanel
# Create the CheckBox, vertically centered
$checkBox = New-Object Windows.Controls.CheckBox
$checkBox.Name = $appKey
$checkbox.Style = $sync.Form.Resources.AppTileCheckboxStyle
$checkbox.Style = $sync.Form.Resources.AppEntryCheckboxStyle
$checkbox.Add_Checked({
Invoke-WPFSelectedAppsUpdate -type "Add" -checkbox $this
$borderElement = $this.Parent.Parent
$borderElement = $this.Parent
$borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallSelectedColor")
})
$checkbox.Add_Unchecked({
Invoke-WPFSelectedAppsUpdate -type "Remove" -checkbox $this
$borderElement = $this.Parent.Parent
$borderElement = $this.Parent
$borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
})
# Create a StackPanel for the image and name
$imageAndNamePanel = New-Object Windows.Controls.StackPanel
$imageAndNamePanel.Orientation = "Horizontal"
$imageAndNamePanel.VerticalAlignment = "Center"
# Create the Image and set a placeholder
$image = New-Object Windows.Controls.Image
# $image.Name = "wpfapplogo" + $App.Name
$image.Style = $sync.Form.Resources.AppTileImageStyle
$image.Source = $noimage # Ensure $noimage is defined in your script
$imageAndNamePanel.Children.Add($image) | Out-Null
# Create the TextBlock for the application name
$appName = New-Object Windows.Controls.TextBlock
$appName.Style = $sync.Form.Resources.AppTileNameStyle
$appName.Style = $sync.Form.Resources.AppEntryNameStyle
$appName.Text = $Apps.$appKey.content
$imageAndNamePanel.Children.Add($appName) | Out-Null
# Add the image and name panel to the Checkbox
$checkBox.Content = $imageAndNamePanel
# Add the name to the Checkbox
$checkBox.Content = $appName
# Add the checkbox to the DockPanel
[Windows.Controls.DockPanel]::SetDock($checkBox, [Windows.Controls.Dock]::Left)
$dockPanel.Children.Add($checkBox) | Out-Null
# Create the StackPanel for the buttons and dock it to the right
$buttonPanel = New-Object Windows.Controls.StackPanel
$buttonPanel.Style = $sync.Form.Resources.AppTileButtonPanelStyle
[Windows.Controls.DockPanel]::SetDock($buttonPanel, [Windows.Controls.Dock]::Right)
# Define the button properties
$buttons = @(
[PSCustomObject]@{ Name = "Install"; Description = "Install or Upgrade the application"; Tooltip = "Install or Upgrade the application"; Icon = [char]0xE118 },
[PSCustomObject]@{ Name = "Uninstall"; Description = "Uninstall the application"; Tooltip = "Uninstall the application"; Icon = [char]0xE74D },
[PSCustomObject]@{ Name = "Info"; Description = "Open the application's website in your default browser"; Tooltip = "Open the application's website in your default browser"; Icon = [char]0xE946 }
)
# Iterate over each button and create it
foreach ($button in $buttons) {
$newButton = New-Object Windows.Controls.Button
$newButton.Style = $sync.Form.Resources.AppTileButtonStyle
$newButton.Content = $button.Icon
$newButton.ToolTip = $button.Tooltip
$buttonPanel.Children.Add($newButton) | Out-Null
switch ($button.Name) {
"Install" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFInstall -PackagesToInstall $appObject
})
}
"Uninstall" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Invoke-WPFUnInstall -PackagesToUninstall $appObject
})
}
"Info" {
$newButton.Add_Click({
$appKey = $this.Parent.Parent.Parent.Tag
$appObject = $sync.configs.applicationsHashtable.$appKey
Start-Process $appObject.link
})
}
}
}
# Add the button panel to the DockPanel
$dockPanel.Children.Add($buttonPanel) | Out-Null
# Add accessibility properties to make the elements screen reader friendly
$checkBox.SetValue([Windows.Automation.AutomationProperties]::NameProperty, $Apps.$appKey.content)
$border.SetValue([Windows.Automation.AutomationProperties]::NameProperty, $Apps.$appKey.content)
$border.Child = $checkBox
# Add the border to the corresponding Category
$TargetElement.Children.Add($border) | Out-Null
return $checkbox

View File

@ -10,27 +10,36 @@
#>
param($TargetElement)
$targetGrid = $sync.Form.FindName($TargetElement)
$null = $targetGrid.Children.Clear()
# Create the outer Border for the aren where the apps will be placed
$Border = New-Object Windows.Controls.Border
$Border.VerticalAlignment = "Stretch"
$Border.SetResourceReference([Windows.Controls.Control]::StyleProperty, "BorderStyle")
# Add a ScrollViewer, because the ItemsControl does not support scrolling by itself
$scrollViewer = New-Object Windows.Controls.ScrollViewer
$scrollViewer.VerticalScrollBarVisibility = 'Auto'
$scrollViewer.HorizontalAlignment = 'Stretch'
$scrollViewer.VerticalAlignment = 'Stretch'
$scrollViewer.CanContentScroll = $true
## Create the ItemsControl, which will be the parent of all the app entries
$itemsControl = New-Object Windows.Controls.ItemsControl
$itemsControl.HorizontalAlignment = 'Stretch'
$itemsControl.VerticalAlignment = 'Stretch'
# Enable virtualization for the ItemsControl to improve performance (It's hard to test if this is actually working, so if you know what you're doing, please check this)
$itemsPanelTemplate = New-Object Windows.Controls.ItemsPanelTemplate
$factory = New-Object Windows.FrameworkElementFactory ([Windows.Controls.VirtualizingStackPanel])
$itemsPanelTemplate.VisualTree = $factory
$itemsControl.ItemsPanel = $itemsPanelTemplate
$itemsControl.SetValue([Windows.Controls.VirtualizingStackPanel]::IsVirtualizingProperty, $true)
$itemsControl.SetValue([Windows.Controls.VirtualizingStackPanel]::VirtualizationModeProperty, [Windows.Controls.VirtualizationMode]::Recycling)
$scrollViewer.Content = $itemsControl
[Windows.Controls.DockPanel]::SetDock($scrollViewer, [Windows.Controls.Dock]::Bottom)
$null = $TargetElement.Children.Add($scrollViewer)
$Border.Child = $scrollViewer
$null = $targetGrid.Children.Add($Border)
return $itemsControl
}

View File

@ -1,28 +0,0 @@
function Initialize-InstallAppsMainElement {
<#
.SYNOPSIS
Clears the given WPF Grid and creates a [Windows.Controls.Border] containing a [Windows.Controls.StackPanel]
Used to as part of the Install Tab UI generation
.PARAMETER TargetGridName
The WPF Grid name
.OUTPUTS
Returns the created [Windows.Controls.StackPanel] element
#>
param(
[Parameter(Mandatory)]
[string]$TargetGridName
)
$targetGrid = $sync.Form.FindName($TargetGridName)
$null = $targetGrid.Children.Clear()
$Border = New-Object Windows.Controls.Border
$Border.VerticalAlignment = "Stretch"
$Border.SetResourceReference([Windows.Controls.Control]::StyleProperty, "BorderStyle")
$dockPanel = New-Object Windows.Controls.DockPanel
$Border.Child = $dockPanel
$null = $targetGrid.Children.Add($Border)
return $dockPanel
}

View File

@ -21,61 +21,36 @@ function Initialize-InstallCategoryAppList {
[Windows.Controls.ItemsControl]$TargetElement
)
$toggleButton = New-Object Windows.Controls.Primitives.ToggleButton
$toggleButton = New-Object Windows.Controls.Label
$toggleButton.Content = "$Category"
$toggleButton.Tag = "CategoryToggleButton"
$toggleButton.Cursor = [System.Windows.Input.Cursors]::Hand
$toggleButton.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CategoryToggleButtonStyle")
$sync.Buttons.Add($toggleButton)
$toggleButton.Add_Checked({
# Clear the search bar when a category is clicked
$sync.SearchBar.Text = ""
Set-CategoryVisibility -Category $this.Content -overrideState Expand
})
$toggleButton.Add_Unchecked({
Set-CategoryVisibility -Category $this.Content -overrideState Collapse
})
$sync.$Category = $Category
$null = $TargetElement.Items.Add($toggleButton)
}
$loadingLabel = New-Object Windows.Controls.Label
$loadingLabel.Content = "Loading, please wait..."
$loadingLabel.HorizontalAlignment = "Center"
$loadingLabel.VerticalAlignment = "Center"
$loadingLabel.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "HeaderFontSize")
$loadingLabel.FontWeight = [Windows.FontWeights]::Bold
$loadingLabel.Foreground = [Windows.Media.Brushes]::Gray
$sync.LoadingLabel = $loadingLabel
$TargetElement.Items.Clear()
$null = $TargetElement.Items.Add($sync.LoadingLabel)
# Use the Dispatcher to make sure the Loading message is shown before the logic loading the apps starts, and only is removed when the loading is complete and the apps are added to the UI
$TargetElement.Dispatcher.Invoke([System.Windows.Threading.DispatcherPriority]::Background, [action]{
$TargetElement.Items.Clear() # Remove the loading message
# Pre-group apps by category
$appsByCategory = @{}
foreach ($appKey in $Apps.Keys) {
$category = $Apps.$appKey.Category
if (-not $appsByCategory.ContainsKey($category)) {
$appsByCategory[$category] = @()
}
$appsByCategory[$category] += $appKey
# Pre-group apps by category
$appsByCategory = @{}
foreach ($appKey in $Apps.Keys) {
$category = $Apps.$appKey.Category
if (-not $appsByCategory.ContainsKey($category)) {
$appsByCategory[$category] = @()
}
foreach ($category in $($appsByCategory.Keys | Sort-Object)) {
Add-Category -Category $category -TargetElement $TargetElement
$wrapPanel = New-Object Windows.Controls.WrapPanel
$wrapPanel.Orientation = "Horizontal"
$wrapPanel.HorizontalAlignment = "Stretch"
$wrapPanel.VerticalAlignment = "Center"
$wrapPanel.Margin = New-Object Windows.Thickness(0, 0, 0, 20)
$wrapPanel.Visibility = [Windows.Visibility]::Collapsed
$wrapPanel.Tag = "CategoryWrapPanel_$category"
$null = $TargetElement.Items.Add($wrapPanel)
$appsByCategory[$category] |Sort-Object | ForEach-Object {
$sync.$_ = $(Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_)
$appsByCategory[$category] += $appKey
}
foreach ($category in $($appsByCategory.Keys | Sort-Object)) {
Add-Category -Category $category -TargetElement $TargetElement
$wrapPanel = New-Object Windows.Controls.WrapPanel
$wrapPanel.Orientation = "Horizontal"
$wrapPanel.HorizontalAlignment = "Stretch"
$wrapPanel.VerticalAlignment = "Center"
$wrapPanel.Margin = New-Object Windows.Thickness(0, 0, 0, 20)
$wrapPanel.Visibility = [Windows.Visibility]::Visible
$wrapPanel.Tag = "CategoryWrapPanel_$category"
$null = $TargetElement.Items.Add($wrapPanel)
$appsByCategory[$category] |Sort-Object | ForEach-Object {
$sync.$_ = $(Initialize-InstallAppEntry -TargetElement $wrapPanel -AppKey $_)
}
}
})
}

View File

@ -1,78 +0,0 @@
function Initialize-InstallHeader {
<#
.SYNOPSIS
Creates the Multi Selection Header Elements on the Install Tab
Used to as part of the Install Tab UI generation
.PARAMETER TargetElement
The Parent Element into which the Header should be placed
#>
param($TargetElement)
function New-WPFButton {
param (
[string]$Name,
[string]$Content
)
$button = New-Object Windows.Controls.Button
$button.Name = $Name
$button.Content = $Content
$button.Margin = New-Object Windows.Thickness(2)
$button.HorizontalAlignment = "Stretch"
return $button
}
$wrapPanelTop = New-Object Windows.Controls.WrapPanel
$wrapPanelTop.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "MainBackgroundColor")
$wrapPanelTop.HorizontalAlignment = "Left"
$wrapPanelTop.VerticalAlignment = "Top"
$wrapPanelTop.Orientation = "Horizontal"
$wrapPanelTop.SetResourceReference([Windows.Controls.Control]::MarginProperty, "TabContentMargin")
$buttonConfigs = @(
@{Name="WPFInstall"; Content="Install/Upgrade Selected"},
@{Name="WPFInstallUpgrade"; Content="Upgrade All"},
@{Name="WPFUninstall"; Content="Uninstall Selected"},
@{Name="WPFselectedAppsButton"; Content="Selected Apps: 0"}
)
foreach ($config in $buttonConfigs) {
$button = New-WPFButton -Name $config.Name -Content $config.Content
$null = $wrapPanelTop.Children.Add($button)
$sync[$config.Name] = $button
}
$selectedAppsPopup = New-Object Windows.Controls.Primitives.Popup
$selectedAppsPopup.IsOpen = $false
$selectedAppsPopup.PlacementTarget = $sync.WPFselectedAppsButton
$selectedAppsPopup.Placement = [System.Windows.Controls.Primitives.PlacementMode]::Bottom
$selectedAppsPopup.AllowsTransparency = $true
$selectedAppsBorder = New-Object Windows.Controls.Border
$selectedAppsBorder.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "MainBackgroundColor")
$selectedAppsBorder.SetResourceReference([Windows.Controls.Control]::BorderBrushProperty, "MainForegroundColor")
$selectedAppsBorder.SetResourceReference([Windows.Controls.Control]::BorderThicknessProperty, "ButtonBorderThickness")
$selectedAppsBorder.Width = 200
$selectedAppsBorder.Padding = 5
$selectedAppsPopup.Child = $selectedAppsBorder
$sync.selectedAppsPopup = $selectedAppsPopup
$sync.selectedAppsstackPanel = New-Object Windows.Controls.StackPanel
$selectedAppsBorder.Child = $sync.selectedAppsstackPanel
# Toggle selectedAppsPopup open/close with button
$sync.WPFselectedAppsButton.Add_Click({
$sync.selectedAppsPopup.IsOpen = -not $sync.selectedAppsPopup.IsOpen
})
# Close selectedAppsPopup when mouse leaves both button and selectedAppsPopup
$sync.WPFselectedAppsButton.Add_MouseLeave({
if (-not $sync.selectedAppsPopup.IsMouseOver) {
$sync.selectedAppsPopup.IsOpen = $false
}
})
$selectedAppsPopup.Add_MouseLeave({
if (-not $sync.WPFselectedAppsButton.IsMouseOver) {
$sync.selectedAppsPopup.IsOpen = $false
}
})
[Windows.Controls.DockPanel]::SetDock($wrapPanelTop, [Windows.Controls.Dock]::Top)
$null = $TargetElement.Children.Add($wrapPanelTop)
}

View File

@ -1,44 +0,0 @@
function Set-CategoryVisibility {
<#
.SYNOPSIS
Used to expand or collapse categories and corresponding apps on the install tab
.PARAMETER Category
Can eigther be a specific category name like "Browsers" OR "*" to affect all categories at once
.PARAMETER overrideState
"Expand" => expands the corresponding elements
"Collapse" => collapses the corresponding elements
N/A => if compactView is active expand, otherwise collapse elements
#>
param(
[Parameter(Mandatory=$true)]
[string]$Category,
[ValidateSet("Expand", "Collapse")]
[string]$overrideState
)
switch ($overrideState) {
"Expand" {$state = $true}
"Collapse" {$state = $false}
default {$state = $sync.CompactView}
}
# If all the Categories are affected, update the Checked state of the ToggleButtons.
# Otherwise, the state is not synced when toggling between the display modes
if ($category -eq "*") {
$items = $sync.ItemsControl.Items | Where-Object {($_.Tag -like "CategoryWrapPanel_*")}
$sync.ItemsControl.Items | Where-Object {($_.Tag -eq "CategoryToggleButton")} | Foreach-Object { $_.Visibility = [Windows.Visibility]::Visible; $_.IsChecked = $state }
} else {
$items = $sync.ItemsControl.Items | Where-Object {($_.Tag -eq "CategoryWrapPanel_$Category")}
}
$elementVisibility = if ($state -eq $true) {[Windows.Visibility]::Visible} else {[Windows.Visibility]::Collapsed}
$items | ForEach-Object {
$_.Visibility = $elementVisibility
}
$items.Children | ForEach-Object {
$_.Visibility = $elementVisibility
}
}

View File

@ -1,54 +0,0 @@
function Show-OnlyCheckedApps {
<#
.SYNOPSIS
Toggle between showing only the actively selected apps on the Install Tab and hiding everything else and displaying every app.
If no apps are selected, dont do anything
.PARAMETER appKeys
Expects a List of appKeys that are selected at the moment
If not provided, or empty, the function exits without any visual change to the ui
.EXAMPLE
Show-OnlyCheckedApps -appKeys $sync.SelectedApps
Show-OnlyCheckedApps -appKeys ("WPFInstallChrome", "WPFInstall7zip")
#>
param (
[Parameter(Mandatory=$false)]
[String[]]$appKeys
)
# If no apps are selected, do not allow switching to show only selected
if (($false -eq $sync.ShowOnlySelected) -and ($appKeys.Length -eq 0)) {
Write-Host "No apps selected"
$sync.wpfselectedfilter.IsChecked = $false
return
}
$sync.ShowOnlySelected = -not $sync.ShowOnlySelected
if ($sync.ShowOnlySelected) {
$sync.Buttons | Where-Object {$_.Name -like "ShowSelectedAppsButton"} | ForEach-Object {
$_.Content = "Show All"
}
$sync.ItemsControl.Items | Foreach-Object {
# Search for App Container and set them to visible
if ($_.Tag -like "CategoryWrapPanel_*") {
$_.Visibility = [Windows.Visibility]::Visible
# Iterate through all the apps in the container and set them to visible if they are in the appKeys array
$_.Children | ForEach-Object {
if ($appKeys -contains $_.Tag) {
$_.Visibility = [Windows.Visibility]::Visible
}
else {
$_.Visibility = [Windows.Visibility]::Collapsed
}
}
}
else {
# Set all other items to collapsed
$_.Visibility = [Windows.Visibility]::Collapsed
}
}
} else {
$sync.Buttons | Where-Object {$_.Name -like "ShowSelectedAppsButton"} | ForEach-Object {
$_.Content = "Show Selected"
}
Set-CategoryVisibility -Category "*"
}
}