Change icons of media types

src/Umbraco.Core/Constants-Icons.cs

@@ -67,7 +67,7 @@ public static class Icons
         /// <summary>
         ///     System media audio icon.
         /// </summary>
-        public const string MediaAudio = "icon-sound-waves";
+        public const string MediaAudio = "icon-audio-lines";
 
         /// <summary>
         ///     System media article icon
@@ -77,7 +77,7 @@ public static class Icons
         /// <summary>
         ///     System media vector icon.
         /// </summary>
-        public const string MediaVectorGraphics = "icon-picture";
+        public const string MediaVectorGraphics = "icon-origami";
 
         /// <summary>
         ///     System media folder icon.

src/Umbraco.Web.UI.Client/src/mocks/data/media-type/media-type.data.ts

@@ -15,7 +15,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 		parent: null,
 		description: 'Media type 1 description',
 		alias: 'mediaType1',
-		icon: 'icon-bug',
+		icon: 'icon-picture',
 		properties: [
 			{
 				id: '19',
@@ -99,4 +99,204 @@ export const data: Array<UmbMockMediaTypeModel> = [
 		isDeletable: false,
 		aliasCanBeChanged: false,
 	},
+	{
+		name: 'Media Type 2',
+		id: 'media-type-2-id',
+		parent: null,
+		description: 'Media type 2 description',
+		alias: 'mediaType2',
+		icon: 'icon-audio-lines',
+		properties: [
+			{
+				id: '19',
+				container: { id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75' },
+				alias: 'umbracoFile',
+				name: 'File',
+				description: '',
+				dataType: { id: 'dt-uploadField' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+		],
+		containers: [
+			{
+				id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				parent: null,
+				name: 'Content',
+				type: 'Group',
+				sortOrder: 0,
+			},
+		],
+		allowedAsRoot: true,
+		variesByCulture: false,
+		variesBySegment: false,
+		isElement: false,
+		allowedMediaTypes: [{ mediaType: { id: 'media-type-2-id' }, sortOrder: 0 }],
+		compositions: [],
+		isFolder: false,
+		hasChildren: false,
+		collection: { id: 'dt-collectionView' },
+		isDeletable: false,
+		aliasCanBeChanged: false,
+	},
+	{
+		name: 'Media Type 3',
+		id: 'media-type-3-id',
+		parent: null,
+		description: 'Media type 3 description',
+		alias: 'mediaType3',
+		icon: 'icon-origami',
+		properties: [
+			{
+				id: '19',
+				container: { id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75' },
+				alias: 'umbracoFile',
+				name: 'File',
+				description: '',
+				dataType: { id: 'dt-uploadField' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+		],
+		containers: [
+			{
+				id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				parent: null,
+				name: 'Content',
+				type: 'Group',
+				sortOrder: 0,
+			},
+		],
+		allowedAsRoot: true,
+		variesByCulture: false,
+		variesBySegment: false,
+		isElement: false,
+		allowedMediaTypes: [{ mediaType: { id: 'media-type-3-id' }, sortOrder: 0 }],
+		compositions: [],
+		isFolder: false,
+		hasChildren: false,
+		collection: { id: 'dt-collectionView' },
+		isDeletable: false,
+		aliasCanBeChanged: false,
+	},
+	{
+		name: 'Media Type 4',
+		id: 'media-type-4-id',
+		parent: null,
+		description: 'Media type 4 description',
+		alias: 'mediaType4',
+		icon: 'icon-video',
+		properties: [
+			{
+				id: '19',
+				container: { id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75' },
+				alias: 'umbracoFile',
+				name: 'File',
+				description: '',
+				dataType: { id: 'dt-uploadField' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+		],
+		containers: [
+			{
+				id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				parent: null,
+				name: 'Content',
+				type: 'Group',
+				sortOrder: 0,
+			},
+		],
+		allowedAsRoot: true,
+		variesByCulture: false,
+		variesBySegment: false,
+		isElement: false,
+		allowedMediaTypes: [{ mediaType: { id: 'media-type-4-id' }, sortOrder: 0 }],
+		compositions: [],
+		isFolder: false,
+		hasChildren: false,
+		collection: { id: 'dt-collectionView' },
+		isDeletable: false,
+		aliasCanBeChanged: false,
+	},
+	{
+		name: 'Media Type 5',
+		id: 'media-type-5-id',
+		parent: null,
+		description: 'Media type 5 description',
+		alias: 'mediaType5',
+		icon: 'icon-document',
+		properties: [
+			{
+				id: '19',
+				container: { id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75' },
+				alias: 'umbracoFile',
+				name: 'File',
+				description: '',
+				dataType: { id: 'dt-uploadField' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+		],
+		containers: [
+			{
+				id: 'c3cd2f12-b7c4-4206-8d8b-27c061589f75',
+				parent: null,
+				name: 'Content',
+				type: 'Group',
+				sortOrder: 0,
+			},
+		],
+		allowedAsRoot: true,
+		variesByCulture: false,
+		variesBySegment: false,
+		isElement: false,
+		allowedMediaTypes: [{ mediaType: { id: 'media-type-5-id' }, sortOrder: 0 }],
+		compositions: [],
+		isFolder: false,
+		hasChildren: false,
+		collection: { id: 'dt-collectionView' },
+		isDeletable: false,
+		aliasCanBeChanged: false,
+	},
 ];

src/Umbraco.Web.UI.Client/src/mocks/handlers/media-type/tree.handlers.ts

@@ -19,4 +19,11 @@ export const treeHandlers = [
 		const response = umbMediaTypeMockDb.tree.getChildrenOf({ parentId, skip, take });
 		return res(ctx.status(200), ctx.json(response));
 	}),
+
+	rest.get(umbracoPath(`/tree${UMB_SLUG}/ancestors`), (req, res, ctx) => {
+		const id = req.url.searchParams.get('descendantId');
+		if (!id) return;
+		const response = umbMediaTypeMockDb.tree.getAncestorsOf({ descendantId: id });
+		return res(ctx.status(200), ctx.json(response));
+	}),
 ];

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json

@@ -72,6 +72,10 @@
 			"name": "icon-attachment",
 			"file": "paperclip.svg"
 		},
+		{
+			"name": "icon-audio-lines",
+			"file": "audio-lines.svg"
+		},
 		{
 			"name": "icon-autofill",
 			"file": "text-cursor-input.svg"
@@ -1374,6 +1378,10 @@
 			"name": "icon-ordered-list",
 			"file": "list-ordered.svg"
 		},
+		{
+			"name": "icon-origami",
+			"file": "origami.svg"
+		},
 		{
 			"name": "icon-out",
 			"file": "external-link.svg"
@@ -2712,4 +2720,4 @@
 			"file": "icon-umbraco.svg"
 		}
 	]
-}
+}

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts

@@ -71,6 +71,10 @@ name: "icon-attachment",
 
 path: () => import("./icons/icon-attachment.js"),
 },{
+name: "icon-audio-lines",
+
+path: () => import("./icons/icon-audio-lines.js"),
+},{
 name: "icon-autofill",
 
 path: () => import("./icons/icon-autofill.js"),
@@ -1299,6 +1303,10 @@ name: "icon-ordered-list",
 
 path: () => import("./icons/icon-ordered-list.js"),
 },{
+name: "icon-origami",
+
+path: () => import("./icons/icon-origami.js"),
+},{
 name: "icon-out",
 
 path: () => import("./icons/icon-out.js"),

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-audio-lines.ts

@@ -0,0 +1,19 @@
+export default `<!-- @license lucide-static v0.446.0 - ISC -->
+<svg
+  class="lucide lucide-audio-lines"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 10v3" />
+  <path d="M6 6v11" />
+  <path d="M10 3v18" />
+  <path d="M14 8v7" />
+  <path d="M18 5v13" />
+  <path d="M22 10v3" />
+</svg>
+`;

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-origami.ts

@@ -0,0 +1,16 @@
+export default `<!-- @license lucide-static v0.446.0 - ISC -->
+<svg
+  class="lucide lucide-origami"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 12V4a1 1 0 0 1 1-1h6.297a1 1 0 0 1 .651 1.759l-4.696 4.025" />
+  <path d="m12 21-7.414-7.414A2 2 0 0 1 4 12.172V6.415a1.002 1.002 0 0 1 1.707-.707L20 20.009" />
+  <path d="m12.214 3.381 8.414 14.966a1 1 0 0 1-.167 1.199l-1.168 1.163a1 1 0 0 1-.706.291H6.351a1 1 0 0 1-.625-.219L3.25 18.8a1 1 0 0 1 .631-1.781l4.165.027" />
+</svg>
+`;