Add red border when a resource thumbnail is invalid

4ian · Sep 25, 2024 · 9d9ef7a · 9d9ef7a
1 parent e34b3ba
commit 9d9ef7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js b/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js
@@ -245,7 +245,11 @@ export const CompactResourceSelectorWithThumbnail = ({
             [classes.compactResourceSelector]: true,
           })}
         >
-          <input type="text" value={resourceName} />
+          <input
+            type="text"
+            value={resourceName}
+            onChange={e => onChange(e.currentTarget.value)}
+          />
         </div>
       </div>
       <ElementWithMenu

diff --git a/newIDE/app/src/ResourcesList/ResourceThumbnail/ImageThumbnail.js b/newIDE/app/src/ResourcesList/ResourceThumbnail/ImageThumbnail.js
@@ -46,6 +46,7 @@ type Props = {|
 const ImageThumbnail = (props: Props) => {
   const { onContextMenu, resourcesLoader, resourceName, project } = props;
   const theme = React.useContext(GDevelopThemeContext);
+  const [error, setError] = React.useState(false);
 
   // Allow a long press to show the context menu
   const longTouchForContextMenuProps = useLongTouch(
@@ -60,6 +61,8 @@ const ImageThumbnail = (props: Props) => {
   const normalBorderColor = theme.imagePreview.borderColor;
   const borderColor = props.selected
     ? theme.palette.secondary
+    : !!error
+    ? theme.message.error
     : normalBorderColor;
 
   const containerStyle = {
@@ -87,9 +90,16 @@ const ImageThumbnail = (props: Props) => {
           ...styles.spriteThumbnailImage,
           maxWidth: props.size || 100,
           maxHeight: props.size || 100,
+          display: error ? 'none' : undefined,
         }}
         alt={resourceName}
         src={resourcesLoader.getResourceFullUrl(project, resourceName, {})}
+        onError={error => {
+          setError(error);
+        }}
+        onLoad={() => {
+          setError(false);
+        }}
       />
       {props.selectable && (
         <div style={styles.checkboxContainer}>