Feature: Tweaked tag design (#9583)

Author: yaira2

src/Files.Uwp/Views/LayoutModes/DetailsLayoutBrowser.xaml

@@ -1,25 +1,25 @@
 <local:BaseLayout
     x:Class="Files.Uwp.Views.LayoutModes.DetailsLayoutBrowser"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:local="using:Files.Uwp"
-    xmlns:behaviors2="using:Files.Uwp.Behaviors"
-    xmlns:converters1="using:Files.Uwp.Converters"
-    xmlns:local2="using:Files.Uwp.Filesystem"
-    xmlns:helpers="using:Files.Uwp.Helpers"
-    xmlns:uc="using:Files.Uwp.UserControls"
-    xmlns:vc="using:Files.Uwp.ValueConverters"
-    xmlns:tui="using:Microsoft.Toolkit.Uwp.UI"
     xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
     xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:behaviors2="using:Files.Uwp.Behaviors"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
-    xmlns:triggers="using:Microsoft.Toolkit.Uwp.UI.Triggers"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:converters1="using:Files.Uwp.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:helpers="using:Files.Uwp.Helpers"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
+    xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
+    xmlns:local="using:Files.Uwp"
+    xmlns:local2="using:Files.Uwp.Filesystem"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:triggers="using:Microsoft.Toolkit.Uwp.UI.Triggers"
+    xmlns:tui="using:Microsoft.Toolkit.Uwp.UI"
+    xmlns:uc="using:Files.Uwp.UserControls"
+    xmlns:vc="using:Files.Uwp.ValueConverters"
     x:Name="PageRoot"
     NavigationCacheMode="Enabled"
     mc:Ignorable="d">
@@ -252,9 +252,7 @@
                                 PointerPressed="Grid_PointerPressed">
                                 <Grid.ContextFlyout>
                                     <MenuFlyout>
-                                        <MenuFlyoutItem
-                                            Click="SizeAllColumnsToFit_Click"
-                                            Text="{helpers:ResourceString Name=SizeAllColumnsToFit}" />
+                                        <MenuFlyoutItem Click="SizeAllColumnsToFit_Click" Text="{helpers:ResourceString Name=SizeAllColumnsToFit}" />
                                         <MenuFlyoutSeparator />
                                         <ToggleMenuFlyoutItem
                                             Click="ToggleMenuFlyoutItem_Click"
@@ -638,30 +636,33 @@
                                                 <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
                                             </TextBox.Resources>
                                         </TextBox>
-                                        <Ellipse
-                                            Grid.Column="1"
-                                            Width="12"
-                                            Height="12"
-                                            Margin="4,0,0,0"
-                                            VerticalAlignment="Center"
-                                            x:Phase="2"
-                                            Fill="{x:Bind FileTagsUI[0].ColorModel, Mode=OneWay, Converter={StaticResource ColorModelToColorConverter}}"
-                                            Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
                                     </Grid>
 
                                     <Grid
                                         x:Name="ItemTagGrid"
                                         Grid.Column="2"
                                         Width="{Binding ColumnsViewModel.TagColumn.Length.Value, ElementName=PageRoot, Mode=OneWay}"
-                                        Padding="12,0,0,0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center"
                                         Visibility="{Binding ColumnsViewModel.TagColumn.Visibility, ElementName=PageRoot, Mode=OneWay}">
-                                        <TextBlock
-                                            Style="{StaticResource ColumnContentTextBlock}"
-                                            Text="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
-                                            TextTrimming="CharacterEllipsis"
-                                            Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
+                                        <Border
+                                            Height="20"
+                                            Padding="8,0"
+                                            HorizontalAlignment="Left"
+                                            x:Phase="2"
+                                            Background="{x:Bind FileTagsUI[0].ColorModel, Mode=OneWay, Converter={StaticResource ColorModelToColorConverter}}"
+                                            BorderBrush="{x:Bind FileTagsUI[0].ColorModel, Mode=OneWay, Converter={StaticResource ColorModelToColorConverter}}"
+                                            BorderThickness="1"
+                                            CornerRadius="8"
+                                            ToolTipService.ToolTip="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
+                                            Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
+                                            <TextBlock
+                                                FontSize="12"
+                                                Style="{StaticResource ColumnContentTextBlock}"
+                                                Text="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
+                                                TextTrimming="CharacterEllipsis"
+                                                Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
+                                        </Border>
                                     </Grid>
 
                                     <TextBlock
@@ -998,4 +999,4 @@
             </VisualStateManager.VisualStateGroups>
         </Grid>
     </RefreshContainer>
-</local:BaseLayout>
+</local:BaseLayout>