ux: re-design commit detail information page to avoid commit message hidden in scoll view

src/Converters/ListConverters.cs

@@ -1,4 +1,5 @@
 using System.Collections;
+using System.Collections.Generic;
 
 using Avalonia.Data.Converters;
 
@@ -11,5 +12,11 @@ namespace SourceGit.Converters
 
         public static readonly FuncValueConverter<IList, bool> IsNotNullOrEmpty =
             new FuncValueConverter<IList, bool>(v => v != null && v.Count > 0);
+
+        public static readonly FuncValueConverter<List<Models.Change>, List<Models.Change>> Top100Changes =
+            new FuncValueConverter<List<Models.Change>, List<Models.Change>>(v => (v == null || v.Count < 100) ? v : v.GetRange(0, 100));
+
+        public static readonly FuncValueConverter<IList, bool> IsOnlyTop100Shows =
+            new FuncValueConverter<IList, bool>(v => v != null && v.Count > 100);
     }
 }

src/Resources/Locales/en_US.axaml

@@ -111,6 +111,7 @@
   <x:String x:Key="Text.CommitDetail.Info.Author" xml:space="preserve">AUTHOR</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Changed" xml:space="preserve">CHANGED</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Committer" xml:space="preserve">COMMITTER</x:String>
+  <x:String x:Key="Text.CommitDetail.Info.GotoChangesPage" xml:space="preserve">Shows only the first 100 changes. See all changes on the CHANGES tab.</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Message" xml:space="preserve">MESSAGE</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Parents" xml:space="preserve">PARENTS</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Refs" xml:space="preserve">REFS</x:String>

src/Resources/Locales/zh_CN.axaml

@@ -114,6 +114,7 @@
   <x:String x:Key="Text.CommitDetail.Info.Author" xml:space="preserve">修改者</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Changed" xml:space="preserve">变更列表</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Committer" xml:space="preserve">提交者</x:String>
+  <x:String x:Key="Text.CommitDetail.Info.GotoChangesPage" xml:space="preserve">仅显示前100项变更。请前往【变更对比】页面查看全部。</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Message" xml:space="preserve">提交信息</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Parents" xml:space="preserve">父提交</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Refs" xml:space="preserve">相关引用</x:String>

src/Resources/Locales/zh_TW.axaml

@@ -114,6 +114,7 @@
   <x:String x:Key="Text.CommitDetail.Info.Author" xml:space="preserve">修改者</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Changed" xml:space="preserve">變更列表</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Committer" xml:space="preserve">提交者</x:String>
+  <x:String x:Key="Text.CommitDetail.Info.GotoChangesPage" xml:space="preserve">僅顯示前100項變更。 請前往『變更對比』頁面查看全部。</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Message" xml:space="preserve">提交資訊</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Parents" xml:space="preserve">父提交</x:String>
   <x:String x:Key="Text.CommitDetail.Info.Refs" xml:space="preserve">相關引用</x:String>

src/Views/CommitBaseInfo.axaml

@@ -104,9 +104,7 @@
 
           <!-- Messages -->
           <TextBlock Grid.Row="3" Grid.Column="0" Classes="info_label" Text="{DynamicResource Text.CommitDetail.Info.Message}" VerticalAlignment="Top" Margin="0,4,0,0" />
-          <ScrollViewer Grid.Row="3" Grid.Column="1" Margin="12,5,8,0" MaxHeight="64" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+          <SelectableTextBlock Grid.Row="3" Grid.Column="1" Margin="12,5,8,0" Text="{Binding #ThisControl.Message}" FontFamily="{Binding Source={x:Static vm:Preference.Instance}, Path=MonospaceFont}" TextWrapping="Wrap"/>
-            <SelectableTextBlock Text="{Binding #ThisControl.Message}" FontFamily="{Binding Source={x:Static vm:Preference.Instance}, Path=MonospaceFont}" TextWrapping="Wrap"/>
-          </ScrollViewer>
         </Grid>
       </StackPanel>
     </DataTemplate>

src/Views/CommitDetail.axaml

@@ -17,58 +17,55 @@
         <TextBlock Classes="tab_header" Text="{DynamicResource Text.CommitDetail.Info}"/>
       </TabItem.Header>
 
-      <Grid RowDefinitions="Auto,1,*">
+      <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Vertical">
           <!-- Base Information -->
-        <v:CommitBaseInfo Grid.Row="0" Content="{Binding Commit}" Message="{Binding FullMessage}"/>
+          <v:CommitBaseInfo Content="{Binding Commit}" Message="{Binding FullMessage}"/>
 
           <!-- Line -->
-        <Rectangle Grid.Row="1" Height=".65" Margin="8" Fill="{DynamicResource Brush.Border2}" VerticalAlignment="Center"/>
+          <Rectangle Height=".65" Margin="8" Fill="{DynamicResource Brush.Border2}"/>
 
           <!-- Change List -->
-        <DataGrid Grid.Row="2"
+          <ListBox Background="Transparent" 
-                  Background="Transparent"
+                   Margin="64,0,8,4"
-                  ItemsSource="{Binding Changes}"
                    SelectionMode="Single"
-                  CanUserReorderColumns="False"
+                   ItemsSource="{Binding Changes, Converter={x:Static c:ListConverters.Top100Changes}}">
-                  CanUserResizeColumns="False"
+            <ListBox.Styles>
-                  CanUserSortColumns="False"
+              <Style Selector="ListBoxItem">
-                  IsReadOnly="True"
+                <Setter Property="Padding" Value="0"/>
-                  HeadersVisibility="None"
+                <Setter Property="MinHeight" Value="26"/>
-                  Focusable="False"
-                  RowHeight="26"
-                  Margin="64,0,8,16"
-                  HorizontalScrollBarVisibility="Disabled"
-                  VerticalScrollBarVisibility="Auto"
-                  ContextRequested="OnChangeListContextRequested"
-                  DoubleTapped="OnChangeListDoubleTapped">
-          <DataGrid.Styles>
-            <Style Selector="DataGridRow">
                 <Setter Property="CornerRadius" Value="4"/>
               </Style>
-            <Style Selector="DataGridRow /template/ Border#RowBorder">
+            </ListBox.Styles>
-              <Setter Property="ClipToBounds" Value="True"/>
-            </Style>
-          </DataGrid.Styles>
             
-          <DataGrid.Columns>
+            <ListBox.ItemsPanel>
-            <DataGridTemplateColumn Width="36" Header="ICON">
+              <ItemsPanelTemplate>
-              <DataGridTemplateColumn.CellTemplate>
+                <StackPanel Orientation="Vertical"/>
-                <DataTemplate>
+              </ItemsPanelTemplate>
-                  <v:ChangeStatusIcon Width="14" Height="14" HorizontalAlignment="Left" Margin="16,0,0,0" IsWorkingCopyChange="False" Change="{Binding}"/>
+            </ListBox.ItemsPanel>
-                </DataTemplate>
-              </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
             
-            <DataGridTemplateColumn Width="*" Header="PATH">
+            <ListBox.ItemTemplate>
-              <DataGridTemplateColumn.CellTemplate>
+              <DataTemplate DataType="m:Change">
-                <DataTemplate>
+                <Grid Background="Transparent" Height="26" ColumnDefinitions="36,*" ContextRequested="OnChangeContextRequested" DoubleTapped="OnChangeDoubleTapped">
-                  <TextBlock Classes="monospace" Text="{Binding Path}" Margin="8,0,0,0"/>
+                  <v:ChangeStatusIcon Grid.Column="0" 
-                </DataTemplate>
+                                      Width="14" Height="14" 
-              </DataGridTemplateColumn.CellTemplate>
+                                      HorizontalAlignment="Left" 
-            </DataGridTemplateColumn>
+                                      Margin="16,0,0,0" 
-          </DataGrid.Columns>
+                                      IsWorkingCopyChange="False" 
-        </DataGrid>
+                                      Change="{Binding}"/>
+                  <TextBlock Grid.Column="1" Classes="monospace" Text="{Binding Path}" Margin="8,0,0,0"/>
                 </Grid>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+
+          <!-- Only Top100 Tip -->
+          <TextBlock Margin="108,0,0,16" 
+                     Text="{DynamicResource Text.CommitDetail.Info.GotoChangesPage}" 
+                     Foreground="{DynamicResource Brush.FG2}"
+                     IsVisible="{Binding Changes, Converter={x:Static c:ListConverters.IsOnlyTop100Shows}}"/>
+        </StackPanel>
+      </ScrollViewer>
     </TabItem>
 
     <TabItem>

src/Views/CommitDetail.axaml.cs

@@ -10,37 +10,23 @@ namespace SourceGit.Views
             InitializeComponent();
         }
 
-        private void OnChangeListDoubleTapped(object sender, TappedEventArgs e)
+        private void OnChangeDoubleTapped(object sender, TappedEventArgs e)
         {
-            if (DataContext is ViewModels.CommitDetail detail)
+            if (DataContext is ViewModels.CommitDetail detail && sender is Grid grid && grid.DataContext is Models.Change change)
             {
-                var datagrid = sender as DataGrid;
-                if (datagrid.SelectedItem == null)
-                {
-                    e.Handled = true;
-                    return;
-                }
-
                 detail.ActivePageIndex = 1;
-                detail.SelectedChanges = new() { datagrid.SelectedItem as Models.Change };
+                detail.SelectedChanges = new() { change };
             }
 
             e.Handled = true;
         }
 
-        private void OnChangeListContextRequested(object sender, ContextRequestedEventArgs e)
+        private void OnChangeContextRequested(object sender, ContextRequestedEventArgs e)
         {
-            if (DataContext is ViewModels.CommitDetail detail)
+            if (DataContext is ViewModels.CommitDetail detail && sender is Grid grid && grid.DataContext is Models.Change change)
             {
-                var datagrid = sender as DataGrid;
+                var menu = detail.CreateChangeContextMenu(change);
-                if (datagrid.SelectedItem == null)
+                grid.OpenContextMenu(menu);
-                {
-                    e.Handled = true;
-                    return;
-                }
-
-                var menu = detail.CreateChangeContextMenu(datagrid.SelectedItem as Models.Change);
-                datagrid.OpenContextMenu(menu);
             }
 
             e.Handled = true;