Skip to content

Clean up UI for WinUI and Avalonia #4672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Marc-André Moreau (mamoreau-devolutions) merged 4 commits into from
May 1, 2026
Merged

Clean up UI for WinUI and Avalonia #4672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
02279a4
small UI clean up for WinUI
GabrielDuf May 1, 2026
8b084a0
made the same changes for the avalonia version
GabrielDuf May 1, 2026
0f7ba06
add icon to the more menu
GabrielDuf May 1, 2026
39fcc02
fix code formating
GabrielDuf May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/UniGetUI.Avalonia/Views/Controls/UserAvatarControl.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,14 @@
</Panel>

<!-- Avatar image (shown when logged in) -->
<Panel IsVisible="{Binding IsAuthenticated}">
<Border IsVisible="{Binding IsAuthenticated}"
Width="32" Height="32"
CornerRadius="100"
ClipToBounds="True">
<Image Source="{Binding AvatarBitmap}"
Width="32" Height="32"
Stretch="UniformToFill"/>
</Panel>
</Border>
</Panel>

</Button>
Expand Down
15 changes: 1 addition & 14 deletions src/UniGetUI.Avalonia/Views/MainWindow.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,6 @@
</ContentControl.DataTemplates>
</ContentControl>

<!-- Vertical separator (spans all rows) -->
<Border Grid.Column="0" Grid.RowSpan="3"
Width="1"
HorizontalAlignment="Right"
automation:AutomationProperties.AccessibilityView="Raw"
Opacity="0.2"
Background="{DynamicResource SystemBaseMediumColor}"/>

<!-- ── Banners + page content ── -->
<Grid Grid.Column="1" Grid.Row="0" RowDefinitions="Auto,*" Margin="0,10">
<StackPanel Grid.Row="0"
Expand Down Expand Up @@ -370,13 +362,8 @@
</Button>
</StackPanel>

<!-- Right column: avatar centred + Linux window buttons on the far right -->
<!-- Right column: Linux window buttons on the far right -->
<Panel Grid.Column="2">
<controls:UserAvatarControl x:Name="AvatarControl"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="50"
Margin="0,10,0,0"/>

<!-- Linux only: min / max / close (IsVisible set in code-behind) -->
<StackPanel x:Name="LinuxWindowButtons"
Expand Down
5 changes: 0 additions & 5 deletions src/UniGetUI.Avalonia/Views/MainWindow.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,8 @@ private void SetupTitleBar()
// macOS: extend into the native title bar area.
// WindowDecorationMargin.Top drives TitleBarGrid.Height via binding.
// Traffic lights sit on the left → keep the 65 px HamburgerPanel margin.
// Avatar can be a bit taller to fill the deeper title bar.
ExtendClientAreaToDecorationsHint = true;
ExtendClientAreaTitleBarHeightHint = -1;
AvatarControl.Height = 36;
}
else if (OperatingSystem.IsWindows())
{
Expand All @@ -172,8 +170,6 @@ private void SetupTitleBar()
TitleBarGrid.ClearValue(HeightProperty);
TitleBarGrid.Height = 44;
HamburgerPanel.Margin = new Thickness(10, 0, 8, 0);
AvatarControl.Height = 28;
AvatarControl.Margin = new Thickness(0);
LinuxWindowButtons.IsVisible = true;
MainContentGrid.Margin = new Thickness(0, 44, 0, 0);
this.GetObservable(WindowStateProperty).Subscribe(state =>
Expand All @@ -196,7 +192,6 @@ private void SetupTitleBar()
TitleBarGrid.ClearValue(HeightProperty);
TitleBarGrid.Height = 44;
HamburgerPanel.Margin = new Thickness(10, 0, 8, 0);
AvatarControl.Height = 32;
LinuxWindowButtons.IsVisible = !isWsl;
MainContentGrid.Margin = new Thickness(0, 44, 0, 0);
// Keep maximize icon in sync with window state
Expand Down
34 changes: 25 additions & 9 deletions src/UniGetUI.Avalonia/Views/SidebarView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@

<!-- Footer items -->
<StackPanel Grid.Row="1" Margin="8,0,8,12" Spacing="2">
<Separator Margin="8,4"/>
<controls:UserAvatarControl HorizontalAlignment="Left" Margin="8,4,0,4"/>

<Button Command="{Binding RequestNavigationCommand}"
CommandParameter="Settings"
Expand Down Expand Up @@ -215,17 +215,33 @@
</StackPanel>
<Button.Flyout>
<MenuFlyout Placement="RightEdgeAlignedTop">
<MenuItem Header="{t:Translate UniGetUI Log}" Command="{Binding RequestNavigationCommand}" CommandParameter="OwnLog"/>
<MenuItem Header="{t:Translate Package Manager logs}" Command="{Binding RequestNavigationCommand}" CommandParameter="ManagerLog"/>
<MenuItem Header="{t:Translate Operation history}" Command="{Binding RequestNavigationCommand}" CommandParameter="OperationHistory"/>
<MenuItem Header="{t:Translate UniGetUI Log}" Command="{Binding RequestNavigationCommand}" CommandParameter="OwnLog">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/buggy.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<MenuItem Header="{t:Translate Package Manager logs}" Command="{Binding RequestNavigationCommand}" CommandParameter="ManagerLog">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/console.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<MenuItem Header="{t:Translate Operation history}" Command="{Binding RequestNavigationCommand}" CommandParameter="OperationHistory">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/history.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Header="{Binding VersionLabel}" IsEnabled="False"/>
<MenuItem Header="{t:Translate Release notes}" Command="{Binding RequestNavigationCommand}" CommandParameter="ReleaseNotes"/>
<MenuItem Header="{Binding VersionLabel}" IsEnabled="False">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/info_round.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<MenuItem Header="{t:Translate Release notes}" Command="{Binding RequestNavigationCommand}" CommandParameter="ReleaseNotes">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/megaphone.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Header="{t:Translate Help}" Command="{Binding RequestNavigationCommand}" CommandParameter="Help"/>
<MenuItem Header="{t:Translate About}" Command="{Binding RequestNavigationCommand}" CommandParameter="About"/>
<MenuItem Header="{t:Translate Help}" Command="{Binding RequestNavigationCommand}" CommandParameter="Help">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/help.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<MenuItem Header="{t:Translate About}" Command="{Binding RequestNavigationCommand}" CommandParameter="About">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/info_round.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
<Separator/>
<MenuItem Header="{t:Translate Quit UniGetUI}" Command="{Binding RequestNavigationCommand}" CommandParameter="Quit"/>
<MenuItem Header="{t:Translate Quit UniGetUI}" Command="{Binding RequestNavigationCommand}" CommandParameter="Quit">
<MenuItem.Icon><controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/close_round.svg" Width="16" Height="16"/></MenuItem.Icon>
</MenuItem>
</MenuFlyout>
</Button.Flyout>
</Button>
Expand Down
172 changes: 75 additions & 97 deletions src/UniGetUI.Avalonia/Views/SoftwarePages/AbstractPackagesPage.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@
</Style>
</UserControl.Styles>

<Grid RowDefinitions="Auto,Auto,*" Margin="8,8,8,8">
<Grid RowDefinitions="Auto,Auto,*,Auto" Margin="8,8,8,8">

<!-- ==================== HEADER ==================== -->
<Grid Name="MainHeader"
Grid.Row="0"
ColumnDefinitions="80,*,Auto"
ColumnDefinitions="80,*"
ColumnSpacing="8"
Margin="0,0,0,4">

Expand Down Expand Up @@ -87,101 +87,6 @@
Text="{Binding Subtitle}"/>
</StackPanel>

<!-- Order by + View mode + Reload -->
<Grid Grid.Column="2"
RowDefinitions="Auto,Auto"
ColumnDefinitions="Auto,Auto"
RowSpacing="6"
ColumnSpacing="8"
HorizontalAlignment="Right"
VerticalAlignment="Center">

<!-- Order by -->
<StackPanel x:Name="OrderByContainer"
Grid.Row="0" Grid.Column="0"
Orientation="Horizontal"
Spacing="4"
VerticalAlignment="Center">
<TextBlock x:Name="OrderByLabel" Text="{t:Translate Order by:}" VerticalAlignment="Center"/>
<Button x:Name="OrderByButton"
Padding="8,4"
CornerRadius="4"
automation:AutomationProperties.LabeledBy="{Binding #OrderByLabel}">
<StackPanel Orientation="Horizontal" Spacing="6">
<TextBlock Text="{Binding SortFieldName}" VerticalAlignment="Center" FontSize="12"/>
<TextBlock Text="▾" VerticalAlignment="Center" FontSize="10" Opacity="0.7"
automation:AutomationProperties.AccessibilityView="Raw"/>
</StackPanel>
<Button.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedLeft">
<MenuItem x:Name="OrderByName_Menu" Header="{t:Translate Name}" Command="{Binding SortByNameCommand}"/>
<MenuItem x:Name="OrderById_Menu" Header="{t:Translate Id}" Command="{Binding SortByIdCommand}"/>
<MenuItem x:Name="OrderByVersion_Menu" Header="{t:Translate Version}" Command="{Binding SortByVersionCommand}"/>
<MenuItem x:Name="OrderByNewVersion_Menu" Header="{t:Translate New version}" Command="{Binding SortByNewVersionCommand}"/>
<MenuItem x:Name="OrderBySource_Menu" Header="{t:Translate Source}" Command="{Binding SortBySourceCommand}"/>
<Separator/>
<MenuItem x:Name="OrderByAscending_Menu" Header="{t:Translate Ascendant}" Command="{Binding SetSortAscendingCommand}"/>
<MenuItem x:Name="OrderByDescending_Menu" Header="{t:Translate Descendant}" Command="{Binding SetSortDescendingCommand}"/>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>

<!-- Reload button -->
<Button x:Name="ReloadButton"
Grid.Row="0" Grid.Column="1"
Width="22" Height="22"
Padding="0"
CornerRadius="4"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding ReloadCommand}"
ToolTip.Tip="{Binding ReloadButtonTooltip}"
automation:AutomationProperties.Name="{t:Translate Reload}"
automation:AutomationProperties.AcceleratorKey="F5"
IsVisible="{Binding ReloadButtonVisible}">
<controls:SvgIcon Path="avares://UniGetUI.Avalonia/Assets/Symbols/reload.svg" Width="16" Height="16"/>
</Button>

<!-- View mode selector -->
<StackPanel x:Name="ViewModeContainer"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Orientation="Horizontal"
Spacing="4"
VerticalAlignment="Center">
<TextBlock x:Name="ViewModeLabel" Text="{t:Translate View mode:}" VerticalAlignment="Center"/>
<ListBox x:Name="ViewModeSelector"
SelectionMode="Single"
SelectedIndex="{Binding ViewModeIndex, Mode=TwoWay}"
Background="Transparent"
BorderThickness="1"
CornerRadius="4"
automation:AutomationProperties.LabeledBy="{Binding #ViewModeLabel}"
Padding="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<!-- List -->
<ListBoxItem x:Name="Selector_List" Padding="6,4" ToolTip.Tip="List"
automation:AutomationProperties.Name="List">
<TextBlock Text="☰" FontSize="16" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
<!-- Grid -->
<ListBoxItem x:Name="Selector_Grid" Padding="6,4" ToolTip.Tip="Grid"
automation:AutomationProperties.Name="Grid">
<TextBlock Text="⊞" FontSize="16" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
<!-- Icons -->
<ListBoxItem x:Name="Selector_Icons" Padding="6,4" ToolTip.Tip="Icons"
automation:AutomationProperties.Name="Icons">
<TextBlock Text="⊟" FontSize="16" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
</ListBox>
</StackPanel>

</Grid>
</Grid>

<!-- ==================== TOOLBAR ROW ==================== -->
Expand Down Expand Up @@ -766,5 +671,78 @@
</Grid>
</Grid>

<!-- ==================== FOOTER STATUS BAR ==================== -->
<Border Grid.Row="3" Margin="0,4,0,-8" VerticalAlignment="Center">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">

<!-- Order by -->
<StackPanel x:Name="OrderByContainer"
Orientation="Horizontal"
Spacing="4"
VerticalAlignment="Center">
<TextBlock x:Name="OrderByLabel" Text="{t:Translate Order by:}" FontSize="13" VerticalAlignment="Center"/>
<Button x:Name="OrderByButton"
Padding="10,6"
CornerRadius="4"
Background="Transparent"
BorderThickness="1"
BorderBrush="{DynamicResource AppBorderBrush}"
automation:AutomationProperties.LabeledBy="{Binding #OrderByLabel}">
<StackPanel Orientation="Horizontal" Spacing="6">
<TextBlock Text="{Binding SortFieldName}" VerticalAlignment="Center" FontSize="13"/>
<TextBlock Text="▾" VerticalAlignment="Center" FontSize="19" Opacity="0.7"
automation:AutomationProperties.AccessibilityView="Raw"/>
</StackPanel>
<Button.Flyout>
<MenuFlyout Placement="TopEdgeAlignedRight">
<MenuItem x:Name="OrderByName_Menu" Header="{t:Translate Name}" Command="{Binding SortByNameCommand}"/>
<MenuItem x:Name="OrderById_Menu" Header="{t:Translate Id}" Command="{Binding SortByIdCommand}"/>
<MenuItem x:Name="OrderByVersion_Menu" Header="{t:Translate Version}" Command="{Binding SortByVersionCommand}"/>
<MenuItem x:Name="OrderByNewVersion_Menu" Header="{t:Translate New version}" Command="{Binding SortByNewVersionCommand}"/>
<MenuItem x:Name="OrderBySource_Menu" Header="{t:Translate Source}" Command="{Binding SortBySourceCommand}"/>
<Separator/>
<MenuItem x:Name="OrderByAscending_Menu" Header="{t:Translate Ascendant}" Command="{Binding SetSortAscendingCommand}"/>
<MenuItem x:Name="OrderByDescending_Menu" Header="{t:Translate Descendant}" Command="{Binding SetSortDescendingCommand}"/>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>

<!-- View mode selector -->
<StackPanel x:Name="ViewModeContainer"
Orientation="Horizontal"
Spacing="4"
VerticalAlignment="Center"
automation:AutomationProperties.Name="{t:Translate View modes}">
<ListBox x:Name="ViewModeSelector"
SelectionMode="Single"
SelectedIndex="{Binding ViewModeIndex, Mode=TwoWay}"
Background="Transparent"
BorderThickness="1"
BorderBrush="{DynamicResource AppBorderBrush}"
CornerRadius="4"
Padding="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem x:Name="Selector_List" Padding="10,6" ToolTip.Tip="List"
automation:AutomationProperties.Name="List">
<TextBlock Text="☰" FontSize="19" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
<ListBoxItem x:Name="Selector_Grid" Padding="10,6" ToolTip.Tip="Grid"
automation:AutomationProperties.Name="Grid">
<TextBlock Text="⊞" FontSize="19" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
<ListBoxItem x:Name="Selector_Icons" Padding="10,6" ToolTip.Tip="Icons"
automation:AutomationProperties.Name="Icons">
<TextBlock Text="⊟" FontSize="19" automation:AutomationProperties.AccessibilityView="Raw"/>
</ListBoxItem>
</ListBox>
</StackPanel>

</StackPanel>
</Border>
</Grid>
</UserControl>
Loading
Loading