ux: re-design the image diff view

This commit is contained in:
leo 2024-06-06 11:09:28 +08:00
parent 8b1f28ac95
commit cf02c890bf
No known key found for this signature in database
GPG key ID: B528468E49CD0E58

View file

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