Cards view

src/Files.App/Actions/Display/LayoutAction.cs

@@ -39,16 +39,16 @@ public override HotKey HotKey
 			=> new(Keys.Number2, KeyModifiers.CtrlShift);
 	}
 
-	internal sealed class LayoutTilesAction : ToggleLayoutAction
+	internal sealed class LayoutCardsAction : ToggleLayoutAction
 	{
 		protected override LayoutTypes LayoutType
-			=> LayoutTypes.Tiles;
+			=> LayoutTypes.Cards;
 
 		public override string Label
-			=> "Tiles".GetLocalizedResource();
+			=> Strings.Cards.GetLocalizedResource();
 
 		public override string Description
-			=> "LayoutTilesDescription".GetLocalizedResource();
+			=> Strings.LayoutCardsDescription.GetLocalizedResource();
 
 		public override RichGlyph Glyph
 			=> new(themedIconStyle: "App.ThemedIcons.IconLayout.Tiles");
@@ -190,6 +190,7 @@ ContentPageContext.PageType is not ContentPageTypes.Home &&
 			ContentPageContext.ShellPage?.InstanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes layoutMode &&
 			((layoutMode is FolderLayoutModes.DetailsView && UserSettingsService.LayoutSettingsService.DetailsViewSize > DetailsViewSizeKind.Compact) ||
 			(layoutMode is FolderLayoutModes.ListView && UserSettingsService.LayoutSettingsService.ListViewSize > ListViewSizeKind.Compact) ||
+			(layoutMode is FolderLayoutModes.CardsView && UserSettingsService.LayoutSettingsService.CardsViewSize > CardsViewSizeKind.Small) ||
 			(layoutMode is FolderLayoutModes.GridView && UserSettingsService.LayoutSettingsService.GridViewSize > GridViewSizeKind.Small) ||
 			(layoutMode is FolderLayoutModes.ColumnView && UserSettingsService.LayoutSettingsService.ColumnsViewSize > ColumnsViewSizeKind.Compact));
 
@@ -217,6 +218,7 @@ private void UserSettingsService_PropertyChanged(object? sender, PropertyChanged
 				case nameof(ILayoutSettingsService.ListViewSize):
 				case nameof(ILayoutSettingsService.GridViewSize):
 				case nameof(ILayoutSettingsService.ColumnsViewSize):
+				case nameof(ILayoutSettingsService.CardsViewSize):
 					OnPropertyChanged(nameof(IsExecutable));
 					break;
 			}
@@ -234,7 +236,9 @@ public Task ExecuteAsync(object? parameter = null)
 					if (UserSettingsService.LayoutSettingsService.ListViewSize > ListViewSizeKind.Compact)
 						UserSettingsService.LayoutSettingsService.ListViewSize -= 1;
 					break;
-				case FolderLayoutModes.TilesView:
+				case FolderLayoutModes.CardsView:
+					if (UserSettingsService.LayoutSettingsService.CardsViewSize > CardsViewSizeKind.Small)
+						UserSettingsService.LayoutSettingsService.CardsViewSize -= 1; 
 					break;
 				case FolderLayoutModes.GridView:
 					if (UserSettingsService.LayoutSettingsService.GridViewSize > GridViewSizeKind.Small)
@@ -274,6 +278,7 @@ ContentPageContext.PageType is not ContentPageTypes.Home &&
 			ContentPageContext.ShellPage?.InstanceViewModel.FolderSettings.LayoutMode is FolderLayoutModes layoutMode && 
 			((layoutMode is FolderLayoutModes.DetailsView && UserSettingsService.LayoutSettingsService.DetailsViewSize < DetailsViewSizeKind.ExtraLarge) ||
 			(layoutMode is FolderLayoutModes.ListView && UserSettingsService.LayoutSettingsService.ListViewSize < ListViewSizeKind.ExtraLarge) ||
+			(layoutMode is FolderLayoutModes.CardsView && UserSettingsService.LayoutSettingsService.CardsViewSize < CardsViewSizeKind.ExtraLarge) ||
 			(layoutMode is FolderLayoutModes.GridView && UserSettingsService.LayoutSettingsService.GridViewSize < GridViewSizeKind.ExtraLarge) ||
 			(layoutMode is FolderLayoutModes.ColumnView && UserSettingsService.LayoutSettingsService.ColumnsViewSize < ColumnsViewSizeKind.ExtraLarge));
 
@@ -318,7 +323,9 @@ public Task ExecuteAsync(object? parameter = null)
 					if (UserSettingsService.LayoutSettingsService.ListViewSize < ListViewSizeKind.ExtraLarge)
 						UserSettingsService.LayoutSettingsService.ListViewSize += 1;
 					break;
-				case FolderLayoutModes.TilesView:
+				case FolderLayoutModes.CardsView:
+					if (UserSettingsService.LayoutSettingsService.CardsViewSize < CardsViewSizeKind.ExtraLarge)
+						UserSettingsService.LayoutSettingsService.CardsViewSize += 1;
 					break;
 				case FolderLayoutModes.GridView:
 					if (UserSettingsService.LayoutSettingsService.GridViewSize < GridViewSizeKind.ExtraLarge)

src/Files.App/App.xaml

@@ -77,6 +77,7 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#0070CB</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+							<SolidColorBrush x:Key="App.Theme.CardBackgroundFillColorTertiaryBrush" Color="#FFFFFFFF" />
 						</ResourceDictionary>
 						<ResourceDictionary x:Key="Dark">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
@@ -94,6 +95,7 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#50C0FF</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+							<SolidColorBrush x:Key="App.Theme.CardBackgroundFillColorTertiaryBrush" Color="#12FFFFFF" />
 						</ResourceDictionary>
 						<ResourceDictionary x:Key="HighContrast">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
@@ -111,6 +113,7 @@
 
 							<Color x:Key="App.Theme.FillColorAttention">#50C0FF</Color>
 							<SolidColorBrush x:Key="App.Theme.FillColorAttentionBrush" Color="{StaticResource App.Theme.FillColorAttention}" />
+							<SolidColorBrush x:Key="App.Theme.CardBackgroundFillColorTertiaryBrush" Color="{StaticResource SystemColorWindowColor}" />
 						</ResourceDictionary>
 					</ResourceDictionary.ThemeDictionaries>
 				</ResourceDictionary>

src/Files.App/Converters/EnumToHumanizedConverter.cs

@@ -19,8 +19,8 @@ public object Convert(object value, Type targetType, object parameter, string la
 					=> LocalizedEnumDescriptionFactory.Get(Enum.Parse<DetailsViewSizeKind>(stringValue)),
 				"ListViewSizeKind"
 					=> LocalizedEnumDescriptionFactory.Get(Enum.Parse<ListViewSizeKind>(stringValue)),
-				"TilesViewSizeKind"
-					=> LocalizedEnumDescriptionFactory.Get(Enum.Parse<TilesViewSizeKind>(stringValue)),
+				"CardsViewSizeKind"
+					=> LocalizedEnumDescriptionFactory.Get(Enum.Parse<CardsViewSizeKind>(stringValue)),
 				"GridViewSizeKind"
 					=> LocalizedEnumDescriptionFactory.Get(Enum.Parse<GridViewSizeKind>(stringValue)),
 				"ColumnsViewSizeKind"

src/Files.App/Data/Commands/Manager/CommandCodes.cs

@@ -133,7 +133,7 @@ public enum CommandCodes
 		LayoutIncreaseSize,
 		LayoutDetails,
 		LayoutList,
-		LayoutTiles,
+		LayoutCards,
 		LayoutGrid,
 		LayoutColumns,
 		LayoutAdaptive,

src/Files.App/Data/Commands/Manager/CommandManager.cs

@@ -132,7 +132,7 @@ public IRichCommand this[HotKey hotKey]
 		public IRichCommand LayoutIncreaseSize => commands[CommandCodes.LayoutIncreaseSize];
 		public IRichCommand LayoutDetails => commands[CommandCodes.LayoutDetails];
 		public IRichCommand LayoutList => commands[CommandCodes.LayoutList];
-		public IRichCommand LayoutTiles => commands[CommandCodes.LayoutTiles];
+		public IRichCommand LayoutCards=> commands[CommandCodes.LayoutCards];
 		public IRichCommand LayoutGrid => commands[CommandCodes.LayoutGrid];
 		public IRichCommand LayoutColumns => commands[CommandCodes.LayoutColumns];
 		public IRichCommand LayoutAdaptive => commands[CommandCodes.LayoutAdaptive];
@@ -336,7 +336,7 @@ public IEnumerator<IRichCommand> GetEnumerator() =>
 			[CommandCodes.LayoutIncreaseSize] = new LayoutIncreaseSizeAction(),
 			[CommandCodes.LayoutDetails] = new LayoutDetailsAction(),
 			[CommandCodes.LayoutList] = new LayoutListAction(),
-			[CommandCodes.LayoutTiles] = new LayoutTilesAction(),
+			[CommandCodes.LayoutCards] = new LayoutCardsAction(),
 			[CommandCodes.LayoutGrid] = new LayoutGridAction(),
 			[CommandCodes.LayoutColumns] = new LayoutColumnsAction(),
 			[CommandCodes.LayoutAdaptive] = new LayoutAdaptiveAction(),

src/Files.App/Data/Commands/Manager/ICommandManager.cs

@@ -121,7 +121,7 @@ public interface ICommandManager : IEnumerable<IRichCommand>
 		IRichCommand LayoutIncreaseSize { get; }
 		IRichCommand LayoutDetails { get; }
 		IRichCommand LayoutList { get; }
-		IRichCommand LayoutTiles { get; }
+		IRichCommand LayoutCards{ get; }
 		IRichCommand LayoutGrid { get; }
 		IRichCommand LayoutColumns { get; }
 		IRichCommand LayoutAdaptive { get; }

src/Files.App/Data/Contexts/DisplayPage/DisplayPageContext.cs

@@ -29,8 +29,8 @@ public LayoutTypes LayoutType
 					case LayoutTypes.List:
 						viewModel.ToggleLayoutModeList(true);
 						break;
-					case LayoutTypes.Tiles:
-						viewModel.ToggleLayoutModeTiles(true);
+					case LayoutTypes.Cards:
+						viewModel.ToggleLayoutModeCards(true);
 						break;
 					case LayoutTypes.Grid:
 						viewModel.ToggleLayoutModeGridView(true);
@@ -230,11 +230,11 @@ private LayoutTypes GetLayoutType()
 			{
 				FolderLayoutModes.DetailsView => LayoutTypes.Details,
 				FolderLayoutModes.ListView => LayoutTypes.List,
-				FolderLayoutModes.TilesView => LayoutTypes.Tiles,
+				FolderLayoutModes.CardsView => LayoutTypes.Cards,
 				FolderLayoutModes.GridView => LayoutTypes.Grid,
 				FolderLayoutModes.ColumnView => LayoutTypes.Columns,
 				_ => throw new InvalidEnumArgumentException(),
 			};
 		}
 	}
-}
+}

src/Files.App/Data/Contexts/DisplayPage/LayoutTypes.cs

@@ -8,7 +8,7 @@ public enum LayoutTypes : ushort
 		None,
 		Details,
 		List,
-		Tiles,
+		Cards,
 		Grid,
 		Columns,
 		Adaptive,

src/Files.App/Data/Contracts/ILayoutSettingsService.cs

@@ -206,9 +206,9 @@ public interface ILayoutSettingsService : IBaseSettingsService, INotifyPropertyC
 		ListViewSizeKind ListViewSize { get; set; }
 
 		/// <summary>
-		/// Item size in the Tiles View
+		/// Item size in the Cards View
 		/// </summary>
-		TilesViewSizeKind TilesViewSize { get; set; }
+		CardsViewSizeKind CardsViewSize { get; set; }
 
 		/// <summary>
 		/// Item size in the Grid View

src/Files.App/Data/Enums/CardsViewSizeKind.cs

@@ -0,0 +1,31 @@
+// Copyright (c) Files Community
+// Licensed under the MIT License.
+
+namespace Files.App.Data.Enums
+{
+	/// <summary>
+	/// Defines constants that specify the size in the Cards View layout.
+	/// </summary>
+	public enum CardsViewSizeKind
+	{
+		/// <summary>
+		/// The size is small.
+		/// </summary>
+		Small = 1,
+
+		/// <summary>
+		/// The size is medium.
+		/// </summary>
+		Medium = 2,
+
+		/// <summary>
+		/// The size is large.
+		/// </summary>
+		Large = 3,
+
+		/// <summary>
+		/// The size is extra large.
+		/// </summary>
+		ExtraLarge = 4,
+	}
+}

src/Files.App/Data/Enums/FolderLayoutModes.cs

@@ -16,9 +16,9 @@ public enum FolderLayoutModes
 		ListView = 1,
 
 		/// <summary>
-		/// Tiles view 
+		/// Cards view 
 		/// </summary>
-		TilesView = 2,
+		CardsView = 2,
 
 		/// <summary>
 		/// Column view 

src/Files.App/Data/Factories/ContentPageContextFlyoutFactory.cs

@@ -122,7 +122,7 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(
 						{
 							IsToggle = true
 						}.Build(),
-						new ContextMenuFlyoutItemViewModelBuilder(Commands.LayoutTiles)
+						new ContextMenuFlyoutItemViewModelBuilder(Commands.LayoutCards)
 						{
 							IsToggle = true
 						}.Build(),

src/Files.App/Data/Factories/LocalizedEnumDescriptionFactory.cs

@@ -10,7 +10,7 @@ internal static class LocalizedEnumDescriptionFactory
 	{
 		private static Dictionary<DetailsViewSizeKind, string> DetailsViewSizeKinds { get; } = [];
 		private static Dictionary<ListViewSizeKind, string> ListViewSizeKinds { get; } = [];
-		private static Dictionary<TilesViewSizeKind, string> TilesViewSizeKinds { get; } = [];
+		private static Dictionary<CardsViewSizeKind, string> CardsViewSizeKinds { get; } = [];
 		private static Dictionary<GridViewSizeKind, string> GridViewSizeKinds { get; } = [];
 		private static Dictionary<ColumnsViewSizeKind, string> ColumnsViewSizeKinds { get; } = [];
 
@@ -44,14 +44,17 @@ public static string Get(ListViewSizeKind value)
 			return stringValue;
 		}
 
-		public static string Get(TilesViewSizeKind value)
+		public static string Get(CardsViewSizeKind value)
 		{
-			if (TilesViewSizeKinds.Count == 0)
+			if (CardsViewSizeKinds.Count == 0)
 			{
-				TilesViewSizeKinds.Add(TilesViewSizeKind.Small, "Small".GetLocalizedResource());
+				CardsViewSizeKinds.Add(CardsViewSizeKind.Small, Strings.Small.GetLocalizedResource());
+				CardsViewSizeKinds.Add(CardsViewSizeKind.Medium, Strings.Medium.GetLocalizedResource());
+				CardsViewSizeKinds.Add(CardsViewSizeKind.Large, Strings.Large.GetLocalizedResource());
+				CardsViewSizeKinds.Add(CardsViewSizeKind.ExtraLarge, Strings.ExtraLarge.GetLocalizedResource());
 			}
 
-			var stringValue = TilesViewSizeKinds.GetValueOrDefault(value)!;
+			var stringValue = CardsViewSizeKinds.GetValueOrDefault(value)!;
 			return stringValue;
 		}