align menu

Author: loivsen

src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts

@@ -13,6 +13,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
 	@property({ type: String, attribute: false })
 	src: string = '';
 
+	@property({ type: String })
+	label?: string;
+
 	@property({ attribute: false })
 	get focalPoint() {
 		return this.#focalPoint;
@@ -140,14 +143,14 @@ export class UmbImageCropperPreviewElement extends LitElement {
 
 	render() {
 		if (!this.crop) {
-			return nothing;
+			return html`<span id="label">${this.label}</span>`;
 		}
 
 		return html`
 			<div id="container">
 				<img id="image" src=${this.src} alt="" />
 			</div>
-			<span id="alias">${this.crop.alias}</span>
+			<span id="alias">${this.label ?? this.crop.alias}</span>
 			<span id="dimensions">${this.crop.width} x ${this.crop.height}</span>
 			${this.crop.coordinates
 				? html`<span id="user-defined"><umb-localize key="imagecropper_customCrop">User defined</umb-localize></span>`
@@ -178,6 +181,9 @@ export class UmbImageCropperPreviewElement extends LitElement {
 			max-height: 200px;
 			user-select: none;
 		}
+		#label {
+			font-weight: bold;
+		}
 		#alias {
 			font-weight: bold;
 			margin-top: var(--uui-size-space-3);

src/packages/media/media/modals/image-cropper-editor/components/image-cropper-editor-field.element.ts

@@ -29,11 +29,10 @@ export class UmbImageCropperEditorFieldElement extends UmbInputImageCropperField
 	override renderSide() {
 		if (!this.value || !this.crops) return;
 
-		return html` <uui-menu-item
-				id="reset-current-crop"
+		return html` <umb-image-cropper-preview
 				@click=${this.#resetCurrentCrop}
 				?active=${!this.currentCrop}
-				label=${this.localize.term('general_media')}></uui-menu-item>
+				.label=${this.localize.term('general_media')}></umb-image-cropper-preview>
 
 			${repeat(
 				this.crops,
@@ -75,14 +74,6 @@ export class UmbImageCropperEditorFieldElement extends UmbInputImageCropperField
 			padding-right: var(--uui-size-3);
 		}
 
-		#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);
-		}
-
 		slot[name='actions'] {
 			display: block;
 			flex: 1;