michael/sourcegit
1
0
Fork 0
mirror of https://github.com/sourcegit-scm/sourcegit.git synced 2024-10-31 13:03:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

ux: use ListBox with VirtualizingStackPanel instead of DataGrid since height of DataGridRow is not equal with the RowHeight value

Browse source
This commit is contained in:
leo 2024-08-20 16:53:59 +08:00
parent d4a9343eaf
commit 9844043c7f
No known key found for this signature in database
6 changed files with 180 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/Resources/Styles.axaml
View file

@ -706,6 +706,58 @@
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="ListBox.repo_left_content_list">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter>
<Style Selector="^ ListBoxItem">
<Setter Property="Height" Value="24"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Template">
<ControlTemplate>
<Grid>
<Border Name="PART_Background"
Background="Transparent"
CornerRadius="{TemplateBinding CornerRadius}"
Opacity="0"/>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Stretch" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
</Style>
<Style Selector="Grid.repository_leftpanel ListBox.repo_left_content_list ListBoxItem:pointerover /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value=".5"/>
</Style>
<Style Selector="Grid.repository_leftpanel ListBox.repo_left_content_list ListBoxItem:selected /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within ListBox.repo_left_content_list ListBoxItem:selected /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within ListBox.repo_left_content_list ListBoxItem:selected:pointerover /template/ Border#PART_Background">
<Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".8"/>
</Style>
<Style Selector="ContextMenu">
<Setter Property="HorizontalOffset" Value="-4"/>
<Setter Property="VerticalOffset" Value="-4"/>

156
src/Views/BranchTree.axaml
View file

@ -8,104 +8,78 @@
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="SourceGit.Views.BranchTree"
x:Name="ThisControl">
<DataGrid x:Name="BranchesPresenter"
ItemsSource="{Binding #ThisControl.Rows}"
Background="Transparent"
RowHeight="24"
CanUserReorderColumns="False"
CanUserResizeColumns="False"
CanUserSortColumns="False"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
HeadersVisibility="None"
SelectionChanged="OnNodesSelectionChanged"
ContextRequested="OnTreeContextRequested">
<DataGrid.Styles>
<Style Selector="DataGridRow" x:DataType="vm:BranchTreeNode">
<Setter Property="CornerRadius" Value="{Binding CornerRadius}" />
<Setter Property="Height" Value="24"/>
<ListBox x:Name="BranchesPresenter"
Classes="repo_left_content_list"
ItemsSource="{Binding #ThisControl.Rows}"
SelectionMode="Multiple"
SelectionChanged="OnNodesSelectionChanged"
ContextRequested="OnTreeContextRequested">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Styles>
<Style Selector="ListBoxItem" x:DataType="vm:BranchTreeNode">
<Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
</Style>
</ListBox.Styles>
<Style Selector="DataGridRow /template/ Border#RowBorder">
<Setter Property="ClipToBounds" Value="True" />
</Style>
<ListBox.ItemTemplate>
<DataTemplate DataType="vm:BranchTreeNode">
<Grid Height="24"
Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
ColumnDefinitions="16,*"
ToolTip.Tip="{Binding Tooltip}">
<Style Selector="Grid.repository_leftpanel DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value=".5"/>
</Style>
<Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".65"/>
</Style>
<Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
<Setter Property="Opacity" Value=".8"/>
</Style>
</DataGrid.Styles>
<!-- Tree Expander -->
<v:BranchTreeNodeToggleButton Grid.Column="0"
Classes="tree_expander"
Focusable="False"
HorizontalAlignment="Center"
IsChecked="{Binding IsExpanded, Mode=OneWay}"
IsVisible="{Binding !IsBranch}"/>
<DataGrid.Columns>
<DataGridTemplateColumn Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate x:DataType="vm:BranchTreeNode">
<Grid Height="24"
Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
ColumnDefinitions="16,*"
ToolTip.Tip="{Binding Tooltip}">
<!-- Content Area (allows double-click) -->
<Grid Grid.Column="1"
Background="Transparent"
ColumnDefinitions="18,*,Auto,Auto"
DoubleTapped="OnDoubleTappedBranchNode">
<!-- Tree Expander -->
<v:BranchTreeNodeToggleButton Grid.Column="0"
Classes="tree_expander"
Focusable="False"
HorizontalAlignment="Center"
IsChecked="{Binding IsExpanded, Mode=OneWay}"
IsVisible="{Binding !IsBranch}"/>
<!-- Icon -->
<v:BranchTreeNodeIcon Grid.Column="0"
Node="{Binding}"
IsExpanded="{Binding IsExpanded}"/>
<!-- Content Area (allows double-click) -->
<Grid Grid.Column="1"
Background="Transparent"
ColumnDefinitions="18,*,Auto,Auto"
DoubleTapped="OnDoubleTappedBranchNode">
<!-- Icon -->
<v:BranchTreeNodeIcon Grid.Column="0"
Node="{Binding}"
IsExpanded="{Binding IsExpanded}"/>
<!-- Name -->
<TextBlock Grid.Column="1"
Text="{Binding Name}"
Classes="primary"
FontWeight="{Binding NameFontWeight}"/>
<!-- Name -->
<TextBlock Grid.Column="1"
Text="{Binding Name}"
Classes="primary"
FontWeight="{Binding NameFontWeight}"/>
<!-- Tracking status -->
<v:BranchTreeNodeTrackStatusPresenter Grid.Column="2"
Margin="8,0"
VerticalAlignment="Center"
FontFamily="{DynamicResource Fonts.Monospace}"
FontSize="10"
Foreground="{DynamicResource Brush.BadgeFG}"
Background="{DynamicResource Brush.Badge}"/>
<!-- Tracking status -->
<v:BranchTreeNodeTrackStatusPresenter Grid.Column="2"
Margin="8,0"
VerticalAlignment="Center"
FontFamily="{DynamicResource Fonts.Monospace}"
FontSize="10"
Foreground="{DynamicResource Brush.BadgeFG}"
Background="{DynamicResource Brush.Badge}"/>
<!-- Filter Toggle Button -->
<ToggleButton Grid.Column="3"
Classes="filter"
Margin="0,0,8,0"
Background="Transparent"
IsCheckedChanged="OnToggleFilter"
IsVisible="{Binding IsBranch}"
IsChecked="{Binding IsFiltered}"
ToolTip.Tip="{DynamicResource Text.Filter}"/>
</Grid>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<!-- Filter Toggle Button -->
<ToggleButton Grid.Column="3"
Classes="filter"
Margin="0,0,8,0"
Background="Transparent"
IsCheckedChanged="OnToggleFilter"
IsVisible="{Binding IsBranch}"
IsChecked="{Binding IsFiltered}"
ToolTip.Tip="{DynamicResource Text.Filter}"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl>

181
src/Views/Repository.axaml
View file

@ -240,70 +240,31 @@
</Button>
</Grid>
</ToggleButton>
<DataGrid Grid.Row="7"
x:Name="SubmoduleList"
Height="0"
Margin="8,0,4,0"
Background="Transparent"
ItemsSource="{Binding Submodules}"
SelectionMode="Single"
CanUserReorderColumns="False"
CanUserResizeColumns="False"
CanUserSortColumns="False"
IsReadOnly="True"
HeadersVisibility="None"
Focusable="False"
RowHeight="24"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
ContextRequested="OnSubmoduleContextRequested"
DoubleTapped="OnDoubleTappedSubmodule"
PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
IsVisible="{Binding IsSubmoduleGroupExpanded, Mode=OneWay}">
<DataGrid.Styles>
<Style Selector="DataGridRow">
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Height" Value="24"/>
</Style>
<Style Selector="DataGridRow /template/ Border#RowBorder">
<Setter Property="ClipToBounds" Value="True" />
</Style>
<Style Selector="DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
</Style>
<Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
</Style>
</DataGrid.Styles>
<DataGrid.Columns>
<DataGridTemplateColumn Header="ICON">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Path Width="10" Height="10" Margin="8,0" Data="{StaticResource Icons.Submodule}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*" Header="NAME">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Background="Transparent" Margin="0,0,4,0" ColumnDefinitions="*,8">
<TextBlock Grid.Column="0" Text="{Binding Path}" ClipToBounds="True" Classes="primary" TextTrimming="CharacterEllipsis"/>
<Path Grid.Column="1"
Width="8" Height="8"
Fill="Goldenrod"
Data="{StaticResource Icons.Modified}"
IsVisible="{Binding IsDirty}"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<ListBox Grid.Row="7"
x:Name="SubmoduleList"
Height="0"
Margin="8,0,4,0"
Classes="repo_left_content_list"
ItemsSource="{Binding Submodules}"
SelectionMode="Single"
ContextRequested="OnSubmoduleContextRequested"
DoubleTapped="OnDoubleTappedSubmodule"
PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
IsVisible="{Binding IsSubmoduleGroupExpanded, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate DataType="m:Submodule">
<Grid ColumnDefinitions="Auto,*,8">
<Path Grid.Column="0" Width="10" Height="10" Margin="8,0" Data="{StaticResource Icons.Submodule}"/>
<TextBlock Grid.Column="1" Text="{Binding Path}" ClipToBounds="True" Classes="primary" TextTrimming="CharacterEllipsis"/>
<Path Grid.Column="2"
Width="8" Height="8"
Fill="Goldenrod"
Data="{StaticResource Icons.Modified}"
IsVisible="{Binding IsDirty}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- Worktrees -->
<ToggleButton Grid.Row="8" Classes="group_expander" IsChecked="{Binding IsWorktreeGroupExpanded, Mode=TwoWay}">
@ -329,74 +290,30 @@
</Button>
</Grid>
</ToggleButton>
<DataGrid Grid.Row="9"
x:Name="WorktreeList"
Height="0"
Margin="8,0,4,0"
Background="Transparent"
ItemsSource="{Binding Worktrees}"
SelectionMode="Single"
CanUserReorderColumns="False"
CanUserResizeColumns="False"
CanUserSortColumns="False"
IsReadOnly="True"
HeadersVisibility="None"
Focusable="False"
RowHeight="24"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
ContextRequested="OnWorktreeContextRequested"
DoubleTapped="OnDoubleTappedWorktree"
PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
IsVisible="{Binding IsWorktreeGroupExpanded, Mode=OneWay}">
<DataGrid.Styles>
<Style Selector="DataGridRow">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Height" Value="24"/>
</Style>
<Style Selector="DataGridRow /template/ Border#RowBorder">
<Setter Property="ClipToBounds" Value="True" />
</Style>
<Style Selector="DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
</Style>
<Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
<Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
</Style>
</DataGrid.Styles>
<DataGrid.Columns>
<DataGridTemplateColumn Header="ICON">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Path Width="10" Height="10" Margin="8,0,0,0" Data="{StaticResource Icons.Worktree}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*" Header="FullPath">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Classes="primary" Margin="8,0,0,0" TextTrimming="CharacterEllipsis">
<Run Text="{Binding FullPath}"/>
<Run Text="{Binding Name}" Foreground="{DynamicResource Brush.FG2}"/>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="FullPath">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Path Width="10" Height="10" Margin="4,0,8,0" Data="{StaticResource Icons.Lock}" Fill="{DynamicResource Brush.FG2}" IsVisible="{Binding IsLocked}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<ListBox Grid.Row="9"
x:Name="WorktreeList"
Height="0"
Margin="8,0,4,0"
Classes="repo_left_content_list"
ItemsSource="{Binding Worktrees}"
SelectionMode="Single"
ContextRequested="OnWorktreeContextRequested"
DoubleTapped="OnDoubleTappedWorktree"
PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
IsVisible="{Binding IsWorktreeGroupExpanded, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate DataType="m:Worktree">
<Grid ColumnDefinitions="Auto,*,22">
<Path Grid.Column="0" Width="10" Height="10" Margin="8,0,0,0" Data="{StaticResource Icons.Worktree}"/>
<TextBlock Grid.Column="1" Classes="primary" Margin="8,0,0,0" TextTrimming="CharacterEllipsis">
<Run Text="{Binding FullPath}"/>
<Run Text="{Binding Name}" Foreground="{DynamicResource Brush.FG2}"/>
</TextBlock>
<Path Grid.Column="2" Width="10" Height="10" Margin="4,0,0,0" Data="{StaticResource Icons.Lock}" Fill="{DynamicResource Brush.FG2}" IsVisible="{Binding IsLocked}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>

14
src/Views/Repository.axaml.cs
View file

@ -200,7 +200,7 @@ namespace SourceGit.Views
private void OnSubmoduleContextRequested(object sender, ContextRequestedEventArgs e)
{
if (sender is DataGrid { SelectedItem: Models.Submodule submodule } grid && DataContext is ViewModels.Repository repo)
if (sender is ListBox { SelectedItem: Models.Submodule submodule } grid && DataContext is ViewModels.Repository repo)
{
var menu = repo.CreateContextMenuForSubmodule(submodule.Path);
grid.OpenContextMenu(menu);
@ -211,7 +211,7 @@ namespace SourceGit.Views
private void OnDoubleTappedSubmodule(object sender, TappedEventArgs e)
{
if (sender is DataGrid { SelectedItem: Models.Submodule submodule } && DataContext is ViewModels.Repository repo)
if (sender is ListBox { SelectedItem: Models.Submodule submodule } && DataContext is ViewModels.Repository repo)
{
repo.OpenSubmodule(submodule.Path);
}
@ -221,7 +221,7 @@ namespace SourceGit.Views
private void OnWorktreeContextRequested(object sender, ContextRequestedEventArgs e)
{
if (sender is DataGrid { SelectedItem: Models.Worktree worktree } grid && DataContext is ViewModels.Repository repo)
if (sender is ListBox { SelectedItem: Models.Worktree worktree } grid && DataContext is ViewModels.Repository repo)
{
var menu = repo.CreateContextMenuForWorktree(worktree);
grid.OpenContextMenu(menu);
@ -232,7 +232,7 @@ namespace SourceGit.Views
private void OnDoubleTappedWorktree(object sender, TappedEventArgs e)
{
if (sender is DataGrid { SelectedItem: Models.Worktree worktree } && DataContext is ViewModels.Repository repo)
if (sender is ListBox { SelectedItem: Models.Worktree worktree } && DataContext is ViewModels.Repository repo)
{
repo.OpenWorktree(worktree);
}
@ -242,7 +242,7 @@ namespace SourceGit.Views
private void OnLeftSidebarDataGridPropertyChanged(object _, AvaloniaPropertyChangedEventArgs e)
{
if (e.Property == DataGrid.ItemsSourceProperty || e.Property == DataGrid.IsVisibleProperty)
if (e.Property == ListBox.ItemsSourceProperty || e.Property == ListBox.IsVisibleProperty)
UpdateLeftSidebarLayout();
}
@ -266,8 +266,8 @@ namespace SourceGit.Views
var remoteBranchRows = vm.IsRemoteGroupExpanded ? RemoteBranchTree.Rows.Count : 0;
var desiredBranches = (localBranchRows + remoteBranchRows) * 24.0;
var desiredTag = vm.IsTagGroupExpanded ? 24.0 * TagsList.Rows : 0;
var desiredSubmodule = vm.IsSubmoduleGroupExpanded ? SubmoduleList.RowHeight * vm.Submodules.Count : 0;
var desiredWorktree = vm.IsWorktreeGroupExpanded ? WorktreeList.RowHeight * vm.Worktrees.Count : 0;
var desiredSubmodule = vm.IsSubmoduleGroupExpanded ? 24.0 * vm.Submodules.Count : 0;
var desiredWorktree = vm.IsWorktreeGroupExpanded ? 24.0 * vm.Worktrees.Count : 0;
var desiredOthers = desiredTag + desiredSubmodule + desiredWorktree;
var hasOverflow = (desiredBranches + desiredOthers > leftHeight);

30
src/Views/TagsView.axaml
View file

@ -7,31 +7,12 @@
xmlns:vm="using:SourceGit.ViewModels"
xmlns:c="using:SourceGit.Converters"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="SourceGit.Views.TagsView">
<UserControl.Styles>
<Style Selector="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter>
</Style>
<Style Selector="ListBoxItem">
<Setter Property="Height" Value="24"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="CornerRadius" Value="4"/>
</Style>
</UserControl.Styles>
x:Class="SourceGit.Views.TagsView">
<UserControl.DataTemplates>
<DataTemplate DataType="vm:TagCollectionAsTree">
<ListBox ItemsSource="{Binding Rows}"
SelectionMode="Single"
<ListBox Classes="repo_left_content_list"
ItemsSource="{Binding Rows}"
SelectionMode="Single"
SelectionChanged="OnRowSelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate DataType="vm:TagTreeNode">
@ -70,7 +51,8 @@
</DataTemplate>
<DataTemplate DataType="vm:TagCollectionAsList">
<ListBox ItemsSource="{Binding Tags}"
<ListBox Classes="repo_left_content_list"
ItemsSource="{Binding Tags}"
SelectionMode="Single"
SelectionChanged="OnRowSelectionChanged">
<ListBox.ItemTemplate>

1
src/Views/TagsView.axaml.cs
View file

@ -282,6 +282,7 @@ namespace SourceGit.Views
var tags = Tags;
if (tags == null || tags.Count == 0)
{
Rows = 0;
Content = null;
return;
}