diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss index 78e719f59..4b4790296 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.scss +++ b/packages/form-js-carbon-styles/src/carbon-styles.scss @@ -1216,7 +1216,7 @@ // iFrame styles //////////// .fjs-container { - .fjs-iframe-placeholder { + .fjs-iframe-placeholder, .fjs-image-placeholder { background-color: var(--cds-layer); border-color: var(--cds-border-subtle); color: var(--cds-text-helper); diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css index 704f9528d..e825a73c8 100644 --- a/packages/form-js-editor/assets/form-js-editor-base.css +++ b/packages/form-js-editor/assets/form-js-editor-base.css @@ -461,7 +461,7 @@ .fjs-editor-container .fjs-repeat-render-footer { font-size: var(--font-size-label); background: var(--cds-field, var(--color-background-disabled)); - color: var(--cds-text-disabled, var(--color-grey-225-10-45)); + color: var(--color-text-light); padding: 3px; display: flex; align-items: center; diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css index 654c3a283..a5e4316fa 100644 --- a/packages/form-js-viewer/assets/form-js-base.css +++ b/packages/form-js-viewer/assets/form-js-base.css @@ -983,27 +983,28 @@ object-fit: contain; } -.fjs-container .fjs-image-placeholder { - height: 64px; - margin: 4px 0; -} - .fjs-container .fjs-iframe { margin: 4px 0; width: 100%; border: 1px solid var(--color-borders-readonly); } +.fjs-container .fjs-image-placeholder, .fjs-container .fjs-iframe-placeholder { margin: 4px 0; + width: 100%; height: 90px; display: flex; justify-content: center; background: var(--color-background-readonly); color: var(--color-text-light); +} + +.fjs-container .fjs-iframe-placeholder { border: 1px solid var(--color-borders-readonly); } +.fjs-container .fjs-image-placeholder .fjs-image-placeholder-inner, .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text { display: flex; align-items: center; diff --git a/packages/form-js-viewer/src/render/components/form-fields/Image.js b/packages/form-js-viewer/src/render/components/form-fields/Image.js index d3a674a03..32cb6053e 100644 --- a/packages/form-js-viewer/src/render/components/form-fields/Image.js +++ b/packages/form-js-viewer/src/render/components/form-fields/Image.js @@ -2,6 +2,8 @@ import { useContext, useMemo } from 'preact/hooks'; import { FormContext } from '../../context'; +import { iconsByType } from '../icons'; + import { useSingleLineTemplateEvaluation } from '../../hooks'; import { sanitizeImageSource } from '../Sanitizer'; @@ -10,8 +12,6 @@ import { prefixId } from '../Util'; -import ImagePlaceholder from './icons/ImagePlaceholder.svg'; - const type = 'image'; @@ -26,6 +26,8 @@ export function Image(props) { source } = field; + const Icon = iconsByType(field.type); + const evaluatedImageSource = useSingleLineTemplateEvaluation(source, { debug: true }); const safeSource = useMemo(() => sanitizeImageSource(evaluatedImageSource), [ evaluatedImageSource ]); @@ -35,21 +37,22 @@ export function Image(props) { const { formId } = useContext(FormContext); return