Make ImageInfoWindow more responsive and user-friendly

- Add `ExtraTextBoxMaxWidth` property for improved text display based on window size.
- Adjust button visibility, layout, and padding dynamically using new breakpoint logic.
- Convert several `IconButton` controls to `TextIconButton` for better usability and accessibility.
- Add text bindings and customizable margins for better alignment and spacing.
- Refactor design elements for improved responsiveness and layout clarity.

src/PicView.Avalonia.Win32/Views/ImageInfoWindow.axaml

@@ -53,7 +53,6 @@
                     Width="29"
                     x:Name="CloseButton" />
 
-
                 <customControls:IconButton
                     Background="{DynamicResource MainButtonBackgroundColor}"
                     BorderBrush="{DynamicResource MainBorderColor}"
@@ -96,7 +95,14 @@
                     Width="35"
                     x:Name="RemoveRatingButton" />
 
-                <customControls:IconButton
+                <Rectangle
+                    DockPanel.Dock="Right"
+                    Fill="{DynamicResource MainBorderColor}"
+                    Height="28"
+                    IsVisible="{CompiledBinding !InfoWindow.IsExtraButtonsEnabled.Value}"
+                    Width="1" />
+
+                <customControls:TextIconButton
                     BorderBrush="{DynamicResource MainBorderColor}"
                     BorderThickness="0,0,1,0"
                     Classes="errorHover"
@@ -109,13 +115,17 @@
                     Foreground="{DynamicResource MainTextColor}"
                     Height="28"
                     IconHeight="17"
+                    IconMargin="10,0,5,0"
                     IconWidth="17"
                     IsEnabled="{CompiledBinding PicViewer.FileInfo.Value,
                                                 Converter={x:Static ObjectConverters.IsNotNull}}"
                     IsVisible="{CompiledBinding InfoWindow.IsExtraButtonsEnabled.Value}"
+                    Text="{CompiledBinding Translation.DeleteFile.Value,
+                                           Mode=OneWay}"
+                    TextMargin="5,0,5,0"
+                    TextMaxWidth="{CompiledBinding InfoWindow.ExtraTextBoxMaxWidth.Value}"
                     ToolTip.Tip="{CompiledBinding Translation.DeleteFile.Value,
                                                   Mode=OneWay}"
-                    Width="35"
                     x:Name="RecycleButton" />
 
                 <customControls:TextIconButton
@@ -191,7 +201,7 @@
                                                   Mode=OneWay}"
                     x:Name="OpenWithButton" />
 
-                <customControls:IconButton
+                <customControls:TextIconButton
                     BorderBrush="{DynamicResource MainBorderColor}"
                     BorderThickness="0,0,1,0"
                     Classes="noBorderHover"
@@ -203,16 +213,20 @@
                     Foreground="{DynamicResource MainTextColor}"
                     Height="28"
                     IconHeight="17"
+                    IconMargin="10,0,5,0"
                     IconWidth="17"
                     IsEnabled="{CompiledBinding PicViewer.FileInfo.Value,
                                                 Converter={x:Static ObjectConverters.IsNotNull}}"
                     IsVisible="{CompiledBinding InfoWindow.IsExtraButtonsEnabled.Value}"
+                    Text="{CompiledBinding Translation.DuplicateFile.Value,
+                                           Mode=OneWay}"
+                    TextMargin="5,0,5,0"
+                    TextMaxWidth="{CompiledBinding InfoWindow.ExtraTextBoxMaxWidth.Value}"
                     ToolTip.Tip="{CompiledBinding Translation.DuplicateFile.Value,
                                                   Mode=OneWay}"
-                    Width="45"
                     x:Name="DuplicateButton" />
 
-                <customControls:IconButton
+                <customControls:TextIconButton
                     BorderBrush="{DynamicResource MainBorderColor}"
                     BorderThickness="1,0,1,0"
                     Classes="noBorderHover"
@@ -224,13 +238,17 @@
                     Foreground="{DynamicResource MainTextColor}"
                     Height="28"
                     IconHeight="17"
+                    IconMargin="10,0,5,0"
                     IconWidth="17"
                     IsEnabled="{CompiledBinding PicViewer.FileInfo.Value,
                                                 Converter={x:Static ObjectConverters.IsNotNull}}"
                     IsVisible="{CompiledBinding InfoWindow.IsExtraButtonsEnabled.Value}"
+                    Text="{CompiledBinding Translation.DuplicateFile.Value,
+                                           Mode=OneWay}"
+                    TextMargin="5,0,5,0"
+                    TextMaxWidth="{CompiledBinding InfoWindow.ExtraTextBoxMaxWidth.Value}"
                     ToolTip.Tip="{CompiledBinding Translation.ShowInFolder.Value,
                                                   Mode=OneWay}"
-                    Width="45"
                     x:Name="LocateOnDiskButton" />
 
                 <TextBlock

src/PicView.Core/ViewModels/ImageInfoWindowViewModel.cs

@@ -10,6 +10,7 @@ public class ImageInfoWindowViewModel : IDisposable
     private const int TextMaxWidth = 135;
     
     public BindableReactiveProperty<double> TextBoxMaxWidth { get; } = new(TextMaxWidth);
+    public BindableReactiveProperty<double> ExtraTextBoxMaxWidth { get; } = new(TextMaxWidth);
 
     public BindableReactiveProperty<double> TextBoxWidth { get; } = new(180);
     public BindableReactiveProperty<double> TextBoxXlWidth { get; } = new(620);
@@ -37,8 +38,7 @@ public class ImageInfoWindowViewModel : IDisposable
         const int firstBreakPoint = 600;
         const int secondBreakPoint = 900;
         const int thirdBreakPoint = 1100;
-
-        const int textBreakpoint = 920;
+        const int fourthBreakPoint = 1400;
 
         var textWidth = TextWidth;
         var copyBtnWidth = CopyButtonWidth;
@@ -49,7 +49,8 @@ public class ImageInfoWindowViewModel : IDisposable
         const int smallPadding = 10;
         const int largePadding = 40;
 
-        TextBoxMaxWidth.Value = width < textBreakpoint ? 0 : TextMaxWidth;
+        TextBoxMaxWidth.Value = width < thirdBreakPoint ? 0 : TextMaxWidth;
+        ExtraTextBoxMaxWidth.Value = width < fourthBreakPoint ? 0 : TextMaxWidth;
 
         switch (width)
         {