From a228988163e7551a86f5eceded58302bed76abc0 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 3 Jul 2024 13:09:48 +0200
Subject: [PATCH] Bugfix: Dropzones should be clickable

---
 .../input-image-cropper.element.ts            | 23 ++++++++++++++++---
 .../input-upload-field.element.ts             | 13 ++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
index 0ec0a4c13c..16243777db 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
@@ -1,6 +1,6 @@
 import type { UmbImageCropperPropertyEditorValue } from './types.js';
 import type { UmbInputImageCropperFieldElement } from './image-cropper-field.element.js';
-import { html, customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, query, state, css } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -61,8 +61,9 @@ export class UmbInputImageCropperElement extends UmbLitElement {
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
-	#onBrowse() {
+	#onBrowse(e: Event) {
 		if (!this._dropzone) return;
+		e.stopImmediatePropagation();
 		this._dropzone.browse();
 	}
 
@@ -105,7 +106,7 @@ export class UmbInputImageCropperElement extends UmbLitElement {
 
 	#renderDropzone() {
 		return html`
-			<uui-file-dropzone id="dropzone" label="dropzone" @change="${this.#onUpload}">
+			<uui-file-dropzone id="dropzone" label="dropzone" @change="${this.#onUpload}" @click=${this.#onBrowse}>
 				<uui-button label=${this.localize.term('media_clickToUpload')} @click="${this.#onBrowse}"></uui-button>
 			</uui-file-dropzone>
 		`;
@@ -131,6 +132,22 @@ export class UmbInputImageCropperElement extends UmbLitElement {
 			</uui-button>
 		</umb-image-cropper-field> `;
 	}
+
+	static override styles = [
+		css`
+			uui-file-dropzone {
+				position: relative;
+				display: block;
+			}
+			uui-file-dropzone::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				cursor: pointer;
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
index 0f4e23acf2..5c5a3c5e3e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
@@ -86,8 +86,9 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 		}
 	}
 
-	#handleBrowse() {
+	#handleBrowse(e: Event) {
 		if (!this._dropzone) return;
+		e.stopImmediatePropagation();
 		this._dropzone.browse();
 	}
 
@@ -98,6 +99,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	#renderDropzone() {
 		return html`
 			<uui-file-dropzone
+				@click=${this.#handleBrowse}
 				id="dropzone"
 				label="dropzone"
 				@change="${this.#onUpload}"
@@ -195,8 +197,17 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 			}
 
 			uui-file-dropzone {
+				position: relative;
+				display: block;
 				padding: 3px; /** Dropzone background is blurry and covers slightly into other elements. Hack to avoid this */
 			}
+			uui-file-dropzone::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				cursor: pointer;
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
 		`,
 	];
 }