PlateView improvements

AutoCat/App.axaml

@@ -10,7 +10,12 @@
     </Application.Styles>
     
     <Application.Resources>
-        <FontFamily x:Key="RoadNumbersFont">avares://Assets/Fonts/RoadNumbers2.0.otf</FontFamily>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="Resources/Colors.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+            <FontFamily x:Key="RoadNumbersFont">avares://Assets/Fonts/RoadNumbers2.0.otf</FontFamily>
+        </ResourceDictionary>
     </Application.Resources>
     
 </Application>

AutoCat/Extensions/DateConverter.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace AutoCat.Extensions;
+
+public class DateConverter: IValueConverter
+{
+    private static readonly DateTime Epoch = new(1970, 1, 1, 0, 0, 0, 0, DateTimeKind.Utc);
+    
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not double timestamp)
+            return null;
+
+        if (timestamp == 0)
+            return null;
+        
+        var dateTime = Epoch.AddMilliseconds(timestamp).ToLocalTime();
+        return dateTime.ToString("g");
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

AutoCat/Extensions/MathExtension.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Globalization;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Markup.Xaml;
+using Avalonia.Markup.Xaml.MarkupExtensions;
+
+namespace AutoCat.Extensions;
+
+public class MathExtension: MarkupExtension
+{
+    public string Path { get; set; }
+    
+    public double Mult { get; set; } = 1;
+    public double Add { get; set; } = 0;
+
+    public override object ProvideValue(IServiceProvider serviceProvider)
+    {
+        var binding = new ReflectionBindingExtension(Path)
+        {
+            Mode = BindingMode.OneWay,
+            Converter = new FuncValueConverter<double, object>(e => e*Mult + Add)
+        };
+
+        return binding.ProvideValue(serviceProvider);
+    }
+}

AutoCat/Pages/HistoryListPage.axaml

@@ -6,6 +6,7 @@
              xmlns:vm="using:AutoCat.ViewModels"
              xmlns:mocks="using:AutoCat.Mocks"
              xmlns:views="using:AutoCat.Views"
+             xmlns:ext="using:AutoCat.Extensions"
              mc:Ignorable="d" d:DesignWidth="350" d:DesignHeight="550"
              x:Class="AutoCat.Pages.HistoryListPage"
              x:DataType="vm:HistoryListViewModel"
@@ -13,17 +14,35 @@
              DataContext="{utils:ViewModelProvider vm:HistoryListViewModel}"
              Design.DataContext="mocks:HistoryListViewModelMock">
     
+    <UserControl.Resources>
+        <ext:DateConverter x:Key="DateConverter"/>
+    </UserControl.Resources>
+    
     <ListBox ItemsSource="{Binding Vehicles}">
         <ListBox.ItemTemplate>
             <DataTemplate>
-                <StackPanel Orientation="Vertical">
+                <StackPanel Orientation="Vertical" Margin="0,4">
                     <Grid ColumnDefinitions="*">
                         <TextBlock Text="{Binding Brand.Name.Original}"/>
                     </Grid>
-                    <Grid ColumnDefinitions="* Auto" RowDefinitions="* *">
+                    <Grid ColumnDefinitions="* Auto" RowDefinitions="*,*">
                         <views:PlateView Grid.RowSpan="2" Number="{Binding Number}"/>
-                        <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding UpdatedDate}"/>
-                        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding AddedDate}"/>
+                        <TextBlock 
+                            Grid.Column="1" 
+                            Grid.Row="0"
+                            Margin="16,0,0,0"
+                            FontSize="11"
+                            Foreground="{DynamicResource SecondaryText}"
+                            VerticalAlignment="Bottom"
+                            Text="{Binding UpdatedDate, Converter={StaticResource DateConverter}}"/>
+                        <TextBlock 
+                            Grid.Column="1" 
+                            Grid.Row="1"
+                            Margin="16,0,0,0"
+                            FontSize="11"
+                            Foreground="{DynamicResource TertiaryText}"
+                            VerticalAlignment="Bottom"
+                            Text="{Binding AddedDate, Converter={StaticResource DateConverter}}"/>
                     </Grid>
                 </StackPanel>
             </DataTemplate>

AutoCat/Pages/HistoryPage.axaml

@@ -5,7 +5,7 @@
              xmlns:pages="clr-namespace:AutoCat.Pages"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="AutoCat.Pages.HistoryPage">
-    <Grid ColumnDefinitions="400, Auto, *">
+    <Grid ColumnDefinitions="300, Auto, *">
         <pages:HistoryListPage/>
         <GridSplitter Grid.Column="1" ResizeDirection="Columns"/>
         <pages:ReportPage Grid.Column="2"/>

AutoCat/Resources/Colors.axaml

@@ -0,0 +1,15 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <SolidColorBrush x:Key="SecondaryText" Color="#666"/>
+            <SolidColorBrush x:Key="TertiaryText" Color="#999"/>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+            <SolidColorBrush x:Key="SecondaryText" Color="#999"/>
+            <SolidColorBrush x:Key="TertiaryText" Color="#666"/>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+    
+</ResourceDictionary>

AutoCat/Views/PlateView.axaml

@@ -2,31 +2,52 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="150"
+             xmlns:ext="clr-namespace:AutoCat.Extensions"
+             xmlns:views="clr-namespace:AutoCat.Views"
+             mc:Ignorable="d" d:DesignWidth="520" d:DesignHeight="112"
              x:Class="AutoCat.Views.PlateView"
+             x:Name="PlateViewControl"
              SizeChanged="UserControl_SizeChanged">
     
-        <Grid>
+    <Grid Height="{ext:Math Path=#PlateViewControl.Bounds.Width, Mult={x:Static views:PlateView.AspectRatio}}">
             <Rectangle RadiusX="6" RadiusY="6" Fill="#ccc"/>
             <Grid ColumnDefinitions="73*,27*">
 
                 <Grid>
                     <Rectangle Grid.Column="0" RadiusX="4" RadiusY="4" VerticalAlignment="Stretch" Fill="#333" Margin="2"/>
-                    <TextBlock x:Name="NumberBox" Text="A123AA" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#ccc"
-                               FontSize="{Binding Height}"/>
+                    <TextBlock x:Name="NumberBox" 
+                               Text="A163AA" 
+                               VerticalAlignment="Center"
+                               HorizontalAlignment="Center"
+                               TextAlignment="Center"
+                               Foreground="#ccc"
+                               FontSize="{ext:Math Path=#PlateViewControl.Bounds.Height, Mult=0.6}"/>
                 </Grid>
 
                 <Rectangle Grid.Column="1" RadiusX="4" RadiusY="4" VerticalAlignment="Stretch" Fill="#333" Margin="0,2,2,2"/>
                 <Grid Grid.Column="1" Margin="0,2,2,2" RowDefinitions="65*,35*">
-                    <TextBlock Grid.Row="0" x:Name="RegionBox" VerticalAlignment="Center" HorizontalAlignment="Center"
-                               Foreground="#ccc"/>
-                    <Grid Grid.Row="1" Margin="3,1" x:Name="CountryRow" ColumnDefinitions="*,Auto">
-                        <TextBlock Grid.Column="0" x:Name="CountryName" Text="RUS" VerticalAlignment="Center" TextAlignment="Center"/>
-                        <Grid Grid.Column="1" x:Name="FlagGrid" Margin="1" RowDefinitions="*,*,*">
+                    <TextBlock Grid.Row="0" 
+                               x:Name="RegionBox" 
+                               Text="161"
+                               VerticalAlignment="Center" 
+                               HorizontalAlignment="Center"
+                               Foreground="#ccc"
+                               FontSize="{ext:Math Path=#PlateViewControl.Bounds.Height, Mult=0.35}"/>
+                    <Grid Grid.Row="1" Margin="3,1" x:Name="CountryRow" ColumnDefinitions="Auto,*">
+                        <TextBlock Grid.Column="0" 
+                                   x:Name="CountryName" 
+                                   Text="RUS" 
+                                   VerticalAlignment="Center" 
+                                   HorizontalAlignment="Center"
+                                   Foreground="#ccc"
+                                   FontSize="{ext:Math Path=#PlateViewControl.Bounds.Height, Mult=0.2}"/>
+                        <!--
+                        <Grid Grid.Column="2" x:Name="FlagGrid" Margin="1" RowDefinitions="*,*,*">
                             <Rectangle Grid.Row="0" Fill="White"/>
                             <Rectangle Grid.Row="1" Fill="Blue"/>
                             <Rectangle Grid.Row="2" Fill="Red"/>
                         </Grid>
+                        -->
                     </Grid>
                 </Grid>
             </Grid>

AutoCat/Views/PlateView.axaml.cs

@@ -25,7 +25,7 @@ public partial class PlateView : UserControl
 
     #endregion
 
-    private const double AspectRatio = 112.0 / 520.0;
+    public const double AspectRatio = 112.0 / 520.0;
 
     static PlateView()
     {
@@ -47,25 +47,11 @@ public partial class PlateView : UserControl
         RegionBox.Text = number.Region();
     }
 
-    protected override Size MeasureOverride(Size availableSize)
-    {
-        var newAspect = availableSize.Height / availableSize.Width;
-        
-        return newAspect >= AspectRatio
-            ? new Size(availableSize.Width, availableSize.Width * AspectRatio)
-            : new Size(availableSize.Height / AspectRatio, availableSize.Height);
-    }
-
     private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
     {
-        NumberBox.Margin = new Thickness(0, -e.NewSize.Height * 0.35, 0, 0);
-        RegionBox.FontSize = e.NewSize.Height * 0.65;
-        RegionBox.Margin = new Thickness(0, -RegionBox.FontSize * 0.3, 0, 0);
-        FlagGrid.Width = FlagGrid.Height * 1.5;
-
-        if (CountryRow.Height > 0)
+        if (Bounds.Height > 0)
         {
-            CountryName.FontSize = CountryRow.Height;
+            Console.WriteLine($"=== new height: {Bounds.Height}");
         }
     }
 }