From 236826bec3a607924c638f08aead0f20cc0a8ed8 Mon Sep 17 00:00:00 2001
From: Marcel Wagner <marcel.alex.wagner@outlook.com>
Date: Thu, 18 Jan 2024 19:16:45 +0100
Subject: [PATCH] Update list design

---
 .../Views/Layouts/GridLayoutPage.xaml         | 283 ++++++++++--------
 1 file changed, 152 insertions(+), 131 deletions(-)

diff --git a/src/Files.App/Views/Layouts/GridLayoutPage.xaml b/src/Files.App/Views/Layouts/GridLayoutPage.xaml
index 8387daa48c03..70d1040ad94d 100644
--- a/src/Files.App/Views/Layouts/GridLayoutPage.xaml
+++ b/src/Files.App/Views/Layouts/GridLayoutPage.xaml
@@ -22,7 +22,6 @@
 	NavigationCacheMode="Enabled"
 	mc:Ignorable="d">
 
-	
 	<i:Interaction.Behaviors>
 		<icore:EventTriggerBehavior EventName="PointerWheelChanged">
 			<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.PointerWheelChangedCommand}" />
@@ -43,8 +42,7 @@
 			<Style.Setters>
 				<Setter Property="ItemsPanel">
 					<Setter.Value>
-						<ItemsPanelTemplate>
-						</ItemsPanelTemplate>
+						<ItemsPanelTemplate />
 					</Setter.Value>
 				</Setter>
 			</Style.Setters>
@@ -277,155 +275,175 @@
 
 		<DataTemplate x:Name="GridViewBrowserTemplateVertical" x:DataType="filesystem:ListedItem">
 			<UserControl>
-				<StackPanel 
+				<Grid
+					x:Name="FilesRootGrid"
+					Height="30"
+					Padding="12,0,12,0"
 					Width="300"
-					x:Name="GridViewBrowserListedItem"
-					Height="60"
 					HorizontalAlignment="Stretch"
-					VerticalAlignment="Stretch"
-					tui:FrameworkElementExtensions.EnableActualSizeBinding="True"
-					Background="Transparent"
-					Orientation="Horizontal"
+					VerticalAlignment="Center"
+					CornerRadius="{StaticResource ControlCornerRadius}"
 					IsRightTapEnabled="True"
+					Loaded="Grid_Loaded"
+					PointerEntered="Grid_PointerEntered"
 					ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
-
+					
+					<Grid.ColumnDefinitions>
+						<ColumnDefinition Width="24" />
+						<ColumnDefinition Width="*" />
+						<ColumnDefinition Width="Auto" />
+					</Grid.ColumnDefinitions>
+					
+					<!--  Item Thumbnail  -->
 					<Grid
-						Grid.Row="0"
-						Width="40"
-						Height="40"
-						VerticalAlignment="Center"
-						MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
-						Opacity="{x:Bind Opacity, Mode=OneWay}"
-						Tag="ItemImage">
+						Width="24"
+						HorizontalAlignment="Left"
+						VerticalAlignment="Stretch">
 
-						<ContentPresenter
-							x:Name="PictureBorder"
-							Margin="12"
+						<!--  Thumbnail  -->
+						<Grid
+							x:Name="IconBox"
+							Width="20"
+							Height="Auto"
 							HorizontalAlignment="Center"
 							VerticalAlignment="Center"
-							x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
-							x:Phase="1"
-							CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
+							AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
+							Opacity="{x:Bind Opacity, Mode=OneWay}"
+							TabFocusNavigation="Local"
+							Tag="ItemImage">
+							<ContentPresenter
+								x:Name="PicturePresenter"
+								Width="20"
+								Height="20"
+								HorizontalAlignment="Center"
+								VerticalAlignment="Center"
+								x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
+								CornerRadius="{StaticResource DetailsLayoutThumbnailCornerRadius}">
+								<Image
+									x:Name="Picture"
+									Source="{x:Bind FileImage, Mode=OneWay}"
+									Stretch="Uniform" />
+							</ContentPresenter>
+							<Border
+								x:Name="TypeUnknownGlyph"
+								Width="20"
+								Height="20"
+								HorizontalAlignment="Stretch"
+								VerticalAlignment="Stretch"
+								x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
+								Background="{ThemeResource SystemChromeHighColor}"
+								CornerRadius="4" />
+							<FontIcon
+								x:Name="WebShortcutGlyph"
+								x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
+								Glyph="&#xE71B;" />
 							<Image
-								x:Name="Picture"
-								Source="{x:Bind FileImage, Mode=OneWay}"
+								x:Name="IconOverlay"
+								Width="16"
+								Height="16"
+								Margin="2"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Bottom"
+								x:Load="True"
+								Source="{x:Bind IconOverlay, Mode=OneWay}"
 								Stretch="Uniform" />
-						</ContentPresenter>
-
-						<Border
-							x:Name="TypeUnknownGlyph"
-							MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
-							MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
-							Margin="12"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Stretch"
-							x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
-							Background="{ThemeResource SystemChromeHighColor}"
-							CornerRadius="4" />
-
-						<Image
-							x:Name="IconOverlay"
-							Width="32"
-							Height="32"
-							Margin="16"
-							HorizontalAlignment="Left"
-							VerticalAlignment="Bottom"
-							x:Load="True"
-							x:Phase="1"
-							Source="{x:Bind IconOverlay, Mode=OneWay}"
-							Stretch="Uniform" />
-
-						<Viewbox
-							x:Name="WebShortcutGlyph"
-							MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
-							MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
-							Margin="12"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Stretch"
-							x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
-							x:Phase="1">
-							<FontIcon FontSize="28" Glyph="&#xE71B;" />
-						</Viewbox>
+							<Border
+								x:Name="ShortcutGlyphElement"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Bottom"
+								x:Load="{x:Bind IsShortcut}">
+								<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
+							</Border>
+							<Image
+								x:Name="ShieldOverlay"
+								Width="8"
+								Height="8"
+								HorizontalAlignment="Right"
+								VerticalAlignment="Bottom"
+								x:Load="{x:Bind IsElevated}"
+								Source="{x:Bind ShieldIcon, Mode=OneWay}"
+								Stretch="Uniform" />
+						</Grid>
 
-						<Viewbox
-							x:Name="ShortcutGlyphElement"
-							Width="16"
-							Height="16"
-							Margin="14"
-							HorizontalAlignment="Left"
-							VerticalAlignment="Bottom"
-							x:Load="{x:Bind IsShortcut}"
-							x:Phase="1">
-							<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
-						</Viewbox>
+						<!--  Selection Check Box  -->
+						<CheckBox
+							x:Name="SelectionCheckbox"
+							Width="20"
+							MinWidth="0"
+							HorizontalAlignment="Center"
+							AutomationProperties.AccessibilityView="Raw"
+							Checked="ItemSelected_Checked"
+							DoubleTapped="SelectionCheckbox_DoubleTapped"
+							Opacity="0"
+							Unchecked="ItemSelected_Unchecked" />
 
-						<Image
-							x:Name="ShieldOverlay"
-							Width="16"
-							Height="16"
-							Margin="14"
-							HorizontalAlignment="Right"
-							VerticalAlignment="Bottom"
-							x:Load="{x:Bind IsElevated}"
-							x:Phase="1"
-							Source="{x:Bind ShieldIcon, Mode=OneWay}"
-							Stretch="Uniform" />
 					</Grid>
 
+					<!--  Item Name  -->
 					<TextBlock
-							x:Name="ItemName"
-							Grid.Column="2"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Center"
-							Opacity="{x:Bind Opacity, Mode=OneWay}"
-							Text="{x:Bind Name, Mode=OneWay}"
-							TextAlignment="Center"
-							TextTrimming="CharacterEllipsis"
-							TextWrapping="Wrap" />
-					
-
-					<CheckBox
-						x:Name="SelectionCheckbox"
-						Grid.RowSpan="2"
-						Grid.ColumnSpan="2"
-						Width="32"
-						MinWidth="0"
-						MinHeight="0"
-						Margin="6"
-						Padding="0"
+						x:Name="ItemName"
+						Grid.Column="1"
+						Margin="5,0,5,0"
 						HorizontalAlignment="Left"
-						VerticalAlignment="Top"
-						AutomationProperties.AccessibilityView="Raw"
-						Checked="ItemSelected_Checked"
-						DoubleTapped="SelectionCheckbox_DoubleTapped"
-						Opacity="0"
-						Unchecked="ItemSelected_Unchecked" />
-
-					<Popup x:Name="EditPopup" Grid.Row="1">
-						<TextBox
-							x:Name="GridViewTextBoxItemName"
-							Width="{Binding ElementName=GridViewBrowserListedItem, Path=(tui:FrameworkElementExtensions.ActualWidth)}"
-							Margin="0"
-							HorizontalAlignment="Stretch"
-							VerticalAlignment="Stretch"
-							Background="{ThemeResource SolidBackgroundFillColorSecondary}"
-							BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
-							Text="{x:Bind Name, Mode=OneWay}"
-							TextAlignment="Center"
-							TextWrapping="Wrap" />
-					</Popup>
+						VerticalAlignment="Center"
+						Opacity="{x:Bind Opacity, Mode=OneWay}"
+						Text="{x:Bind Name, Mode=OneWay}"
+						TextTrimming="CharacterEllipsis"
+						TextWrapping="NoWrap" />
 
+					<!--  Rename Text Box  -->
+					<TextBox
+						x:Name="ListViewTextBoxItemName"
+						Grid.Column="1"
+						Margin="0"
+						HorizontalAlignment="Stretch"
+						VerticalAlignment="Stretch"
+						BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
+						TextAlignment="Left"
+						TextWrapping="Wrap"
+						Visibility="Collapsed">
+						<TextBox.Resources>
+							<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
+						</TextBox.Resources>
+					</TextBox>
+
+					<Grid Grid.Column="2">
+						<StackPanel Orientation="Horizontal" Spacing="4">
+
+							<!--  Cloud Status  -->
+							<FontIcon
+								x:Name="CloudDriveSyncStatusGlyph"
+								HorizontalAlignment="Center"
+								VerticalAlignment="Center"
+								x:Phase="2"
+								FontSize="12"
+								Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
+								Visibility="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />
+
+							<!--  Tag  -->
+							<Ellipse
+								Width="12"
+								Height="12"
+								Margin="8,0,4,0"
+								x:Phase="2"
+								Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
+								ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
+								Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
+						</StackPanel>
+					</Grid>
+					<!--  Visual Status Managing  -->
 					<VisualStateManager.VisualStateGroups>
 						<VisualStateGroup x:Name="CheckboxVisibilityStates">
 							<VisualState x:Name="HideCheckbox" />
 							<VisualState x:Name="ShowCheckbox">
 								<VisualState.Setters>
 									<Setter Target="SelectionCheckbox.Opacity" Value="1" />
+									<Setter Target="IconBox.Visibility" Value="Collapsed" />
 								</VisualState.Setters>
 							</VisualState>
 						</VisualStateGroup>
 					</VisualStateManager.VisualStateGroups>
-				</StackPanel>
+				</Grid>
 			</UserControl>
 		</DataTemplate>
 
@@ -726,10 +744,14 @@
 
 	<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
 		<Grid.RowDefinitions>
-			<RowDefinition Height="Auto"/>
-			<RowDefinition Height="*"/>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="*" />
 		</Grid.RowDefinitions>
-		<Button x:Name="ChangeRotationButton" Click="ChangeRotationButton_Click" Content="Change direction" VerticalAlignment="Top"/>
+		<Button
+			x:Name="ChangeRotationButton"
+			VerticalAlignment="Top"
+			Click="ChangeRotationButton_Click"
+			Content="Change direction" />
 		<!--  Empty Indicator  -->
 		<uc:FolderEmptyIndicator
 			Grid.Row="3"
@@ -751,7 +773,6 @@
 		<SemanticZoom
 			x:Name="RootGridZoom"
 			Grid.Row="1"
-			Margin="50,0,0,0"
 			CanChangeViews="{x:Bind CollectionViewSource.IsSourceGrouped, Mode=OneWay}"
 			ViewChangeStarted="SemanticZoom_ViewChangeStarted"
 			Visibility="{x:Bind FolderSettings.IsLayoutModeChanging, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}">
@@ -778,10 +799,10 @@
 					IsTabStop="True"
 					ItemsSource="{x:Bind CollectionViewSource.View, Mode=OneWay}"
 					PreviewKeyDown="FileList_PreviewKeyDown"
-					ScrollViewer.IsHorizontalScrollChainingEnabled="False"
 					ScrollViewer.HorizontalScrollBarVisibility="Auto"
-					ScrollViewer.VerticalScrollBarVisibility="Auto"
 					ScrollViewer.HorizontalScrollMode="Auto"
+					ScrollViewer.IsHorizontalScrollChainingEnabled="False"
+					ScrollViewer.VerticalScrollBarVisibility="Auto"
 					ScrollViewer.VerticalScrollMode="Auto"
 					SelectionChanged="FileList_SelectionChanged"
 					SelectionMode="Extended"