Feature: Updated status icons for cloud drives (#12926)

Author: yaira2

src/Files.App/ResourceDictionaries/PathIcons.xaml

@@ -2423,6 +2423,31 @@
 				</Setter>
 			</Style>
 
+			<Style x:Key="ColorIconCloudSynced" TargetType="local:OpacityIcon">
+				<Setter Property="Template">
+					<Setter.Value>
+						<ControlTemplate>
+							<Viewbox Stretch="Fill">
+								<Grid Width="16" Height="16">
+									<Path
+										x:Name="Path1"
+										Data="M1.37371 8.16782C1.19025 7.96143 0.874215 7.94284 0.667823 8.1263C0.461432 8.30975 0.442842 8.62579 0.626301 8.83218L4.6263 13.3322C4.81743 13.5472 5.15013 13.557 5.35356 13.3536L15.8536 2.85355C16.0488 2.65829 16.0488 2.34171 15.8536 2.14645C15.6583 1.95118 15.3417 1.95118 15.1465 2.14645L5.02141 12.2715L1.37371 8.16782Z"
+										Fill="{ThemeResource SystemFillColorSuccessBrush}" />
+								</Grid>
+
+								<VisualStateManager.VisualStateGroups>
+									<VisualStateGroup>
+										<VisualState x:Name="Normal" />
+										<VisualState x:Name="Disabled" />
+										<VisualState x:Name="Selected" />
+									</VisualStateGroup>
+								</VisualStateManager.VisualStateGroups>
+							</Viewbox>
+						</ControlTemplate>
+					</Setter.Value>
+				</Setter>
+			</Style>
+
 			<Style x:Key="ColorIconGitAdded" TargetType="local:OpacityIcon">
 				<Setter Property="Template">
 					<Setter.Value>

src/Files.App/Utils/Cloud/CloudDriveSyncStatusUI.cs

@@ -2,13 +2,16 @@
 // Licensed under the MIT License. See the LICENSE.
 
 using Files.Shared.Cloud;
+using Microsoft.UI.Xaml;
 
 namespace Files.App.Utils.Cloud
 {
 	public class CloudDriveSyncStatusUI : ObservableObject
 	{
 		public string Glyph { get; }
 
+		public Style OpacityIcon { get; }
+
 		public CloudDriveSyncStatus SyncStatus { get; }
 
 		public bool LoadSyncStatus { get; }
@@ -24,10 +27,11 @@ private CloudDriveSyncStatusUI(CloudDriveSyncStatus syncStatus)
 			SyncStatus = syncStatus;
 		}
 
-		private CloudDriveSyncStatusUI(string glyph, CloudDriveSyncStatus syncStatus, string SyncStatusStringKey)
+		private CloudDriveSyncStatusUI(string glyph, Style opacityIcon, CloudDriveSyncStatus syncStatus, string SyncStatusStringKey)
 		{
 			SyncStatus = syncStatus;
 			Glyph = glyph;
+			OpacityIcon = opacityIcon;
 			LoadSyncStatus = true;
 			SyncStatusString = SyncStatusStringKey.GetLocalizedResource();
 		}
@@ -36,19 +40,19 @@ private CloudDriveSyncStatusUI(string glyph, CloudDriveSyncStatus syncStatus, st
 		{
 			// File
 			CloudDriveSyncStatus.FileOnline
-				=> new CloudDriveSyncStatusUI("\uE753", syncStatus, "CloudDriveSyncStatus_Online"),
+				=> new CloudDriveSyncStatusUI("\uE753", (Style)Application.Current.Resources["ColorIconCloud"], syncStatus, "CloudDriveSyncStatus_Online"),
 			CloudDriveSyncStatus.FileOffline or CloudDriveSyncStatus.FileOfflinePinned
-				=> new CloudDriveSyncStatusUI("\uE73E", syncStatus, "CloudDriveSyncStatus_Offline"),
+				=> new CloudDriveSyncStatusUI("\uE73E", (Style)Application.Current.Resources["ColorIconCloudSynced"], syncStatus, "CloudDriveSyncStatus_Offline"),
 			CloudDriveSyncStatus.FileSync
-				=> new CloudDriveSyncStatusUI("\uE895", syncStatus, "CloudDriveSyncStatus_Sync"),
+				=> new CloudDriveSyncStatusUI("\uE895", (Style)Application.Current.Resources["ColorIconCloudSyncing"], syncStatus, "CloudDriveSyncStatus_Sync"),
 
 			// Folder
 			CloudDriveSyncStatus.FolderOnline or CloudDriveSyncStatus.FolderOfflinePartial
-				=> new CloudDriveSyncStatusUI("\uE753", syncStatus, "CloudDriveSyncStatus_PartialOffline"),
+				=> new CloudDriveSyncStatusUI("\uE753", (Style)Application.Current.Resources["ColorIconCloud"], syncStatus, "CloudDriveSyncStatus_PartialOffline"),
 			CloudDriveSyncStatus.FolderOfflineFull or CloudDriveSyncStatus.FolderOfflinePinned or CloudDriveSyncStatus.FolderEmpty
-				=> new CloudDriveSyncStatusUI("\uE73E", syncStatus, "CloudDriveSyncStatus_Offline"),
+				=> new CloudDriveSyncStatusUI("\uE73E", (Style)Application.Current.Resources["ColorIconCloudSynced"], syncStatus, "CloudDriveSyncStatus_Offline"),
 			CloudDriveSyncStatus.FolderExcluded
-				=> new CloudDriveSyncStatusUI("\uF140", syncStatus, "CloudDriveSyncStatus_Excluded"),
+				=> new CloudDriveSyncStatusUI("\uF140", (Style)Application.Current.Resources["ColorIconCloudUnavailable"], syncStatus, "CloudDriveSyncStatus_Excluded"),
 
 			// Unknown
 			_ => new CloudDriveSyncStatusUI(syncStatus),

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

@@ -1018,7 +1018,7 @@
 									<Border
 										x:Name="ItemGitStatusTextBlock"
 										Width="{Binding ColumnsViewModel.GitStatusColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Padding="12,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										x:Load="{x:Bind IsGitItem}">
@@ -1035,7 +1035,7 @@
 									<TextBlock
 										x:Name="ItemGitLastCommitDateTextBlock"
 										Width="{Binding ColumnsViewModel.GitLastCommitDateColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Padding="12,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										x:Load="{x:Bind IsGitItem}"
@@ -1049,7 +1049,7 @@
 									<TextBlock
 										x:Name="ItemGitLastCommitMessageTextBlock"
 										Width="{Binding ColumnsViewModel.GitLastCommitMessageColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Padding="12,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										x:Load="{x:Bind IsGitItem}"
@@ -1063,7 +1063,7 @@
 									<TextBlock
 										x:Name="ItemGitCommitAuthorTextBlock"
 										Width="{Binding ColumnsViewModel.GitCommitAuthorColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Padding="12,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										x:Load="{x:Bind IsGitItem}"
@@ -1077,7 +1077,7 @@
 									<TextBlock
 										x:Name="ItemGitLastCommitShaTextBlock"
 										Width="{Binding ColumnsViewModel.GitLastCommitShaColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Padding="12,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										x:Load="{x:Bind IsGitItem}"
@@ -1245,16 +1245,20 @@
 										Visibility="{Binding ColumnsViewModel.SizeColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
 
 									<!--  Item Sync Status Badge  -->
-									<FontIcon
+									<Border
 										x:Name="ItemStatus"
 										Width="{Binding ColumnsViewModel.StatusColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
-										Margin="10,0,0,0"
+										Padding="10,0,0,0"
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										AutomationProperties.Name="{x:Bind SyncStatusString, Mode=OneWay}"
-										FontSize="12"
-										Glyph="{x:Bind SyncStatusUI.Glyph, Mode=OneWay}"
-										Visibility="{Binding ColumnsViewModel.StatusColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
+										Visibility="{Binding ColumnsViewModel.StatusColumn.Visibility, ElementName=PageRoot, Mode=OneWay}">
+										<uc:OpacityIcon
+											Width="16"
+											Height="16"
+											HorizontalAlignment="Left"
+											Style="{x:Bind SyncStatusUI.OpacityIcon, Mode=OneWay}" />
+									</Border>
 
 									<!--  Visual Status Managing  -->
 									<VisualStateManager.VisualStateGroups>

src/Files.App/Views/LayoutModes/GridViewBrowser.xaml

@@ -174,15 +174,16 @@
 							<ColumnDefinition Width="*" />
 						</Grid.ColumnDefinitions>
 
-						<FontIcon
+						<uc:OpacityIcon
 							x:Name="CloudDriveSyncStatusGlyph"
 							Grid.Column="0"
+							Width="16"
+							Height="16"
 							Margin="0,0,4,0"
-							VerticalAlignment="Stretch"
+							HorizontalAlignment="Left"
 							x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 							x:Phase="2"
-							FontSize="12"
-							Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}" />
+							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
 
 						<Ellipse
 							Grid.Column="1"
@@ -284,11 +285,13 @@
 							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}" />
-						<FontIcon
+
+						<uc:OpacityIcon
 							x:Name="CloudDriveSyncStatusGlyph"
+							Width="16"
+							Height="16"
 							x:Phase="2"
-							FontSize="12"
-							Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
+							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
 							Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
 					</StackPanel>