Update GridLayoutPage.xaml

Author: yaira2

src/Files.App/Views/Layouts/GridLayoutPage.xaml

@@ -7,6 +7,7 @@
 	xmlns:controls="using:Files.App.Controls"
 	xmlns:converters="using:Files.App.Converters"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	xmlns:datamodels="using:Files.App.Data.Models"
 	xmlns:filesystem="using:Files.App.Utils"
 	xmlns:helpers="using:Files.App.Helpers"
 	xmlns:i="using:Microsoft.Xaml.Interactivity"
@@ -439,48 +440,17 @@
 					VerticalAlignment="Stretch"
 					BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
 					BorderThickness="1"
-					ColumnSpacing="4"
 					CornerRadius="8"
 					IsRightTapEnabled="True"
 					Loaded="Grid_Loaded"
 					PointerEntered="Grid_PointerEntered">
 					<Grid.ColumnDefinitions>
 						<ColumnDefinition Width="Auto" />
-						<ColumnDefinition Width="68" />
 						<ColumnDefinition Width="*" />
 					</Grid.ColumnDefinitions>
 
-					<StackPanel
-						Width="20"
-						Margin="8,4,0,4"
-						HorizontalAlignment="Center"
-						VerticalAlignment="Center"
-						Orientation="Vertical">
-						<Ellipse
-							Width="12"
-							Height="12"
-							Margin="0,4,0,4"
-							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}" />
-
-						<Border
-							x:Name="CloudDriveSyncStatusGlyph"
-							x:Phase="2"
-							Background="Transparent"
-							ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
-							Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
-							<controls:ThemedIcon
-								Width="16"
-								Height="16"
-								Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
-						</Border>
-					</StackPanel>
-
 					<CheckBox
 						x:Name="SelectionCheckbox"
-						Grid.ColumnSpan="2"
 						Width="32"
 						MinWidth="0"
 						MinHeight="0"
@@ -495,8 +465,6 @@
 						Unchecked="ItemSelected_Unchecked" />
 
 					<Grid
-						Grid.Column="0"
-						Grid.ColumnSpan="2"
 						Width="{Binding ElementName=PageRoot, Path=CardsViewIconBoxWidth, Mode=OneWay}"
 						Height="{Binding ElementName=PageRoot, Path=CardsViewIconBoxHeight, Mode=OneWay}"
 						Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
@@ -529,8 +497,8 @@
 							Width="32"
 							Height="32"
 							Margin="2"
-							HorizontalAlignment="Left"
-							VerticalAlignment="Bottom"
+							HorizontalAlignment="Right"
+							VerticalAlignment="Top"
 							x:Load="True"
 							x:Phase="1"
 							Source="{x:Bind IconOverlay, Mode=OneWay}"
@@ -540,8 +508,8 @@
 							x:Name="ShortcutGlyphElement"
 							Width="16"
 							Height="16"
-							HorizontalAlignment="Left"
-							VerticalAlignment="Bottom"
+							HorizontalAlignment="Right"
+							VerticalAlignment="Top"
 							x:Load="{x:Bind IsShortcut}"
 							x:Phase="1">
 							<controls:ThemedIcon
@@ -555,21 +523,22 @@
 							Width="16"
 							Height="16"
 							HorizontalAlignment="Right"
-							VerticalAlignment="Bottom"
+							VerticalAlignment="Top"
 							x:Load="{x:Bind IsElevationRequired}"
 							x:Phase="1"
 							Source="{x:Bind ShieldIcon, Mode=OneWay}"
 							Stretch="Uniform" />
 					</Grid>
 
 					<Grid
-						Grid.Column="2"
-						Height="60"
-						Margin="0,4,8,4"
+						Grid.Column="1"
+						Padding="12,4,12,4"
 						RowSpacing="4">
 						<Grid.RowDefinitions>
 							<RowDefinition Height="Auto" />
 							<RowDefinition Height="Auto" />
+							<RowDefinition Height="*" />
+							<RowDefinition Height="Auto" />
 							<RowDefinition Height="Auto" />
 						</Grid.RowDefinitions>
 
@@ -579,15 +548,15 @@
 							HorizontalAlignment="Left"
 							MaxLines="2"
 							Opacity="{x:Bind Opacity, Mode=OneWay}"
+							Style="{ThemeResource BodyStrongTextBlockStyle}"
 							Text="{x:Bind Name, Mode=OneWay}"
 							TextTrimming="CharacterEllipsis"
 							TextWrapping="Wrap" />
 
 						<TextBox
 							x:Name="TileViewTextBoxItemName"
 							Grid.Row="0"
-							Grid.RowSpan="3"
-							MaxHeight="60"
+							Grid.RowSpan="5"
 							HorizontalAlignment="Stretch"
 							BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
 							Canvas.ZIndex="1"
@@ -602,21 +571,66 @@
 						<TextBlock
 							Grid.Row="1"
 							HorizontalAlignment="Left"
-							FontSize="12px"
-							Opacity="0.6"
+							Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+							Style="{ThemeResource CaptionTextBlockStyle}"
 							Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
 							TextTrimming="CharacterEllipsis"
 							TextWrapping="NoWrap" />
 
 						<TextBlock
-							Grid.Row="2"
+							Grid.Row="3"
 							HorizontalAlignment="Left"
-							FontSize="12px"
-							Opacity="0.6"
+							Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+							Style="{ThemeResource CaptionTextBlockStyle}"
 							Text="{x:Bind FileSize, Mode=OneWay}"
 							TextTrimming="CharacterEllipsis"
 							TextWrapping="NoWrap" />
 
+						<Grid Grid.Row="4" Padding="0,0,0,4">
+							<ItemsRepeater
+								x:Name="TagsRepeater"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Center"
+								x:Load="{x:Bind HasTags, Mode=OneWay, FallbackValue=False}"
+								ItemsSource="{x:Bind FileTagsUI, Mode=OneWay}"
+								Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
+								<ItemsRepeater.Layout>
+									<StackLayout Orientation="Horizontal" Spacing="-8" />
+								</ItemsRepeater.Layout>
+								<ItemsRepeater.ItemTemplate>
+									<DataTemplate x:DataType="datamodels:TagViewModel">
+										<Border
+											x:Name="Tag"
+											x:Phase="2"
+											ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
+											<controls:ThemedIcon
+												Width="16"
+												Height="16"
+												VerticalAlignment="Center"
+												IconColorType="Custom"
+												IsFilled="True"
+												Style="{StaticResource App.ThemedIcons.Tag}"
+												Color="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}" />
+										</Border>
+									</DataTemplate>
+								</ItemsRepeater.ItemTemplate>
+							</ItemsRepeater>
+
+							<Border
+								x:Name="CloudDriveSyncStatusGlyph"
+								HorizontalAlignment="Right"
+								VerticalAlignment="Center"
+								x:Phase="2"
+								Background="Transparent"
+								ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
+								Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
+								<controls:ThemedIcon
+									Width="16"
+									Height="16"
+									Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
+							</Border>
+						</Grid>
+
 					</Grid>
 
 					<VisualStateManager.VisualStateGroups>