From 6104ae60ce179178de3312ada12cfee41be48088 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 2 Dec 2025 18:07:01 +0100 Subject: [PATCH] Image cropper modal import missing component (#20651) * Import missing component * Handle nullable type * Vertically center image * Add minimum width for SVG without dimensions * 100% height until max height * 100% height minus top/bottom padding * Revert "100% height minus top/bottom padding" This reverts commit 67ada4c70f4b75dfcfa2b54ce139ec7465a17ce1. * Revert "Handle nullable type" This reverts commit 3130e11a4be83a18b5a7d8c1c24ee23c94d8765d. * Removed flexbox style * Fixed circular dependency --------- Co-authored-by: leekelleher --- .../input-upload-field/file-upload-preview.element.ts | 2 +- .../preview/input-upload-field-svg.element.ts | 3 +++ .../image-cropper-editor/image-cropper-editor-modal.element.ts | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts index a3020e3352..1188cb3291 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts @@ -1,4 +1,4 @@ -import { getMimeTypeFromExtension } from '../../components/index.js'; +import { getMimeTypeFromExtension } from './utils.js'; import type { ManifestFileUploadPreview } from './file-upload-preview.extension.js'; import type { UmbFileUploadPreviewElement as UmbFileUploadPreviewElementInterface } from './file-upload-preview.interface.js'; import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts index e5639485f4..bac0ea7314 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts @@ -16,9 +16,12 @@ export default class UmbInputUploadFieldSvgElement extends UmbLitElement impleme static override readonly styles = [ css` :host { + height: 100%; min-height: 240px; max-height: 400px; + width: fit-content; + min-width: 240px; max-width: 100%; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 1a65bf53d3..5c56042ead 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -15,6 +15,8 @@ import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/bac import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; +import '../../components/input-upload-field/file-upload-preview.element.js'; + @customElement('umb-image-cropper-editor-modal') export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< UmbImageCropperEditorModalData,