yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bugfix: Dropzones should be clickable

Browse Source
This commit is contained in:
Lone Iversen
2024-07-03 13:09:48 +02:00
parent 1354653c8e
commit a228988163
2 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
View File

@@ -1,6 +1,6 @@
import type { UmbImageCropperPropertyEditorValue } from './types.js'; import type { UmbImageCropperPropertyEditorValue } from './types.js';
import type { UmbInputImageCropperFieldElement } from './image-cropper-field.element.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 type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '@umbraco-cms/backoffice/external/uui';
import { UmbId } from '@umbraco-cms/backoffice/id'; import { UmbId } from '@umbraco-cms/backoffice/id';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -61,8 +61,9 @@ export class UmbInputImageCropperElement extends UmbLitElement {
this.dispatchEvent(new UmbChangeEvent()); this.dispatchEvent(new UmbChangeEvent());
} }
#onBrowse() { #onBrowse(e: Event) {
if (!this._dropzone) return; if (!this._dropzone) return;
e.stopImmediatePropagation();
this._dropzone.browse(); this._dropzone.browse();
} }
@@ -105,7 +106,7 @@ export class UmbInputImageCropperElement extends UmbLitElement {
#renderDropzone() { #renderDropzone() {
return html` 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-button label=${this.localize.term('media_clickToUpload')} @click="${this.#onBrowse}"></uui-button>
</uui-file-dropzone> </uui-file-dropzone>
`; `;
@@ -131,6 +132,22 @@ export class UmbInputImageCropperElement extends UmbLitElement {
</uui-button> </uui-button>
</umb-image-cropper-field> `; </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 { declare global {

13
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
View File

@@ -86,8 +86,9 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
} }
} }
#handleBrowse() { #handleBrowse(e: Event) {
if (!this._dropzone) return; if (!this._dropzone) return;
e.stopImmediatePropagation();
this._dropzone.browse(); this._dropzone.browse();
} }
@@ -98,6 +99,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
#renderDropzone() { #renderDropzone() {
return html` return html`
<uui-file-dropzone <uui-file-dropzone
@click=${this.#handleBrowse}
id="dropzone" id="dropzone"
label="dropzone" label="dropzone"
@change="${this.#onUpload}" @change="${this.#onUpload}"
@@ -195,8 +197,17 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
} }
uui-file-dropzone { uui-file-dropzone {
position: relative;
display: block;
padding: 3px; /** Dropzone background is blurry and covers slightly into other elements. Hack to avoid this */ 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);
}
`, `,
]; ];
} }