Media Picker Modal File Previews (#19335)

* Ordered `@property` setters/getters

* JSDocs + comments

* Removed unneeded CSS

* Markup code formatting

* Hides "Reset focal point" button

when focal point has default value

* Image Cropper field element: adds active state to crops

* Image Cropper Editor Field element: reduced the markup and styles

Removing duplications from inherited class

* Removed unused code from Image Cropper Focus Setter element

* Big refactor of Image Cropper Editor modal

to support File Upload Previews

* Added `<umb-file-upload-preview>`

to handle the logic of rendering the relevant `fileUploadPreview` extension.

* Refactored SVG File Upload Preview component

Removes the `<uui-card-media>` container.
Controversially removes the link, but this was inconsistent with other file previews.

* Refactored General File Upload Preview component

Removes the `<uui-card-media>` container.
Controversially removes the link, but this was inconsistent with other file previews.

* Refactored Image File Upload Preview component

Removes the `<uui-card-media>` container.
Controversially removes the link, but this was inconsistent with other file previews.

* Refactored Audio and Video File Upload Preview component

To align code with the other file previews.

* Update src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts

@@ -39,14 +39,14 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	 * <umb-extension-slot .type=${['my-extension-type','another-extension-type']}></umb-extension-slot>
 	 */
 	@property({ type: String })
-	public get type(): string | string[] | undefined {
-		return this.#type;
-	}
 	public set type(value: string | string[] | undefined) {
 		if (value === this.#type) return;
 		this.#type = value;
 		this.#observeExtensions();
 	}
+	public get type(): string | string[] | undefined {
+		return this.#type;
+	}
 	#type?: string | string[] | undefined;
 
 	/**
@@ -58,14 +58,14 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	 * <umb-extension-slot type="my-extension-type" .filter=${(ext) => ext.meta.anyPropToFilter === 'foo'}></umb-extension-slot>
 	 */
 	@property({ type: Object, attribute: false })
-	public get filter(): (manifest: any) => boolean {
-		return this.#filter;
-	}
 	public set filter(value: (manifest: any) => boolean) {
 		if (value === this.#filter) return;
 		this.#filter = value;
 		this.#observeExtensions();
 	}
+	public get filter(): (manifest: any) => boolean {
+		return this.#filter;
+	}
 	#filter: (manifest: any) => boolean = () => true;
 
 	/**
@@ -77,15 +77,15 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 	 * <umb-extension-slot type="my-extension-type" .props=${{foo: 'bar'}}></umb-extension-slot>
 	 */
 	@property({ type: Object, attribute: false })
-	get props(): Record<string, unknown> | undefined {
-		return this.#props;
-	}
 	set props(newVal: Record<string, unknown> | undefined) {
 		this.#props = newVal;
 		if (this.#extensionsController) {
 			this.#extensionsController.properties = newVal;
 		}
 	}
+	get props(): Record<string, unknown> | undefined {
+		return this.#props;
+	}
 	#props?: Record<string, unknown> = {};
 
 	@property({ type: String, attribute: 'default-element' })

src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.repository.ts

@@ -44,6 +44,7 @@ export class UmbTemporaryFileConfigRepository extends UmbRepositoryBase implemen
 
 	/**
 	 * Subscribe to the entire configuration.
+	 * @returns {Observable<UmbTemporaryFileConfigurationModel>}
 	 */
 	all() {
 		if (!this.#dataStore) {
@@ -56,6 +57,7 @@ export class UmbTemporaryFileConfigRepository extends UmbRepositoryBase implemen
 	/**
 	 * Subscribe to a part of the configuration.
 	 * @param part
+	 * @returns {Observable<UmbTemporaryFileConfigurationModel[Part]>}
 	 */
 	part<Part extends keyof UmbTemporaryFileConfigurationModel>(
 		part: Part,

src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts

@@ -99,14 +99,8 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 
 		return when(
 			this._thumbnailUrl,
-			() =>
-				html`<img
-					id="figure"
-					src="${this._thumbnailUrl}"
-					alt="${this.alt}"
-					loading="${this.loading}"
-					draggable="false" />`,
-			() => html`<umb-icon id="icon" name="${this.icon}"></umb-icon>`,
+			(url) => html`<img id="figure" src=${url} alt=${this.alt} loading=${this.loading} draggable="false" />`,
+			() => html`<umb-icon id="icon" name=${this.icon}></umb-icon>`,
 		);
 	}
 

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts

@@ -11,7 +11,7 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 > {
 	/**
 	 * The thumbnail items that are currently displayed in the collection.
-	 * @deprecated Use the `<umb-imaging-thumbnail>` element instead.
+	 * @deprecated Use the `<umb-imaging-thumbnail>` element instead. This will be removed in Umbraco 17.
 	 */
 	public readonly thumbnailItems = this.items;
 

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

@@ -175,69 +175,91 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 	}
 
 	protected renderActions() {
-		return html`<slot name="actions"></slot>
+		return html`
+			<slot name="actions"></slot>
 			${when(
-				!this.hideFocalPoint,
-				() =>
-					html`<uui-button
-						label=${this.localize.term('content_resetFocalPoint')}
-						@click=${this.onResetFocalPoint}></uui-button>`,
-			)} `;
+				!this.hideFocalPoint && this.focalPoint.left !== 0.5 && this.focalPoint.top !== 0.5,
+				() => html`
+					<uui-button compact label=${this.localize.term('content_resetFocalPoint')} @click=${this.onResetFocalPoint}>
+						<uui-icon name="icon-axis-rotation"></uui-icon>
+						${this.localize.term('content_resetFocalPoint')}
+					</uui-button>
+				`,
+			)}
+		`;
 	}
 
 	protected renderSide() {
 		if (!this.value || !this.crops) return;
-
 		return repeat(
 			this.crops,
 			(crop) => crop.alias + JSON.stringify(crop.coordinates),
-			(crop) =>
-				html` <umb-image-cropper-preview
-					@click=${() => this.onCropClick(crop)}
+			(crop) => html`
+				<umb-image-cropper-preview
 					.crop=${crop}
 					.focalPoint=${this.focalPoint}
-					.src=${this.source}></umb-image-cropper-preview>`,
+					.src=${this.source}
+					?active=${this.currentCrop?.alias === crop.alias}
+					@click=${() => this.onCropClick(crop)}>
+				</umb-image-cropper-preview>
+			`,
 		);
 	}
-	static override styles = css`
-		:host {
-			display: flex;
-			width: 100%;
-			box-sizing: border-box;
-			gap: var(--uui-size-space-3);
-			height: 400px;
-		}
 
-		#main {
-			max-width: 500px;
-			min-width: 300px;
-			width: 100%;
-			height: 100%;
-			display: flex;
-			gap: var(--uui-size-space-1);
-			flex-direction: column;
-		}
+	static override styles = [
+		css`
+			:host {
+				display: flex;
+				width: 100%;
+				box-sizing: border-box;
+				gap: var(--uui-size-space-3);
+				height: 400px;
+			}
 
-		#actions {
-			display: flex;
-			justify-content: space-between;
-			margin-top: 0.5rem;
-		}
+			#main {
+				max-width: 500px;
+				min-width: 300px;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				gap: var(--uui-size-space-1);
+				flex-direction: column;
+			}
 
-		umb-image-cropper-focus-setter {
-			height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
-		}
+			#actions {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 0.5rem;
 
-		#side {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-			gap: var(--uui-size-space-3);
-			flex-grow: 1;
-			overflow-y: auto;
-			height: fit-content;
-			max-height: 100%;
-		}
-	`;
+				uui-icon {
+					padding-right: var(--uui-size-1);
+				}
+			}
+
+			slot[name='actions'] {
+				display: block;
+				flex: 1;
+			}
+
+			umb-image-cropper-focus-setter {
+				height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
+			}
+
+			#side {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+				gap: var(--uui-size-space-3);
+				flex-grow: 1;
+				overflow-y: auto;
+				height: fit-content;
+				max-height: 100%;
+
+				umb-image-cropper-preview[active] {
+					background-color: var(--uui-color-current);
+				}
+			}
+		`,
+	];
 }
 
 declare global {

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts

@@ -107,19 +107,10 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement {
 		}
 	}
 
-	#coordsToFactor(x: number, y: number) {
-		const top = (y / 100 / y) * 50;
-		const left = (x / 100 / x) * 50;
-
-		return { top, left };
-	}
-
 	#setFocalPoint(x: number, y: number, width: number, height: number) {
 		const left = clamp(x / width, 0, 1);
 		const top = clamp(y / height, 0, 1);
 
-		this.#coordsToFactor(x, y);
-
 		const focalPoint = { left, top } as UmbFocalPointModel;
 
 		this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint));
@@ -252,12 +243,9 @@ export class UmbImageCropperFocusSetterElement extends UmbLitElement {
 				<img id="image" @keydown=${() => nothing} src=${this.src} alt="" />
 				<span
 					id="focal-point"
-					class=${classMap({
-						'focal-point--dragging': this._isDraggingGridHandle,
-						hidden: this.hideFocalPoint,
-					})}
+					class=${classMap({ 'focal-point--dragging': this._isDraggingGridHandle, hidden: this.hideFocalPoint })}
 					tabindex=${ifDefined(this.disabled ? undefined : '0')}
-					aria-label="${this.localize.term('general_focalPoint')}"
+					aria-label=${this.localize.term('general_focalPoint')}
 					@keydown=${this.#handleGridKeyDown}>
 				</span>
 			</div>

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

@@ -173,14 +173,14 @@ export class UmbInputImageCropperElement extends UmbFormControlMixin<
 	}
 
 	#renderImageCropper() {
-		return html`<umb-image-cropper-field
-			.value=${this.value}
-			.file=${this._file?.temporaryFile?.file}
-			@change=${this.#onChange}>
-			<uui-button slot="actions" @click=${this.#onRemove} label=${this.localize.term('content_uploadClear')}>
-				<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
-			</uui-button>
-		</umb-image-cropper-field> `;
+		return html`
+			<umb-image-cropper-field .value=${this.value} .file=${this._file?.temporaryFile?.file} @change=${this.#onChange}>
+				<uui-button slot="actions" compact label=${this.localize.term('content_uploadClear')} @click=${this.#onRemove}>
+					<uui-icon name="icon-trash"></uui-icon>
+					<umb-localize key="content_uploadClear">Remove file(s)</umb-localize>
+				</uui-button>
+			</umb-image-cropper-field>
+		`;
 	}
 
 	static override readonly styles = [
@@ -190,10 +190,17 @@ export class UmbInputImageCropperElement extends UmbFormControlMixin<
 				max-width: 500px;
 				min-width: 300px;
 			}
+
 			#loader {
 				display: flex;
 				justify-content: center;
 			}
+
+			[slot='actions'] {
+				uui-icon {
+					padding-right: var(--uui-size-1);
+				}
+			}
 		`,
 	];
 }