ux: re-design the image diff view

Author: love-linger

src/Views/DiffView.axaml

@@ -176,52 +176,59 @@
 
           <!-- Image Diff -->
           <DataTemplate DataType="m:ImageDiff">
-            <Grid RowDefinitions="Auto,*,Auto" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,8,8,0">
-              <Grid Grid.Row="0" RowDefinitions="24,24" ColumnDefinitions="Auto,Auto,Auto,Auto">
-                <Border Grid.Row="0" Grid.Column="0" Height="16" Background="{DynamicResource Brush.Badge}" CornerRadius="8" VerticalAlignment="Center">
+            <Grid RowDefinitions="Auto,*" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,16,8,0">
+              <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" HorizontalAlignment="Center">
+                <Border Grid.Column="0" Height="16" Background="{DynamicResource Brush.Badge}" CornerRadius="8" VerticalAlignment="Center">
                   <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}" Margin="8,0" FontSize="10"/>
                 </Border>
 
-                <TextBlock Grid.Row="0" Grid.Column="1" Classes="monospace" Text="{Binding OldImageSize}" Margin="8,0,0,0"/>
-                <TextBlock Grid.Row="0" Grid.Column="2" Classes="monospace" Text="{Binding OldFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
-                <TextBlock Grid.Row="0" Grid.Column="3" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
+                <TextBlock Grid.Column="1" Classes="monospace" Text="{Binding OldImageSize}" Margin="8,0,0,0"/>
+                <TextBlock Grid.Column="2" Classes="monospace" Text="{Binding OldFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
+                <TextBlock Grid.Column="3" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
 
-                <Border Grid.Row="1" Grid.Column="0" Height="16" Background="Green" CornerRadius="8" VerticalAlignment="Center">
+                <Border Grid.Column="4" Height="16" Background="Green" CornerRadius="8" VerticalAlignment="Center" Margin="32,0,0,0">
                   <TextBlock Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}" Margin="8,0" FontSize="10"/>
                 </Border>
 
-                <TextBlock Grid.Row="1" Grid.Column="1" Classes="monospace" Text="{Binding NewImageSize}" Margin="8,0,0,0"/>
-                <TextBlock Grid.Row="1" Grid.Column="2" Classes="monospace" Text="{Binding NewFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
-                <TextBlock Grid.Row="1" Grid.Column="3" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
+                <TextBlock Grid.Column="5" Classes="monospace" Text="{Binding NewImageSize}" Margin="8,0,0,0"/>
+                <TextBlock Grid.Column="6" Classes="monospace" Text="{Binding NewFileSize}" Foreground="{DynamicResource Brush.FG2}" Margin="16,0,0,0" HorizontalAlignment="Right"/>
+                <TextBlock Grid.Column="7" Classes="monospace" Text="{DynamicResource Text.Bytes}" Foreground="{DynamicResource Brush.FG2}" Margin="2,0,0,0"/>
               </Grid>
 
-              <Border Grid.Row="1" Background="{DynamicResource Brush.Window}" Effect="drop-shadow(0 0 8 #A0000000)" Margin="0,8,0,0" HorizontalAlignment="Center">
-                <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
-                  <v:ImageDiffView Alpha="{Binding #ImageDiffSlider.Value}"
-                                   OldImage="{Binding Old}"
-                                   NewImage="{Binding New}"
-                                   RenderOptions.BitmapInterpolationMode="HighQuality"/>
+              <Grid Grid.Row="1" RowDefinitions="*,Auto,Auto" Margin="0,16,0,0" HorizontalAlignment="Center">
+                <Border Grid.Row="0" Background="{DynamicResource Brush.Window}" Effect="drop-shadow(0 0 8 #A0000000)">
+                  <Border BorderThickness="1" BorderBrush="{DynamicResource Brush.Border1}" Margin="8">
+                    <v:ImageDiffView Alpha="{Binding #ImageDiffSlider.Value}"
+                                     OldImage="{Binding Old}"
+                                     NewImage="{Binding New}"
+                                     RenderOptions.BitmapInterpolationMode="HighQuality"/>
+                  </Border>
                 </Border>
-              </Border>
-
-              <Slider Grid.Row="2"
-                      x:Name="ImageDiffSlider"
-                      Minimum="0" Maximum="1"
-                      VerticalAlignment="Top"
-                      TickPlacement="None"
-                      Margin="0,4,0,0"
-                      MinHeight="0"
-                      Foreground="{DynamicResource Brush.Border1}"
-                      Value="0.5">
-                <Slider.Resources>
-                  <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
-                  <GridLength x:Key="SliderPreContentMargin">0</GridLength>
-                  <GridLength x:Key="SliderPostContentMargin">0</GridLength>
-                  <CornerRadius x:Key="SliderThumbCornerRadius">8</CornerRadius>
-                  <x:Double x:Key="SliderHorizontalThumbWidth">16</x:Double>
-                  <x:Double x:Key="SliderHorizontalThumbHeight">16</x:Double>
-                </Slider.Resources>
-              </Slider>
+
+                <Grid Grid.Row="1" ColumnDefinitions="*,*" Margin="0,8,0,0">
+                  <TextBlock Grid.Column="0" Classes="monospace" Text="{DynamicResource Text.Diff.Binary.Old}" Foreground="{DynamicResource Brush.FG2}" FontSize="10"/>
+                  <TextBlock Grid.Column="1" Classes="monospace" Text="{DynamicResource Text.Diff.Binary.New}" Foreground="{DynamicResource Brush.FG2}" HorizontalAlignment="Right" FontSize="10"/>
+                </Grid>
+
+                <Slider Grid.Row="2"
+                        x:Name="ImageDiffSlider"
+                        Minimum="0" Maximum="1"
+                        VerticalAlignment="Top"
+                        TickPlacement="None"
+                        Margin="8,4,8,0"
+                        MinHeight="0"
+                        Foreground="{DynamicResource Brush.Border1}"
+                        Value="0.5">
+                  <Slider.Resources>
+                    <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
+                    <GridLength x:Key="SliderPreContentMargin">0</GridLength>
+                    <GridLength x:Key="SliderPostContentMargin">0</GridLength>
+                    <CornerRadius x:Key="SliderThumbCornerRadius">8</CornerRadius>
+                    <x:Double x:Key="SliderHorizontalThumbWidth">16</x:Double>
+                    <x:Double x:Key="SliderHorizontalThumbHeight">16</x:Double>
+                  </Slider.Resources>
+                </Slider>
+              </Grid>
             </Grid>
           </DataTemplate>