From 7ea1ce4f8a69fa4df5d6a96cc906efaed16cdc81 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 7 Feb 2023 11:11:48 +0100
Subject: [PATCH] media card and grid for media

---
 .../input-media-picker.element.ts             | 35 +++++++++++++++----
 ...property-editor-ui-media-picker.element.ts |  4 +--
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index 71927a7032..8d204e0d03 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -18,8 +18,20 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 	static styles = [
 		UUITextStyles,
 		css`
+			:host {
+				display: grid;
+				gap: var(--uui-size-space-3);
+				padding: var(--uui-size-space-5);
+				border: 1px solid var(--uui-color-border);
+				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+			}
 			#add-button {
-				width: 100%;
+				text-align: center;
+				min-height: 160px;
+			}
+			uui-icon {
+				display: block;
+				margin: 0 auto;
 			}
 		`,
 	];
@@ -153,12 +165,16 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 	private _setSelection(newSelection: Array<string>) {
 		this.selectedKeys = newSelection;
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+		console.log(this._items);
 	}
 
 	render() {
 		return html`
 			${this._items?.map((item) => this._renderItem(item))}
-			<uui-button id="add-button" look="placeholder" @click=${this._openPicker} label="open">Add</uui-button>
+			<uui-button id="add-button" look="placeholder" @click=${this._openPicker} label="open">
+				<uui-icon name="umb:add"></uui-icon>
+				Add
+			</uui-button>
 		`;
 	}
 
@@ -167,13 +183,20 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 		const tempItem = item as FolderTreeItem & { isTrashed: boolean };
 
 		return html`
-			<uui-ref-node name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.key)}>
+			<uui-card-media
+				name=${ifDefined(item.name === null ? undefined : item.name)}
+				detail=${ifDefined(item.key)}
+				file-ext="jpg">
 				${tempItem.isTrashed ? html` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this._removeItem(item)} label="Remove media ${item.name}">Remove</uui-button>
+					<uui-button label="Copy media">
+						<uui-icon name="umb:documents"></uui-icon>
+					</uui-button>
+					<uui-button @click=${() => this._removeItem(item)} label="Remove media ${item.name}">
+						<uui-icon name="umb:trash"></uui-icon>
+					</uui-button>
 				</uui-action-bar>
-				<uui-icon slot="icon" name=${ifDefined('umb:' + item.icon)}></uui-icon>
-			</uui-ref-node>
+			</uui-card-media>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
index e96df3ce5f..cee50e5235 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/media-picker/property-editor-ui-media-picker.element.ts
@@ -44,9 +44,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement {
 				@change=${this._onChange}
 				.selectedKeys=${this._value}
 				.min=${this._limitMin}
-				.max=${this._limitMax}
-				>Add</umb-input-media-picker
-			>
+				.max=${this._limitMax}></umb-input-media-picker>
 		`;
 	}
 }