From 7d04bd51d0e0987d4b6819707206696670343db1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 22 Dec 2022 13:02:33 +0100 Subject: [PATCH 1/2] differentiate icons --- .../collection/views/collection-view-media-grid.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts index a55fe5d21c..a9e995e54c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts @@ -122,6 +122,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin( private _renderMediaItem(item: MediaDetails) { const name = item.name || ''; + //TODO: fix the file extension when media items have a file extension. return html` 0} @@ -130,6 +131,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin( @selected=${() => this._handleSelect(item)} @unselected=${() => this._handleDeselect(item)} class="media-item" + .fileExt=${item.hasChildren ? '' : 'image'} name=${name}>`; } From b8b98ec00af8ed047813f7bf612fd43969e9a062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Thu, 22 Dec 2022 13:08:37 +0100 Subject: [PATCH 2/2] sort folders first --- .../views/collection-view-media-grid.element.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts index a9e995e54c..29bf8daba8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/views/collection-view-media-grid.element.ts @@ -95,7 +95,7 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin( if (!this._collectionContext) return; this.observe>(this._collectionContext.data, (mediaItems) => { - this._mediaItems = mediaItems; + this._mediaItems = mediaItems.sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1)); }); this.observe>(this._collectionContext.selection, (selection) => { @@ -143,7 +143,13 @@ export class UmbCollectionViewsMediaGridElement extends UmbContextConsumerMixin( @file-change=${(e: any) => console.log(e)} label="Drop files here" accept=""> -
${repeat(this._mediaItems, (file) => this._renderMediaItem(file))}
+
+ ${repeat( + this._mediaItems, + (file) => file.key, + (file) => this._renderMediaItem(file) + )} +
`; } }