Skip to content

Commit 95f8642

Browse files
yaira2yaira2
committed
Styling
1 parent c69e745 commit 95f8642

File tree

2 files changed

+111
-85
lines changed

2 files changed

+111
-85
lines changed

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

Lines changed: 108 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -532,106 +532,132 @@
532532
Stretch="Uniform" />
533533
</Grid>
534534

535-
<Grid
536-
Grid.Column="1"
537-
Padding="12,4,12,4"
538-
RowSpacing="4">
535+
<Grid Grid.Column="1" Padding="12,4,12,4">
539536
<Grid.RowDefinitions>
540-
<RowDefinition Height="Auto" />
541537
<RowDefinition Height="*" />
542-
<RowDefinition Height="Auto" />
543-
<RowDefinition Height="Auto" />
538+
<RowDefinition Height="*" />
539+
<RowDefinition Height="*" />
540+
<RowDefinition Height="*" />
541+
<RowDefinition Height="*" />
544542
</Grid.RowDefinitions>
545543

546-
<TextBlock
547-
x:Name="ItemName"
544+
<StackPanel
548545
Grid.Row="0"
549-
HorizontalAlignment="Left"
550-
MaxLines="2"
551-
Opacity="{x:Bind Opacity, Mode=OneWay}"
552-
Style="{ThemeResource BodyStrongTextBlockStyle}"
553-
Text="{x:Bind Name, Mode=OneWay}"
554-
TextTrimming="CharacterEllipsis"
555-
TextWrapping="Wrap" />
556-
546+
Grid.RowSpan="2"
547+
Orientation="Vertical"
548+
Spacing="4">
549+
550+
<!-- Item Name -->
551+
<TextBlock
552+
x:Name="ItemName"
553+
MaxLines="2"
554+
Opacity="{x:Bind Opacity, Mode=OneWay}"
555+
Style="{ThemeResource BodyStrongTextBlockStyle}"
556+
Text="{x:Bind Name, Mode=OneWay}"
557+
TextTrimming="CharacterEllipsis"
558+
TextWrapping="Wrap" />
559+
560+
<!-- Item Type -->
561+
<TextBlock
562+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
563+
Style="{ThemeResource CaptionTextBlockStyle}"
564+
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
565+
TextTrimming="CharacterEllipsis"
566+
TextWrapping="NoWrap" />
567+
568+
</StackPanel>
569+
570+
<!-- Item Name Edit Box -->
557571
<TextBox
558572
x:Name="TileViewTextBoxItemName"
559573
Grid.Row="0"
560-
Grid.RowSpan="4"
574+
Grid.RowSpan="5"
575+
Margin="-2,0,-2,0"
561576
HorizontalAlignment="Stretch"
577+
VerticalAlignment="Top"
562578
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
563579
Canvas.ZIndex="1"
564580
Text="{x:Bind Name, Mode=OneWay}"
565581
TextWrapping="Wrap"
566582
Visibility="Collapsed">
567583
<TextBox.Resources>
568-
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
584+
<ResourceDictionary>
585+
<ResourceDictionary.ThemeDictionaries>
586+
<ResourceDictionary x:Key="Light">
587+
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource ControlFillColorInputActive}" />
588+
</ResourceDictionary>
589+
<ResourceDictionary x:Key="Dark">
590+
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="#1E1E1E" />
591+
</ResourceDictionary>
592+
<ResourceDictionary x:Key="HighContrast">
593+
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}" />
594+
</ResourceDictionary>
595+
</ResourceDictionary.ThemeDictionaries>
596+
</ResourceDictionary>
569597
</TextBox.Resources>
570598
</TextBox>
571599

572-
<TextBlock
573-
Grid.Row="1"
574-
HorizontalAlignment="Left"
575-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
576-
Style="{ThemeResource CaptionTextBlockStyle}"
577-
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
578-
TextTrimming="CharacterEllipsis"
579-
TextWrapping="NoWrap" />
580-
581-
<TextBlock
582-
Grid.Row="2"
583-
HorizontalAlignment="Left"
584-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
585-
Style="{ThemeResource CaptionTextBlockStyle}"
586-
Text="{x:Bind FileSize, Mode=OneWay}"
587-
TextTrimming="CharacterEllipsis"
588-
TextWrapping="NoWrap" />
589-
590-
<Grid Grid.Row="3" Padding="0,0,0,4">
591-
<ItemsRepeater
592-
x:Name="TagsRepeater"
593-
HorizontalAlignment="Left"
594-
VerticalAlignment="Center"
595-
x:Load="{x:Bind HasTags, Mode=OneWay, FallbackValue=False}"
596-
ItemsSource="{x:Bind FileTagsUI, Mode=OneWay}"
597-
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
598-
<ItemsRepeater.Layout>
599-
<StackLayout Orientation="Horizontal" Spacing="-4" />
600-
</ItemsRepeater.Layout>
601-
<ItemsRepeater.ItemTemplate>
602-
<DataTemplate x:DataType="datamodels:TagViewModel">
603-
<Border
604-
x:Name="Tag"
605-
x:Phase="2"
606-
ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
607-
<controls:ThemedIcon
608-
Width="12"
609-
Height="12"
610-
VerticalAlignment="Center"
611-
IconColorType="Custom"
612-
IsFilled="True"
613-
Style="{StaticResource App.ThemedIcons.Tag}"
614-
Color="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}" />
615-
</Border>
616-
</DataTemplate>
617-
</ItemsRepeater.ItemTemplate>
618-
</ItemsRepeater>
619-
620-
<Border
621-
x:Name="CloudDriveSyncStatusGlyph"
622-
HorizontalAlignment="Right"
623-
VerticalAlignment="Center"
624-
x:Phase="2"
625-
Background="Transparent"
626-
ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
627-
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
628-
<controls:ThemedIcon
629-
Width="16"
630-
Height="16"
631-
Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
632-
</Border>
633-
</Grid>
634-
600+
<StackPanel
601+
Grid.Row="3"
602+
Grid.RowSpan="2"
603+
Orientation="Vertical"
604+
Spacing="4">
605+
606+
<!-- Item Size -->
607+
<TextBlock
608+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
609+
Style="{ThemeResource CaptionTextBlockStyle}"
610+
Text="{x:Bind FileSize, Mode=OneWay}"
611+
TextTrimming="CharacterEllipsis"
612+
TextWrapping="NoWrap" />
613+
614+
<Grid>
615+
<!-- Item Tags -->
616+
<ItemsRepeater
617+
x:Name="TagsRepeater"
618+
HorizontalAlignment="Left"
619+
VerticalAlignment="Center"
620+
x:Load="{x:Bind HasTags, Mode=OneWay, FallbackValue=False}"
621+
ItemsSource="{x:Bind FileTagsUI, Mode=OneWay}"
622+
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
623+
<ItemsRepeater.Layout>
624+
<StackLayout Orientation="Horizontal" Spacing="-4" />
625+
</ItemsRepeater.Layout>
626+
<ItemsRepeater.ItemTemplate>
627+
<DataTemplate x:DataType="datamodels:TagViewModel">
628+
<Border
629+
x:Name="Tag"
630+
x:Phase="2"
631+
ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
632+
<controls:ThemedIcon
633+
Width="12"
634+
Height="12"
635+
VerticalAlignment="Center"
636+
IconColorType="Custom"
637+
IsFilled="True"
638+
Style="{StaticResource App.ThemedIcons.Tag}"
639+
Color="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}" />
640+
</Border>
641+
</DataTemplate>
642+
</ItemsRepeater.ItemTemplate>
643+
</ItemsRepeater>
644+
645+
<!-- Item Status -->
646+
<Border
647+
x:Name="CloudDriveSyncStatusGlyph"
648+
HorizontalAlignment="Right"
649+
VerticalAlignment="Center"
650+
x:Phase="2"
651+
Background="Transparent"
652+
ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
653+
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
654+
<controls:ThemedIcon
655+
Width="16"
656+
Height="16"
657+
Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).ThemedIconStyle, Mode=OneWay}" />
658+
</Border>
659+
</Grid>
660+
</StackPanel>
635661
</Grid>
636662

637663
<VisualStateManager.VisualStateGroups>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,7 @@ override public void StartRenameItem()
376376

377377
TextBox? textBox = null;
378378

379-
// Handle layout differences between Cards View and Grid View
379+
// Grid View
380380
if (FolderSettings.LayoutMode == FolderLayoutModes.GridView)
381381
{
382382
if (gridViewItem.FindDescendant("EditPopup") is not Popup popup)
@@ -391,6 +391,7 @@ override public void StartRenameItem()
391391
popup.IsOpen = true;
392392
OldItemName = textBlock.Text;
393393
}
394+
// List View
394395
else if (FolderSettings.LayoutMode == FolderLayoutModes.ListView)
395396
{
396397
textBox = gridViewItem.FindDescendant("ListViewTextBoxItemName") as TextBox;
@@ -409,6 +410,7 @@ override public void StartRenameItem()
409410
return;
410411
}
411412
}
413+
// Cards View
412414
else
413415
{
414416
textBox = gridViewItem.FindDescendant("TileViewTextBoxItemName") as TextBox;
@@ -417,12 +419,10 @@ override public void StartRenameItem()
417419

418420
textBox.Text = textBlock.Text;
419421
OldItemName = textBlock.Text;
420-
textBlock.Visibility = Visibility.Collapsed;
421422
textBox.Visibility = Visibility.Visible;
422423

423424
if (textBox.FindParent<Grid>() is null)
424425
{
425-
textBlock.Visibility = Visibility.Visible;
426426
textBox.Visibility = Visibility.Collapsed;
427427
return;
428428
}

0 commit comments

Comments
 (0)