From 8ee6aa34bd57b107674e339837e3a869f02a4f2d Mon Sep 17 00:00:00 2001
From: Yair <39923744+yaira2@users.noreply.github.com>
Date: Wed, 21 Dec 2022 14:07:11 -0500
Subject: [PATCH] Feature: Refactoring the preview pane

---
 src/Files.App/Constants.cs                    |  18 --
 .../UserControls/Pane/PreviewPane.xaml        | 168 ++++++------------
 2 files changed, 52 insertions(+), 134 deletions(-)

diff --git a/src/Files.App/Constants.cs b/src/Files.App/Constants.cs
index 9638785abd39..fdc78771ef36 100644
--- a/src/Files.App/Constants.cs
+++ b/src/Files.App/Constants.cs
@@ -174,24 +174,6 @@ public static class PreviewPane
 			/// The maximum file size, in bytes, that will attempted to be loaded as text if the extension is unknown.
 			/// </summary>
 			public const long TryLoadAsTextSizeLimit = 500000;
-
-			/// <summary>
-			/// The number of thumbnails that will be shown for FolderPreviews
-			/// </summary>
-			public const int FolderPreviewThumbnailCount = 10;
-		}
-
-		public static class PaneContent
-		{
-			public const string ContentKey = "PaneContent";
-
-			public const string HorizontalSizePxKey = "PaneHorizontalSizePx";
-
-			public const string VerticalSizePxKey = "PaneVerticalSizePx";
-
-			public const string MediaVolumeKey = "PaneMediaVolume";
-
-			public const string ShowPreviewOnlyKey = "ShowPreviewOnly";
 		}
 
 		public static class ResourceFilePaths
diff --git a/src/Files.App/UserControls/Pane/PreviewPane.xaml b/src/Files.App/UserControls/Pane/PreviewPane.xaml
index 52d60328ea55..1c9e0c668d5e 100644
--- a/src/Files.App/UserControls/Pane/PreviewPane.xaml
+++ b/src/Files.App/UserControls/Pane/PreviewPane.xaml
@@ -38,17 +38,10 @@
 				Height="3*"
 				MinHeight="100" />
 		</Grid.RowDefinitions>
-		<Grid.ColumnDefinitions>
-			<ColumnDefinition Width="2*" MinWidth="120" />
-			<ColumnDefinition
-				x:Name="PropertiesColumn"
-				Width="3*"
-				MinWidth="120" />
-		</Grid.ColumnDefinitions>
 
 		<Grid
 			x:Name="RootPreviewGrid"
-			Margin="5,5,5,5"
+			Margin="8"
 			HorizontalAlignment="Stretch"
 			VerticalAlignment="Stretch"
 			AutomationProperties.Name="{helpers:ResourceString Name=PreviewPaneFilePreview/AutomationProperties/Name}">
@@ -88,108 +81,59 @@
 				Visibility="Collapsed" />
 		</Grid>
 
-		<Grid x:Name="RootPropertiesGrid" Grid.Row="2">
-			<TextBlock
-				x:Name="DetailsErrorText"
-				HorizontalAlignment="Center"
-				VerticalAlignment="Center"
-				Text="{x:Bind GetLocalizedResource('NoItemSelected')}"
-				TextWrapping="WrapWholeWords"
-				Visibility="Visible" />
-			<ScrollViewer
-				x:Name="FileDetailsScrollViewer"
-				AutomationProperties.Name="{helpers:ResourceString Name=PreviewPaneFileDetails/AutomationProperties/Name}"
-				Visibility="Visible">
-				<StackPanel Orientation="Vertical">
-					<StackPanel
-						x:Name="DetailsListHeader"
-						Margin="8,8,8,0"
-						Orientation="Vertical"
-						Spacing="5"
-						Visibility="Collapsed">
-						<TextBlock
-							FontSize="20"
-							FontWeight="Bold"
-							HorizontalTextAlignment="Center"
-							IsTextSelectionEnabled="True"
-							Text="{x:Bind ViewModel.SelectedItem.Name, Mode=OneWay}"
-							TextAlignment="Center"
-							TextWrapping="Wrap" />
-						<TextBlock
-							HorizontalAlignment="Stretch"
-							FontSize="18"
-							HorizontalTextAlignment="Center"
-							IsTextSelectionEnabled="True"
-							Text="{x:Bind ViewModel.SelectedItem.Name, Mode=OneWay}"
-							TextAlignment="Center"
-							TextWrapping="Wrap" />
-					</StackPanel>
-					<ItemsControl
-						x:Name="FileDetailsRepeater"
-						Margin="8"
-						ItemsSource="{x:Bind ViewModel.SelectedItem.FileDetails, Mode=OneWay}"
-						Visibility="Collapsed">
-						<ItemsControl.ItemContainerTransitions>
-							<TransitionCollection>
-								<EntranceThemeTransition IsStaggeringEnabled="False" />
-							</TransitionCollection>
-						</ItemsControl.ItemContainerTransitions>
-						<ItemsControl.ItemTemplate>
-							<DataTemplate x:DataType="properties:FileProperty">
-								<Grid
-									Padding="0,0,0,8"
+		<ScrollViewer
+			x:Name="RootPropertiesScrollViewer"
+			Grid.Row="1"
+			AutomationProperties.Name="{helpers:ResourceString Name=PreviewPaneFileDetails/AutomationProperties/Name}"
+			Visibility="Visible">
+			<StackPanel Orientation="Vertical">
+				<TextBlock
+					x:Name="DetailsListHeader"
+					FontSize="20"
+					FontWeight="Bold"
+					HorizontalAlignment="Center"
+					IsTextSelectionEnabled="True"
+					Text="{x:Bind ViewModel.SelectedItem.Name, Mode=OneWay}"
+					TextAlignment="Center"
+					TextWrapping="Wrap"
+					Visibility="Collapsed" />
+
+				<ItemsControl
+					x:Name="FileDetailsRepeater"
+					Margin="12"
+					ItemsSource="{x:Bind ViewModel.SelectedItem.FileDetails, Mode=OneWay}"
+					Visibility="Collapsed">
+					<ItemsControl.ItemTemplate>
+						<DataTemplate x:DataType="properties:FileProperty">
+							<Grid HorizontalAlignment="Stretch" AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
+								<Grid.ColumnDefinitions>
+									<ColumnDefinition />
+									<ColumnDefinition />
+								</Grid.ColumnDefinitions>
+								<!--  Property  -->
+								<TextBlock
 									HorizontalAlignment="Stretch"
-									AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
-									<Grid.RowDefinitions>
-										<RowDefinition />
-										<RowDefinition />
-									</Grid.RowDefinitions>
-									<TextBlock
-										HorizontalAlignment="Stretch"
-										Style="{StaticResource BodyTextBlockStyle}"
-										Text="{x:Bind Name, Mode=OneWay}" />
-									<TextBlock
-										x:Name="PropertyValueTemplateTextBox"
-										Grid.Row="1"
-										HorizontalAlignment="Stretch"
-										IsTextSelectionEnabled="True"
-										Style="{StaticResource CaptionTextBlockStyle}"
-										Text="{x:Bind ValueText, Mode=TwoWay}"
-										TextWrapping="Wrap" />
-								</Grid>
-							</DataTemplate>
-						</ItemsControl.ItemTemplate>
-					</ItemsControl>
-				</StackPanel>
-			</ScrollViewer>
-		</Grid>
+									MaxLines="2"
+									Style="{StaticResource BodyTextBlockStyle}"
+									Text="{x:Bind Name, Mode=OneWay}" />
+
+								<!--  Value  -->
+								<TextBox
+									x:Name="PropertyValueTemplateTextBox"
+									Grid.Column="1"
+									HorizontalAlignment="Stretch"
+									Background="Transparent"
+									BorderBrush="Transparent"
+									Text="{x:Bind ValueText, Mode=TwoWay}"
+									TextWrapping="Wrap" />
+							</Grid>
+						</DataTemplate>
+					</ItemsControl.ItemTemplate>
+				</ItemsControl>
+			</StackPanel>
+		</ScrollViewer>
 
 		<VisualStateManager.VisualStateGroups>
-			<VisualStateGroup>
-				<VisualState>
-					<VisualState.StateTriggers>
-						<triggers:IsEqualStateTrigger Value="{x:Bind Context.IsHorizontal, Mode=OneWay}" To="True" />
-					</VisualState.StateTriggers>
-					<VisualState.Setters>
-						<Setter Target="RootPropertiesGrid.(Grid.Row)" Value="0" />
-						<Setter Target="RootPropertiesGrid.(Grid.Column)" Value="1" />
-						<Setter Target="PropertiesRow.MinHeight" Value="0" />
-						<Setter Target="PropertiesRow.Height" Value="0" />
-					</VisualState.Setters>
-				</VisualState>
-				<VisualState>
-					<VisualState.StateTriggers>
-						<triggers:IsEqualStateTrigger Value="{x:Bind Context.IsHorizontal, Mode=OneWay}" To="False" />
-					</VisualState.StateTriggers>
-					<VisualState.Setters>
-						<Setter Target="RootPropertiesGrid.(Grid.Row)" Value="1" />
-						<Setter Target="RootPropertiesGrid.(Grid.Column)" Value="0" />
-						<Setter Target="PropertiesColumn.Width" Value="0" />
-						<Setter Target="PropertiesColumn.MinWidth" Value="0" />
-					</VisualState.Setters>
-				</VisualState>
-				<VisualState />
-			</VisualStateGroup>
 			<VisualStateGroup>
 				<VisualState x:Name="NoItemSelected">
 					<VisualState.StateTriggers>
@@ -204,7 +148,6 @@
 					<VisualState.Setters>
 						<Setter Target="PreviewErrorText.Visibility" Value="Visible" />
 						<Setter Target="PreviewErrorText.Text" Value="{x:Bind GetLocalizedResource('DetailsPanePreviewNotAvaliableText')}" />
-						<Setter Target="DetailsErrorText.Visibility" Value="Collapsed" />
 						<Setter Target="FileDetailsRepeater.Visibility" Value="Visible" />
 						<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
 						<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
@@ -217,8 +160,6 @@
 					<VisualState.Setters>
 						<Setter Target="PreviewErrorText.Visibility" Value="Visible" />
 						<Setter Target="PreviewErrorText.Text" Value="{x:Bind GetLocalizedResource('DetailsPanePreviewNotAvaliableText')}" />
-						<Setter Target="DetailsErrorText.Visibility" Value="Visible" />
-						<Setter Target="DetailsErrorText.Text" Value="{x:Bind GetLocalizedResource('PreviewPaneDetailsNotAvailableText')}" />
 						<Setter Target="FileDetailsRepeater.Visibility" Value="Collapsed" />
 						<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
 					</VisualState.Setters>
@@ -229,7 +170,6 @@
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
 						<Setter Target="PreviewErrorText.Visibility" Value="Collapsed" />
-						<Setter Target="DetailsErrorText.Visibility" Value="Collapsed" />
 						<Setter Target="FileDetailsRepeater.Visibility" Value="Visible" />
 						<Setter Target="PreviewControlPresenter.Visibility" Value="Visible" />
 						<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
@@ -241,7 +181,6 @@
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
 						<Setter Target="PreviewErrorText.Visibility" Value="Collapsed" />
-						<Setter Target="DetailsErrorText.Visibility" Value="Collapsed" />
 						<Setter Target="FileDetailsRepeater.Visibility" Value="Collapsed" />
 						<Setter Target="DetailsListHeader.Visibility" Value="Visible" />
 						<Setter Target="PreviewControlPresenter.Visibility" Value="Collapsed" />
@@ -260,10 +199,7 @@
 						<triggers:IsEqualStateTrigger Value="{x:Bind PaneSettingsService.ShowPreviewOnly, Mode=OneWay}" To="True" />
 					</VisualState.StateTriggers>
 					<VisualState.Setters>
-						<Setter Target="RootPropertiesGrid.Visibility" Value="Collapsed" />
-						<Setter Target="RootPropertiesGrid.Visibility" Value="Collapsed" />
-						<Setter Target="RootPreviewGrid.(RowSpan)" Value="2" />
-						<Setter Target="RootPreviewGrid.(ColumnSpan)" Value="2" />
+						<Setter Target="RootPropertiesScrollViewer.Visibility" Value="Collapsed" />
 					</VisualState.Setters>
 				</VisualState>
 			</VisualStateGroup>