[UI/UX] Refractor Install Tab (#2859)

* initial visual implementation

- remove idiotic border logic from Invoke-WPFUIElements
- add "application" type & style
- add "radiobutton" type & style
- remove prefer choco checkbox (did not modify logic outside of xaml, so i currently get errors due to that)

* add image support via choco db

- add image support via choco db
- backup image should be taken from unigetui db
- backup backup image is some random package one rn

* add compatibility for every app

* performance improvements

- move get logo to runspace (not working rn)
- readd choco checkbox to mute errors

* add border name

* fix scrollviewer & reimplement logo logic into ui elements

* noimage fix

* add notes

* cleanup & remove nav from search effects

* add button action

* rename buttons

* add sort by options

* move scrollviewer & app buttons into uielements logic

* format logic for app action buttons

* fix app action button logic & move get & clear to sidepanel

* change category of new buttons

* add virtualisation & layouting fixes

- commented out prefer choco logic
- add virtualisation
- layouting improvements

* fix radiobuttons

* LETS GOOO  (#12)

* Add Selected Apps Label, Reshuffel the nesting of the checkbox and the label to be able to reference the name from the actual checkbox

* Add visual selection and allow click on the whole app section

* Fix Theme definition to work with theme change

* Fix Highlight on if label or icon is clicked

* change applications.json to powershell object list and refactor UI Creation logic

* Optimization and Add Collapsable Categories

* Add Button functionality for install, uninstall, info, install selected, uninstall selected, clear and implement search

* Rest application.json to Main

* Reset Compile to main

* Pretty much revamp_apps but without changes to applications.json

* Small fixes

* Add Get-Installed Loading Indicator + small fixes

* Re-Add Choco Preference

* Remove Logic from Invoke-WPFUIElements that is Moved to Invoke-WPFUIApps

* Remove Alphabetical List, Sort Apps inside Category Alphabetically

* Small fixes to the Get-Installed function and formatting stuff

* Style for Hidden Checkbox but visible Content

* Hotfix for Category Expansion during search

* Replace Category Label with ToggleButton, Fix Search Bugs

* First Try at implementing a Compact Mode for the App page

* Fix Whitespace when using Search

* Keep the search status when switching between compact and full view

* Fix weird buggy behaviour in regards to switching the Display Mode and using Show-SelectedOnly

* Improve Togglebutton

- add initial implementation of togglebutton style
- add togglebuttons to appnavigation.json
- refractor UI element creation for Togglebutton
- commit preprocessing changes

* Togglebutton fixes

- move dot to the right in style
- cleanup code
- fix arrangement of content

* Add logic to the new ToggleButtons in the sidebar of the install tab and remove old buttons

* reorder buttons & fix Togglebutton toggling if action not possible

- reorder getinstalled and clearselection
- set togglebutton back if no app is selected

* Slight modificatoin to togglebutton style & fix sidebar width

* Add hover effect for the app tiles

* ToggleButtonStyle animation

- add hover animation to white dot
- remove IsPressed trigger
- improve some comments

* disable show selected filter on clear selection

* Add a Popup Dropdown for Selected Apps with the ability to deselect them

* Split up the functions to seperate files like the rest of the repo

* Fix Bug where Scrollviewer dosnt work

* disable autofallback checkbox

* run preprocessing

* remove installation scope

- remove all 3 radiobuttons from appnavigation.json

* remove scrollviewer from WPFUIElements

* toggle showselected on GetInstalled

* remove unused autofallback

---------

Co-authored-by: Martin Wiethan <47688561+Marterich@users.noreply.github.com>
Co-authored-by: Chris Titus <contact@christitus.com>
This commit is contained in:
MyDrift
2025-03-01 20:50:12 +01:00
committed by GitHub
parent 1ae16f6f38
commit 8a0e0c7715
23 changed files with 1105 additions and 229 deletions

View File

@ -197,6 +197,45 @@
<Setter Property="Background" Value="{DynamicResource LabelBackgroundColor}"/>
<Setter Property="FontFamily" Value="{DynamicResource FontFamily}"/>
</Style>
<!-- Category Toggle Button Style for the Apps Window-->
<Style x:Key="CategoryToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Foreground" Value="{DynamicResource LabelboxForegroundColor}"/>
<Setter Property="Background" Value="{DynamicResource MainBackgroundColor}"/>
<Setter Property="FontFamily" Value="{DynamicResource HeaderFontFamily}"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeHeading}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="10,2,10,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Background="{TemplateBinding Background}"
BorderBrush="{DynamicResource BorderColor}"
BorderThickness="0"
CornerRadius="{DynamicResource ButtonCornerRadius}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
<TextBlock x:Name="PrefixTextBlock"/>
<ContentPresenter Content="{TemplateBinding Content}" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="PrefixTextBlock" Property="Text" Value="[-] "/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="PrefixTextBlock" Property="Text" Value="[+] "/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundMouseoverColor}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- TextBlock template -->
<Style TargetType="TextBlock">
@ -298,6 +337,103 @@
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Margin" Value="{DynamicResource ButtonMargin}"/>
<Setter Property="Foreground" Value="{DynamicResource ButtonForegroundColor}"/>
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundColor}"/>
<Setter Property="Height" Value="{DynamicResource ButtonHeight}"/>
<Setter Property="Width" Value="{DynamicResource ButtonWidth}"/>
<Setter Property="FontSize" Value="{DynamicResource ButtonFontSize}"/>
<Setter Property="FontFamily" Value="{DynamicResource FontFamily}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border x:Name="BackgroundBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{DynamicResource ButtonBorderThickness}"
CornerRadius="{DynamicResource ButtonCornerRadius}">
<Grid>
<!-- Toggle Dot Background -->
<Ellipse Width="8" Height="16"
Fill="{DynamicResource ToggleButtonOnColor}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,3,5,0" />
<!-- Toggle Dot with hover grow effect -->
<Ellipse x:Name="ToggleDot"
Width="8" Height="8"
Fill="{DynamicResource ButtonForegroundColor}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,3,5,0"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Ellipse.RenderTransform>
</Ellipse>
<!-- Content Presenter -->
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="10,2,10,2"/>
</Grid>
</Border>
</Grid>
<!-- Triggers for ToggleButton states -->
<ControlTemplate.Triggers>
<!-- Hover effect -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundMouseoverColor}"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Animation to grow the dot when hovered -->
<DoubleAnimation Storyboard.TargetName="ToggleDot"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.2" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="ToggleDot"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.2" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Animation to shrink the dot back to original size when not hovered -->
<DoubleAnimation Storyboard.TargetName="ToggleDot"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.0" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="ToggleDot"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.0" Duration="0:0:0.1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- IsChecked state -->
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ToggleDot" Property="VerticalAlignment" Value="Bottom"/>
<Setter TargetName="ToggleDot" Property="Margin" Value="0,0,5,3"/>
</Trigger>
<!-- IsEnabled state -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BackgroundBorder" Property="Background" Value="{DynamicResource ButtonBackgroundSelectedColor}"/>
<Setter Property="Foreground" Value="DimGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SearchBarClearButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="{DynamicResource FontFamily}"/>
<Setter Property="FontSize" Value="{DynamicResource SearchBarClearButtonFontSize}"/>
@ -366,6 +502,19 @@
</Setter.Value>
</Setter>
</Style>
<!-- Collapsed Checkbox Style -->
<Style x:Key="CollapsedCheckBoxStyle" TargetType="CheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<ContentPresenter Content="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="{TemplateBinding Padding}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="RadioButton">
<Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
<Setter Property="Background" Value="{DynamicResource MainBackgroundColor}"/>
@ -864,7 +1013,6 @@
</Border>
</Popup>
<Button Name="SettingsButton"
Style="{StaticResource HoverButtonStyle}"
Grid.Column="3" BorderBrush="Transparent"
@ -917,29 +1065,18 @@
<TabItem Header="Install" Visibility="Collapsed" Name="WPFTab1">
<Grid Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="45px"/>
<RowDefinition Height="0.95*"/>
</Grid.RowDefinitions>
<StackPanel Background="{DynamicResource MainBackgroundColor}" Orientation="Horizontal" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="3" Margin="{DynamicResource TabContentMargin}">
<Button Name="WPFInstall" Content=" Install/Upgrade Selected" Margin="2" />
<Button Name="WPFInstallUpgrade" Content=" Upgrade All" Margin="2"/>
<Button Name="WPFUninstall" Content=" Uninstall Selected" Margin="2"/>
<Button Name="WPFGetInstalled" Content=" Get Installed" Margin="2"/>
<Button Name="WPFClearInstallSelection" Content=" Clear Selection" Margin="2"/>
<CheckBox Name="WPFpreferChocolatey" VerticalAlignment="Center" VerticalContentAlignment="Center">
<TextBlock Text="Prefer Chocolatey" ToolTip="Prefers Chocolatey as Download Engine instead of Winget" VerticalAlignment="Center" />
</CheckBox>
</StackPanel>
<Grid Grid.Row="0" Grid.Column="0" Margin="{DynamicResource TabContentMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="225" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="scrollViewer" Grid.Row="1" Grid.Column="0" Margin="{DynamicResource TabContentMargin}" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"
BorderBrush="Transparent" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Name="appspanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Name="appscategory" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</Grid>
</ScrollViewer>
<Rectangle Grid.Row="1" Grid.Column="0" Width="22" Height="22" Fill="{DynamicResource MainBackgroundColor}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Style="{StaticResource ScrollVisibilityRectangle}"/>
<Grid Name="appspanel" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</Grid>
</Grid>
</Grid>
</TabItem>
<TabItem Header="Tweaks" Visibility="Collapsed" Name="WPFTab2">