diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts
index 563aea7e7c..ebc81e31d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts
@@ -1,14 +1,15 @@
-import type { UmbImageCropperElement } from '../../../components/input-image-cropper/image-cropper.element.js';
import type {
UmbImageCropperCrop,
UmbImageCropperCrops,
UmbImageCropperFocalPoint,
UmbImageCropperPropertyEditorValue,
-} from './types.js';
+} from '../../../components/index.js';
+import type { UmbImageCropperElement } from '../../../components/input-image-cropper/image-cropper.element.js';
import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+/** TODO Do we want to combine this with the original image-cropper-field element? Element is very similar, but with a few UI changes... */
@customElement('umb-image-cropper-editor-field')
export class UmbImageCropperEditorFieldElement extends UmbLitElement {
@property({ attribute: false })
@@ -170,14 +171,15 @@ export class UmbImageCropperEditorFieldElement extends UmbLitElement {
return html`
+ ?active=${!this.currentCrop}
+ label=${this.localize.term('general_media')}>
+
${repeat(
this.crops,
(crop) => crop.alias + JSON.stringify(crop.coordinates),
(crop) =>
html` this.#onCropClick(crop)}
.crop=${crop}
.focalPoint=${this.focalPoint}
@@ -215,6 +217,8 @@ export class UmbImageCropperEditorFieldElement extends UmbLitElement {
#reset-current-crop {
--uui-menu-item-flat-structure: 1;
+ --uui-menu-item-border-radius: var(--uui-border-radius);
+ border-radius: var(--uui-border-radius);
width: 100%;
background-color: var(--uui-color-surface);
}
@@ -224,9 +228,9 @@ export class UmbImageCropperEditorFieldElement extends UmbLitElement {
flex: 1;
}
- [current],
- #reset-current-crop[current] {
- background-color: var(--uui-color-surface-alt);
+ #reset-current-crop[active],
+ [active] {
+ background-color: var(--uui-color-current);
}
umb-image-cropper-focus-setter {