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 { 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 {

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;
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);
}
`,
];
}