wip quick customization

4ian · Sep 13, 2024 · 3120ab2 · 3120ab2
1 parent c569009
commit 3120ab2
Show file tree

Hide file tree

Showing 10 changed files with 312 additions and 229 deletions.
diff --git a/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js b/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js
@@ -24,6 +24,7 @@ const createField = (
     const propertyName = getProperties(instance)
       .get(name)
       .getLabel();
+    console.log('propertyName', propertyName);
     if (propertyName) return propertyName;
     return (
       name.charAt(0).toUpperCase() +
@@ -164,13 +165,10 @@ const createField = (
     const extraInfos = property.getExtraInfo().toJSArray();
     // $FlowFixMe - assume the passed resource kind is always valid.
     const kind: ResourceKind = extraInfos[0] || '';
-    // $FlowFixMe - assume the passed resource kind is always valid.
-    const fallbackKind: ResourceKind = extraInfos[1] || '';
     return {
       name,
       valueType: 'resource',
       resourceKind: kind,
-      fallbackResourceKind: fallbackKind,
       getValue: (instance: Instance): string => {
         return getProperties(instance)
           .get(name)
@@ -396,6 +394,7 @@ const propertiesMapToSchema = (
             const rowProperty = rowProperties[index];
             const rowPropertyName = rowPropertyNames[index];
 
+            console.log('createField', rowPropertyName);
             const field = createField(
               rowPropertyName,
               rowProperty,
@@ -422,6 +421,7 @@ const propertiesMapToSchema = (
       }
     }
     if (!field) {
+      console.log('createField', name);
       field = createField(
         name,
         property,

diff --git a/newIDE/app/src/CompactPropertiesEditor/index.js b/newIDE/app/src/CompactPropertiesEditor/index.js
@@ -116,7 +116,6 @@ export type PrimitiveValueField =
 export type ResourceField = {|
   valueType: 'resource',
   resourceKind: ResourceKind,
-  fallbackResourceKind?: ResourceKind,
   getValue: Instance => string,
   setValue: (instance: Instance, newValue: string) => void,
   renderLeftIcon?: (className?: string) => React.Node,
@@ -229,8 +228,6 @@ const styles = {
   },
   container: { flex: 1, minWidth: 0 },
   separator: {
-    marginRight: -marginsSize,
-    marginLeft: -marginsSize,
     marginTop: marginsSize,
     borderTop: '1px solid black', // Border color is changed in the component.
   },
@@ -401,21 +398,26 @@ const CompactPropertiesEditor = ({
         const { setValue } = field;
 
         return (
-          <CompactToggleField
+          <CompactPropertiesEditorRowField
+            key={field.name}
             label={getFieldLabel({ instances, field })}
             markdownDescription={getFieldDescription(field)}
-            key={field.name}
-            id={field.name}
-            checked={getFieldValue({ instances, field })}
-            onCheck={newValue => {
-              instances.forEach(i => setValue(i, newValue));
-              onFieldChanged({
-                instances,
-                hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
-              });
-            }}
-            disabled={getDisabled({ instances, field })}
-            fullWidth
+            field={
+              <CompactToggleField
+                key={field.name}
+                id={field.name}
+                checked={getFieldValue({ instances, field })}
+                onCheck={newValue => {
+                  instances.forEach(i => setValue(i, newValue));
+                  onFieldChanged({
+                    instances,
+                    hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
+                  });
+                }}
+                disabled={getDisabled({ instances, field })}
+                fullWidth
+              />
+            }
           />
         );
       } else if (field.valueType === 'number') {
@@ -752,27 +754,31 @@ const CompactPropertiesEditor = ({
     }
 
     const { setValue } = field;
+    console.log('HERE', getFieldLabel({ instances, field }));
     return (
-      <CompactResourceSelectorWithThumbnail
+      <CompactPropertiesEditorRowField
         key={field.name}
-        project={project}
-        resourceManagementProps={resourceManagementProps}
-        resourceKind={field.resourceKind}
-        fallbackResourceKind={field.fallbackResourceKind}
-        resourceName={getFieldValue({
-          instances,
-          field,
-          defaultValue: '(Multiple values)',
-        })}
-        onChange={newValue => {
-          instances.forEach(i => setValue(i, newValue));
-          onFieldChanged({
-            instances,
-            hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
-          });
-        }}
         label={getFieldLabel({ instances, field })}
         markdownDescription={getFieldDescription(field)}
+        field={
+          <CompactResourceSelectorWithThumbnail
+            project={project}
+            resourceManagementProps={resourceManagementProps}
+            resourceKind={field.resourceKind}
+            resourceName={getFieldValue({
+              instances,
+              field,
+              defaultValue: '(Multiple values)',
+            })}
+            onChange={newValue => {
+              instances.forEach(i => setValue(i, newValue));
+              onFieldChanged({
+                instances,
+                hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
+              });
+            }}
+          />
+        }
       />
     );
   };

diff --git a/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js b/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js
@@ -126,7 +126,7 @@ export const QuickBehaviorsTweaker = ({
                 }
 
                 return (
-                  <ResponsiveLineStackLayout noMargin expand>
+                  <ResponsiveLineStackLayout noMargin expand key={object.ptr}>
                     <ObjectPreview object={object} project={project} />
                     <ColumnStackLayout noMargin expand noOverflowParent>
                       {behaviorNamesToTweak.map(behaviorName => {
@@ -139,6 +139,7 @@ export const QuickBehaviorsTweaker = ({
                             object={object}
                             onBehaviorUpdated={() => {}}
                             resourceManagementProps={resourceManagementProps}
+                            key={behavior.ptr}
                           />
                         );
                       })}
@@ -153,7 +154,12 @@ export const QuickBehaviorsTweaker = ({
             }
 
             return (
-              <ColumnStackLayout noMargin expand noOverflowParent>
+              <ColumnStackLayout
+                noMargin
+                expand
+                noOverflowParent
+                key={folderName}
+              >
                 <Text noMargin size={'sub-title'}>
                   {folderName}
                 </Text>
@@ -175,7 +181,12 @@ export const QuickBehaviorsTweaker = ({
         }
 
         return (
-          <ColumnStackLayout noMargin expand noOverflowParent>
+          <ColumnStackLayout
+            noMargin
+            expand
+            noOverflowParent
+            key={layout.getName()}
+          >
             {project.getLayoutsCount() > 1 && (
               <Text noMargin size={'block-title'}>
                 {layout.getName()}

diff --git a/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js b/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js
@@ -99,7 +99,7 @@ export const QuickCustomizationDialog = ({
   return (
     <Dialog
       open
-      title={null}
+      title={title}
       maxWidth="md"
       fullHeight
       actions={
@@ -138,17 +138,11 @@ export const QuickCustomizationDialog = ({
       cannotBeDismissed={quickCustomizationState.isNavigationDisabled}
     >
       <ColumnStackLayout noMargin expand>
-        <ScrollView key={quickCustomizationState.step.name}>
+        <ScrollView
+          key={quickCustomizationState.step.name}
+          style={{ display: 'flex' }}
+        >
           <ColumnStackLayout noMargin expand>
-            <LineStackLayout
-              noMargin
-              alignItems="center"
-              justifyContent="space-between"
-            >
-              <Text noMargin size={'title'}>
-                {title}
-              </Text>
-            </LineStackLayout>
             {content}
           </ColumnStackLayout>
         </ScrollView>

diff --git a/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js b/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js
@@ -44,21 +44,21 @@ export const QuickObjectReplacer = ({
         if (!folderObjects.length) return null;
 
         return (
-          <ColumnStackLayout noMargin expand>
+          <ColumnStackLayout noMargin expand key={layout.getName()}>
             {project.getLayoutsCount() > 1 && (
               <Text noMargin size={'block-title'}>
                 {layout.getName()}
               </Text>
             )}
             {folderObjects.map(({ folderName, objects }) => {
               return (
-                <ColumnStackLayout noMargin expand>
+                <ColumnStackLayout noMargin expand key={folderName}>
                   <Text noMargin size={'sub-title'}>
                     {folderName}
                   </Text>
                   <div style={styles.objectsContainer}>
                     {objects.map(object => (
-                      <ColumnStackLayout noMargin>
+                      <ColumnStackLayout noMargin key={object.ptr}>
                         <ObjectPreview object={object} project={project} />
                         <FlatButton
                           primary