Code Quality: Added Update Available and Updated icons (#16696)

Co-authored-by: Yair <[email protected]>
files-community · Jan 12, 2025 · 2557a4f · 2557a4f
1 parent 8dcb100
commit 2557a4f
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 13 deletions.
diff --git a/src/Files.App.Controls/ThemedIcon/Styles/Icons.Common.xaml b/src/Files.App.Controls/ThemedIcon/Styles/Icons.Common.xaml
@@ -1172,4 +1172,96 @@
 		</Setter>
 	</Style>
 
+
+	<Style
+		x:Key="App.ThemedIcons.AppUpdateAvailable"
+		BasedOn="{StaticResource DefaultThemedIconStyle}"
+		TargetType="local:ThemedIcon">
+
+
+		<Setter Property="IconSize" Value="16" />
+
+		<Setter Property="OutlineIconData" Value="m1.5,12.99c-.28,0-.5-.22-.5-.5v-4.09l.65-.65c.2-.2.51-.2.71,0l3.65,3.65c0-.43.06-.85.16-1.25l-3.1-3.1c-.57-.57-1.47-.59-2.06-.06V2.49c0-.28.22-.5.5-.5h3.67c.27,0,.52.11.71.29l3.96,3.96c.38-.12.77-.2,1.18-.23l-2.02-2.02h4.5c.28,0,.5.22.5.5v2.1c.36.18.69.4,1,.66v-2.76c0-.83-.67-1.5-1.5-1.5h-5.5l-1.41-1.41c-.38-.38-.88-.59-1.41-.59H1.5C.67.99,0,1.66,0,2.49v10C0,13.32.67,13.99,1.5,13.99h5.1c-.16-.32-.29-.65-.39-1H1.5Zm10-6c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5Zm2.12,6.37c-.28.28-.62.51-1,.66-.37.15-.77.22-1.18.22-.4,0-.8-.1-1.17-.26-.1-.04-.19-.09-.28-.14v.15c0,.28-.22.5-.5.5s-.5-.22-.5-.5v-1.5c0-.28.22-.5.5-.5h1.5c.28,0,.5.22.5.5s-.22.5-.5.5h-.47c.05.03.1.05.15.08.25.11.51.17.78.17.27,0,.54-.04.78-.15.25-.1.48-.25.67-.44s.51-.2.71,0c.2.2.2.51,0,.71Zm.38-2.87c0,.28-.22.5-.5.5h-1.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h.47c-.05-.03-.1-.05-.15-.08-.25-.11-.51-.17-.78-.17-.27,0-.54.04-.78.15s-.48.25-.67.44c-.2.2-.51.2-.71,0-.2-.2-.2-.51,0-.71.28-.28.62-.51,1-.66.37-.15.77-.23,1.18-.22.4,0,.8.1,1.17.26.1.04.19.09.28.14v-.15c0-.28.22-.5.5-.5s.5.22.5.5v1.5Z" />
+		<Setter Property="FilledIconData" Value="m3.24,7.05l2.94,3.04c.49-1.88,1.96-3.36,3.82-3.89L5.38,1.57c-.38-.38-.88-.59-1.41-.59H1.5C.67.99,0,1.66,0,2.49v5.29l.75-.75c.69-.69,1.81-.68,2.49.02Zm8.26-1.06c1.33,0,2.55.47,3.5,1.26v-2.76c0-.83-.67-1.5-1.5-1.5h-5.29l3.01,3.01c.09,0,.19,0,.29,0Zm-5.5,5.35l-3.48-3.59c-.29-.3-.77-.3-1.07,0L0,9.19v3.29C0,13.32.67,13.99,1.5,13.99h5.1c-.38-.75-.6-1.6-.6-2.5,0-.05,0-.1,0-.15Zm5.5-4.35c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5Zm2.12,6.37c-.28.28-.62.51-1,.66-.37.15-.77.22-1.18.22-.4,0-.8-.1-1.17-.26-.1-.04-.19-.09-.28-.14v.15c0,.28-.22.5-.5.5s-.5-.22-.5-.5v-1.5c0-.28.22-.5.5-.5h1.5c.28,0,.5.22.5.5s-.22.5-.5.5h-.47c.05.03.1.05.15.08.25.11.51.17.78.17.27,0,.54-.04.78-.15.25-.1.48-.25.67-.44s.51-.2.71,0c.2.2.2.51,0,.71Zm.38-2.87c0,.28-.22.5-.5.5h-1.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h.47c-.05-.03-.1-.05-.15-.08-.25-.11-.51-.17-.78-.17-.27,0-.54.04-.78.15s-.48.25-.67.44c-.2.2-.51.2-.71,0-.2-.2-.2-.51,0-.71.28-.28.62-.51,1-.66.37-.15.77-.23,1.18-.22.4,0,.8.1,1.17.26.1.04.19.09.28.14v-.15c0-.28.22-.5.5-.5s.5.22.5.5v1.5Z" />
+
+		<Setter Property="Layers">
+			<Setter.Value>
+				<local:ThemedIconLayers>
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Base"
+						PathData="m0,2.49C0,1.66.67.99,1.5.99h3.67c.53,0,1.04.21,1.41.59l1.41,1.41h5.5c.83,0,1.5.67,1.5,1.5v2.76c-.31-.25-.64-.47-1-.66v-2.1c0-.28-.22-.5-.5-.5h-4.5l2.02,2.02c-.41.04-.8.11-1.18.23l-3.96-3.96c-.19-.19-.44-.29-.71-.29H1.5c-.28,0-.5.22-.5.5v4.5c.59-.53,1.49-.51,2.06.06l3.1,3.1c-.1.4-.16.82-.16,1.25l-3.65-3.65c-.2-.2-.51-.2-.71,0l-.65.65v4.09c0,.28.22.5.5.5h4.71c.1.35.23.68.39,1H1.5c-.83,0-1.5-.67-1.5-1.5V2.49Z" />
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Accent"
+						PathData="m7,11.49c0,2.49,2.01,4.5,4.5,4.5s4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5-4.5,2.01-4.5,4.5Z" />
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="AccentContrast"
+						PathData="m13.5,8.49c.28,0,.5.22.5.5v1.5c0,.28-.22.5-.5.5h-1.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h.47c-.05-.03-.1-.05-.15-.08-.25-.11-.51-.17-.78-.17-.27,0-.54.04-.78.15-.25.1-.48.25-.67.44-.2.2-.51.2-.71,0-.2-.2-.2-.51,0-.71.28-.28.62-.51,1-.66.37-.15.77-.23,1.18-.22.4,0,.8.1,1.17.26.1.04.19.09.28.14v-.15c0-.28.22-.5.5-.5Zm-.88,5.53c-.37.15-.77.23-1.18.22-.4,0-.8-.1-1.17-.26-.1-.04-.19-.09-.28-.14v.15c0,.28-.22.5-.5.5s-.5-.22-.5-.5v-1.5c0-.28.22-.5.5-.5h1.5c.28,0,.5.22.5.5s-.22.5-.5.5h-.47c.05.03.1.05.15.08.25.11.51.17.78.17.27,0,.54-.04.78-.15.25-.1.48-.25.67-.44s.51-.2.71,0c.2.2.2.51,0,.71-.28.28-.62.51-1,.66Z" />
+				</local:ThemedIconLayers>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+
+	<Style
+		x:Key="App.ThemedIcons.AppUpdated"
+		BasedOn="{StaticResource DefaultThemedIconStyle}"
+		TargetType="local:ThemedIcon">
+
+
+		<Setter Property="IconSize" Value="16" />
+
+		<Setter Property="OutlineIconData" Value="m1.5,12.99c-.28,0-.5-.22-.5-.5v-4.09l.65-.65c.2-.2.51-.2.71,0l3.65,3.65c0-.43.06-.85.16-1.25l-3.1-3.1c-.57-.57-1.47-.59-2.06-.06V2.49c0-.28.22-.5.5-.5h3.67c.27,0,.52.11.71.29l3.96,3.96c.38-.12.77-.2,1.18-.23l-2.02-2.02h4.5c.28,0,.5.22.5.5v2.1c.36.18.69.4,1,.66v-2.76c0-.83-.67-1.5-1.5-1.5h-5.5l-1.41-1.41c-.38-.38-.88-.59-1.41-.59H1.5C.67.99,0,1.66,0,2.49v10C0,13.32.67,13.99,1.5,13.99h5.1c-.16-.32-.29-.65-.39-1H1.5Zm10-6c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5Zm2.35,3.35l-3,3c-.2.2-.51.2-.71,0l-1-1c-.2-.2-.2-.51,0-.71s.51-.2.71,0l.65.65,2.65-2.65c.2-.2.51-.2.71,0,.2.2.2.51,0,.71Z" />
+		<Setter Property="FilledIconData" Value="m3.24,7.05l2.94,3.04c.49-1.88,1.96-3.36,3.82-3.89L5.38,1.57c-.38-.38-.88-.59-1.41-.59H1.5C.67.99,0,1.66,0,2.49v5.29l.75-.75c.69-.69,1.81-.68,2.49.02Zm8.26-1.06c1.33,0,2.55.47,3.5,1.26v-2.76c0-.83-.67-1.5-1.5-1.5h-5.29l3.01,3.01c.09,0,.19,0,.29,0Zm-5.5,5.35l-3.48-3.59c-.29-.3-.77-.3-1.07,0L0,9.19v3.29C0,13.32.67,13.99,1.5,13.99h5.1c-.38-.75-.6-1.6-.6-2.5,0-.05,0-.1,0-.15Zm5.5-4.35c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5Zm2.35,3.35l-3,3c-.2.2-.51.2-.71,0l-1-1c-.2-.2-.2-.51,0-.71s.51-.2.71,0l.65.65,2.65-2.65c.2-.2.51-.2.71,0,.2.2.2.51,0,.71Z" />
+
+		<Setter Property="Layers">
+			<Setter.Value>
+				<local:ThemedIconLayers>
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Base"
+						PathData="m0,2.49C0,1.66.67.99,1.5.99h3.67c.53,0,1.04.21,1.41.59l1.41,1.41h5.5c.83,0,1.5.67,1.5,1.5v2.76c-.31-.25-.64-.47-1-.66v-2.1c0-.28-.22-.5-.5-.5h-4.5l2.02,2.02c-.41.04-.8.11-1.18.23l-3.96-3.96c-.19-.19-.44-.29-.71-.29H1.5c-.28,0-.5.22-.5.5v4.5c.59-.53,1.49-.51,2.06.06l3.1,3.1c-.1.4-.16.82-.16,1.25l-3.65-3.65c-.2-.2-.51-.2-.71,0l-.65.65v4.09c0,.28.22.5.5.5h4.71c.1.35.23.68.39,1H1.5c-.83,0-1.5-.67-1.5-1.5V2.49Z" />
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Accent"
+						PathData="m7,11.49c0,2.49,2.01,4.5,4.5,4.5s4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5-4.5,2.01-4.5,4.5Z" />
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="AccentContrast"
+						PathData="m13.85,9.63c-.2-.2-.51-.2-.71,0l-2.65,2.65-.65-.65c-.2-.2-.51-.2-.71,0-.2.2-.2.51,0,.71l1,1c.2.2.51.2.71,0l3-3c.2-.2.2-.51,0-.71Z" />
+				</local:ThemedIconLayers>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+
+	<Style
+		x:Key="App.ThemedIcons.AppUpdatedBox"
+		BasedOn="{StaticResource DefaultThemedIconStyle}"
+		TargetType="local:ThemedIcon">
+
+
+		<Setter Property="IconSize" Value="16" />
+
+		<Setter Property="OutlineIconData" Value="m11.5,2.24c.41,0,.75-.34.75-.75s-.34-.75-.75-.75-.75.34-.75.75.34.75.75.75Zm2,2.75h.5v.5c0,.28.22.5.5.5s.5-.22.5-.5v-.5h.5c.28,0,.5-.22.5-.5s-.22-.5-.5-.5h-.5v-.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v.5h-.5c-.28,0-.5.22-.5.5s.22.5.5.5Zm-6.5,3.5c1.1,0,2-.9,2-2,0-.83-.67-1.5-1.5-1.5-.55,0-1,.45-1,1,0,.28.22.5.5.5s.5-.22.5-.5c.28,0,.5.22.5.5,0,.55-.45,1-1,1-.83,0-1.5-.67-1.5-1.5,0-1.1.9-2,2-2,1.38,0,2.5,1.12,2.5,2.5,0,1.66-1.34,3-3,3-.28,0-.5.22-.5.5s.22.5.5.5c2.21,0,4-1.79,4-4,0-1.93-1.57-3.5-3.5-3.5-1.66,0-3,1.34-3,3,0,1.38,1.12,2.5,2.5,2.5Zm6.85-.35c-.14-.14-.36-.19-.54-.11-.19.08-.31.26-.31.46v5c0,.83-.67,1.5-1.5,1.5h-7c-.83,0-1.5-.67-1.5-1.5v-5c0-.2-.12-.38-.31-.46s-.4-.03-.54.11L.15,10.14c-.2.2-.2.51,0,.71.2.2.51.2.71,0l1.15-1.15v3.79c0,1.38,1.12,2.5,2.5,2.5h7c1.38,0,2.5-1.12,2.5-2.5v-3.79l1.15,1.15c.2.2.51.2.71,0,.2-.2.2-.51,0-.71l-2-2Z" />
+		<Setter Property="FilledIconData" Value="m11.5,2.24c.41,0,.75-.34.75-.75s-.34-.75-.75-.75-.75.34-.75.75.34.75.75.75Zm2,2.75h.5v.5c0,.28.22.5.5.5s.5-.22.5-.5v-.5h.5c.28,0,.5-.22.5-.5s-.22-.5-.5-.5h-.5v-.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v.5h-.5c-.28,0-.5.22-.5.5s.22.5.5.5Zm-6.5,3.5c1.1,0,2-.9,2-2,0-.83-.67-1.5-1.5-1.5-.55,0-1,.45-1,1,0,.28.22.5.5.5s.5-.22.5-.5c.28,0,.5.22.5.5,0,.55-.45,1-1,1-.83,0-1.5-.67-1.5-1.5,0-1.1.9-2,2-2,1.38,0,2.5,1.12,2.5,2.5,0,1.66-1.34,3-3,3-.28,0-.5.22-.5.5s.22.5.5.5c2.21,0,4-1.79,4-4,0-1.93-1.57-3.5-3.5-3.5-1.66,0-3,1.34-3,3,0,1.38,1.12,2.5,2.5,2.5Zm6.85-.35c-.1-.1-.22-.15-.35-.15h-1.73c-.64,2.03-2.53,3.5-4.77,3.5-.83,0-1.5-.67-1.5-1.5,0-.27.07-.53.2-.75-.64-.26-1.18-.69-1.57-1.25h-1.63c-.13,0-.26.05-.35.15L.15,10.14c-.2.2-.2.51,0,.71.2.2.51.2.71,0l1.15-1.15v3.79c0,1.38,1.12,2.5,2.5,2.5h7c1.38,0,2.5-1.12,2.5-2.5v-3.79l1.15,1.15c.2.2.51.2.71,0,.2-.2.2-.51,0-.71l-2-2Z" />
+
+		<Setter Property="Layers">
+			<Setter.Value>
+				<local:ThemedIconLayers>
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Base"
+						PathData="m2.69,8.03c.19.08.31.26.31.46v5c0,.83.67,1.5,1.5,1.5h7c.83,0,1.5-.67,1.5-1.5v-5c0-.2.12-.38.31-.46.19-.08.4-.03.54.11l2,2c.2.2.2.51,0,.71-.2.2-.51.2-.71,0l-1.15-1.15v3.79c0,1.38-1.12,2.5-2.5,2.5h-7c-1.38,0-2.5-1.12-2.5-2.5v-3.79l-1.15,1.15c-.2.2-.51.2-.71,0-.2-.2-.2-.51,0-.71l2-2c.14-.14.36-.19.54-.11Z" />
+					<local:ThemedIconLayer
+						LayerSize="16"
+						LayerType="Accent"
+						PathData="m11.5,2.24c.41,0,.75-.34.75-.75s-.34-.75-.75-.75-.75.34-.75.75.34.75.75.75Zm3,.75c.28,0,.5.22.5.5v.5h.5c.28,0,.5.22.5.5s-.22.5-.5.5h-.5v.5c0,.28-.22.5-.5.5s-.5-.22-.5-.5v-.5h-.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h.5v-.5c0-.28.22-.5.5-.5Zm-7,0c-1.66,0-3,1.34-3,3,0,1.38,1.12,2.5,2.5,2.5,1.1,0,2-.9,2-2,0-.83-.67-1.5-1.5-1.5-.55,0-1,.45-1,1,0,.28.22.5.5.5s.5-.22.5-.5c.28,0,.5.22.5.5,0,.55-.45,1-1,1-.83,0-1.5-.67-1.5-1.5,0-1.1.9-2,2-2,1.38,0,2.5,1.12,2.5,2.5,0,1.66-1.34,3-3,3-.28,0-.5.22-.5.5s.22.5.5.5c2.21,0,4-1.79,4-4,0-1.93-1.57-3.5-3.5-3.5Z" />
+				</local:ThemedIconLayers>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
 </ResourceDictionary>
diff --git a/src/Files.App/UserControls/AddressToolbar.xaml b/src/Files.App/UserControls/AddressToolbar.xaml
@@ -503,10 +503,8 @@
 					IsChecked="{x:Bind Commands.ToggleShelfPane.IsOn, Mode=TwoWay}"
 					ToolTipService.ToolTip="{x:Bind ViewModel.Commands.ToggleShelfPane.LabelWithHotKey, Mode=OneWay}">
 					<controls:ThemedIcon
-						Width="20"
-						Height="20"
-						HorizontalAlignment="Center"
-						VerticalAlignment="Center"
+						Width="16"
+						Height="16"
 						Style="{StaticResource App.ThemedIcons.Shelf}" />
 				</ToggleButton>
 
@@ -587,12 +585,12 @@
 					ToolTipService.ToolTip="{helpers:ResourceString Name=UpdateFiles}">
 					<Grid>
 						<!--  Icon  -->
-						<FontIcon
+						<controls:ThemedIcon
 							x:Name="UpdateIcon"
+							Width="16"
+							Height="16"
 							x:Load="{x:Bind ViewModel.IsUpdating, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
-							FontSize="14"
-							Foreground="{ThemeResource SystemAccentColor}"
-							Glyph="&#xE896;" />
+							Style="{StaticResource App.ThemedIcons.AppUpdateAvailable}" />
 
 						<!--  Progress  -->
 						<ProgressRing
@@ -617,10 +615,10 @@
 					Style="{StaticResource AddressToolbarButtonStyle}"
 					ToolTipService.ToolTip="{x:Bind ViewModel.Commands.OpenReleaseNotes.LabelWithHotKey}"
 					Visibility="{x:Bind ViewModel.Commands.OpenReleaseNotes.IsExecutable, Mode=OneWay}">
-					<FontIcon
-						FontSize="14"
-						Foreground="{ThemeResource SystemAccentColor}"
-						Glyph="&#xF133;" />
+					<controls:ThemedIcon
+						Width="16"
+						Height="16"
+						Style="{StaticResource App.ThemedIcons.AppUpdatedBox}" />
 				</Button>
 
 				<!--  Open the Settings dialog  -->

diff --git a/tests/Files.App.UITests/Views/ThemedIconPage.xaml b/tests/Files.App.UITests/Views/ThemedIconPage.xaml
@@ -13,7 +13,7 @@
 		<ResourceDictionary>
 			<Style
 				x:Key="IconTest"
-				BasedOn="{StaticResource App.ThemedIcons.Shelf}"
+				BasedOn="{StaticResource App.ThemedIcons.AppUpdatedBox}"
 				TargetType="controls:ThemedIcon">
 				<Setter Property="IconSize" Value="16" />
 				<Setter Property="Width" Value="16" />