fix: improve image editor placeholder styles

Related to #994
bpmn-io · Jan 18, 2024 · 527b0f2 · 527b0f2
1 parent 69355e3
commit 527b0f2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 <div class={ formFieldClasses(type) }>
-    <div class="fjs-image-container">
-      {
-        safeSource &&
+    {
+      safeSource && <div class="fjs-image-container">
         <img
           alt={ altText }
           src={ safeSource }
           class="fjs-image"
           id={ prefixId(id, formId) } />
-      }
-      { !safeSource &&
-        <div class="fjs-image-placeholder">
-          <ImagePlaceholder alt="This is an image placeholder" />
-        </div>
-      }
-    </div>
+      </div>
+    }
+    {
+      !safeSource && <div class="fjs-image-placeholder">
+        <span class="fjs-image-placeholder-inner">
+          <Icon alt="This is an image placeholder" width="32" height="32" viewBox="0 0 56 56" />
+        </span>
+      </div>
+    }
   </div>;
 }